Aggresive DOMHandler Optimization (2/3)

src/Lungo.Element.js

@@ -15,5 +15,6 @@ LUNGO.Element = {
         article: null,
         aside: null
     },
+    asides: null,
     toolbars: null
 };

src/boot/Lungo.Boot.Resources.js

@@ -29,6 +29,8 @@ LUNGO.Boot.Resources = (function(lng, $$, undefined) {
         for (resource_key in resources) {
             _loadResources(resource_key, resources[resource_key]);
         }
+
+        _cacheDOMElements();
     };
 
     var _loadResources = function(resource_key, resources, callback) {
@@ -44,6 +46,12 @@ LUNGO.Boot.Resources = (function(lng, $$, undefined) {
         }
     };
 
+    var _cacheDOMElements = function() {
+        lng.Element.sections = lng.dom(ELEMENT.SECTION);
+        lng.Element.asides = lng.dom(ELEMENT.ASIDE);
+        // lng.Element.toolbars = lng.dom(ELEMENT.ASIDE);
+    };
+
     var _parseUrl = function(section_url, folder) {
         return (/http/.test(section_url)) ? section_url : 'app/' + folder + '/' + section_url;
     };

src/boot/Lungo.Boot.Section.js

@@ -20,7 +20,6 @@ LUNGO.Boot.Section = (function(lng, undefined) {
      * @method init
      */
     var start = function() {
-        lng.Element.sections = lng.dom(ELEMENT.SECTION);
         _initFirstSection();
         _initAllSections();
 
@@ -53,13 +52,11 @@ LUNGO.Boot.Section = (function(lng, undefined) {
         first_article.addClass(CLASS.CURRENT);
 
         var first_article_id = first_article.attr(ATTRIBUTE.ID);
-        var section_id = '#' + section.attr(ATTRIBUTE.ID);
-        //@todo: tenemos que inicializar la seccion actual
-        //lng.View.Article.showReferenceLinks(section_id, first_article_id);
+        if (first_article_id) lng.View.Article.switchReferenceItems(first_article_id, section);
     };
 
     return {
         start: start
     };
 
-})(LUNGO);
+})(LUNGO);

src/boot/Lungo.Boot.js

@@ -5,7 +5,6 @@
  * @class App
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
  */
 
 LUNGO.Boot = (function(lng, undefined) {

src/router/Lungo.Router.js

@@ -16,14 +16,6 @@ LUNGO.Router = (function(lng, undefined) {
     var TRIGGER = lng.Constants.TRIGGER;
     var HASHTAG_CHARACTER = '#';
 
-    var _sections = [];
-
-    var init = function() {
-        if(!_sections) {
-            _sections = lng.dom(ELEMENT.SECTION);
-        }
-    };
-
     /**
      * Navigate to a <section>.
      *
@@ -36,7 +28,7 @@ LUNGO.Router = (function(lng, undefined) {
         var current =  lng.Element.Current.section;
 
         if (_notCurrentTarget(section_id, current)) {
-            var target = lng.dom(ELEMENT.SECTION + section_id);
+            var target = lng.Element.sections.siblings(ELEMENT.SECTION + section_id);
             if (target.length > 0) {
                 current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE).trigger(TRIGGER.UNLOAD);
                 target.addClass(CLASS.SHOW).trigger(TRIGGER.LOAD);
@@ -60,13 +52,18 @@ LUNGO.Router = (function(lng, undefined) {
         var current =  lng.Element.Current.article;
 
         if (_notCurrentTarget(article_id, current)) {
-            var target = lng.dom(ELEMENT.SECTION + section_id + ' ' + ELEMENT.ARTICLE + article_id);
+            var target = lng.Element.Current.section.find(ELEMENT.ARTICLE + article_id);
             if (target.length > 0) {
                 current.removeClass(CLASS.CURRENT).trigger(TRIGGER.UNLOAD);
                 target.addClass(CLASS.CURRENT).trigger(TRIGGER.LOAD);
                 lng.Element.Current.article = target;
+                //@todo: refacto
+                /*
+                tenemos que asignar el titulo a la section activa
 
-                lng.View.Article.show(section_id, article_id, element);
+                */
+                lng.View.Article.switchNavItems(article_id);
+                lng.View.Article.switchReferenceItems(article_id, lng.Element.Current.section);
             }
         }
     };
@@ -82,8 +79,8 @@ LUNGO.Router = (function(lng, undefined) {
     var aside = function(section_id, aside_id) {
         section_id = lng.Core.parseUrl(section_id);
         aside_id = lng.Core.parseUrl(aside_id);
-        var target = lng.dom(ELEMENT.ASIDE + aside_id);
 
+        var target = lng.Element.asides.siblings(ELEMENT.ASIDE + aside_id);
         if (target.length > 0) {
             var is_visible = target.hasClass(CLASS.CURRENT);
             if (is_visible) {
@@ -106,8 +103,7 @@ LUNGO.Router = (function(lng, undefined) {
         current.removeClass(CLASS.SHOW).trigger(TRIGGER.UNLOAD);
 
         lng.Router.History.removeLast();
-
-        target = lng.dom(lng.Router.History.current());
+        target = lng.Element.sections.siblings(ELEMENT.SECTION + lng.Router.History.current());
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
         lng.Element.Current.section = target;
     };
@@ -123,4 +119,4 @@ LUNGO.Router = (function(lng, undefined) {
         back: back
     };
 
-})(LUNGO);
+})(LUNGO);

src/view/Lungo.View.Article.js

@@ -17,7 +17,8 @@ LUNGO.View.Article = (function(lng, undefined) {
 
     var SELECTORS = {
         NAVIGATION_ITEM: 'a[href][data-target="article"]',
-        REFERENCE_LINK: ' a[href][data-article]'
+        REFERENCE_LINK: ' a[href][data-article]',
+        TITLE_OF_ARTICLE: 'header .title, footer .title'
     };
 
     /**
@@ -27,18 +28,28 @@ LUNGO.View.Article = (function(lng, undefined) {
      */
     var show = function(section_id, article_id, element) {
         if (element) {
-            _setTitle(section_id, element);
-        }
-        _toggleNavItems(section_id, article_id);
-        _showReferenceLinks(section_id, article_id.replace('#', ''));
+            var title = element.data(ATTRIBUTE.TITLE);
 
+            if (title) {
+                lng.Element.Current.section.find(SELECTORS.TITLE_OF_ARTICLE).text(title);
+            }
+        }
         //@todo: Fallback android Inputs
         //lng.Fallback.androidInputs(current_active_article_id, false);
         //lng.Fallback.androidInputs(article_id, true);
     };
 
-    var _showReferenceLinks = function(section_id, article_id) {
-        var links = lng.dom(ELEMENT.SECTION + section_id + SELECTORS.REFERENCE_LINK);
+    var switchNavItems = function(article_id) {
+        lng.Element.Current.section.find(SELECTORS.NAVIGATION_ITEM).removeClass(CLASS.CURRENT);
+
+        var active_nav_items = 'a[href="' + article_id + '"][data-target="article"]';
+        lng.Element.Current.section.find(active_nav_items).addClass(CLASS.CURRENT);
+    };
+
+    var switchReferenceItems = function(article_id, section) {
+        article_id = article_id.replace('#', '');
+
+        var links = section.find(SELECTORS.REFERENCE_LINK);
 
         for (var i = 0, len = links.length; i < len; i++) {
             var link = lng.dom(links[i]);
@@ -50,26 +61,9 @@ LUNGO.View.Article = (function(lng, undefined) {
         }
     };
 
-    var _toggleNavItems = function(section_id, article_id) {
-        var links = lng.dom(ELEMENT.SECTION + section_id + ' ' + SELECTORS.NAVIGATION_ITEM);
-        links.removeClass(CLASS.CURRENT);
-
-        active_items = ELEMENT.SECTION + section_id + ' a[href="' + article_id + '"][data-target="article"]';
-        links = lng.dom(active_items);
-        links.addClass(CLASS.CURRENT);
-    };
-
-    var _setTitle = function(id, item) {
-        var title = item.data(ATTRIBUTE.TITLE);
-
-        if (title) {
-            var section_title = id + ' header .title, ' + id + ' footer .title';
-            lng.dom(section_title).text(title);
-        }
-    };
-
     return {
-        show: show
+        switchReferenceItems: switchReferenceItems,
+        switchNavItems: switchNavItems
     };
 
 })(LUNGO);