data-article for multiple articles (in current section)

example/app/articles/icon-brand.html

@@ -0,0 +1,242 @@
+<article id="icons-brands" class="list scroll indented">
+    <ul>
+        <li data-icon="brand google-plus">
+            <a href="#">
+            <strong>google-plus</strong>
+            <small>class .brand.google-plus</small>
+            </a>
+        </li>
+        <li data-icon="brand facebook">
+            <a href="#">
+            <strong>facebook</strong>
+            <small>class .brand.facebook</small>
+            </a>
+        </li>
+        <li data-icon="brand twitter">
+            <a href="#">
+            <strong>twitter</strong>
+            <small>class .brand.twitter</small>
+            </a>
+        </li>
+         <li data-icon="brand feed">
+            <a href="#">
+            <strong>feed</strong>
+            <small>class .brand.feed</small>
+            </a>
+        </li>
+        <li data-icon="brand vimeo">
+            <a href="#">
+            <strong>vimeo</strong>
+            <small>class .brand.vimeo</small>
+            </a>
+        </li>
+        <li data-icon="brand flickr">
+            <a href="#">
+            <strong>flickr</strong>
+            <small>class .brand.flickr</small>
+            </a>
+        </li>
+        <li data-icon="brand dribbble">
+            <a href="#">
+            <strong>dribbble</strong>
+            <small>class .brand.dribbble</small>
+            </a>
+        </li>
+        <li data-icon="brand forrst">
+            <a href="#">
+            <strong>forrst</strong>
+            <small>class .brand.forrst</small>
+            </a>
+        </li>
+        <li data-icon="brand deviantart">
+            <a href="#">
+            <strong>deviantart</strong>
+            <small>class .brand.deviantart</small>
+            </a>
+        </li>
+        <li data-icon="brand github">
+            <a href="#">
+            <strong>github</strong>
+            <small>class .brand.github</small>
+            </a>
+        </li>
+
+        <li data-icon="brand git">
+            <a href="#">
+            <strong>git</strong>
+            <small>class .brand.git</small>
+            </a>
+        </li>
+
+        <li data-icon="brand branch">
+            <a href="#">
+            <strong>branch</strong>
+            <small>class .brand.branch</small>
+            </a>
+        </li>
+
+        <li data-icon="brand fork">
+            <a href="#">
+            <strong>fork</strong>
+            <small>class .brand.fork</small>
+            </a>
+        </li>
+
+        <li data-icon="brand apple">
+            <a href="#">
+            <strong>apple</strong>
+            <small>class .brand.apple</small>
+            </a>
+        </li>
+        <li data-icon="brand android">
+            <a href="#">
+            <strong>android</strong>
+            <small>class .brand.android</small>
+            </a>
+        </li>
+        <li data-icon="brand windows">
+            <a href="#">
+            <strong>windows</strong>
+            <small>class .brand.windows</small>
+            </a>
+        </li>
+        <li data-icon="brand skype">
+            <a href="#">
+            <strong>skype</strong>
+            <small>class .brand.skype</small>
+            </a>
+        </li>
+        <li data-icon="brand linkedin">
+            <a href="#">
+            <strong>linkedin</strong>
+            <small>class .brand.linkedin</small>
+            </a>
+        </li>
+        <li data-icon="brand html5">
+            <a href="#">
+            <strong>html5</strong>
+            <small>class .brand.html5</small>
+            </a>
+        </li>
+
+        <li data-icon="brand css3">
+            <a href="#">
+            <strong>css3</strong>
+            <small>class .brand.css3</small>
+            </a>
+        </li>
+        <li data-icon="brand chrome">
+            <a href="#">
+            <strong>chrome</strong>
+            <small>class .brand.chrome</small>
+            </a>
+        </li>
+        <li data-icon="brand firefox">
+            <a href="#">
+            <strong>firefox</strong>
+            <small>class .brand.firefox</small>
+            </a>
+        </li>
+        <li data-icon="brand IE">
+            <a href="#">
+            <strong>IE</strong>
+            <small>class .brand.IE</small>
+            </a>
+        </li>
+        <li data-icon="brand opera">
+            <a href="#">
+            <strong>opera</strong>
+            <small>class .brand.opera</small>
+            </a>
+        </li>
+
+        <li data-icon="brand wordpress">
+            <a href="#">
+            <strong>wordpress</strong>
+            <small>class .brand.wordpress</small>
+            </a>
+        </li>
+    </ul>
+    <ul>
+        <li class="anchor">Variations</li>
+        <li data-icon="brand google-plus-2">
+            <a href="#">
+            <strong>google-plus-2</strong>
+            <small>class .brand.google-plus-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand twitter-2">
+            <a href="#">
+            <strong>twitter-2</strong>
+            <small>class .brand.twitter-2</small>
+            </a>
+        </li>
+        <li data-icon="brand facebook-2">
+            <a href="#">
+            <strong>facebook-2</strong>
+            <small>class .brand.facebook-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand feed-2">
+            <a href="#">
+            <strong>feed-2</strong>
+            <small>class .brand.feed-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand vimeo-2">
+            <a href="#">
+            <strong>vimeo-2</strong>
+            <small>class .brand.vimeo-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand flickr-2">
+            <a href="#">
+            <strong>flickr-2</strong>
+            <small>class .brand.flickr-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand dribbble-2">
+            <a href="#">
+            <strong>dribbble-2</strong>
+            <small>class .brand.dribbble-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand deviantart-2">
+            <a href="#">
+            <strong>deviantart-2</strong>
+            <small>class .brand.deviantart-2</small>
+            </a>
+        </li>
+        <li data-icon="brand git-2">
+            <a href="#">
+            <strong>git-2</strong>
+            <small>class .brand.git-2</small>
+            </a>
+        </li>
+        <li data-icon="brand github-2">
+            <a href="#">
+            <strong>github-2</strong>
+            <small>class .brand.github-2</small>
+            </a>
+        </li>
+        <li data-icon="brand wordpress-2">
+            <a href="#">
+            <strong>wordpress-2</strong>
+            <small>class .brand.wordpress-2</small>
+            </a>
+        </li>
+
+        <li data-icon="brand html5-2">
+            <a href="#">
+            <strong>html5-2</strong>
+            <small>class .brand.html5-2</small>
+            </a>
+        </li>
+    </ul>
+</article>

example/app/articles/icon.html

@@ -1,8 +1,3 @@
-<nav data-control="groupbar" data-article="icons">
-    <a href="#" data-view-article="icons" data-label="Normal" data-count="72"></a>
-    <a href="#" data-view-article="icons-brands" data-label="Brands" data-count="37" ></a>
-</nav>
-
 <article id="icons" class="list scroll indented">
     <ul>
         <li data-icon="home">
@@ -380,245 +375,3 @@
     </ul>
 </article>
 
-<article id="icons-brands" class="list scroll indented">
-    <ul>
-        <li data-icon="brand google-plus">
-            <a href="#">
-            <strong>google-plus</strong>
-            <small>class .brand.google-plus</small>
-            </a>
-        </li>
-        <li data-icon="brand facebook">
-            <a href="#">
-            <strong>facebook</strong>
-            <small>class .brand.facebook</small>
-            </a>
-        </li>
-        <li data-icon="brand twitter">
-            <a href="#">
-            <strong>twitter</strong>
-            <small>class .brand.twitter</small>
-            </a>
-        </li>
-         <li data-icon="brand feed">
-            <a href="#">
-            <strong>feed</strong>
-            <small>class .brand.feed</small>
-            </a>
-        </li>
-        <li data-icon="brand vimeo">
-            <a href="#">
-            <strong>vimeo</strong>
-            <small>class .brand.vimeo</small>
-            </a>
-        </li>
-        <li data-icon="brand flickr">
-            <a href="#">
-            <strong>flickr</strong>
-            <small>class .brand.flickr</small>
-            </a>
-        </li>
-        <li data-icon="brand dribbble">
-            <a href="#">
-            <strong>dribbble</strong>
-            <small>class .brand.dribbble</small>
-            </a>
-        </li>
-        <li data-icon="brand forrst">
-            <a href="#">
-            <strong>forrst</strong>
-            <small>class .brand.forrst</small>
-            </a>
-        </li>
-        <li data-icon="brand deviantart">
-            <a href="#">
-            <strong>deviantart</strong>
-            <small>class .brand.deviantart</small>
-            </a>
-        </li>
-        <li data-icon="brand github">
-            <a href="#">
-            <strong>github</strong>
-            <small>class .brand.github</small>
-            </a>
-        </li>
-
-        <li data-icon="brand git">
-            <a href="#">
-            <strong>git</strong>
-            <small>class .brand.git</small>
-            </a>
-        </li>
-
-        <li data-icon="brand branch">
-            <a href="#">
-            <strong>branch</strong>
-            <small>class .brand.branch</small>
-            </a>
-        </li>
-
-        <li data-icon="brand fork">
-            <a href="#">
-            <strong>fork</strong>
-            <small>class .brand.fork</small>
-            </a>
-        </li>
-
-        <li data-icon="brand apple">
-            <a href="#">
-            <strong>apple</strong>
-            <small>class .brand.apple</small>
-            </a>
-        </li>
-        <li data-icon="brand android">
-            <a href="#">
-            <strong>android</strong>
-            <small>class .brand.android</small>
-            </a>
-        </li>
-        <li data-icon="brand windows">
-            <a href="#">
-            <strong>windows</strong>
-            <small>class .brand.windows</small>
-            </a>
-        </li>
-        <li data-icon="brand skype">
-            <a href="#">
-            <strong>skype</strong>
-            <small>class .brand.skype</small>
-            </a>
-        </li>
-        <li data-icon="brand linkedin">
-            <a href="#">
-            <strong>linkedin</strong>
-            <small>class .brand.linkedin</small>
-            </a>
-        </li>
-        <li data-icon="brand html5">
-            <a href="#">
-            <strong>html5</strong>
-            <small>class .brand.html5</small>
-            </a>
-        </li>
-
-        <li data-icon="brand css3">
-            <a href="#">
-            <strong>css3</strong>
-            <small>class .brand.css3</small>
-            </a>
-        </li>
-        <li data-icon="brand chrome">
-            <a href="#">
-            <strong>chrome</strong>
-            <small>class .brand.chrome</small>
-            </a>
-        </li>
-        <li data-icon="brand firefox">
-            <a href="#">
-            <strong>firefox</strong>
-            <small>class .brand.firefox</small>
-            </a>
-        </li>
-        <li data-icon="brand IE">
-            <a href="#">
-            <strong>IE</strong>
-            <small>class .brand.IE</small>
-            </a>
-        </li>
-        <li data-icon="brand opera">
-            <a href="#">
-            <strong>opera</strong>
-            <small>class .brand.opera</small>
-            </a>
-        </li>
-
-        <li data-icon="brand wordpress">
-            <a href="#">
-            <strong>wordpress</strong>
-            <small>class .brand.wordpress</small>
-            </a>
-        </li>
-    </ul>
-    <ul>
-        <li class="anchor">Variations</li>
-        <li data-icon="brand google-plus-2">
-            <a href="#">
-            <strong>google-plus-2</strong>
-            <small>class .brand.google-plus-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand twitter-2">
-            <a href="#">
-            <strong>twitter-2</strong>
-            <small>class .brand.twitter-2</small>
-            </a>
-        </li>
-        <li data-icon="brand facebook-2">
-            <a href="#">
-            <strong>facebook-2</strong>
-            <small>class .brand.facebook-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand feed-2">
-            <a href="#">
-            <strong>feed-2</strong>
-            <small>class .brand.feed-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand vimeo-2">
-            <a href="#">
-            <strong>vimeo-2</strong>
-            <small>class .brand.vimeo-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand flickr-2">
-            <a href="#">
-            <strong>flickr-2</strong>
-            <small>class .brand.flickr-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand dribbble-2">
-            <a href="#">
-            <strong>dribbble-2</strong>
-            <small>class .brand.dribbble-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand deviantart-2">
-            <a href="#">
-            <strong>deviantart-2</strong>
-            <small>class .brand.deviantart-2</small>
-            </a>
-        </li>
-        <li data-icon="brand git-2">
-            <a href="#">
-            <strong>git-2</strong>
-            <small>class .brand.git-2</small>
-            </a>
-        </li>
-        <li data-icon="brand github-2">
-            <a href="#">
-            <strong>github-2</strong>
-            <small>class .brand.github-2</small>
-            </a>
-        </li>
-        <li data-icon="brand wordpress-2">
-            <a href="#">
-            <strong>wordpress-2</strong>
-            <small>class .brand.wordpress-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand html5-2">
-            <a href="#">
-            <strong>html5-2</strong>
-            <small>class .brand.html5-2</small>
-            </a>
-        </li>
-    </ul>
-</article>

example/app/articles/list.html

@@ -1,9 +1,5 @@
 
-<nav data-control="groupbar" data-article="list list-indented list-examples">
-    <a href="#" data-view-article="list" data-icon="checkmark" data-label="Normal"></a>
-    <a href="#" data-view-article="list-indented" data-label="Indented"></a>
-    <a href="#" data-view-article="list-examples" data-label="Examples"></a>
-</nav>
+
 
 <article id="list" class="active list scroll">
     <ul>

example/flexbox.html

@@ -144,7 +144,7 @@
     </section>
 
 
-    <section id='folk' data-transition="slide" data-aside="features">
+    <section id='folk' data-transition="slide" data-aside="features" data-children="x">
         <header data-title='Javi Jimenez'>
             <nav>
                 <a href="#" data-view-section="back" data-label="Back" class="button"></a>
@@ -271,7 +271,7 @@
         Lungo.init({
             name: 'Flexbox',
             version: '2.2',
-            history: false
+            history: true
             //,
             // resources: ['app/sections/list.html']
         });

example/index.html

@@ -69,6 +69,17 @@
             </nav>
         </header>
 
+        <nav data-control="groupbar" data-article="icons icons-brands">
+            <a href="#" data-view-article="icons" data-label="Normal" data-count="72"></a>
+            <a href="#" data-view-article="icons-brands" data-label="Brands" data-count="37" data-async="app/articles/icon-brand.html" ></a>
+        </nav>
+
+        <nav data-control="groupbar" data-article="list list-indented list-examples">
+            <a href="#" data-view-article="list" data-icon="checkmark" data-label="Normal"></a>
+            <a href="#" data-view-article="list-indented" data-label="Indented"></a>
+            <a href="#" data-view-article="list-examples" data-label="Examples"></a>
+        </nav>
+
         <article id="main-article" class="list indented scroll">
             <ul>
                 <li class="dark">

src/router/Lungo.Router.coffee

@@ -106,7 +106,9 @@ Lungo.Router = do(lng = Lungo) ->
     article_id = lng.Element.Cache.article.attr C.ATTRIBUTE.ID
 
     lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE).filter("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
-    lng.dom(C.QUERY.ARTICLE_REFERENCE).hide().filter("[data-article=#{article_id}]").style("display", "-webkit-box")
+
+    nav = lng.Element.Cache.section.find(C.QUERY.ARTICLE_REFERENCE).addClass C.CLASS.HIDE
+    nav.filter("[data-article*='#{article_id}']").removeClass C.CLASS.HIDE
 
   _removeLast = -> _history.length -= 1
 

src/stylesheets/lungo.widgets.styl

@@ -9,6 +9,10 @@
 
 @import "constants.styl"
 
+[data-article].hide
+  display: none
+
+
 .overthrow-enabled .overthrow
   overflow: auto
   -webkit-overflow-scrolling: touch