Fallback for non active input in Android OS (<4)

examples/test-pro/index.html

@@ -14,7 +14,6 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="format-detection" content="telephone=no">
     <!-- Main Stylesheet -->
-
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
@@ -28,7 +27,6 @@
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.pro.css">
-
     <style>
         .scroll-demo {
             background: #ccc;
@@ -64,20 +62,27 @@
 
     <section id="sec-1" class="">
         <header data-title="Test Asides">
-            <a href="#asi-1" data-target="aside" class="button blue">asi-1</a>
-
+            <a href="#asi-1" data-target="aside" class="button blue onleft">asi-1</a>
             <a href="#asi-2" data-target="aside" class="button green onright">sec-2</a>
         </header>
         <footer class="toolbar">
             <nav>
-                <a href="#art-1"  class="current" data-target="article" data-icon="left"></a>
-                <a href="#art-2" data-target="article" data-icon="right"></a>
+                <a href="#art-1"  class="current" data-target="article" data-title="Art-1" data-icon="left"></a>
+                <a href="#art-2" data-target="article" data-title="Art-2" data-icon="right"></a>
                 <a href="#sec-2" data-target="section" data-icon="files"></a>
+                <a href="#test" data-target="section" data-icon="settings"></a>
             </nav>
         </footer>
 
-        <article id="art-1">Art-1</article>
-        <article id="art-2">Art-2</article>
+        <article id="art-1">Art-1
+            <input type="text" placeholder="Some text..." />
+        </article>
+        <article id="art-2">Art-2
+            <p>
+            askldjaskldjkla
+            <input type="text" placeholder="Some text..." />
+            </p>
+        </article>
     </section>
 
     <section id="sec-2">
@@ -86,7 +91,6 @@
         </article>
     </section>
 
-
     <aside id="asi-1" class="scrollable">
         <a href="#art-1" data-target="article">Art-1</a>
         <a href="#art-2" data-target="article">Art-2</a>
@@ -99,19 +103,16 @@
     </aside>
 
 
-    <!--
     <section id="test">
-        <header data-title="LungoJS Kitchen Sink" class="extended">
-            <a href="#" data-target="aside" class="button" data-icon="refresh">&nbsp;Aside</a>
+        <header data-title="Groupbar" class="extended" data-back="home">
             <nav class="onright">
                 <a href="#" data-article="list-added" class="button red" data-icon="up"></a>
                 <a href="#" data-article="list-added" class="button red prepend" data-icon="down"></a>
-                <a href="#" data-article="list-auto" class="button blue" data-icon="plus"></a>
                 <a href="#" data-article="list-dinamics" class="button green">Append</a>
             </nav>
             <nav class="groupbar">
-                <a href="#list-added" class="current" data-target="article">Dinamic</a>
-                <a href="#list-auto" data-target="article">Automatic</a>
+                <a href="#list-auto" class="current"  data-target="article">Automatic</a>
+                <a href="#list-added" data-target="article">Dinamic</a>
                 <a href="#list-dinamics" data-target="article">Special</a>
             </nav>
         </header>
@@ -123,21 +124,10 @@
             </nav>
         </footer>
 
-        <aside id="prueba" class="scrollable">
-            <ul>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-                <a href="#a">slaka</a>
-            </ul>
-        </aside>
+        <article id="list-auto" class="list"></article>
 
         <article id="list-added" class="list"></article>
-        <article id="list-auto" class="list"></article>
+
         <article id="list-dinamics">
             <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
                 <div style="width:1036px;">
@@ -176,7 +166,7 @@
         <article id="files">Files</article>
         <article id="folder">Folder</article>
     </section>
-    -->
+
 
     <!-- Third parties dependencies -->
     <script src="../../src/lib/QuoJS.js"></script>
@@ -201,7 +191,7 @@
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/Lungo.fallback.js"></script>
+    <script src="../../src/Lungo.Fallback.js"></script>
     <script src="../../src/boot/Lungo.Boot.js"></script>
     <script src="../../src/boot/Lungo.Boot.Async.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>

src/Lungo.Fallback.js

@@ -18,6 +18,17 @@ LUNGO.Fallback = (function(lng, undefined) {
         }
     };
 
+    var androidInputs = function(article_id, active) {
+        environment = lng.Core.environment();
+        if (environment.isMobile && environment.os.name === 'android' && environment.os.version < '4') {
+            var selector = article_id + ' input, ' + article_id + ' textarea, ' + article_id + ' select';
+            var input_elements = lng.dom(selector);
+            for (var i = 0, len = input_elements.length; i < len; i++) {
+                (active) ? _enableAndroidInput(input_elements[i]) : _disableAndroidInput(input_elements[i]);
+            }
+        }
+    };
+
     var positionFixed = function(sections) {
     	environment = lng.Core.environment();
         if (environment.isMobile && environment.os.name === 'ios' && environment.os.version >= '4.2') {
@@ -25,6 +36,14 @@ LUNGO.Fallback = (function(lng, undefined) {
         }
     };
 
+    var _enableAndroidInput = function(input) {
+        input.removeAttribute('disabled');
+    };
+
+    var _disableAndroidInput = function(input) {
+        input.setAttribute('disabled', 'disabled');
+    };
+
     var _addClassActiveToButton = function(element) {
         lng.dom(this).addClass('active');
     };
@@ -35,6 +54,7 @@ LUNGO.Fallback = (function(lng, undefined) {
 
     return {
     	androidButtons: androidButtons,
+        androidInputs: androidInputs,
     	positionFixed: positionFixed
     }
 

src/stylesheets/css/Lungo.layout.article.css

@@ -1,10 +1,9 @@
-article{position:absolute;width:inherit;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}
-article.current{visibility:visible;z-index:1;}
+article{position:absolute;width:inherit;height:auto;top:0px;bottom:0px;visibility:hidden;z-index:0;}article.current{visibility:visible;z-index:1;}
+article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
+article .title{font-size:1.1em;margin:0px 0 4px;}article .title .icon{margin-right:4px;}
+article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
 header:not(.extended)~article{top:40px;}
 header.extended~article{top:75px;}
 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;}
-article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
+@media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}

src/stylesheets/less/Lungo.layout.article.less

@@ -23,36 +23,36 @@ article {
 	bottom: 0px;
 	visibility: hidden;
 	z-index: 0;
-}
 	
-	article.current {
-		visibility: visible;
+	&.current {
+    	visibility: visible;
 		z-index: 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)); }
+	&.aside { .transform(translate3d(256px, 0, 0)); }
 	
-	@media handheld, only screen and (min-width: 768px) {
-		article.aside { .transform(translate3d(0px, 0, 0)); }
-	}
-	
-	article .title {
-		font-size: 1.1em;
-		 margin: 0px 0 4px;
-	}
+	& .title {
+    	font-size: 1.1em;
+		margin: 0px 0 4px;
 		
-		article .title .icon { margin-right: 4px; }
+		& .icon { margin-right: 4px; }
+	}
 	
-	article .text {
-		margin: 4px 0 8px;
+	& .text {
+    	margin: 4px 0 8px;
 		display: block;
     	font-size: 0.9em;
     	font-weight: normal;
     	line-height: 1.4em;
-	}			
+	}	
+}
+		
+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; }
+
+@media handheld, only screen and (min-width: 768px) {
+	article.aside { .transform(translate3d(0px, 0, 0)); }
+}			
 /* @end */

src/view/Lungo.View.Article.js

@@ -63,8 +63,13 @@ LUNGO.View.Article = (function(lng, undefined) {
 
     var _showContainer = function(section_id, article_id) {
         var section_articles = section_id + ' ' + SELECTORS.ARTICLE + '.' + CSS_CLASSES.ACTIVE;
+        var current_active_article_id = '#' + lng.dom(section_articles).attr('id');
+
         lng.dom(section_articles).removeClass(CSS_CLASSES.ACTIVE);
+        lng.Fallback.androidInputs(current_active_article_id, false);
+
         lng.dom(article_id).addClass(CSS_CLASSES.ACTIVE);
+        lng.Fallback.androidInputs(article_id, true);
     };
 
     var _setTitle = function(id, item) {