Async article load

example/app/articles/products.html

@@ -0,0 +1,22 @@
+ <article id="products" class="list scroll">
+    <ul>
+        <li class="selectable" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
+            <a href="#" data-view-section="quojs">
+                <strong>QuoJS</strong>
+                <small>Micro Mobile JavaScript Library</small>
+            </a>
+        </li>
+        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png" data-view-section="list"  data-async="app/sections/list.html">
+            <strong>TukTuk</strong>
+            <small>Lorem ipsum dolor sit amet</small>
+        </li>
+        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
+            <strong>Monocle</strong>
+            <small>Lorem ipsum dolor sit amet</small>
+        </li>
+        <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
+            <strong>LungoJS</strong>
+            <small>Lorem ipsum dolor sit amet</small>
+        </li>
+    </ul>
+</article>

src/boot/Lungo.Boot.Events.coffee

@@ -53,8 +53,24 @@ Lungo.Boot.Events = do(lng = Lungo) ->
   _onArticle = (event) ->
     event.preventDefault()
     el = lng.dom @
-    lng.Router.article lng.Router.history(), el.data("view-article"), el
-    lng.Aside.hide()
+    if el.data "async"
+      _onAsyncArticle el.data("async"), el.data("view-article")
+    else
+      lng.Router.article lng.Router.history(), el.data("view-article"), el
+      lng.Aside.hide()
+
+  _onAsyncArticle = (url, article_id) ->
+    lng.Notification.show()
+
+    section_id = lng.Element.Cache.section.attr(C.ATTRIBUTE.ID)
+    lng.Resource.load url, C.ELEMENT.SECTION + "#" + section_id
+    lng.Boot.Data.init "##{article_id}"
+    link.removeAttribute("data-async") for link in lng.dom "[data-async='#{url}']"
+    setTimeout (->
+      lng.Router.article section_id, article_id
+      lng.Aside.hide()
+      do lng.Notification.hide
+    ), lng.Constants.TRANSITION.DURATION * 2
 
   _onAside = (event) ->
     event.preventDefault()

src/modules/Lungo.Resource.coffee

@@ -17,7 +17,7 @@ Lungo.Resource = do(lng = Lungo, $$ = Quo) ->
 
   @method start
   ###
-  load = (resource) ->
+  load = (resource, container) ->
     if lng.Core.toType(resource) is "array"
       i = 0
       len = resource.length
@@ -26,15 +26,15 @@ Lungo.Resource = do(lng = Lungo, $$ = Quo) ->
         _load resource[i]
         i++
     else
-      _load resource
+      _load resource, container
 
 
   ###
+  @todo
   ###
-  _load = (resource) ->
+  _load = (resource, container) ->
     try
-      response = _loadSyncResource(resource)
-      _pushResourceInBody response
+      _pushResourceInBody _loadSyncResource(resource), container
     catch error
       lng.Core.log 3, error.message
 
@@ -46,8 +46,9 @@ Lungo.Resource = do(lng = Lungo, $$ = Quo) ->
       error: ->
         console.error ERROR.LOADING_RESOURCE + url
 
-
-  _pushResourceInBody = (section) ->
-    lng.dom(ELEMENT.BODY).append section  if lng.Core.toType(section) is "string"
+  _pushResourceInBody = (markup, container) ->
+    if lng.Core.toType(markup) is "string"
+      container = (if container then container else ELEMENT.BODY)
+      lng.dom(container).append markup
 
   load: load

src/router/Lungo.Router.coffee

@@ -49,7 +49,7 @@ Lungo.Router = do(lng = Lungo) ->
       if target.length > 0
         current.removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
         lng.Element.Cache.article = target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
-        if element.data(C.ATTRIBUTE.TITLE)?
+        if element?.data(C.ATTRIBUTE.TITLE)?
           lng.Element.Cache.section.find(C.QUERY.TITLE).text element.data(C.ATTRIBUTE.TITLE)
         do _url
 

src/stylesheets/lungo.layout.styl

@@ -24,10 +24,14 @@ aside, section
     box-flex(0)
     z-index: 3
     position: relative
+  & > header
+    ordinal-group(1)
   & > article
     box-flex(1)
+    ordinal-group(2)
     z-index: 0
-
+  & > footer
+    ordinal-group(3)
 
 /* ========================================================================= */
 /* ================================ SECTION ================================ */