Version React iso-fonctionnelle

css/style.css

@@ -28,11 +28,6 @@ html, body {
 .launcher .category-header {
   padding: 40px 50px 0;
   font-size: 50px;
-  display: none;
-}
-
-.launcher .category-header.visible {
-  display: block;
 }
 
 .launcher .category-header a.goback {

index.html

@@ -7,37 +7,7 @@
 
     <!-- Application root element -->
     <div id="pitaya"></div>
-
+    
-    <!-- Templates -->
-
-    <script id="launcher-view-tpl" type="text/x-template">
-      <div class="launcher">
-        {{#unless isRoot}}
-          <div class="category-header">
-            <a href="#" class="goback" data-item-path="{{currentItemPath}}">&#9668;</a>
-            <span class="category-label">{{currentItem.label}}</span>
-          </div>
-        {{/unless}}
-        {{> itemListTpl}}
-      </div>
-    </script>
-
-    <script id="items-list-tpl" type="text/x-template">
-      <ul class="apps-list">
-        {{#each currentItem.items}}
-          {{> itemTpl currentItemPath=../currentItemPath}}
-        {{/each}}
-      </ul>
-    </script>
-
-    <script id="item-tpl" type="text/x-template">
-      <li class="app-item"
-        data-item-path="{{currentItemPath}}.{{@index}}">
-        <img class="app-icon" src="{{icon}}" />
-        <span class="app-label">{{label}}</span>
-      </li>
-    </script>
-
     <!-- Scripts -->
     <script type="text/javascript">
       // React context detection workaround

js/app.js

@@ -1,242 +0,0 @@
-(function(Pitaya, window) {
-
-  "use strict";
-
-  // Load dependencies
-  var path = require('path');
-  var fs = require('fs');
-  var Handlebars = require('handlebars');
-  var cp = require("child_process");
-  var gui = require('nw.gui');
-  var minimist = require('minimist');
-
-  // Load templates...
-  var launcherViewTpl = Handlebars.compile(Pitaya.DOM.select('#launcher-view-tpl').innerHTML);
-
-  // ... and partials
-  Handlebars.registerPartial('itemListTpl', Pitaya.DOM.select('#items-list-tpl').innerHTML);
-  Handlebars.registerPartial('itemTpl', Pitaya.DOM.select('#item-tpl').innerHTML);
-
-  // Internal constants
-  var DEFAULT_PROFILE = './default-profile.json';
-
-  /**
-   * Start the app
-   *
-   * @param rootEl The application root element selector
-   * @return Pitaya
-   */
-  Pitaya.start = function(rootEl) {
-
-    Pitaya._opts = minimist(gui.App.argv);
-    Pitaya._rootEl = Pitaya.DOM.select(rootEl);
-    Pitaya._initListeners();
-
-    var profilePath = Pitaya._opts.profile || DEFAULT_PROFILE;
-
-    return Pitaya.loadProfile(profilePath)
-      .then(function() {
-        return Pitaya;
-      })
-      .catch(Pitaya._onError)
-    ;
-
-  };
-
-  /**
-   * Load a profile file and render the application
-   *
-   * @param profilePath The path of the profile file
-   * @return Promise
-   */
-  Pitaya.loadProfile = function(profilePath) {
-    return Pitaya._loadJSONFile(profilePath)
-      .then(function(profile) {
-        Pitaya._profile = profile;
-        Pitaya.renderLauncherView();
-        return profile;
-      })
-    ;
-  };
-
-  /**
-   * Update the application view
-   *
-   * @return Pitaya
-   */
-  Pitaya.renderLauncherView = function(currentItemPath) {
-
-    currentItemPath = Pitaya._normalizeItemPath(currentItemPath);
-    var rootEl = Pitaya._rootEl;
-    var currentItem = Pitaya._getItemByPath(currentItemPath);
-
-    var data = {
-      currentItemPath: currentItemPath.join('.'),
-      currentItem: currentItem,
-      isRoot: currentItemPath.length === 0
-    };
-
-    rootEl.innerHTML = launcherViewTpl(data);
-
-  };
-
-
-  /**
-   * Initialize DOM event listeners
-   * @private
-   */
-  Pitaya._initListeners = function() {
-    var rootEl = Pitaya._rootEl;
-    rootEl.addEventListener('click', Pitaya._onItemClick);
-    rootEl.addEventListener('click', Pitaya._onGoBackClick);
-  };
-
-  /**
-   * App item click handler
-   * @private
-   */
-  Pitaya._onItemClick = function(evt) {
-
-    var appItemEl = evt.srcElement.matches( '.app-item') ? evt.srcElement :
-      Pitaya.DOM.getClosestAncestor(evt.srcElement, '.app-item')
-    ;
-
-    if( !appItemEl ) return;
-
-    var itemPath = appItemEl.dataset.itemPath;
-    var item = Pitaya._getItemByPath(itemPath);
-
-    if(!item) return;
-
-    if('items' in item) {
-      var rootEl = Pitaya._rootEl;
-      Pitaya.Anim.play(rootEl, 'slide-out-left 250ms ease-in-out')
-        .then(function() {
-          Pitaya.renderLauncherView(itemPath);
-          return Pitaya.Anim.play(rootEl, 'slide-in-right 250ms ease-in-out');
-        })
-      ;
-    }
-
-    if(item.exec) {
-
-      console.info('Launching application "'+item.exec+'"...');
-      appItemEl.classList.add('pulse');
-
-      Pitaya._runApp(item.exec)
-        .then(function() {
-          appItemEl.classList.remove('pulse');
-        })
-        .catch(function(err) {
-          Pitaya._onError(err);
-          appItemEl.classList.remove('pulse');
-        })
-      ;
-
-    }
-
-  };
-
-  /**
-   * GoBack button click handler
-   * @private
-   */
-  Pitaya._onGoBackClick = function(evt) {
-
-    var goBackEl = evt.srcElement.matches( '.goback') ? evt.srcElement :
-      Pitaya.DOM.getClosestAncestor(evt.srcElement, '.goback')
-    ;
-
-    if(!goBackEl) return;
-
-    var currentItemPath = goBackEl.dataset.itemPath;
-    var parentItemPath = Pitaya._normalizeItemPath(currentItemPath);
-
-    parentItemPath.pop();
-
-    var rootEl = Pitaya._rootEl;
-    Pitaya.Anim.play(rootEl, 'slide-out-right 250ms ease-in-out')
-      .then(function() {
-        Pitaya.renderLauncherView(parentItemPath);
-        return Pitaya.Anim.play(rootEl, 'slide-in-left 250ms ease-in-out');
-      })
-    ;
-
-  };
-
-  Pitaya._normalizeItemPath = function(itemPath) {
-
-    if( Array.isArray(itemPath) ) return itemPath;
-
-    if((typeof itemPath === 'string' && itemPath.length === 0) || !itemPath) return [];
-
-    return itemPath.split('.').reduce(function(arr, index) {
-      if(index !== '') {
-        arr.push(+index);
-      }
-      return arr;
-    }, []);
-
-  };
-
-  Pitaya._getItemByPath = function(itemPath, rootItem) {
-
-    rootItem = rootItem || Pitaya._profile;
-    itemPath = Pitaya._normalizeItemPath(itemPath);
-
-    var itemIndex = itemPath[0];
-
-    if(itemIndex === undefined) {
-      return rootItem;
-    }
-
-    if(!('items' in rootItem)) {
-      return undefined;
-    }
-
-    var subItem = rootItem.items[itemIndex];
-
-    if(itemPath.length === 0) {
-      return subItem;
-    }
-
-    return Pitaya._getItemByPath(itemPath.slice(1), subItem);
-
-  };
-
-  Pitaya._runApp = function(execPath) {
-    return new Promise(function(resolve, reject) {
-      cp.exec(execPath, function(err) {
-        if(err) return reject(err);
-        return resolve();
-      });
-    });
-  };
-
-  /**
-   * Load a JSON file
-   *
-   * @private
-   * @param filePath The path of the json file
-   * @return Promise
-   */
-  Pitaya._loadJSONFile = function(filePath) {
-    return new Promise(function(resolve, reject) {
-      fs.readFile(filePath, 'utf8', function(err, fileContent) {
-        if(err) return reject(err);
-        try {
-          var json = JSON.parse(fileContent);
-          return resolve(json);
-        } catch(err) {
-          return reject(err);
-        }
-      });
-    });
-  };
-
-
-  Pitaya._onError = function(err) {
-    console.error(err.stack ? err.stack : err);
-  };
-
-}(window.Pitaya = window.Pitaya || {}, window));

js/app.jsx

@@ -1,26 +1,136 @@
 var React = require('react');
+var minimist = require('minimist');
+var gui = global.window.require('nw.gui');
+var Util = require('./util');
 var CategoryHeader = require('./components/category-header.jsx');
 var AppList = require('./components/app-list.jsx');
+var AnimateMixin = require('./mixins/animate');
+
+// Internal constants
+var DEFAULT_PROFILE = './default-profile.json';
+var PROCESS_OPTS = minimist(gui.App.argv);
 
 var App = React.createClass({
 
+  mixins: [AnimateMixin],
+
   getInitialState: function() {
     return {
+      currentItemPath: '',
       currentItem: null
     };
   },
 
   componentDidMount: function() {
-
+    Util.System.loadJSONFile(PROCESS_OPTS.profile || DEFAULT_PROFILE)
+      .then(function(profile) {
+        this.setState({ profile: profile, currentItem: profile, currentItemPath: '' });
+      }.bind(this))
+    ;
   },
 
   render: function() {
+
+    var currentItem = this.state.currentItem;
+    var items = currentItem ? currentItem.items : [];
+    var currentItemPath = this.state.currentItemPath;
+
+    var header = currentItemPath !== '' ?
+      ( <CategoryHeader
+          onBackClick={this.onBackClick}
+          item={currentItem}
+          itemPath={currentItemPath} /> ) :
+      null
+    ;
+
     return (
       <div className="launcher">
-        <CategoryHeader currentItem={this.state.currentItem} />
+        {header}
-        <AppList />
+        <AppList ref="appList" items={items} parentPath={currentItemPath} onItemClick={this.onItemClick} />
       </div>
     );
+
+  },
+
+  onBackClick: function(itemPath) {
+
+    var parentPath = this._normalizeItemPath(itemPath).slice(0, -1);
+    var parentItem = this._getItemByPath(parentPath);
+
+    this.play(this.refs.appList, 'slide-out-right 250ms ease-in-out')
+      .then(function() {
+        this.setState({currentItem: parentItem, currentItemPath: parentPath.join('.')});
+        return this.play(this.refs.appList, 'slide-in-left 250ms ease-in-out');
+      }.bind(this))
+    ;
+
+  },
+
+  onItemClick: function(evt, itemPath, item) {
+
+    if(item.exec) {
+
+      console.info('Launching application "'+item.exec+'"...');
+      evt.currentTarget.classList.add('pulse');
+
+      Util.System.runApp(item.exec)
+        .then(function() {
+          evt.currentTarget.classList.remove('pulse');
+        })
+        .catch(function(err) {
+          evt.currentTarget.classList.remove('pulse');
+        })
+      ;
+
+    } else {
+      this.play(this.refs.appList, 'slide-out-left 250ms ease-in-out')
+        .then(function() {
+          this.setState({ currentItemPath: itemPath, currentItem: item });
+          return this.play(this.refs.appList, 'slide-in-right 250ms ease-in-out');
+        }.bind(this))
+      ;
+    }
+
+  },
+
+  _getItemByPath: function(itemPath, rootItem) {
+
+    rootItem = rootItem || this.state.profile;
+    itemPath = this._normalizeItemPath(itemPath);
+
+    var itemIndex = itemPath[0];
+
+    if(itemIndex === undefined) {
+      return rootItem;
+    }
+
+    if(!('items' in rootItem)) {
+      return undefined;
+    }
+
+    var subItem = rootItem.items[itemIndex];
+
+    if(itemPath.length === 0) {
+      return subItem;
+    }
+
+    return this._getItemByPath(itemPath.slice(1), subItem);
+
+  },
+
+  _normalizeItemPath: function(itemPath) {
+
+    if( Array.isArray(itemPath) ) return itemPath;
+
+    if((typeof itemPath === 'string' && itemPath.length === 0) || !itemPath) return [];
+
+    return itemPath.split('.').reduce(function(arr, index) {
+      if(index !== '') {
+        arr.push(+index);
+      }
+      return arr;
+    }, []);
+
   }
 
 });

js/components/app-item.jsx

@@ -0,0 +1,28 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    item: React.PropTypes.object.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    onItemClick: React.PropTypes.func.isRequired,
+  },
+
+  _onItemClick: function(evt) {
+    evt.preventDefault();
+    this.props.onItemClick(evt, this.props.itemPath, this.props.item);
+  },
+
+  render: function() {
+    return (
+      <li className="app-item" onClick={this._onItemClick}>
+        <img className="app-icon" src={this.props.item.icon} />
+        <span className="app-label">{this.props.item.label}</span>
+      </li>
+    );
+  }
+
+});

js/components/app-list.jsx

@@ -1,12 +1,33 @@
 var React = require('react');
+var AppItem = require('./app-item.jsx');
 
 module.exports = React.createClass({
 
+  propTypes: {
+    items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+    parentPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    onItemClick: React.PropTypes.func.isRequired,
+  },
+
   render: function() {
+
+    var parentPath = this.props.parentPath;
+    var items = (this.props.items).map(function(item, i) {
+      var path = parentPath+'.'+i;
+      return (
+        <AppItem key={path} itemPath={path} item={item} onItemClick={this.props.onItemClick} />
+      );
+    }.bind(this));
+
     return (
-      <ul className="apps-list">
+      <ul key={parentPath} className="apps-list">
+        {items}
       </ul>
     );
+
   }
 
 });

js/components/category-header.jsx

@@ -2,18 +2,29 @@ var React = require('react');
 
 module.exports = React.createClass({
 
+  propTypes: {
+    onBackClick: React.PropTypes.func.isRequired,
+    itemPath: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.number)
+    ]).isRequired,
+    item: React.PropTypes.object.isRequired,
+  },
+
   render: function() {
 
-    var classes = 'category-header' + (this.props.currentItem ? 'visible' : '');
-    var itemLabel = this.props.currentItem ? this.props.currentItem.label : '';
-
     return (
-      <div className={classes}>
+      <div className="category-header">
-        <a href="#" className="goback">&#9668;</a>
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
-        <span className="category-label">{itemLabel}</span>
+        <span className="category-label">{this.props.item.label}</span>
       </div>
     );
 
+  },
+
+  _onBackClick: function(evt) {
+    evt.preventDefault();
+    this.props.onBackClick(this.props.itemPath, this.props.item);
   }
 
 });

js/dom.js

@@ -1,53 +0,0 @@
-(function(Pitaya, window) {
-
-  "use strict";
-
-  var DOM = Pitaya.DOM = {};
-
-  /**
-   * Select an element in the DOM by its CSS selector
-   *
-   * @private
-   * @param selector The CSS selector
-   * @return The selected element or null
-   */
-   DOM.select = function(selector) {
-    return window.document.querySelector(selector);
-  };
-
-  /**
-   * Select all elements in the DOM with a CSS selector
-   *
-   * @private
-   * @param selector The CSS selector
-   * @return An array of the selected elements (if any)
-   */
-  DOM.selectAll = function(selector) {
-    return window.document.querySelectorAll(selector);
-  };
-
-  /**
-   * Find the closest ancestor matching the CSS selector
-   *
-   * @private
-   * @param selector The CSS selector
-   * @return An array of the selected elements (if any)
-   */
-  DOM.getClosestAncestor = function(el, selector) {
-
-    var parent = el.parentElement;
-
-    if(parent) {
-      if(parent.matches(selector)) {
-        return parent;
-      } else {
-        return DOM.getClosestAncestor(parent, selector);
-      }
-    }
-
-    return false;
-
-  };
-
-
-}(window.Pitaya = window.Pitaya || {}, window));

js/mixins/animate.js

@@ -1,15 +1,14 @@
-(function(Pitaya, window) {
+var Events = {
+  ANIMATION_END: 'webkitAnimationEnd'
+};
 
-  "use strict";
+module.exports = {
 
-  var Anim = Pitaya.Anim = {};
+  play: function(component, animation) {
-  var Events = Anim.Events = {
-    ANIMATION_END: 'webkitAnimationEnd'
-  };
-
-  Anim.play = function(el, animation) {
     return new Promise(function(resolve, reject) {
-      
+
+      var el = component.getDOMNode();
+
       el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
       el.style.webkitAnimation = animation;
 
@@ -19,6 +18,6 @@
       }
 
     });
-  };
+  }
 
-}(window.Pitaya = window.Pitaya || {}, window));
+};

js/util/index.js

@@ -0,0 +1 @@
+exports.System = require('./system');

js/util/system.js

@@ -0,0 +1,31 @@
+var fs = require('fs');
+var cp = require('child_process');
+
+/**
+ * Load a JSON file
+ *
+ * @param filePath The path of the json file
+ * @return Promise
+ */
+exports.loadJSONFile = function(filePath) {
+  return new Promise(function(resolve, reject) {
+    fs.readFile(filePath, 'utf8', function(err, fileContent) {
+      if(err) return reject(err);
+      try {
+        var json = JSON.parse(fileContent);
+        return resolve(json);
+      } catch(err) {
+        return reject(err);
+      }
+    });
+  });
+};
+
+exports.runApp = function(execPath) {
+  return new Promise(function(resolve, reject) {
+    cp.exec(execPath, function(err) {
+      if(err) return reject(err);
+      return resolve();
+    });
+  });
+};

package.json

@@ -22,11 +22,9 @@
   },
   "dependencies": {
     "glob": "^5.0.14",
-    "handlebars": "^3.0.3",
     "ini": "^1.3.4",
     "minimist": "^1.1.3",
     "node-jsx": "^0.13.3",
-    "r-dom": "^1.3.0",
     "react": "^0.13.3"
   }
 }