Resources async load via data-async attribute

kitchen-sink/app/asides/features.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article class="list scroll">
+    <article class="list scroll active">
         <ul>
             <!-- Basic Layout -->
             <li>

kitchen-sink/app/sections/layout.html

@@ -9,7 +9,7 @@
     </header>
 
     <nav class="groupbar">
-        <a href="#layout-art1" data-router="article" class="active" data-label="Profile"></a>
+        <a href="#layout-art1" data-router="article" data-label="Profile"></a>
         <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
         <a href="#layout-art3" data-router="article" data-label="Map"></a>
         <a href="#layout-art4" data-router="article" data-label="Settings"></a>
@@ -17,14 +17,14 @@
 
     <footer>
         <nav>
-            <a href="#layout-art1" data-router="article" class="active" data-icon="home"></a>
-            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="80"></a>
+            <a href="#layout-art1" data-router="article"  data-icon="home"></a>
+            <a href="#layout-art2" data-router="article" class="active" data-icon="inbox" data-count="80"></a>
             <a href="#layout-art3" data-router="article" data-icon="compass"></a>
             <a href="#layout-art4" data-router="article" data-icon="settings"></a>
         </nav>
     </footer>
 
-    <article id="layout-art1"></article>
+    <article id="layout-art1" class="active"></article>
     <article id="layout-art2"></article>
     <article id="layout-art3"></article>
     <article id="layout-art4"></article>

kitchen-sink/app/sections/list.html

@@ -10,7 +10,7 @@
         <a href="#list-indented" data-router="article" data-label="Indented"></a>
     </nav>
 
-    <article id="list-normal" class="list scroll">
+    <article id="list-normal" class="active list scroll">
         <ul>
             <li>
                 <strong>&lt;li&gt; + &lt;strong&gt; </strong>

kitchen-sink/app/sections/pull.html

@@ -5,7 +5,7 @@
         </nav>
     </header>
 
-    <article class="list indented">
+    <article class="active list indented">
         <ul>
              <li class="dark" data-icon="help">
                     <strong>

kitchen-sink/app/sections/splash.html

@@ -1,5 +1,5 @@
 <section id="splash" data-transition="slide">
-    <article class="indented splash">
+    <article class="active indented splash">
         <img src="http://lungo.tapquo.com/resources/logo_splash.png"/>
         <form class="rounded">
             <input type="text" placeholder="Your username" id="txt-signup-name" value="">

kitchen-sink/index.html

@@ -71,10 +71,11 @@
     <section id="main" data-transition="slide">
         <header>
             <nav class="left box">
-                <a href="#features" data-router="aside" data-icon="menu"></a>
+                <a href="#features" data-router="aside" data-async="app/asides/features.html" data-icon="menu"></a>
+                <a href="#layout" data-router="section" data-async="app/sections/layout.html" data-icon="down"></a>
             </nav>
             <div class="left">
-                <div class="centered title">Recibidos</div>
+                <div class="centered title">Recibidos 2</div>
             </div>
 
             <nav class="right box">
@@ -82,7 +83,7 @@
             </nav>
         </header>
 
-        <article id="second-article" class="list  scroll">
+        <article id="second-article" class=" list  scroll">
             <ul>
                 <li class="feature">
                     <div class="right  ">15:49</div>
@@ -123,7 +124,7 @@
             </ul>
         </article>
 
-        <article id="main-article" class="list indented scroll">
+        <article id="main-article" class="active list indented scroll">
             <ul>
                 <li class="dark">
                     <strong>
@@ -196,16 +197,13 @@
     <script src="../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../src/boot/Lungo.Boot.Article.js"></script>
 
-    <!--
     <script src="../src/Lungo.Scroll.js"></script>
-    -->
 
     <!-- LungoJS - Sandbox App -->
     <script>
         Lungo.init({
             name: 'Kitchen Sink',
             version: '2.0',
-            sugars: ['map', 'pull'],
             resources: ['app/sections/layout.html',
                         'app/sections/notification.html',
                         'app/sections/list.html',
@@ -222,7 +220,9 @@
                         'app/sections/pull.html',
                         'app/sections/carousel.html',
                         'app/sections/environment.html',
+                        /*
                         'app/asides/features.html',
+                        */
                         'app/asides/left.html',
                         'app/asides/right.html']
 
@@ -233,6 +233,8 @@
         <script src="app/events.touch.js"></script>
         <script src="app/events.pull.js"></script>
         <script src="app/events.carousel.js"></script>
+        <!--
         <script src="app/events.trigger.js"></script>
+    -->
 </body>
 </html>

src/boot/Lungo.Boot.Events.js

@@ -26,24 +26,25 @@ Lungo.Boot.Events = (function(lng, undefined) {
      *
      */
     var init = function() {
-        var touch_move_event  = 'touchmove';
-        var resize = 'resize';
-
-        lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
+        lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         lng.dom(SELECTORS.INPUT_CHECKBOX).touch(_changeCheckboxValue);
     };
 
     var _loadTarget = function(event) {
         event.preventDefault();
         var link = lng.dom(this);
-        _selectTarget(link);
+
+        if (link.data("async")) {
+            _loadAsyncTarget(link);
+        } else {
+            _selectTarget(link);
+        }
     };
 
     var _hideAsideIfNecesary = function(event) {
-        //@TODO: refactor
-        if (window.innerWidth < 768) lng.View.Aside.hide();
-        if (event) event.preventDefault();
+        event.preventDefault();
+        lng.View.Aside.hide();
     };
 
     var _changeCheckboxValue = function(event)  {
@@ -55,7 +56,6 @@ Lungo.Boot.Events = (function(lng, undefined) {
 
     var _selectTarget = function(link) {
         var target_type = link.data(ATTRIBUTE.ROUTER);
-
         switch(target_type) {
             case ELEMENT.SECTION:
                 var target_id = link.attr(ATTRIBUTE.HREF);
@@ -72,21 +72,24 @@ Lungo.Boot.Events = (function(lng, undefined) {
         }
     };
 
-    var _goSection = function(id) {
-        _hideAsideIfNecesary();
+    var _loadAsyncTarget = function(link) {
+        lng.Notification.show();
+        lng.Boot.Resources.load(link.data("async"));
+        link[0].removeAttribute("data-async");
+        lng.Boot.Data.init( link.attr(ATTRIBUTE.HREF) );
+
+        setTimeout(function() {
+            _selectTarget(link);
+            lng.Notification.hide();
+        }, lng.Constants.TRANSITION.DURATION * 2);
+    };
 
+    var _goSection = function(id) {
         id = lng.Core.parseUrl(id);
         if (id === '#back') {
             lng.Router.back();
         } else {
-            var aside = lng.Element.Cache.aside;
-            if (aside && aside.hasClass(CLASS.SHOW)) {
-                setTimeout(function(){
-                    lng.Router.section(id);
-                }, 250);
-            } else {
-                lng.Router.section(id);
-            }
+            lng.Router.section(id);
         }
     };
 
@@ -104,7 +107,6 @@ Lungo.Boot.Events = (function(lng, undefined) {
         lng.Router.aside(section_id, aside_id);
     };
 
-
     return {
         init: init
     };

src/boot/Lungo.Boot.Layout.js

@@ -23,14 +23,12 @@ Lungo.Boot.Layout = (function(lng, undefined) {
      */
     var init = function() {
         if (lng.Core.isMobile()) {
-            _window = window;
-            _document = _window.document;
-
             _resizeLayout();
         }
     };
 
     var _resizeLayout = function() {
+        _window = window;
         if (_window.innerHeight == 356) {
             var _height = 416;
 
@@ -40,7 +38,9 @@ Lungo.Boot.Layout = (function(lng, undefined) {
     };
 
     var _hideNavigationBar = function() {
-        if( !location.hash || !_window.addEventListener ){
+        if( !location.hash || !_window.addEventListener ) {
+            _document = _window.document;
+
             _window.scrollTo( 0, 1 );
             var scrollTop = 1,
 

src/boot/Lungo.Boot.Resources.js

@@ -25,14 +25,19 @@ Lungo.Boot.Resources = (function(lng, $$, undefined) {
      */
     var init = function(resources) {
         for (var i=0, len=resources.length; i < len; i++) {
-            resource = resources[i];
-            try {
-                var response = _loadSyncResource(resource);
-                _pushResourceInBody(response);
-            } catch(error) {
-                lng.Core.log(3, error.message);
-            }
+            load(resources[i]);
+        }
+    };
 
+    /**
+     *
+     */
+    var load = function(resource) {
+        try {
+            var response = _loadSyncResource(resource);
+            _pushResourceInBody(response);
+        } catch(error) {
+            lng.Core.log(3, error.message);
         }
     };
 
@@ -54,7 +59,8 @@ Lungo.Boot.Resources = (function(lng, $$, undefined) {
     };
 
     return {
-        init: init
+        init: init,
+        load: load
     };
 
 })(Lungo, Quo);

src/boot/Lungo.Boot.Section.js

@@ -27,7 +27,7 @@ Lungo.Boot.Section = (function(lng, undefined) {
     };
 
     var _initFirstSection = function() {
-        var section = lng.Element.Cache.sections.first().addClass(CLASS.SHOW);
+        var section = lng.dom(ELEMENT.SECTION).first().addClass(CLASS.SHOW);
         lng.Element.Cache.section = section;
         lng.Element.Cache.article = section.children(ELEMENT.ARTICLE + "." + CLASS.ACTIVE);
 
@@ -36,7 +36,6 @@ Lungo.Boot.Section = (function(lng, undefined) {
     };
 
     var _cacheDOMElements = function() {
-        lng.Element.Cache.sections = lng.dom(ELEMENT.SECTION);
         lng.Element.Cache.asides = lng.dom(ELEMENT.ASIDE);
     };