Parcourir la source

Version React iso-fonctionnelle

upgrade-electron
William Petit il y a 4 ans
Parent
révision
7fc7f9d10e
12 fichiers modifiés avec 223 ajouts et 354 suppressions
  1. +0
    -5
      css/style.css
  2. +1
    -31
      index.html
  3. +0
    -242
      js/app.js
  4. +113
    -3
      js/app.jsx
  5. +28
    -0
      js/components/app-item.jsx
  6. +22
    -1
      js/components/app-list.jsx
  7. +17
    -6
      js/components/category-header.jsx
  8. +0
    -53
      js/dom.js
  9. +10
    -11
      js/mixins/animate.js
  10. +1
    -0
      js/util/index.js
  11. +31
    -0
      js/util/system.js
  12. +0
    -2
      package.json

+ 0
- 5
css/style.css Voir le fichier

@@ -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 {

+ 1
- 31
index.html Voir le fichier

@@ -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

+ 0
- 242
js/app.js Voir le fichier

@@ -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));

+ 113
- 3
js/app.jsx Voir le fichier

@@ -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} />
<AppList />
{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;
}, []);

}

});

+ 28
- 0
js/components/app-item.jsx Voir le fichier

@@ -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>
);
}

});

+ 22
- 1
js/components/app-list.jsx Voir le fichier

@@ -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>
);

}

});

+ 17
- 6
js/components/category-header.jsx Voir le fichier

@@ -2,18 +2,29 @@ var React = require('react');

module.exports = React.createClass({

render: function() {
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,
},

var classes = 'category-header' + (this.props.currentItem ? 'visible' : '');
var itemLabel = this.props.currentItem ? this.props.currentItem.label : '';
render: function() {

return (
<div className={classes}>
<a href="#" className="goback">&#9668;</a>
<span className="category-label">{itemLabel}</span>
<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);
}

});

+ 0
- 53
js/dom.js Voir le fichier

@@ -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/anim.js → js/mixins/animate.js Voir le fichier

@@ -1,15 +1,14 @@
(function(Pitaya, window) {
var Events = {
ANIMATION_END: 'webkitAnimationEnd'
};

"use strict";
module.exports = {

var Anim = Pitaya.Anim = {};
var Events = Anim.Events = {
ANIMATION_END: 'webkitAnimationEnd'
};

Anim.play = function(el, animation) {
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;

@@ -19,6 +18,6 @@
}

});
};
}

}(window.Pitaya = window.Pitaya || {}, window));
};

+ 1
- 0
js/util/index.js Voir le fichier

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

+ 31
- 0
js/util/system.js Voir le fichier

@@ -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();
});
});
};

+ 0
- 2
package.json Voir le fichier

@@ -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"
}
}

Chargement…
Annuler
Enregistrer