Base documentation, séparation code DOM dans fichier distinct

js/app.js

@@ -1,7 +1,8 @@
-(function(Kaki, window) {
+(function(Papaye, window) {
 
   "use strict";
 
+  // Load dependencies
   var path = require('path');
   var fs = require('fs');
   var Handlebars = require('handlebars');
@@ -9,26 +10,29 @@
   var gui = require('nw.gui');
   var minimist = require('minimist');
 
-  // Templates
-  var itemsListTpl = Handlebars.compile(select('#items-list-tpl').innerHTML);
+  // Load templates
+  var itemsListTpl = Handlebars.compile(Papaye.DOM.select('#items-list-tpl').innerHTML);
+
+  // Internal constants
+  var DEFAULT_PROFILE = './default-profile.json';
 
   /**
    * Start the app
    *
    * @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);
-    Kaki._rootEl = select(rootEl);
-    Kaki._initListeners();
+    Papaye._opts = minimist(gui.App.argv);
+    Papaye._rootEl = Papaye.DOM.select(rootEl);
+    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() {
-        return Kaki;
+        return Papaye;
       })
     ;
 
@@ -40,11 +44,11 @@
    * @param profilePath The path of the profile file
    * @return Promise
    */
-  Kaki.loadProfile = function(profilePath) {
-    return Kaki._loadJSONFile(profilePath)
+  Papaye.loadProfile = function(profilePath) {
+    return Papaye._loadJSONFile(profilePath)
       .then(function(profile) {
-        Kaki._profile = profile;
-        Kaki.render();
+        Papaye._profile = profile;
+        Papaye.render();
         return profile;
       })
     ;
@@ -53,11 +57,11 @@
   /**
    * Update the application view
    *
-   * @return Kaki
+   * @return Papaye
    */
-  Kaki.render = function() {
-    var rootEl = Kaki._rootEl;
-    var profile = Kaki._profile;
+  Papaye.render = function() {
+    var rootEl = Papaye._rootEl;
+    var profile = Papaye._profile;
     rootEl.innerHTML = itemsListTpl(profile);
   };
 
@@ -66,19 +70,19 @@
    * Initialize DOM event listeners
    * @private
    */
-  Kaki._initListeners = function() {
-    var rootEl = Kaki._rootEl;
-    rootEl.addEventListener('click', Kaki._onItemClick);
+  Papaye._initListeners = function() {
+    var rootEl = Papaye._rootEl;
+    rootEl.addEventListener('click', Papaye._onItemClick);
   };
 
   /**
    * App item click handler
    * @private
    */
-  Kaki._onItemClick = function(evt) {
+  Papaye._onItemClick = function(evt) {
 
     var appItemEl = evt.srcElement.matches( '.app-item') ? evt.srcElement :
-      getClosestAncestor(evt.srcElement, '.app-item')
+      Papaye.DOM.getClosestAncestor(evt.srcElement, '.app-item')
     ;
 
     if( !appItemEl ) return;
@@ -105,7 +109,7 @@
    * @param filePath The path of the json file
    * @return Promise
    */
-  Kaki._loadJSONFile = function(filePath) {
+  Papaye._loadJSONFile = function(filePath) {
     return new Promise(function(resolve, reject) {
       fs.readFile(filePath, 'utf8', function(err, fileContent) {
         if(err) return reject(err);
@@ -119,52 +123,4 @@
     });
   };
 
-  // DOM manipulation helpers
-
-  /**
-   * 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));
+}(window.Papaye = window.Papaye || {}, window));

js/dom.js

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