Set current for data-target element in aside

examples/test/app/resources/sections/features.html

@@ -2,6 +2,22 @@
     <header data-title="Features"></header>
     <article class="list scroll">
         <ul>
+            <li>
+                <a href="#art-1" data-target="article">
+                    <strong>Art-1</strong>
+                </a>
+            </li>
+            <li>
+                <a href="#art-2" data-target="article">
+                    <strong>Art-2</strong>
+                </a>
+            </li>
+            <li>
+                <a href="#art-3" data-target="article">
+                    <strong>Art-3</strong>
+                </a>
+            </li>
+
             <!-- Basic Layout -->
             <li>
                 <a href="#list" data-target="section">

examples/test/kitchensink.html

@@ -62,7 +62,8 @@
         </header>
 
         <article id="art-1" data-loading="black"></article>
-
+        <article id="art-2" data-loading="white"></article>
+        <article id="art-3" data-loading="black"></article>
     </section>
 
     <!-- Lungo dependencies -->

src/Lungo.Constants.js

@@ -16,6 +16,7 @@ Lungo.Constants = {
         BODY: 'body',
         DIV: 'div',
         LIST: '<ul></ul>',
+        LI: 'li',
         SPAN: '<span>&nbsp;</span>'
     },
 

src/boot/Lungo.Boot.Events.js

@@ -92,6 +92,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
     };
 
     var _hideAsideIfNecesary = function(event) {
+        //@TODO: refactor
         if (window.innerWidth < 768) lng.View.Aside.hide();
 
         if (event) event.preventDefault();

src/stylesheets/Lungo.theme.scaffold.less

@@ -132,21 +132,22 @@ aside {
             color: #F0F0F0;
             border-bottom: 1px solid #2f2f2f;
 
+            &.current { background: @theme-light; }
+
             & strong {
                 text-shadow: 0 1px 1px black;
                 color: #fff;
             }
 
-            & small {
-                color:  rgba(255,255,255,0.3);
-            }
+            & small { color:  rgba(255,255,255,0.3); }
         }
     }
     & a {
         color: @theme;
     }
+
     & a.current {
-        background: #2f2f2f;
+        background: @theme-light;
         color: @white;
     }
 }

src/stylesheets/css/Lungo.theme.scaffold.css

@@ -130,6 +130,9 @@ aside .list li {
   color: #F0F0F0;
   border-bottom: 1px solid #2f2f2f;
 }
+aside .list li.current {
+  background: #cccccc;
+}
 aside .list li strong {
   text-shadow: 0 1px 1px black;
   color: #fff;
@@ -141,7 +144,7 @@ aside a {
   color: #999999;
 }
 aside a.current {
-  background: #2f2f2f;
+  background: #cccccc;
   color: #ffffff;
 }
 section.aside {

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]',
-        TITLE_OF_ARTICLE: 'header .title, footer .title'
+        TITLE_OF_ARTICLE: 'header .title, footer .title',
+        ASIDE_REFERENCE_LIST: 'li a.current, li.current'
     };
 
     /**
@@ -39,6 +40,13 @@ Lungo.View.Article = (function(lng, undefined) {
 
         var active_nav_items = 'a[href="' + article_id + '"][data-target="article"]';
         lng.Element.Current.section.find(active_nav_items).addClass(CLASS.CURRENT);
+
+        if (lng.Element.Current.aside) {
+            aside = lng.Element.Current.aside;
+
+            aside.find(SELECTORS.ASIDE_REFERENCE_LIST).removeClass(CLASS.CURRENT);
+            aside.find(active_nav_items).addClass(CLASS.CURRENT).parent().addClass(CLASS.CURRENT);
+        }
     };
 
     var switchReferenceItems = function(article_id, section) {