Base documentation, séparation code DOM dans fichier distinct

This commit is contained in:
wpetit 2015-08-21 14:47:06 +02:00
parent 908b12ef20
commit 30092c25f3
6 changed files with 134 additions and 94 deletions

View File

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

View File

@ -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/).

View File

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

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

53
js/dom.js Normal file
View File

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

View File

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