Base edit view

js/components/desktop-app-item.jsx

@@ -0,0 +1,46 @@
+var React = require('react');
+var Util = require('../util');
+
+module.exports = React.createClass({
+
+  getInitialState: function() {
+    return { icon: '' };
+  },
+
+  render: function() {
+
+    var desktopEntry = this.props.desktopEntry;
+    var label = desktopEntry.Name;
+    var category = desktopEntry.Categories;
+
+    // Search for best icon
+    var icon = '';
+
+    if(!this.state.icon) {
+      this._findIcon(desktopEntry.Icon);
+    } else {
+      icon = this.state.icon;
+    }
+
+    return (
+      <li className="desktop-app">
+        <img src={icon} className="desktop-app-icon" />
+        <span className="desktop-app-label">{label}</span>
+      </li>
+    );
+
+  },
+
+  _findIcon: function(iconPath) {
+
+    var desktopEntry = this.props.desktopEntry;
+
+    Util.DesktopApps.findIcon(iconPath)
+      .then(function(iconPath) {
+        this.setState({ icon: iconPath });
+      }.bind(this))
+    ;
+
+  }
+
+});

js/components/desktop-app-list.jsx

@@ -0,0 +1,37 @@
+var React = require('react');
+var Util = require('../util');
+var DesktopAppItem = require('./desktop-app-item.jsx');
+
+module.exports = React.createClass({
+
+  getInitialState: function() {
+    return {
+      desktopFiles: []
+    };
+  },
+
+  componentDidMount: function() {
+    // Load system desktop apps
+    Util.DesktopApps.loadAllDesktopFiles('/usr/share/applications')
+      .then(function(desktopFiles) {
+        this.setState({ desktopFiles: desktopFiles });
+      }.bind(this))
+    ;
+  },
+
+  render: function() {
+
+    var items = this.state.desktopFiles.map(function(desktopFile, i) {
+      var desktopEntry = desktopFile.content['Desktop Entry'];
+      return <DesktopAppItem key={desktopFile.path} desktopEntry={desktopEntry} />;
+    });
+
+    return (
+      <ul className="desktop-apps">
+        {items}
+      </ul>
+    );
+
+  }
+
+});

js/components/edit-view.jsx

@@ -0,0 +1,16 @@
+var React = require('react');
+var DesktopAppList = require('./desktop-app-list.jsx');
+
+module.exports = React.createClass({
+
+  render: function() {
+
+    return (
+      <div className="edit">
+        <DesktopAppList />
+      </div>
+    );
+
+  }
+
+});

js/components/launcher-view.jsx

@@ -0,0 +1,140 @@
+var React = require('react');
+var Util = require('../util');
+var CategoryHeader = require('./category-header.jsx');
+var AppList = require('./app-list.jsx');
+var AnimateMixin = require('./mixins/animate');
+
+module.exports = React.createClass({
+
+  mixins: [AnimateMixin],
+
+  propTypes: {
+    profilePath: React.PropTypes.string.isRequired
+  },
+
+  getInitialState: function() {
+    return {
+      currentItemPath: '',
+      currentItem: null
+    };
+  },
+
+  componentDidMount: function() {
+
+    // Load profile on component mount
+    Util.System.loadJSONFile(this.props.profilePath)
+      .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;
+    }, []);
+
+  }
+
+});

js/components/mixins/animate.js

@@ -0,0 +1,23 @@
+var Events = {
+  ANIMATION_END: 'webkitAnimationEnd'
+};
+
+module.exports = {
+
+  play: function(component, animation) {
+    return new Promise(function(resolve, reject) {
+
+      var el = component.getDOMNode();
+
+      el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
+      el.style.webkitAnimation = animation;
+
+      function onAnimEnd(evt) {
+        el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
+        return resolve(el);
+      }
+
+    });
+  }
+
+};