New method for scroll control

(BETA Version)

src/boot/Lungo.Boot.Section.js

@@ -52,11 +52,7 @@ LUNGO.Boot.Section = (function(lng, undefined) {
     };
 
     var _initArticles = function(section) {
-        var articles = section.children(SELECTORS.ARTICLE);
-
-        _calculateArticleHeight(section, articles);
-
-        var first_article = articles.first();
+        var first_article = section.children(SELECTORS.ARTICLE).first();
         first_article.addClass(ACTIVE_CLASS);
 
         var first_article_id = first_article.attr('id');
@@ -64,21 +60,6 @@ LUNGO.Boot.Section = (function(lng, undefined) {
         lng.View.Article.showReferenceLinks(section_id, first_article_id);
     };
 
-    var _calculateArticleHeight = function(section, articles) {
-        var footer =  section.children('footer');
-        var header = section.children('header');
-
-        var articles_height = window.innerHeight;
-        if (footer.length > 0) {
-            articles_height -= footer.height();
-        }
-        if (header.length > 0) {
-            articles_height -= header.height();
-        }
-
-        articles.style('height', articles_height + 'px');
-    }
-
     var _initAllAsides = function() {
         lng.dom('aside').addClass('show');
     };

src/stylesheets/css/Lungo.layout.css

@@ -19,19 +19,23 @@ nav .bubble{position:relative;top:-8px;left:-8px;margin-right:-20px;}
 .toolbar .bubble{top:-52px;left:4px;}
 .toolbar abbr{position:absolute;top:34px;width:inherit;height:11px;margin-left:0px;display:block !important;font-size:11px;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .groupbar{position:absolute;top:39px;height:34px;width:100%;line-height:34px;}.groupbar a{padding:0px;}
-aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;max-width:256px;opacity:0;z-index:0;}
-aside.show{opacity:1;}
-header~aside{padding-top:40px;}
-footer~aside{padding-bottom:40px;}
+aside{position:absolute;width:inherit;height:inherit;top:0px;visibility:hidden;z-index:0;width:256px;max-width:256px;}
+aside.show{visibility:visible;}
+header:not(.extended)~aside{top:40px;}
+header.extended~aside{top:74px;}
+footer~aside{bottom:40px;height:auto;}
+footer.toolbar~aside{bottom:48px;}
 aside~article{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:15px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 aside .icon{width:24px;float:left;margin:8px 4px 0 0;font-size:24px;line-height:24px;text-align:center;}
 aside .anchor{font-weight:bold;padding:3px 10px 4px;}
 aside .bubble{float:right;font-size:11px;margin:12px 4px 0 0;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:relative;width:inherit;height:inherit;top:0px;display:none;z-index:0;opacity:0;}
-header~article{top:40px;}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}
+article.current{visibility:visible;z-index:1;}
+header:not(.extended)~article{top:40px;}
 header.extended~article{top:74px;}
-article.current{display:block;z-index:1;opacity:1;}
+footer:not(.toolbar)~article{bottom:40px;}
+footer.toolbar~article{bottom:48px;}
 article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
 @media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}article .title{font-size:1.1em;margin:0px 0 4px;}
 article .title .icon{margin-right:4px;}

src/stylesheets/css/Lungo.widgets.css

@@ -1,4 +1,4 @@
-.scrollable{position:absolute;display:block;width:100%;height:100%;}
+.scrollable{position:absolute;display:block;}
 .scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}
 .onleft{float:left;}
 .onright{float:right;}

src/stylesheets/less/Lungo.layout.less

@@ -10,6 +10,10 @@
 @import "mixins.less";
 
 @defaultTrasition : @easeOutSine;
+@header_footer_height: 40px;
+	@header_extended_height: 74px;
+@footer_toolbar_height: 48px;
+
 
 /* @group <section> */
 section {
@@ -118,7 +122,7 @@ nav {
 }
 
 .toolbar {
-	height: 48px;
+	height: @footer_toolbar_height;
 	display: block;
 	
 	& nav { display: block; }
@@ -127,7 +131,7 @@ nav {
     	display: block;
     	top:  0px;
     	font-size: 32px;
-		line-height: 48px;
+		line-height: @footer_toolbar_height;
 	}
 	
 	&.with-labels .icon {
@@ -173,22 +177,27 @@ nav {
 /* @group <aside> */
 aside {
 	position: absolute;
+	width: inherit;
+	height: inherit;
 	top: 0px;
-	bottom: 0px;
-	height: auto;
+	visibility: hidden;
+	z-index: 0;
+
 	width: 256px;
 	max-width: 256px;
-	opacity: 0;
-	z-index: 0;
 }
 
 	aside.show {
-		opacity: 1;
+		visibility: visible;
 	}
 	
-	header ~ aside { padding-top: 40px; }
-	
-	footer ~ aside { padding-bottom: 40px; }
+	header:not(.extended) ~ aside { top: @header_footer_height; }	
+		header.extended ~ aside { top: @header_extended_height; }		
+	footer ~ aside { 
+		bottom: @header_footer_height; 
+		height: auto; 
+	}
+		footer.toolbar ~ aside { bottom: @footer_toolbar_height; }
 	
 	aside ~ article {
 		.transform(translate3d(0px, 0, 0));
@@ -209,14 +218,12 @@ aside {
   	}
 		aside .icon {
 			width: 24px;
-			//height: 28px;
 			float: left;
 			margin: 8px 4px 0 0;
 		
 			font-size: 24px;
 			line-height: 24px;
-		    text-align: center;
-		    
+		    text-align: center;		    
 		}
 		aside .anchor {
 			font-weight: bold;
@@ -241,23 +248,24 @@ aside {
 
 /* @group <article> */
 article {
-	position: relative;
+	position: absolute;
 	width: inherit;
-	height: inherit;
+	height: auto;
 	top: 0px;
-	display: none;
+	bottom: 0px;
+	visibility: hidden;
 	z-index: 0;
-	opacity: 0;
 }
 	
-	header ~ article { top: 40px; }	
-		header.extended ~ article { top: 74px; }	
-
 	article.current {
-		display: block;
+		visibility: visible;
 		z-index: 1;
-		opacity: 1;
 	}
+		
+	header:not(.extended) ~ article { top: @header_footer_height; }	
+		header.extended ~ article { top: @header_extended_height; }		
+	footer:not(.toolbar) ~ article { bottom: @header_footer_height; }
+		footer.toolbar ~ article { bottom: @footer_toolbar_height; }
 	
 	article.aside { .transform(translate3d(256px, 0, 0)); }
 	

src/stylesheets/less/Lungo.widgets.less

@@ -14,9 +14,6 @@
 .scrollable { 
 	position: absolute;
 	display: block;
-	width: 100%;
-	height: 100%;
-	
 }
 
 .scroll {

src/view/Lungo.View.Resize.js

@@ -28,26 +28,6 @@ LUNGO.View.Resize = (function(lng, undefined) {
         }
     };
 
-    /**
-     * Resize all <article>s from determinated <section> based on a CSS property.
-     *
-     * @method article
-     *
-     * @param {object} Object reference of a determinated <section>
-     * @param {string} Selector that refers to a section element
-     * @param {string} CSS property
-     * @param {string} Element reference for resizing
-     */
-    var article = function(section, selector, property, reference) {
-        var element = section.children(selector);
-        var ARTICLE = 'article';
-
-        if (element.length > 0) {
-            var reference_dimension = element[reference]();
-            section.children(ARTICLE).style(property, reference_dimension + 'px');
-        }
-    };
-
     /**
      * Sets toolbars width, using total screen width
      *
@@ -82,7 +62,6 @@ LUNGO.View.Resize = (function(lng, undefined) {
 
     return {
         scroll: scroll,
-        article: article,
         toolbars: toolbars
     };
 

src/view/Lungo.View.Scroll.js

@@ -74,10 +74,13 @@ LUNGO.View.Scroll = (function(lng, undefined) {
      * @param {Object} Id of the <section>
      */
     var refresh = function(id, properties) {
-        var scroll = lng.dom('#' + id);
-        if (_needScroll(scroll)) {
+        var scroll = lng.dom('#' + id).first();
+
+        if (_needScroll(scroll, properties)) {
             properties = _mixProperties(scroll, properties);
             _saveScrollInCache(id, properties);
+        } else {
+            remove(id);
         }
     };
 
@@ -89,7 +92,7 @@ LUNGO.View.Scroll = (function(lng, undefined) {
      * @param {string} Id of the <section>
      */
     var remove = function(id) {
-        if (lng.Data.Cache.exists(CACHE_KEY)) {
+        if (lng.Data.Cache.exists(CACHE_KEY) && lng.Data.Cache.get(CACHE_KEY, id)) {
             lng.Data.Cache.get(CACHE_KEY, id).destroy();
             lng.Data.Cache.remove(CACHE_KEY, id);
         }
@@ -106,7 +109,7 @@ LUNGO.View.Scroll = (function(lng, undefined) {
         return (scroll.hasClass(HORIZONTAL_CLASS)) ? true : false;
     };
 
-    var _needScroll = function(scroll) {
+    var _needScroll = function(scroll, properties) {
         var element = scroll[0];
         return (element.clientHeight < element.scrollHeight);
     };