New controller for aside element

examples/test/app/sections/aside.html

@@ -1,4 +1,4 @@
-<aside id="kitchen-sink-scroll" class="scroll small">
+<aside id="kitchen-sink-scroll" class=" small">
     <ul>
         <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
         <a href="#nav-2" data-target="article" data-icon="calendar"></a>
@@ -6,14 +6,6 @@
         <a href="#icons" data-target="article" data-icon="picture" data-count="94"></a>
         <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6"></a>
         <a href="#forms" data-target="section" data-icon="edit" data-count="7"></a>
-        <a href="#lists" data-target="section" data-icon="items" data-count="5"></a>
-        <a href="#events" data-target="article" data-icon="user"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
-        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#lists" data-target="section" data-icon="items" data-count="15"></a>
     </ul>
 </aside>

src/boot/Lungo.Boot.Events.js

@@ -32,8 +32,8 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         var resize = 'resize';
 
         lng.dom(SELECTORS.WINDOW).on(resize, _changeOrientation);
-        lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
-        lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).touch(_asideVisibility);
+        lng.dom(SELECTORS.HREF_TARGET).touch(_loadTarget);
+        lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
     };
 
     var _changeOrientation = function(event) {
@@ -65,22 +65,6 @@ LUNGO.Boot.Events = (function(lng, undefined) {
                 _goAside(link);
                 break;
         }
-    };
-
-    var _asideVisibility = function(event) {
-        var link = lng.dom(this);
-        var target = lng.dom(link.data(ATTRIBUTE.TARGET) + link.attr(ATTRIBUTE.HREF));
-
-        if (target.length > 0) {
-            var aside_id = '#' + link.parent(ELEMENT.ASIDE).attr(ATTRIBUTE.ID);
-            var section_id = '#' + lng.dom(SELECTORS.CURRENT_SECTION).first().attr(ATTRIBUTE.ID);
-
-            if (link.data(ATTRIBUTE.TARGET) === ELEMENT.ARTICLE) {
-                lng.dom(ELEMENT.ASIDE + aside_id + ' ' + SELECTORS.HREF_TARGET).removeClass(CLASS.CURRENT);
-                link.addClass(CLASS.CURRENT);
-            }
-            _hideAsideIfNecesary(section_id, aside_id);
-        }
 
         event.preventDefault();
     };
@@ -108,10 +92,10 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         lng.Router.aside(section_id, aside_id);
     };
 
-    var _hideAsideIfNecesary = function(section_id, aside_id) {
-        if (window.innerWidth < 768) {
-            lng.View.Aside.hide(section_id, aside_id);
-        }
+    var _hideAsideIfNecesary = function(event) {
+        if (window.innerWidth < 768) lng.View.Aside.hide();
+
+        event.preventDefault();
     };
 
     return {

src/router/Lungo.Router.js

@@ -74,20 +74,8 @@ LUNGO.Router = (function(lng, undefined) {
      * @param {string} <aside> Id
      */
     var aside = function(section_id, aside_id) {
-        section_id = lng.Core.parseUrl(section_id);
         aside_id = lng.Core.parseUrl(aside_id);
-
-        var target = lng.Element.asides.siblings(ELEMENT.ASIDE + aside_id);
-        if (target.length > 0) {
-            var is_visible = target.hasClass(CLASS.CURRENT);
-            if (is_visible) {
-                lng.View.Aside.hide(section_id, target);
-            } else {
-                lng.View.Aside.show(section_id, target);
-            }
-        }
-
-        target = null;
+        lng.View.Aside.toggle(aside_id);
     };
 
     /**

src/stylesheets/Lungo.layout.aside.less

@@ -26,7 +26,7 @@ aside {
     top: 0;
     bottom: 0;
     visibility: hidden;
-    z-index: -1;
+    z-index: 0;
 
     width: @aside-width;
     max-width: @aside-width;

src/view/Lungo.View.Aside.js

@@ -15,37 +15,59 @@ LUNGO.View.Aside = (function(lng, undefined) {
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
 
     /**
-     * Display an aside element for a particular <section>
+     * Toggle an aside element
+     *
+     * @method toggle
+     *
+     * @param  {string} Aside id
+     */
+    var toggle = function(aside_id) {
+        var aside = lng.Element.asides.siblings(ELEMENT.ASIDE + aside_id);
+        if (aside.length > 0) {
+            var is_visible = aside.hasClass(CLASS.CURRENT);
+            if (is_visible) {
+                lng.View.Aside.hide();
+            } else {
+                lng.View.Aside.show(aside_id);
+            }
+        }
+
+        aside = null;
+    };
+
+    /**
+     * Display an aside element with a particular <section>
      *
      * @method show
      *
-     * @param  {string} Section id
      * @param  {string} Aside id
      */
-    var show = function(section_id, aside) {
-        var aside_stylesheet = _asideStylesheet(aside);
-        var section = lng.dom(ELEMENT.SECTION + section_id);
+    var show = function(aside_id) {
+        var aside = lng.Element.asides.siblings(ELEMENT.ASIDE + aside_id);
+        if (aside.length > 0) {
+            lng.Element.Current.aside = aside;
+            var aside_stylesheet = _asideStylesheet(aside);
 
-        aside.addClass(CLASS.CURRENT);
-        section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
+            aside.addClass(CLASS.CURRENT);
+            lng.Element.Current.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
+        }
+
+        aside = null;
     };
 
     /**
-     * Hide an aside element for a particular section
+     * Hide an aside element with a particular section
      *
      * @method hide
-     *
-     * @param  {string} Element query selector
-     * @param  {string} Value for counter
      */
-    var hide = function(section_id, aside) {
+    var hide = function() {
+        var aside = lng.Element.Current.aside;
         var aside_stylesheet = _asideStylesheet(aside);
-        var section = lng.dom(ELEMENT.SECTION + section_id);
-
-        section.removeClass(CLASS.ASIDE).removeClass(aside_stylesheet);
+        lng.Element.Current.section.removeClass(CLASS.ASIDE).removeClass(aside_stylesheet);
 
         setTimeout(function() {
             aside.removeClass(CLASS.CURRENT);
+            lng.Element.Current.aside = null;
         }, 300);
     };
 
@@ -63,6 +85,7 @@ LUNGO.View.Aside = (function(lng, undefined) {
     };
 
     return {
+        toggle: toggle,
         show: show,
         hide: hide
     };