Fix aside navigation

example/app/asides/features.html

@@ -8,145 +8,109 @@
     <article class="list scroll active">
         <ul>
             <!-- Basic Layout -->
-            <li class="active" data-view-article="main-article" data-title="Lungo Framework">
-                <a href="#">
-                    <strong>Meet the framework</strong>
-                </a>
+            <li data-view-article="main-article" data-title="Lungo Framework">
+                <strong>Meet the framework</strong>
             </li>
 
             <!-- Layout & Navigation -->
             <li data-view-section="layout" data-async="app/sections/layout.html">
-                <a href="#">
-                    <strong>Layout</strong>
-                    <div class="tag right">5</div>
-                </a>
+                <strong>Layout</strong>
+                <div class="tag right">5</div>
             </li>
 
             <!-- List -->
-            <li>
-                <a href="#" data-view-article="list" data-async="app/articles/list.html">
-                    <strong>Lists</strong>
-                    <div class="tag right">22</div>
-                </a>
+            <li data-view-article="list" data-async="app/articles/list.html">
+                <strong>Lists</strong>
+                <div class="tag right">22</div>
             </li>
 
             <!-- Forms -->
-            <li>
-                <a href="#" data-view-section="form" data-async="app/sections/form.html">
-                    <div class="tag right">8</div>
-                    <strong>Form Elements</strong>
-                </a>
+            <li data-view-section="form" data-async="app/sections/form.html">
+                <div class="tag right">8</div>
+                <strong>Form Elements</strong>
             </li>
 
             <!-- Asides -->
-            <li>
-                <a href="#" data-view-section="aside" data-async="app/sections/aside.html">
-                    <div class="tag right">8</div>
-                    <strong>Asides</strong>
-                </a>
+            <li data-view-section="aside" data-async="app/sections/aside.html">
+                <div class="tag right">8</div>
+                <strong>Asides</strong>
             </li>
 
             <!-- Menu -->
-            <li>
-                <a href="#" data-view-section="menu" data-async="app/sections/menu.html">
-                    <div class="tag right">1</div>
-                    <strong>Menu</strong>
-                </a>
+            <li data-view-section="menu" data-async="app/sections/menu.html">
+                <div class="tag right">1</div>
+                <strong>Menu</strong>
             </li>
 
             <!-- Data-Attributes -->
-            <li>
-                <a href="#" data-view-article="data" data-async="app/articles/data.html">
-                    <div class="tag right">9</div>
-                    <strong>Data-attributes</strong>
-                </a>
+            <li data-view-article="data" data-async="app/articles/data.html">
+                <div class="tag right">9</div>
+                <strong>Data-attributes</strong>
             </li>
 
             <!-- Icons -->
-            <li>
-                <a href="#" data-view-article="icons" data-async="app/articles/icon.html">
-                    <div class="tag right">109</div>
-                    <strong>Icons</strong>
-                </a>
+            <li data-view-article="icons" data-async="app/articles/icon.html">
+                <div class="tag right">109</div>
+                <strong>Icons</strong>
             </li>
 
             <!-- Scrolls -->
-            <li>
-                <a href="#scroll" data-router="section" data-async="app/sections/scroll.html">
-                    <div class="tag right">2</div>
-                    <strong>Scrolls</strong>
-                </a>
+            <li data-view-section="scroll" data-async="app/sections/scroll.html">
+                <div class="tag right">2</div>
+                <strong>Scrolls</strong>
             </li>
 
             <!-- Touch Events -->
-            <li>
-                <a href="#" data-view-article="touchevents" data-async="app/articles/touchevents.html">
-                    <div class="tag right">19</div>
-                    <strong>Touch Events</strong>
-                </a>
+            <li data-view-article="touchevents" data-async="app/articles/touchevents.html">
+                <div class="tag right">19</div>
+                <strong>Touch Events</strong>
             </li>
 
             <!-- Layout Events -->
-            <li>
-                <a href="#" data-view-section="layoutevents" data-async="app/sections/layoutevents.html">
-                    <div class="tag right">2</div>
-                    <strong>Layout Events</strong>
-                </a>
+            <li data-view-section="layoutevents" data-async="app/sections/layoutevents.html">
+                <div class="tag right">2</div>
+                <strong>Layout Events</strong>
             </li>
 
             <!-- Notifications -->
-            <li>
-                <a href="#" data-view-article="notification" data-async="app/articles/notification.html">
-                    <div class="tag right">8</div>
-                    <strong>Notifications</strong>
-                </a>
+            <li data-view-article="notification" data-async="app/articles/notification.html">
+                <div class="tag right">8</div>
+                <strong>Notifications</strong>
             </li>
 
             <!-- Pull & Refresh -->
-            <li>
-                <a href="#" data-view-section="pull" data-async="app/sections/pull.html">
-                    <div class="tag right">1</div>
-                    <strong>Pull & Refresh</strong>
-                </a>
+            <li  data-view-section="pull" data-async="app/sections/pull.html">
+                <div class="tag right">1</div>
+                <strong>Pull & Refresh</strong>
             </li>
 
             <!-- Carousel -->
-            <li>
-                <a href="#" data-view-section="carousel" data-async="app/sections/carousel.html">
-                    <div class="tag right">1</div>
-                    <strong>Carousel</strong>
-                </a>
+            <li data-view-section="carousel" data-async="app/sections/carousel.html">
+                <div class="tag right">1</div>
+                <strong>Carousel</strong>
             </li>
 
             <!-- Environment -->
-            <li>
-                <a href="#" data-view-article="environment" data-async="app/articles/environment.html">
-                    <div class="tag right">1</div>
-                    <strong>Environment</strong>
-                </a>
+            <li data-view-article="environment" data-async="app/articles/environment.html">
+                <div class="tag right">1</div>
+                <strong>Environment</strong>
             </li>
 
             <!-- Buttons & Colours -->
-            <li>
-                <a href="#" data-view-article="buttons" data-async="app/articles/buttons.html">
-                    <div class="tag right">14</div>
-                    <strong>Buttons & Colours</strong>
-                </a>
+            <li data-view-article="buttons" data-async="app/articles/buttons.html">
+                <div class="tag right">14</div>
+                <strong>Buttons & Colours</strong>
             </li>
 
             <!-- Theme roller -->
-            <li>
-                <a href="#" data-view-article="themeroller" data-async="app/articles/theme.html">
-                    <div class="tag right">4</div>
-                    <strong>Theme roller</strong>
-                </a>
+            <li  data-view-article="themeroller" data-async="app/articles/theme.html">
+                <div class="tag right">4</div>
+                <strong>Theme roller</strong>
             </li>
 
             <!-- Grid System -->
-            <li>
-                <a href="#" data-view-article="grid" data-async="app/articles/grid.html">
-                    <strong>Grid System</strong>
-                </a>
+            <li data-view-article="grid" data-async="app/articles/grid.html">
+                <strong>Grid System</strong>
             </li>
         </ul>
     </article>

example/app/sections/carousel.html

@@ -1,8 +1,5 @@
 <section id="carousel" data-transition="slide">
-    <header>
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
+    <header data-back="home">
         <div class="centered title">Photo Nº<span>1</span></div>
 
         <nav class="right">

example/app/sections/list.html

@@ -1,9 +1,5 @@
 <section id="list" data-transition="slide">
-    <header data-title="Lists" class="extended">
-        <nav>
-            <a href="#" data-view-section="back" data-icon="home"></a>
-        </nav>
-    </header>
+    <header data-title="Lists" class="extended"  data-back="home"></header>
 
     <nav class="groupbar">
         <a href="#" data-view-article="list-normal" class="active" data-icon="checkmark" data-label="Normal"></a>

example/app/sections/scroll.html

@@ -1,13 +1,9 @@
 <section id="scroll" data-transition="slide">
-    <header data-title="Scrolls">
-        <nav>
-            <a href="#back" data-router="section" data-icon="home"></a>
-        </nav>
-    </header>
+    <header data-title="Scrolls"  data-back="home"></header>
 
     <article class="active">
         <h1 class="one row ">.scroll stylesheet class</h1>
-        <ul class=" four row scroll anchor">
+        <ul class="four row scroll anchor">
             <img src="http://lorempixel.com/256/128/food/">
             <img src="http://lorempixel.com/256/128/sports/">
             <img src="http://lorempixel.com/256/128/people/">

src/router/Lungo.Router.coffee

@@ -102,11 +102,11 @@ Lungo.Router = do(lng = Lungo) ->
     setTimeout (-> window.location.hash = _hashed_url), 0
     do _updateNavigationElements
 
-  _updateNavigationElements = (element) ->
+  _updateNavigationElements = ->
     article_id = lng.Element.Cache.article.attr C.ATTRIBUTE.ID
-    lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE).siblings("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
-    lng.dom(C.QUERY.ARTICLE_REFERENCE).hide()
-    lng.dom("[data-article=#{article_id}]").style("display", "-webkit-box")
+
+    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")
 
   _removeLast = -> _history.length -= 1