New manager of aside element

examples/test/app/sections/aside.html

@@ -1,9 +1,9 @@
 <aside id="kitchen-sink-scroll" class="scrollable">
     <div>
         <div class="title">Select a option</div>
-        <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
-        <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
-        <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>
+        <a href="#nav-1" data-target="article" class="current" data-icon="clock">Alarm</a>
+        <a href="#nav-2" data-target="article" data-icon="calendar">Calendar</a>
+        <a href="#test-2" data-target="section" data-icon="plus" data-count="14">Buttons & Colours</a>
         <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
         <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
         <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>

examples/test/index.html

@@ -74,8 +74,8 @@
             <nav>
                 <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
                 <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#nav-3" data-target="article" data-icon="mail" data-count="124"></a>
-                <a href="#nav-4" data-target="article" data-icon="phone" data-count="12"></a>
+                <a href="#a" data-target="article" data-icon="mail" data-count="124"></a>
+                <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
             </nav>
         </footer>
 

src/boot/Lungo.Boot.Events.js

@@ -14,8 +14,11 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     var CLASS = lng.Constants.CLASS;
     var ELEMENT = lng.Constants.ELEMENT;
     var SELECTORS = {
+        DOCUMENT: document,
+        WINDOW: window,
         HREF_TARGET: 'a[href][data-target]',
-        HREF_TARGET_FROM_ASIDE: 'aside a[href][data-target]'
+        HREF_TARGET_FROM_ASIDE: 'aside a[href][data-target]',
+        CURRENT_SECTION: 'section.aside, section.current'
     };
 
     /**
@@ -29,10 +32,10 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         var resize = 'resize';
 
         //@ToDo: Error with input type="range"
-        //lng.dom(document).on(touch_move_event, _iScroll);
-        lng.dom(window).on(resize, _changeOrientation);
-        lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_loadTargetFromAside);
+        //lng.dom(SELECTORS.DOCUMENT).on(touch_move_event, _iScroll);
+        lng.dom(SELECTORS.WINDOW).on(resize, _changeOrientation);
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
+        // lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_asideVisibility);
     };
 
     var _iScroll = function(event) {
@@ -41,24 +44,14 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
     var _changeOrientation = function(event) {
         lng.View.Resize.toolbars();
-    };
-
-    var _loadTargetFromAside = function(event) {
-        var link = lng.dom(this);
-        var aside_id = '#' + link.parent(ELEMENT.ASIDE).attr(ATTRIBUTE.ID);
-        var section_id = '#' + lng.dom('section.aside, section.current').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();
     };
 
     var _loadTarget = function(event) {
         var link = lng.dom(this);
+
         _selectTarget(link);
+        _asideVisibility(link)
 
         event.preventDefault();
     };
@@ -82,6 +75,25 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         }
     };
 
+    var _asideVisibility = function(link) {
+        var target = lng.dom(link.data(ATTRIBUTE.TARGET) + link.attr(ATTRIBUTE.HREF));
+
+        if (target.length > 0) {
+             var parent = link.parent(ELEMENT.ASIDE);
+
+             if (parent.length > 0 && link.data(ATTRIBUTE.TARGET) === ELEMENT.ARTICLE) {
+                var aside_id = '#' + parent.attr(ATTRIBUTE.ID);
+                var section_id = '#' + lng.dom(CURRENT_SECTION).first().attr(ATTRIBUTE.ID);
+
+                lng.dom(ELEMENT.ASIDE + aside_id + ' ' + SELECTORS.HREF_TARGET).removeClass(CLASS.CURRENT);
+                link.addClass(CLASS.CURRENT);
+            }
+            _hideAsideIfNecesary(section_id, aside_id);
+        }
+
+        event.preventDefault();
+    };
+
     var _goSection = function(id) {
         id = lng.Core.parseUrl(id);
         if (id === '#back') {

src/router/Lungo.Router.js

@@ -27,7 +27,7 @@ LUNGO.Router = (function(lng, undefined) {
         var current = _getHistoryCurrent();
         var target = ELEMENT.SECTION + section_id;
 
-        if (_existTarget(target) && _notCurrentTarget(target)) {
+        if (_exists(target) && _notCurrentTarget(target)) {
             lng.dom(current).removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
             lng.dom(target).addClass(CLASS.SHOW).trigger(TRIGGER.LOAD);
 
@@ -48,7 +48,7 @@ LUNGO.Router = (function(lng, undefined) {
         var article_id = lng.Core.parseUrl(article_id);
         var target = ELEMENT.SECTION + section_id + ' ' + ELEMENT.ARTICLE + article_id;
 
-        if (_existTarget(target) && _notCurrentTarget(target)) {
+        if (_exists(target) && _notCurrentTarget(target)) {
             lng.dom(target).trigger(TRIGGER.LOAD);
             lng.View.Article.show(section_id, article_id);
         }
@@ -67,7 +67,7 @@ LUNGO.Router = (function(lng, undefined) {
         var aside_id = lng.Core.parseUrl(aside_id);
         var target = ELEMENT.ASIDE + aside_id;
 
-        if (_existTarget(target)) {
+        if (_exists(target)) {
             var is_visible = lng.dom(target).hasClass(CLASS.CURRENT);
             if (is_visible) {
                 lng.View.Aside.hide(section_id, aside_id);
@@ -94,16 +94,16 @@ LUNGO.Router = (function(lng, undefined) {
         return lng.dom(target).hasClass(CLASS.CURRENT) ? false : true;
     };
 
-    var _existTarget = function(target) {
-        var available = false;
+    var _exists = function(target) {
+        var exists = false;
 
         if (lng.dom(target).length > 0) {
-            available = true;
+            exists = true;
         } else {
             lng.Core.log(3, ERROR.ROUTER + target);
         }
 
-        return available;
+        return exists;
     };
 
     var _getHistoryCurrent = function() {

src/stylesheets/css/Lungo.theme.default.css

@@ -37,8 +37,6 @@ footer {
   background: #353b42 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353b42), color-stop(50%, #272a2d));
   border-top: 1px inset #2A2A2A;
   color: #353b42;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
 }
 article {
   background-color: #EBEBEB;
@@ -101,22 +99,19 @@ header nav.plain a:active {
 /* @end */
 /* @group <aside> */
 aside {
-  background: #252525;
+  color: #9faab1;
 }
 aside .title {
-  background: #101010;
-  border: none;
+  background: #252525;
 }
 aside a {
-  color: #fff;
-  text-shadow: 0px 1px 0px #000;
-  border-bottom: 1px inset #101010;
-  border-top: 1px inset #868686;
+  color: #9faab1;
+  background-color: #2f353a;
+  border-bottom: 1px inset #222;
+  border-top: 1px inset rgba(255, 255, 255, 0.1);
 }
 aside a.current {
-  background: #1c1c1c;
-  box-shadow: inset 0px 0px 8px #101010;
-  border-top: 1px inset #1c1c1c;
+  color: #ffffff;
 }
 aside a .icon {
   text-shadow: none;
@@ -488,7 +483,6 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-clip: padding-box;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
   font-weight: bold !important;
-  border: solid 1px #ffffff;
   box-shadow: 0 0 6px #000;
 }
 .bubble.count {

src/stylesheets/less/Lungo.layout.aside.less

@@ -34,23 +34,25 @@ aside {
 
 	width: @aside-width;
 	max-width: @aside-width;
+	
 
 	&.onright { right: 0px; }
 	&.current { visibility: visible;}
 
 	& .title {
-    	line-height: 40px;
-	    font-size: 15px;
-	    font-weight: bold;
-		height: 40px;
+    	line-height: 42px;
+		height: 41px;
+		font-size: 15px;
+		font-weight: bold;
 	}
 
 	& a {
     	display: block;
-		width: 244px;
+		//width: 244px;
 		height: 40px;
 
-		font-size: 15px;
+		font-size: 14px;
+    	font-weight: bold;
 		line-height: 40px;
 		overflow: hidden;
 		white-space: nowrap;

src/stylesheets/less/Lungo.theme.default.less

@@ -64,8 +64,8 @@ footer {
 	border-top: 1px inset #2A2A2A;
 	color: #353b42;
 	
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
+	//border-bottom-left-radius: 5px;
+	//border-bottom-right-radius: 5px;
 }
 
 
@@ -126,23 +126,25 @@ header nav {
 
 /* @group <aside> */
 aside {
-    background: #252525;
-
+	color: #9faab1;
+	
     & .title {
-    	background: #101010;
-    	border:  none;
-	}
+    	background: #252525;
+    		}
 
     & a {
-    	color: #fff;
-	    text-shadow: 0px 1px 0px #000;
-	    border-bottom: 1px inset #101010;
-		border-top: 1px inset #868686;
+    	color: #9faab1;
+		background-color: #2f353a;
+		
+	    //text-shadow: 0px 1px 0px #000;
+	    border-bottom: 1px inset #222;
+		border-top: 1px inset rgba(255,255,255,0.1);
 
 		&.current {
-    		background: #1c1c1c;
-			box-shadow: inset 0px 0px 8px #101010;
-			border-top: 1px inset #1c1c1c;
+    		//background: #1c1c1c;
+			//box-shadow: inset 0px 0px 8px #101010;
+			//border-top: 1px inset #1c1c1c;
+			color: @white;
 		}
 
 		& .icon {
@@ -410,7 +412,7 @@ input[type="range"] {
 	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 	font-weight: bold !important;
 	
-	border: solid 1px @white;
+	//border: solid 1px @white;
 	box-shadow: 0 0 6px #000;	
 	
 	&.count { background: @background-main; }