Version React iso-fonctionnelle

This commit is contained in:
William Petit 2015-08-27 22:52:30 +02:00
parent 1d24cf6779
commit 7fc7f9d10e
12 changed files with 223 additions and 354 deletions

View File

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

View File

@ -7,37 +7,7 @@
<!-- Application root element --> <!-- Application root element -->
<div id="pitaya"></div> <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 --> <!-- Scripts -->
<script type="text/javascript"> <script type="text/javascript">
// React context detection workaround // React context detection workaround

242
js/app.js
View File

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

View File

@ -1,26 +1,136 @@
var React = require('react'); 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 CategoryHeader = require('./components/category-header.jsx');
var AppList = require('./components/app-list.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({ var App = React.createClass({
mixins: [AnimateMixin],
getInitialState: function() { getInitialState: function() {
return { return {
currentItemPath: '',
currentItem: null currentItem: null
}; };
}, },
componentDidMount: function() { componentDidMount: function() {
Util.System.loadJSONFile(PROCESS_OPTS.profile || DEFAULT_PROFILE)
.then(function(profile) {
this.setState({ profile: profile, currentItem: profile, currentItemPath: '' });
}.bind(this))
;
}, },
render: function() { 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 ( return (
<div className="launcher"> <div className="launcher">
<CategoryHeader currentItem={this.state.currentItem} /> {header}
<AppList /> <AppList ref="appList" items={items} parentPath={currentItemPath} onItemClick={this.onItemClick} />
</div> </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;
}, []);
} }
}); });

View File

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

View File

@ -1,12 +1,33 @@
var React = require('react'); var React = require('react');
var AppItem = require('./app-item.jsx');
module.exports = React.createClass({ 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() { 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 ( return (
<ul className="apps-list"> <ul key={parentPath} className="apps-list">
{items}
</ul> </ul>
); );
} }
}); });

View File

@ -2,18 +2,29 @@ var React = require('react');
module.exports = React.createClass({ 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() { render: function() {
var classes = 'category-header' + (this.props.currentItem ? 'visible' : '');
var itemLabel = this.props.currentItem ? this.props.currentItem.label : '';
return ( 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> </div>
); );
},
_onBackClick: function(evt) {
evt.preventDefault();
this.props.onBackClick(this.props.itemPath, this.props.item);
} }
}); });

View File

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

View File

@ -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) { return new Promise(function(resolve, reject) {
var el = component.getDOMNode();
el.addEventListener(Events.ANIMATION_END, onAnimEnd, false); el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
el.style.webkitAnimation = animation; el.style.webkitAnimation = animation;
@ -19,6 +18,6 @@
} }
}); });
}; }
}(window.Pitaya = window.Pitaya || {}, window)); };

1
js/util/index.js Normal file
View File

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

31
js/util/system.js Normal file
View File

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

View File

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