Accueil Explorer Aide
Connexion
pwa
/
Lungo.js
miroir de https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Fichiers Tickets 0 Wiki
Parcourir la source

NEW: Feature autohide navigation bar in iOS Mobile Devices

@soyjavi il y a 14 ans
Parent
d594c1348f
commit
a54724f937
5 fichiers modifiés avec 107 ajouts et 35 suppressions
Vue séparée Afficher les stats Diff
  1. 29 28
      examples/test_src/index.html
  2. 65 0
      src/boot/Lungo.Boot.Layout.js
  3. 3 2
      src/boot/Lungo.Boot.js
  4. 2 1
      src/stylesheets/css/Lungo.layout.css
  5. 8 4
      src/stylesheets/less/Lungo.layout.less

+ 29 - 28
examples/test_src/index.html
Voir le fichier 

@@ -2,7 +2,7 @@
 
 <html>
 
 <head>
 
     <meta charset="utf-8">
 
-    <title>LungoJS - Test Source 1.0.1</title>
 
+    <title>LungoJS - Test Source 1.0.2</title>
 
     <meta name="description" content="">
 
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
     <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 
@@ -30,9 +30,9 @@
 
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
 
     <!-- App Stylesheet -->
 
     <link rel="stylesheet" href="assets/stylesheets/app.css?v=1">
 
-</head> 
- 
-<body class="app">   
+</head>
 
+
 
+<body class="app">
 
     <section id="login" class="splash">
 
 		<article>
 
 			<h1>Lungo<span class="semi-opacity">js</span></h1>
 
@@ -43,7 +43,7 @@
 
 			</div>
 
 			<div class="copyright">Copyright TapQuo Inc, 2011</div>
 
 		</article>
 
-	</section>   
+	</section>
 
 
 	<section id="demo" class="_static">
 
 		<header data-title="LungoJS Framework">
 
@@ -65,7 +65,7 @@
 
     				<li><a href="#demo_header_footer" data-target="section" class="arrow" data-icon="wifi">
 
     					<strong>Header + Footer + Articles</strong><small>paodapod</small></a></li>
 
     				<li><a href="#demo_toolbar" data-target="section" class="arrow" data-icon="download">
 
-    					<strong>Toolbar</strong><small>Toolbar</small></a></li>	
+    					<strong>Toolbar</strong><small>Toolbar</small></a></li>
 
     				<li><a href="#demo_list" data-target="section" class="arrow" id="load_list" data-icon="note">
 
                         <div class="bubble highlight">3 types</div>
 
     					<strong>Lists</strong>
 
@@ -93,7 +93,7 @@
 
 		                <strong>Javi Jiménez Villar</strong>
 
 		                <small>@soyjavi</small>
 
 		                </li>
 
-		                
+
 
 	                <li>
 
 		                <img src="assets/images/pasku.png" class="size48 rounded">
 
 		                <strong>Guillermo Pascual</strong>
 
@@ -101,9 +101,9 @@
 
 		        </ul>
 
 		    </div>
 
 		</article>
 
-    </section> 
+    </section>
 
 
-	<section id="demo_header_footer"  class="popup">
 
+	<section id="demo_header_footer">
 
 		<header data-title="Summary" data-back="home blue">
 
             <nav class="onright">
 
                 <a href="#summary" data-target="article" class="current" data-title="Summary" data-icon="user"></a>
 
@@ -115,11 +115,11 @@
 
 		    Summary
 
 		    <a href="mailto:javi@tapquo.com">Prueba</a>
 
 		</article>
 
-		
+
 
 		<article id="messages">
 
 		    Messages
 
 		</article>
 
-		
+
 
 		<footer>
 
 		    <a href="#" class="button articblue onright" data-icon="key">Sign In</a>
 
             <nav class="onleft">
 
@@ -128,7 +128,7 @@
 
             </nav>
 
         </footer>
 
 	</section>
 
-	
+
 
 	<section id="demo_events">
 
 	    <header data-title="Events demo" data-back="home blue"></header>
 
 	    <article class="list">
 
@@ -153,7 +153,7 @@
 
 		<article>
 
 			<h1>Scroll: vertical</h1>
 
 			<scroll id="scroll_vertical" class="vertical"></scroll>
 
-				
+
 
 			<h1>Scroll: horizontal</h1>
 
 			<scroll id="scroll_horizontal" class="horizontal"></scroll>
 
 		</article>
 
@@ -176,15 +176,15 @@
 
                      <strong>LungoJS Framework</strong>
 
                      <small class="margin-top-4">version 0.2</small>
 
                      <small>by @soyjavi & @pasku1</small>
 
-                 </li> 
-                 
+                 </li>
 
+
 
                  <li class="info contrast">
 
                      <img src="assets/images/icon.png" class="framed">
 
                      <strong>LungoJS Framework</strong>
 
                      <small class="margin-top-4">version 0.2</small>
 
                      <small>by @soyjavi & @pasku1</small>
 
                  </li>
 
-                 
+
 
                 <li class="toolbar contrast">
 
                     <nav>
 
                         <a href="#list_sample" data-target="article" class="current" data-icon="note"></a>
 
@@ -208,7 +208,7 @@
 
 		    </ul>
 
 		</article>
 
 		<footer data-title="COUNT:*"></footer>
 
-	</section>  
+	</section>
 
 
 	<section id="demo_toolbar">
 
 		<header data-title="Toolbar Demo" data-back="articblue home"></header>
 
@@ -225,7 +225,7 @@
 
 				<a href="#toolbar_4" data-target="article" data-icon="user"></a>
 
             </nav>
 
         </footer>
 
-	</section> 
+	</section>
 
 
 	<section id="demo_buttons">
 
 		<header data-back="home blue" data-title="Buttons">
 
@@ -235,7 +235,7 @@
 
 				<form class="buttons" id="scroll_buttons_scroll" style="height:730px;">
 
 					<a href="#" class="button big">default</a>
 
 					<a href="#" class="button big disabled">disabled</a>
 
-			
+
 
 					<a href="#" class="button big red">red</a>
 
 					<a href="#" class="button big lightgreen">lightgreen</a>
 
 					<a href="#" class="button big green">green</a>
 
@@ -282,14 +282,14 @@
 
 
 				<label data-icon="picture"></label>
 
 				<label class="checkbox"><input type="checkbox" id="checkbox-2"/></label>
 
-	
+
 
 	            <br/>
 
 				<label>Radio:</label>
 
 				<label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
 
 				<label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
 
 				<label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
 
             </ul>
 
-            
+
 
 				<br/>
 
 				<a href="#" class="button big green" data-icon="check">Accept</a>
 
 				<a href="#" class="button big red" data-icon="cancel">Cancel</a>
 
@@ -297,7 +297,7 @@
 
 			</scroll>
 
 		</article>
 
 	</section>
 
-	
+
 
 	<section id="demo_sugars">
 
 		<header data-back="home articblue"></header>
 
 		<article>
 
@@ -307,7 +307,7 @@
 
 	<section id="demo_next">
 
 		<header data-back="home articblue"></header>
 
 		<article><h1>Section demo_next - Article id=messages</h1></article>
 
-	</section>  
+	</section>
 
 
     <!-- Third parties dependencies -->
 
     <script src="../../src/lib/zepto.js"></script>
 
@@ -316,11 +316,11 @@
 
     <script src="../../src/Lungo.js"></script>
 
     <script src="../../src/Lungo.App.js" ></script>
 
     <script src="../../src/Lungo.Environment.js" ></script>
 
-    <script src="../../src/Lungo.Core.js"></script>  
+    <script src="../../src/Lungo.Core.js"></script>
 
     <script src="../../src/Lungo.Events.js"></script>
 
     <script src="../../src/Lungo.Service.js"></script>
 
     <script src="../../src/router/Lungo.Router.js"></script>
 
-    <script src="../../src/router/Lungo.Router.History.js" ></script>  
+    <script src="../../src/router/Lungo.Router.History.js" ></script>
 
     <script src="../../src/view/Lungo.View.Resize.js"></script>
 
     <script src="../../src/view/Lungo.View.Article.js" ></script>
 
     <script src="../../src/view/Lungo.View.Scroll.js"></script>
 
@@ -329,21 +329,22 @@
 
     <script src="../../src/view/Lungo.View.Template.List.js"></script>
 
     <script src="../../src/dom/Lungo.Dom.js"></script>
 
     <script src="../../src/dom/Lungo.Dom.Event.js"></script>
 
-    <script src="../../src/data/Lungo.Data.Cache.js"></script>   
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
 
     <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/attributes/Lungo.Attributes.Section.js"></script>
 
     <script src="../../src/boot/Lungo.Boot.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
 
     <script src="../../src/boot/Lungo.Boot.Events.js"></script>
 
     <script src="../../src/boot/Lungo.Boot.Data.js"></script>
 
     <script src="../../src/boot/Lungo.Boot.Section.js"></script>
 
     <script src="../../src/boot/Lungo.Boot.Article.js"></script>
 
-    <!-- LungoJS - Sandbox App -->    
+    <!-- LungoJS - Sandbox App -->
 
     <script src="app/app.js"></script>
 
     <script src="app/data.js"></script>
 
     <script src="app/events.js"></script>
 
     <script src="app/services.js"></script>
 
     <script src="app/view.js"></script>
 
-</body> 
+</body>
 
 </html>

+ 65 - 0
src/boot/Lungo.Boot.Layout.js
Voir le fichier 

@@ -0,0 +1,65 @@
 
+/**
 
+ * Initialize the Layout of LungoJS (if it's a mobile environment)
 
+ *
 
+ * @namespace LUNGO.Boot
 
+ * @class Layout
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ */
 
+
 
+LUNGO.Boot.Layout = (function(lng, undefined) {
 
+
 
+    var _window = null;
 
+    var _document = null;
 
+
 
+    /**
 
+     * Initializes the automatic subscription events by markup of the project.
 
+     *
 
+     * @method init
 
+     *
 
+     */
 
+    var start = function() {
 
+        if (!lng.Environment.isDesktop()) {
 
+            _window = window;
 
+            _document = _window.document;
 
+
 
+            _resizeLayout();
 
+        }
 
+    };
 
+
 
+    var _resizeLayout = function() {
 
+        if (_window.innerHeight == 356) {
 
+            var _height = 416;
 
+
 
+            lng.Dom.query('body').css('height', _height + 'px');
 
+            _hideNavigationBar();
 
+        }
 
+    };
 
+
 
+    var _hideNavigationBar = function() {
 
+        if( !location.hash || !_window.addEventListener ){
 
+            _window.scrollTo( 0, 1 );
 
+            var scrollTop = 1,
 
+
 
+            //reset to 0 on bodyready, if needed
 
+            bodycheck = setInterval(function(){
 
+                if( _document.body ){
 
+                    clearInterval( bodycheck );
 
+                    scrollTop = 'scrollTop' in _document.body ? _document.body.scrollTop : 1;
 
+                    _window.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
 
+                }
 
+            }, 15 );
 
+
 
+            _window.addEventListener( 'load', function(){
 
+                setTimeout(function(){
 
+                    _window.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
 
+                }, 0);
 
+            }, false );
 
+        }
 
+    };
 
+
 
+    return {
 
+        start: start
 
+    };
 
+
 
+})(LUNGO);

+ 3 - 2
src/boot/Lungo.Boot.js
Voir le fichier 

@@ -1,6 +1,6 @@
 
-/** 
+/**
 
  * Boot for a new LungoJS Application instance
 
- * 
+ *
 
  * @namespace LUNGO
 
  * @class App
 
  *
 
@@ -13,6 +13,7 @@ LUNGO.Boot = (function(lng, undefined) {
 
     return function() {
 
         lng.Environment.start();
 
 
+        lng.Boot.Layout.start();
 
         lng.Boot.Events.start();
 
         lng.Boot.Data.start();
 
         lng.Boot.Section.start();

+ 2 - 1
src/stylesheets/css/Lungo.layout.css
Voir le fichier 

@@ -1,4 +1,5 @@
 
-section{position:absolute;position:fixed;width:100%;height:100%;overflow:hidden;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
 
+body{height:100%;}
 
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
 
 section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
 
 section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 
 section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}

+ 8 - 4
src/stylesheets/less/Lungo.layout.less
Voir le fichier 

@@ -10,12 +10,15 @@
 
 @import "mixins.less";
 
 
 /* @group <section> */
 
-section  {
 
+body {
 
+	height: 100%;
 
+}
 
+
 
+section{
 
 	position: absolute;
 
 	position: fixed;
 
-	width: 100%; 
-	height: 100%;
 
-	overflow: hidden;
 
+	width: 100%;
 
+	height: inherit;
 
 	z-index: 0;
 
 	-webkit-backface-visibility: hidden;
 
 	.transform(translate3d(100%, 0, 0));
 
@@ -50,6 +53,7 @@ section.popup.show  {
 
 section.popup.hide  {
 
 	.transform(translate3d(0, -100%, 0));
 
 }
 
+
 
 /* @end */