Base documentation, séparation code DOM dans fichier distinct
This commit is contained in:
parent
908b12ef20
commit
30092c25f3
15
Gruntfile.js
15
Gruntfile.js
|
@ -7,15 +7,16 @@ module.exports = function(grunt) {
|
||||||
var NW_VERSION = '0.12.2';
|
var NW_VERSION = '0.12.2';
|
||||||
var BUILD_DIR = 'build';
|
var BUILD_DIR = 'build';
|
||||||
var BUILD_TARGETS = {
|
var BUILD_TARGETS = {
|
||||||
linux_ia32: true,
|
linux_ia32: false,
|
||||||
linux_x64: true,
|
linux_x64: true,
|
||||||
win: true,
|
win: false,
|
||||||
osx: false
|
osx: false
|
||||||
};
|
};
|
||||||
var PKG = grunt.file.readJSON('package.json');
|
var PKG = grunt.file.readJSON('package.json');
|
||||||
var PKG_OVERWRITE = {
|
var PKG_OVERWRITE = {
|
||||||
window: {
|
window: {
|
||||||
toolbar: false
|
toolbar: false,
|
||||||
|
kiosk: true
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -51,6 +52,8 @@ module.exports = function(grunt) {
|
||||||
src: [
|
src: [
|
||||||
'index.html',
|
'index.html',
|
||||||
'package.json',
|
'package.json',
|
||||||
|
'default-profile.json',
|
||||||
|
'LICENCE',
|
||||||
'css/**',
|
'css/**',
|
||||||
'js/**',
|
'js/**',
|
||||||
'img/**'
|
'img/**'
|
||||||
|
@ -101,12 +104,12 @@ module.exports = function(grunt) {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
grunt.registerTask('kaki:run', ['download', 'run']);
|
grunt.registerTask('papaye:run', ['download', 'run']);
|
||||||
grunt.registerTask(
|
grunt.registerTask(
|
||||||
'kaki:build',
|
'papaye:build',
|
||||||
['download', 'build', 'copy:build']
|
['download', 'build', 'copy:build']
|
||||||
);
|
);
|
||||||
grunt.registerTask('default', ['kaki:run']);
|
grunt.registerTask('default', ['papaye:run']);
|
||||||
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||||
|
|
36
README.md
36
README.md
|
@ -1,18 +1,31 @@
|
||||||
# Kaki
|
# Papaye
|
||||||
|
|
||||||
Application loader
|
Lanceur d'application pour Linux
|
||||||
|
|
||||||
## Getting started
|
## Démarrer avec les sources
|
||||||
|
|
||||||
|
### Dépendences de développement
|
||||||
|
|
||||||
|
- [NodeJS](https://nodejs.org/) - Dernière version stable, testé sur la 0.12.*
|
||||||
|
- [NPM](https://www.npmjs.com/) - Normalement automatiquement installé avec NodeJS.
|
||||||
|
|
||||||
|
### Initialisation du projet
|
||||||
|
|
||||||
```
|
```
|
||||||
git clone <repo>
|
git clone <repo>
|
||||||
cd kaki
|
cd papaye
|
||||||
git checkout develop
|
git checkout develop
|
||||||
npm install
|
npm install
|
||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
### Passing options in development
|
## Options
|
||||||
|
|
||||||
|
```
|
||||||
|
--profile=<chemin_profile> Chemin vers le fichier de profil à charger dans l'application.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Passer des options en développement
|
||||||
|
|
||||||
```
|
```
|
||||||
npm start -- [options...]
|
npm start -- [options...]
|
||||||
|
@ -23,6 +36,15 @@ Exemple:
|
||||||
npm start -- --profile=my-profile.json
|
npm start -- --profile=my-profile.json
|
||||||
```
|
```
|
||||||
|
|
||||||
## How to contribute
|
## Comment construire l'application depuis les sources
|
||||||
|
|
||||||
This project uses [Git Flow](http://nvie.com/posts/a-successful-git-branching-model/).
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Un dossier `papaye-<version>-<target>-<arch>` sera créé dans le répertoire `./build`. Celui ci contient tous les fichiers nécessaires à l'application.
|
||||||
|
|
||||||
|
|
||||||
|
## Comment contribuer
|
||||||
|
|
||||||
|
Ce projet utilise la méthodologie [Git Flow](http://nvie.com/posts/a-successful-git-branching-model/).
|
||||||
|
|
14
index.html
14
index.html
|
@ -1,11 +1,14 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Kaki Launcher</title>
|
<title>Lanceur - Papaye</title>
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="kaki"></div>
|
|
||||||
|
|
||||||
|
<!-- Application root element -->
|
||||||
|
<div id="papaye"></div>
|
||||||
|
|
||||||
|
<!-- Templates -->
|
||||||
<script id="items-list-tpl" type="text/x-template">
|
<script id="items-list-tpl" type="text/x-template">
|
||||||
<ul class="apps-list">
|
<ul class="apps-list">
|
||||||
{{#each items}}
|
{{#each items}}
|
||||||
|
@ -17,10 +20,13 @@
|
||||||
</ul>
|
</ul>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script type="text/javascript" src="js/dom.js"></script>
|
||||||
<script type="text/javascript" src="js/app.js"></script>
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
|
|
||||||
|
<!-- Application bootstrapping -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Start the app
|
Papaye.start('#papaye')
|
||||||
Kaki.start('#kaki')
|
|
||||||
.then(function() {
|
.then(function() {
|
||||||
console.info('Application started.');
|
console.info('Application started.');
|
||||||
})
|
})
|
||||||
|
|
104
js/app.js
104
js/app.js
|
@ -1,7 +1,8 @@
|
||||||
(function(Kaki, window) {
|
(function(Papaye, window) {
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
// Load dependencies
|
||||||
var path = require('path');
|
var path = require('path');
|
||||||
var fs = require('fs');
|
var fs = require('fs');
|
||||||
var Handlebars = require('handlebars');
|
var Handlebars = require('handlebars');
|
||||||
|
@ -9,26 +10,29 @@
|
||||||
var gui = require('nw.gui');
|
var gui = require('nw.gui');
|
||||||
var minimist = require('minimist');
|
var minimist = require('minimist');
|
||||||
|
|
||||||
// Templates
|
// Load templates
|
||||||
var itemsListTpl = Handlebars.compile(select('#items-list-tpl').innerHTML);
|
var itemsListTpl = Handlebars.compile(Papaye.DOM.select('#items-list-tpl').innerHTML);
|
||||||
|
|
||||||
|
// Internal constants
|
||||||
|
var DEFAULT_PROFILE = './default-profile.json';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Start the app
|
* Start the app
|
||||||
*
|
*
|
||||||
* @param rootEl The application root element selector
|
* @param rootEl The application root element selector
|
||||||
* @return Kaki
|
* @return Papaye
|
||||||
*/
|
*/
|
||||||
Kaki.start = function(rootEl) {
|
Papaye.start = function(rootEl) {
|
||||||
|
|
||||||
Kaki._opts = minimist(gui.App.argv);
|
Papaye._opts = minimist(gui.App.argv);
|
||||||
Kaki._rootEl = select(rootEl);
|
Papaye._rootEl = Papaye.DOM.select(rootEl);
|
||||||
Kaki._initListeners();
|
Papaye._initListeners();
|
||||||
|
|
||||||
var profilePath = Kaki._opts.profile || './default-profile.json';
|
var profilePath = Papaye._opts.profile || DEFAULT_PROFILE;
|
||||||
|
|
||||||
return Kaki.loadProfile(profilePath)
|
return Papaye.loadProfile(profilePath)
|
||||||
.then(function() {
|
.then(function() {
|
||||||
return Kaki;
|
return Papaye;
|
||||||
})
|
})
|
||||||
;
|
;
|
||||||
|
|
||||||
|
@ -40,11 +44,11 @@
|
||||||
* @param profilePath The path of the profile file
|
* @param profilePath The path of the profile file
|
||||||
* @return Promise
|
* @return Promise
|
||||||
*/
|
*/
|
||||||
Kaki.loadProfile = function(profilePath) {
|
Papaye.loadProfile = function(profilePath) {
|
||||||
return Kaki._loadJSONFile(profilePath)
|
return Papaye._loadJSONFile(profilePath)
|
||||||
.then(function(profile) {
|
.then(function(profile) {
|
||||||
Kaki._profile = profile;
|
Papaye._profile = profile;
|
||||||
Kaki.render();
|
Papaye.render();
|
||||||
return profile;
|
return profile;
|
||||||
})
|
})
|
||||||
;
|
;
|
||||||
|
@ -53,11 +57,11 @@
|
||||||
/**
|
/**
|
||||||
* Update the application view
|
* Update the application view
|
||||||
*
|
*
|
||||||
* @return Kaki
|
* @return Papaye
|
||||||
*/
|
*/
|
||||||
Kaki.render = function() {
|
Papaye.render = function() {
|
||||||
var rootEl = Kaki._rootEl;
|
var rootEl = Papaye._rootEl;
|
||||||
var profile = Kaki._profile;
|
var profile = Papaye._profile;
|
||||||
rootEl.innerHTML = itemsListTpl(profile);
|
rootEl.innerHTML = itemsListTpl(profile);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -66,19 +70,19 @@
|
||||||
* Initialize DOM event listeners
|
* Initialize DOM event listeners
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
Kaki._initListeners = function() {
|
Papaye._initListeners = function() {
|
||||||
var rootEl = Kaki._rootEl;
|
var rootEl = Papaye._rootEl;
|
||||||
rootEl.addEventListener('click', Kaki._onItemClick);
|
rootEl.addEventListener('click', Papaye._onItemClick);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* App item click handler
|
* App item click handler
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
Kaki._onItemClick = function(evt) {
|
Papaye._onItemClick = function(evt) {
|
||||||
|
|
||||||
var appItemEl = evt.srcElement.matches( '.app-item') ? evt.srcElement :
|
var appItemEl = evt.srcElement.matches( '.app-item') ? evt.srcElement :
|
||||||
getClosestAncestor(evt.srcElement, '.app-item')
|
Papaye.DOM.getClosestAncestor(evt.srcElement, '.app-item')
|
||||||
;
|
;
|
||||||
|
|
||||||
if( !appItemEl ) return;
|
if( !appItemEl ) return;
|
||||||
|
@ -105,7 +109,7 @@
|
||||||
* @param filePath The path of the json file
|
* @param filePath The path of the json file
|
||||||
* @return Promise
|
* @return Promise
|
||||||
*/
|
*/
|
||||||
Kaki._loadJSONFile = function(filePath) {
|
Papaye._loadJSONFile = function(filePath) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve, reject) {
|
||||||
fs.readFile(filePath, 'utf8', function(err, fileContent) {
|
fs.readFile(filePath, 'utf8', function(err, fileContent) {
|
||||||
if(err) return reject(err);
|
if(err) return reject(err);
|
||||||
|
@ -119,52 +123,4 @@
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// DOM manipulation helpers
|
}(window.Papaye = window.Papaye || {}, window));
|
||||||
|
|
||||||
/**
|
|
||||||
* Select an element in the DOM by its CSS selector
|
|
||||||
*
|
|
||||||
* @private
|
|
||||||
* @param selector The CSS selector
|
|
||||||
* @return The selected element or null
|
|
||||||
*/
|
|
||||||
function select(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)
|
|
||||||
*/
|
|
||||||
function selectAll(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)
|
|
||||||
*/
|
|
||||||
function getClosestAncestor(el, selector) {
|
|
||||||
|
|
||||||
var parent = el.parentElement;
|
|
||||||
|
|
||||||
if(parent) {
|
|
||||||
if(parent.matches(selector)) {
|
|
||||||
return parent;
|
|
||||||
} else {
|
|
||||||
return getClosestAncestor(parent, selector);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}(window.Kaki = window.Kaki || {}, window));
|
|
||||||
|
|
|
@ -0,0 +1,53 @@
|
||||||
|
(function(Papaye, window) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var DOM = Papaye.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.Papaye = window.Papaye || {}, window));
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "kaki",
|
"name": "papaye",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": "true",
|
"private": "true",
|
||||||
"main": "index.html",
|
"main": "index.html",
|
||||||
|
@ -12,8 +12,8 @@
|
||||||
"lodash": "^3.0.1"
|
"lodash": "^3.0.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "./node_modules/.bin/grunt kaki:run",
|
"start": "./node_modules/.bin/grunt papaye:run",
|
||||||
"build": "./node_modules/.bin/grunt kaki:build"
|
"build": "./node_modules/.bin/grunt papaye:build"
|
||||||
},
|
},
|
||||||
"chromium-args": "--ignore-certificate-errors",
|
"chromium-args": "--ignore-certificate-errors",
|
||||||
"window": {
|
"window": {
|
||||||
|
|
Loading…
Reference in New Issue