Merge branch 'feature/profile-edit' into develop

README.md

@@ -1,6 +1,6 @@
 # Pitaya
 
-Lanceur d'application pour Linux
+Lanceur d'application pour GNU/Linux
 
 ## Démarrer avec les sources
 
@@ -12,7 +12,7 @@ Lanceur d'application pour Linux
 ### Initialisation du projet
 
 ```
-git clone <repo>
+git clone https://forge.cadoles.com/wpetit/pitaya.git
 cd pitaya
 git checkout develop
 npm install
@@ -23,6 +23,7 @@ npm start
 
 ```
 --profile=<chemin_profile>    Chemin vers le fichier de profil à charger dans l'application.
+--edit                        Ouvrir l'application en mode édition.
 ```
 
 ### Passer des options en développement
@@ -48,3 +49,7 @@ Un dossier `pitaya-<version>-<target>-<arch>` sera créé dans le répertoire `.
 ## Comment contribuer
 
 Ce projet utilise la méthodologie [Git Flow](http://nvie.com/posts/a-successful-git-branching-model/).
+
+## Licence
+
+GPLv3

index.html

@@ -8,51 +8,18 @@
     <!-- 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" src="js/dom.js"></script>
-    <script type="text/javascript" src="js/anim.js"></script>
-    <script type="text/javascript" src="js/app.js"></script>
-
-    <!-- Application bootstrapping -->
     <script type="text/javascript">
-      Pitaya.start('#pitaya')
+      // React context detection workaround
-        .then(function() {
+      global.document = global.window.document;
-          console.info('Application started.');
+      global.navigator = global.window.navigator;
-        })
+
-        .catch(function(err) {
+      // Auto transform JSX
-          console.error(err.stack ? err.stack : err);
+      require('node-jsx').install();
-        })
+
-      ;
+      // Launch application
+      require('./js/app.jsx');
+
     </script>
 
   </body>

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

@@ -0,0 +1,147 @@
+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);
+
+
+// Main component
+var App = React.createClass({
+
+  mixins: [AnimateMixin],
+
+  getInitialState: function() {
+    return {
+      currentItemPath: '',
+      currentItem: null
+    };
+  },
+
+  componentDidMount: function() {
+
+    // Load profile on component mount
+    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">
+        {header}
+        <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;
+    }, []);
+
+  }
+
+});
+
+var rootEl = document.getElementById('pitaya');
+React.render(<App />, rootEl);

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

@@ -0,0 +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 key={parentPath} className="apps-list">
+        {items}
+      </ul>
+    );
+
+  }
+
+});

js/components/category-header.jsx

@@ -0,0 +1,30 @@
+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() {
+
+    return (
+      <div className="category-header">
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
+        <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/fs.js

@@ -0,0 +1,104 @@
+(function(Pitaya) {
+
+  "use strict";
+
+  var ini = require('ini');
+  var glob = require('glob');
+  var path = require('path');
+  var fs = require('fs');
+
+  var FS = Pitaya.FS = {};
+
+  FS.loadAllDesktopFiles = function(rootDirs) {
+
+    return FS.findAllDesktopFiles(rootDirs)
+      .then(function(filePaths) {
+
+        var promises = filePaths.map(function(path) {
+          return FS.loadDesktopFile(path);
+        });
+
+        return Promise.all(promises)
+          .then(function(desktopFiles) {
+            return desktopFiles.map(function(desktop, i) {
+              return {
+                path: filePaths[i],
+                desktop: desktop
+              };
+            });
+          })
+        ;
+
+      })
+    ;
+
+  };
+
+  FS.findAllDesktopFiles = function(rootDirs) {
+
+    if(!Array.isArray(rootDirs)) {
+      rootDirs = [rootDirs];
+    }
+
+    var promises = rootDirs.map(function(rootDir) {
+
+      var globPath = path.join(rootDir, '**/*.desktop');
+
+      return new Promise(function(resolve, reject) {
+        glob(globPath, function(err, files) {
+          if(err) return reject(err);
+          return resolve(files);
+        });
+      });
+
+    });
+
+    return Promise.all(promises)
+      .then(function(apps) {
+        return uniq(flatten(apps));
+      })
+    ;
+
+  };
+
+  FS.loadDesktopFile = function(filePath) {
+    return new Promise(function(resolve, reject) {
+      fs.readFile(filePath, 'utf8', function(err, content) {
+        if(err) return reject(err);
+        try {
+          var decoded = ini.decode(content);
+          return resolve(decoded);
+        } catch(err) {
+          return reject(err);
+        }
+      });
+    });
+  };
+
+  // Array helpers
+
+  function flatten(arr) {
+    return arr.reduce(function(result, item) {
+      result = result.concat.apply(result, Array.isArray(item) ? flatten(item) : [item]);
+      return result;
+    }, []);
+  }
+
+  function uniq(arr) {
+    return arr.reduce(function(result, item) {
+      if(result.indexOf(item) === -1) {
+        result.push(item);
+      }
+      return result;
+    }, []);
+  }
+
+
+}(Pitaya = global.Pitaya || {}));
+
+
+Pitaya.FS.loadAllDesktopFiles(['/usr/share/applications', '/home/william/.local/share/applications'])
+  .then(function(apps) {
+    console.log(apps[5])
+  })
+;

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

@@ -21,7 +21,10 @@
     "kiosk": false
   },
   "dependencies": {
-    "handlebars": "^3.0.3",
+    "glob": "^5.0.14",
-    "minimist": "^1.1.3"
+    "ini": "^1.3.4",
+    "minimist": "^1.1.3",
+    "node-jsx": "^0.13.3",
+    "react": "^0.13.3"
   }
 }