Inicio Explorar Ayuda
Iniciar sesión
pwa
/
Lungo.js
espejo de https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Archivos Incidencias 0 Wiki
Explorar el Código

3 examples of tablet functionality

piniphone hace 13 años
padre
2a7d87944c
commit
d053ab3d99
Se han modificado 12 ficheros con 394 adiciones y 556 borrados
Dividir vista Mostrar estadísticas de diff
  1. 0 127
      example/navigation.tablet.html
  2. 0 121
      example/navigation.tablet2.html
  3. 0 130
      example/navigation.tablet3.html
  4. 0 131
      example/navigation.tablet4.html
  5. 132 0
      example/tablet1.html
  6. 98 0
      example/tablet2.html
  7. 93 0
      example/tablet3.html
  8. 1 1
      src/boot/Lungo.Boot.Events.coffee
  9. 11 1
      src/element/Lungo.Element.Cache.coffee
  10. 12 5
      src/modules/Lungo.Aside.coffee
  11. 44 40
      src/modules/Lungo.Router.Tablet.coffee
  12. 3 0
      src/stylesheets/lungo.animation.slide.styl

+ 0 - 127
example/navigation.tablet.html
Ver fichero 

@@ -1,127 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>Lungo Flexbox - SDK</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-
 
-    <!-- Main Stylesheet -->
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
-    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
-
 
-</head>
 
-
 
-<body>
 
-
 
-    <aside id="menu" data-transition="left">
 
-        <header data-title="My mailbox"></header>
 
-        <article id="menu_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-article="incoming">Incoming</li>
 
-                <li data-view-article="later">Later</li>
 
-                <li data-view-article="lists">Lists</li>
 
-                <li data-view-article="archived">Archived</li>
 
-                <li data-view-section="clean">clean</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
-
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="incoming" data-transition="slide" data-children="mail" data-aside="menu">
 
-        <header data-title="Mail">
 
-            <nav class="left">
 
-                <button data-icon="list" data-view-aside="menu"></button>
 
-            </nav>
 
-            <nav class="right">
 
-            </nav>
 
-        </header>
 
-        <article id="incoming" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="later" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Later cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Later twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="lists" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Lists cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Lists twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="archived" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Archived cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Archived twitter</li>
 
-            </ul>
 
-        </article>
 
-        <footer>
 
-            <nav>
 
-                <a href="#" data-view-article="incoming">incoming</a>
 
-                <a href="#" data-view-article="later">later</a>
 
-                <a href="#" data-view-article="lists">lists</a>
 
-                <a href="#" data-view-article="archived">archived</a>
 
-                <a href="#" data-view-article="main_article_1">main_article_1</a>
 
-            </nav>
 
-        </footer>
 
-    </section>
 
-
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="mail" data-transition="slide">
 
-        <header data-title="Mail 1" data-back="home">
 
-            <nav class="right">
 
-                <button data-article="article_2" data-view-article="article_1" data-label="Article 1"></button>
 
-                <button data-article="article_1" data-view-article="article_2" data-label="Article 2"></button>
 
-            </nav>
 
-        </header>
 
-        <article id="article_1" class="scroll indented text big">Article 1</article>
 
-        <article id="article_2" class="scroll indented text big">Article 2</article>
 
-    </section>
 
-    <section id="mail2" data-transition="slide">
 
-        <header data-title="Mail 2" data-back="home">
 
-            <nav class="right">
 
-                <button data-article="mail_article_2" data-view-article="main_article_1" data-label="Article 1"></button>
 
-                <button data-article="main_article_1" data-view-article="mail_article_2" data-label="Article 2"></button>
 
-            </nav>
 
-        </header>
 
-        <article id="main_article_1" class="scroll indented text big">Article Mail2 1</article>
 
-        <article id="mail_article_2" class="scroll indented text big">Article Mail2 2</article>
 
-    </section>
 
-
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="clean" data-transition="slide">
 
-        <header data-title="Clean" data-back="home"></header>
 
-        <article id="clean_1" class="scroll indented text big">Clean!</article>
 
-    </section>
 
-
 
-
 
-    <script src="components/quojs/quo.js"></script>
 
-    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
-    <script>
 
-        Lungo.init({
 
-            name: 'Flexbox',
 
-            version: '2.2',
 
-            history: false
 
-        });
 
-        $$("[data-router=back]").tap(function(event) { Lungo.Router.back();});
 
-    </script>
 
-</body>
 
-</html>

+ 0 - 121
example/navigation.tablet2.html
Ver fichero 

@@ -1,121 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>Lungo Flexbox - SDK</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-
 
-    <!-- Main Stylesheet -->
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
-    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
-
 
-</head>
 
-
 
-<body>
 
-
 
-    <aside id="menu" data-transition="left">
 
-        <header data-title="My mailbox"></header>
 
-        <article id="menu_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-article="incoming">Incoming</li>
 
-                <li data-view-article="later">Later</li>
 
-                <li data-view-article="lists">Lists</li>
 
-                <li data-view-article="archived">Archived</li>
 
-                <li data-view-section="clean">clean</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
-    <aside id="menu2" data-transition="left">
 
-        <header data-title="My mailbox 2"></header>
 
-        <article id="menu_article" class="active list scroll">aaaa
 
-        </article>
 
-    </aside>
 
-
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="incoming" data-transition="slide" data-aside="menu">
 
-        <header data-title="Mail">
 
-            <nav class="left">
 
-                <button data-icon="list" data-view-aside="menu"></button>
 
-            </nav>
 
-            <nav class="right">
 
-            </nav>
 
-        </header>
 
-        <article id="incoming" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="later" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Later cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Later twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="lists" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Lists cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Lists twitter</li>
 
-            </ul>
 
-        </article>
 
-        <article id="archived" class="list scroll">
 
-            <ul>
 
-                <li data-view-section="mail2" class="text bold">Archived cirque du soleil</li>
 
-                <li data-view-section="mail" class="text bold">Archived twitter</li>
 
-            </ul>
 
-        </article>
 
-        <footer>
 
-            <nav>
 
-                <a href="#" data-view-article="incoming">incoming</a>
 
-                <a href="#" data-view-article="later">later</a>
 
-                <a href="#" data-view-article="lists">lists</a>
 
-                <a href="#" data-view-article="archived">archived</a>
 
-                <a href="#" data-view-article="main_article_1">main_article_1</a>
 
-            </nav>
 
-        </footer>
 
-    </section>
 
-
 
-    <section id="mail2" data-aside="menu" data-transition="slide">
 
-        <header data-title="First mail">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_2">
 
-            mail 1
 
-        </article>
 
-    </section>
 
-
 
-    <section id="mail" data-aside="menu" data-transition="slide">
 
-        <header data-title="Second mail">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_1">
 
-            mail 2
 
-        </article>
 
-    </section>
 
-
 
-    <script src="components/quojs/quo.js"></script>
 
-    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
-    <script>
 
-        Lungo.init({
 
-            name: 'Flexbox',
 
-            version: '2.2',
 
-            history: false
 
-        });
 
-        $$("[data-router=back]").tap(function(event) { Lungo.Router.back(); });
 
-    </script>
 
-</body>
 
-</html>

+ 0 - 130
example/navigation.tablet3.html
Ver fichero 

@@ -1,130 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>Lungo Flexbox - SDK</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-
 
-    <!-- Main Stylesheet -->
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
-    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
-
 
-</head>
 
-
 
-<body>
 
-
 
-    <aside id="aside1" data-transition="left">
 
-        <header data-title="Aside 1"></header>
 
-        <article id="aside1_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-section="s1" data-icon="plus">Section 1</li>
 
-                <li data-view-section="s2" data-icon="plus">Section 2</li>
 
-                <li data-view-section="s3" data-icon="plus">Section 3</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
-
 
-    <aside id="aside2" data-transition="left">
 
-        <header data-title="Aside 2"></header>
 
-        <article id="aside2_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-section="s3" data-icon="plus">Section 3</li>
 
-                <li data-view-section="s4" data-icon="plus">Section 4</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
-
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="s1" data-transition="slide" data-aside="aside1" data-children="s2 s3">
 
-        <header data-title="S1">
 
-            <nav class="left">
 
-                <button data-icon="list" data-view-aside="aside1"></button>
 
-            </nav>
 
-        </header>
 
-        <article id="incoming" class="list scroll">
 
-            aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
 
-            <button data-view-section="s2">S2 go!</button>
 
-            <button data-view-section="s3">S3 go!</button>
 
-            <button data-view-section="s4">S4 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s2" data-transition="slide" data-aside="aside1">
 
-        <header data-title="S2">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_2">
 
-            bbbbbb bbbbbbbbbb bbbb bbbb
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s3" data-transition="slide" data-aside="aside1">
 
-        <header data-title="S3">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_3">
 
-            cccc c cccccccc cccc c cccccccc cccc c cccccccc
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s4" data-transition="slide" data-aside="aside2" data-children="s5">
 
-        <header data-title="S4">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_4">
 
-            dddd d dddddddd dddd d dddddddd dddd d dddddddd
 
-            <button data-view-section="s5">S5 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s5" data-transition="slide" data-aside="aside2" data-children="s6">
 
-        <header data-title="S5">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_5">
 
-            eee eeee eeee eeeee eeeeee
 
-            <button data-view-section="s6">S5 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s6" data-transition="slide" data-aside="aside2">
 
-        <header data-title="S6">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_6">
 
-            eee eeee eeee eeeee eeeeee
 
-        </article>
 
-    </section>
 
-
 
-    <script src="components/quojs/quo.js"></script>
 
-    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
-    <script>
 
-        Lungo.init({
 
-            name: 'Flexbox',
 
-            version: '2.2',
 
-            history: false
 
-        });
 
-        $$("[data-router=back]").tap(function(event) { Lungo.Router.back(); });
 
-    </script>
 
-</body>
 
-</html>

+ 0 - 131
example/navigation.tablet4.html
Ver fichero 

@@ -1,131 +0,0 @@
 
-<!doctype html>
 
-<html>
 
-<head>
 
-    <meta charset="utf-8">
 
-    <title>Lungo Flexbox - SDK</title>
 
-    <meta name="description" content="">
 
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
-    <meta name="HandheldFriendly" content="True">
 
-    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <meta name="apple-mobile-web-app-capable" content="yes">
 
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-    <meta name="format-detection" content="telephone=no">
 
-    <meta http-equiv="cleartype" content="on">
 
-
 
-    <!-- Main Stylesheet -->
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
-    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
-
 
-</head>
 
-
 
-<body>
 
-
 
-    <aside id="aside1" data-transition="left">
 
-        <header data-title="Aside 1"></header>
 
-        <article id="aside1_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-section="s1" data-icon="plus">Section 1</li>
 
-                <li data-view-section="s2" data-icon="plus">Section 2</li>
 
-                <li data-view-section="s3" data-icon="plus">Section 3</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
-<!--
 
-    <aside id="aside2" data-transition="left">
 
-        <header data-title="Aside 2"></header>
 
-        <article id="aside2_article" class="active list scroll">
 
-            <ul>
 
-                <li data-view-section="s3" data-icon="plus">Section 3</li>
 
-                <li data-view-section="s4" data-icon="plus">Section 4</li>
 
-            </ul>
 
-        </article>
 
-    </aside>
 
- -->
 
-    <!-- ===================================================================================== -->
 
-    <!-- ===================================================================================== -->
 
-
 
-    <section id="s1" data-transition="slide" data-aside="aside1">
 
-        <header data-title="S1">
 
-            <nav class="left">
 
-                <button data-icon="list" data-view-aside="aside1"></button>
 
-            </nav>
 
-        </header>
 
-        <article id="incoming" class="list scroll">
 
-            aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
 
-            <button data-view-section="s2">S2 go!</button>
 
-            <button data-view-section="s3">S3 go!</button>
 
-            <button data-view-section="s4">S4 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s2" data-transition="slide" data-aside="aside1">
 
-        <header data-title="S2">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_2">
 
-            bbbbbb bbbbbbbbbb bbbb bbbb
 
-        </article>
 
-    </section>
 
-
 
-<!--
 
-    <section id="s3" data-transition="slide" data-aside="aside1">
 
-        <header data-title="S3">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_3">
 
-            cccc c cccccccc cccc c cccccccc cccc c cccccccc
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s4" data-transition="slide" data-aside="aside2" data-children="s5">
 
-        <header data-title="S4">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_4">
 
-            dddd d dddddddd dddd d dddddddd dddd d dddddddd
 
-            <button data-view-section="s5">S5 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s5" data-transition="slide" data-aside="aside2" data-children="s6">
 
-        <header data-title="S5">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_5">
 
-            eee eeee eeee eeeee eeeeee
 
-            <button data-view-section="s6">S5 go!</button>
 
-        </article>
 
-    </section>
 
-
 
-    <section id="s6" data-transition="slide" data-aside="aside2">
 
-        <header data-title="S6">
 
-            <nav class="left">
 
-                <button data-view-section="back">BaCk</button>
 
-            </nav>
 
-        </header>
 
-        <article id="art_6">
 
-            eee eeee eeee eeeee eeeeee
 
-        </article>
 
-    </section> -->
 
-
 
-    <script src="components/quojs/quo.js"></script>
 
-    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
-    <script>
 
-        Lungo.init({
 
-            name: 'Flexbox',
 
-            version: '2.2',
 
-            history: false
 
-        });
 
-        $$("[data-router=back]").tap(function(event) { Lungo.Router.back(); });
 
-    </script>
 
-</body>
 
-</html>

+ 132 - 0
example/tablet1.html
Ver fichero 

@@ -0,0 +1,132 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Lungo Flexbox - SDK</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta http-equiv="cleartype" content="on">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
+
 
+</head>
 
+
 
+<body>
 
+
 
+    <!-- aside -->
 
+    <aside id="menu">
 
+        <header data-title="Formula1"></header>
 
+        <article class="active list scroll">
 
+            <ul>
 
+                <li data-view-article="byDriver">By driver</li>
 
+                <li data-view-article="byTeam">By team</li>
 
+            </ul>
 
+        </article>
 
+    </aside>
 
+
 
+    <!-- main section with articles -->
 
+    <section id="ranking" data-transition="slide" data-children="driver team" data-aside="menu">
 
+        <header data-title="Ranking">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="menu"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="byDriver" class="list scroll">
 
+            <ul>
 
+                <li class="active"><h1>Drivers</h1></li>
 
+                <li data-view-section="driver">Hamilton</li><li data-view-section="driver">Hamilton</li>
 
+                <li data-view-section="driver">Vettel</li><li data-view-section="driver">Vettel</li>
 
+                <li data-view-section="driver">Webber</li><li data-view-section="driver">Webber</li>
 
+                <li data-view-section="driver">Alonso</li><li data-view-section="driver">Alonso</li>
 
+                <li data-view-section="driver">Hamilton</li><li data-view-section="driver">Hamilton</li>
 
+                <li data-view-section="driver">Vettel</li><li data-view-section="driver">Vettel</li>
 
+                <li data-view-section="driver">Webber</li><li data-view-section="driver">Webber</li>
 
+                <li data-view-section="driver">Alonso</li><li data-view-section="driver">Alonso</li>
 
+                <li data-view-section="driver">Hamilton</li><li data-view-section="driver">Hamilton</li>
 
+                <li data-view-section="driver">Vettel</li><li data-view-section="driver">Vettel</li>
 
+                <li data-view-section="driver">Webber</li><li data-view-section="driver">Webber</li>
 
+                <li data-view-section="driver">Alonso</li><li data-view-section="driver">Alonso</li>
 
+            </ul>
 
+        </article>
 
+        <article id="byTeam" class="list scroll">
 
+            <ul>
 
+                <li class="active"><h1>Teams</h1></li>
 
+                <li data-view-section="team">Ferrari</li><li data-view-section="team">Ferrari</li>
 
+                <li data-view-section="team">McLaren</li><li data-view-section="team">McLaren</li>
 
+                <li data-view-section="team">RedBull</li><li data-view-section="team">RedBull</li>
 
+                <li data-view-section="team">Renault</li><li data-view-section="team">Renault</li>
 
+                <li data-view-section="team">Ferrari</li><li data-view-section="team">Ferrari</li>
 
+                <li data-view-section="team">McLaren</li><li data-view-section="team">McLaren</li>
 
+                <li data-view-section="team">RedBull</li><li data-view-section="team">RedBull</li>
 
+                <li data-view-section="team">Renault</li><li data-view-section="team">Renault</li>
 
+                <li data-view-section="team">Ferrari</li><li data-view-section="team">Ferrari</li>
 
+                <li data-view-section="team">McLaren</li><li data-view-section="team">McLaren</li>
 
+                <li data-view-section="team">RedBull</li><li data-view-section="team">RedBull</li>
 
+                <li data-view-section="team">Renault</li><li data-view-section="team">Renault</li>
 
+            </ul>
 
+        </article>
 
+    </section>
 
+
 
+    <!-- driver section -->
 
+    <section id="driver" data-transition="slide">
 
+        <header data-title="Ranking dirvers">
 
+            <nav class="left">
 
+                <button data-view-section="back" data-icon="arrow-left"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="ranking-drivers">Driver xxxx</article>
 
+        <article id="ranking-teams">Team yyyy</article>
 
+    </section>
 
+
 
+    <!-- team section -->
 
+    <section id="team" data-transition="slide" data-children="comments">
 
+        <header data-title="Ranking teams">
 
+            <nav class="left">
 
+                <button data-icon="arrow-left" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="team-article">
 
+            <button class="anchor" data-view-section="comments">view comments</button>
 
+        </article>
 
+
 
+    </section>
 
+
 
+    <section id="comments" data-transition="slide">
 
+        <header data-title="Team comments">
 
+            <nav class="left">
 
+                <button data-icon="arrow-left" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="comments-article">
 
+            comments
 
+        </article>
 
+    </section>
 
+
 
+
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init({
 
+            name: 'Tablet tests',
 
+            version: '2.2',
 
+            history: false
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 98 - 0
example/tablet2.html
Ver fichero 

@@ -0,0 +1,98 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Lungo Flexbox - SDK</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta http-equiv="cleartype" content="on">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
+
 
+</head>
 
+
 
+<body>
 
+    <aside id="menu">
 
+        <header data-title="Formula1"></header>
 
+        <article class="active list scroll">
 
+            <ul>
 
+                <li data-view-section="ranking">Rankig</li>
 
+                <li data-view-section="events">Events</li>
 
+            </ul>
 
+        </article>
 
+    </aside>
 
+
 
+    <section id="ranking" data-transition="slide" data-aside="menu">
 
+        <header data-title="Ranking">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="menu"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="byDriver" class="list scroll">
 
+            <ul>
 
+                <li><h1>Drivers</h1></li>
 
+                <li data-view-section="driver">Hamilton</li>
 
+                <li data-view-section="driver">Vettel</li>
 
+                <li data-view-section="driver">Webber</li>
 
+                <li data-view-section="driver">Alonso</li>
 
+            </ul>
 
+        </article>
 
+        <article id="byTeam" class="list scroll">
 
+            <ul>
 
+                <li><h1>Teams</h1></li>
 
+                <li data-view-section="driver">Ferrari</li>
 
+                <li data-view-section="driver">McLaren</li>
 
+                <li data-view-section="driver">RedBull</li>
 
+                <li data-view-section="driver">Renault</li>
 
+            </ul>
 
+        </article>
 
+        <footer>
 
+            <nav>
 
+                <a href="#" data-view-article="byDriver">drivers</a>
 
+                <a href="#" data-view-article="byTeam">teams</a>
 
+            </nav>
 
+        </footer>
 
+    </section>
 
+
 
+    <section id="events" data-transition="slide" data-aside="menu">
 
+        <header data-title="Events">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="menu"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="events-f1" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="eventInfo">Barcelona</li>
 
+                <li data-view-section="eventInfo">Laguna seca</li>
 
+                <li data-view-section="eventInfo">Spa-Francochamps</li>
 
+                <li data-view-section="eventInfo">Nordschleife</li>
 
+                <li data-view-section="eventInfo">Monaco</li>
 
+            </ul>
 
+        </article>
 
+    </section>
 
+
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init({
 
+            name: 'Tablet tests',
 
+            version: '2.2',
 
+            history: false
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 93 - 0
example/tablet3.html
Ver fichero 

@@ -0,0 +1,93 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Lungo Flexbox - SDK</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta http-equiv="cleartype" content="on">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
 
+    <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
 
+    <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
 
+
 
+</head>
 
+
 
+<body>
 
+
 
+
 
+    <section id="ranking" data-transition="slide" data-children="driver">
 
+        <header data-title="Ranking">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="menu"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="byDriver" class="list scroll">
 
+            <ul>
 
+                <li><h1>Drivers</h1></li>
 
+                <li data-view-section="driver">Hamilton</li>
 
+                <li data-view-section="driver">Vettel</li>
 
+                <li data-view-section="driver">Webber</li>
 
+                <li data-view-section="driver">Alonso</li>
 
+            </ul>
 
+        </article>
 
+    </section>
 
+
 
+
 
+    <section id="driver" data-transition="slide" data-children="wins">
 
+        <header data-title="Driver data">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="events-f1" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="wins">aaaa</li>
 
+                <li data-view-section="wins">bbbb</li>
 
+                <li data-view-section="wins">cccc</li>
 
+            </ul>
 
+        </article>
 
+    </section>
 
+
 
+
 
+    <section id="wins" data-transition="slide">
 
+        <header data-title="Driver wins">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="events-f1" class="list scroll">
 
+            <ul>
 
+                <li>1990</li>
 
+                <li>1992</li>
 
+                <li>1993</li>
 
+                <li>2001</li>
 
+                <li>2010</li>
 
+            </ul>
 
+        </article>
 
+    </section>
 
+
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init({
 
+            name: 'Tablet tests',
 
+            version: '2.2',
 
+            history: false
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 1
src/boot/Lungo.Boot.Events.coffee
Ver fichero 

@@ -24,8 +24,8 @@ Lungo.Boot.Events = do (lng = Lungo) ->
 
   ###
 
   init = ->
 
     lng.dom(C.QUERY.SECTION_ROUTER_TOUCH).touch _onSection
 
-    lng.dom(C.QUERY.ARTICLE_ROUTER_TOUCH).touch _onArticle
 
     lng.dom(C.QUERY.SECTION_ROUTER_TAP).tap _onSection
 
+    lng.dom(C.QUERY.ARTICLE_ROUTER_TOUCH).touch _onArticle
 
     lng.dom(C.QUERY.ARTICLE_ROUTER_TAP).tap _onArticle
 
     lng.dom(C.QUERY.ASIDE_ROUTER).touch _onAside
 
     lng.dom(C.QUERY.MENU_ROUTER).touch _onMenu

+ 11 - 1
src/element/Lungo.Element.Cache.coffee
Ver fichero 

@@ -9,8 +9,18 @@ DOM Elements caching
 
 
 
 Lungo.Element.Cache =
 
-  # sections: null,
 
+
 
   section: null
 
   article: null
 
   aside: null
 
   navigation: null
 
+
 
+  dump: ->
 
+    txt = ""
 
+    txt += "================ cache data ================\n"
 
+    txt += " SECTION:    #{@section?.attr('id')}\n"
 
+    txt += " ARTICLE:    #{@article?.attr('id')}\n"
 
+    txt += " ASIDE:      #{@aside?.attr('id')}\n"
 
+    txt += " NAVIGATION: #{@navigation?.attr('id')}\n"
 
+    txt += "============================================\n"
 
+    console.error txt

+ 12 - 5
src/modules/Lungo.Aside.coffee
Ver fichero 

@@ -20,7 +20,6 @@ Lungo.Aside = do (lng = Lungo) ->
 
   show = (aside_id, animate_section = true, fromX = 0) ->
 
     aside = lng.dom("##{aside_id}")
 
     if aside.length and not _alreadyOpen(aside_id)
 
-        console.error 'Current aside --> ', aside
 
         lng.Element.Cache.aside = aside
 
         if lng.DEVICE is C.DEVICE.PHONE
 
           aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
 
@@ -32,11 +31,17 @@ Lungo.Aside = do (lng = Lungo) ->
 
           aside_section = lng.dom("[data-aside=#{aside_id}][data-children].#{C.CLASS.SHOW}")
 
           if aside_section.attr("id") isnt lng.Element.Cache.section?.attr("id")
 
             lng.Element.Cache.section.addClass "shadowing"
 
-          aside_section.removeClass("aside").addClass "asideShowing"
 
+            childs = aside_section.data("children").split(" ")
 
+            for child in childs
 
+              child = lng.dom(C.ELEMENT.SECTION + "#" + child)
 
+              if child.hasClass(C.CLASS.SHOW) then child.addClass "shadowing"
 
 
-  _alreadyOpen = (aside_id) ->
 
-    return lng.Element.Cache.aside?.attr("id") is aside_id
 
+          aside_section.removeClass("aside").addClass "asideShowing"
 
 
+  ###
 
+  Shows a fixed aside (not able to hide cause section have not children)
 
+  @method hide
 
+  ###
 
   showFix = (aside_id) ->
 
     aside = lng.dom("##{aside_id}")
 
     if aside.length
 
@@ -71,7 +76,6 @@ Lungo.Aside = do (lng = Lungo) ->
 
     if lng.Element.Cache.aside then do lng.Aside.hide
 
     else lng.Aside.show aside
 
 
-
 
   ###
 
   Triggered when <aside> animation ends.
 
   @method   animationEnd
 
@@ -131,6 +135,9 @@ Lungo.Aside = do (lng = Lungo) ->
 
   ###
 
   Private methods
 
   ###
 
+  _alreadyOpen = (aside_id) ->
 
+    return lng.Element.Cache.aside?.attr("id") is aside_id
 
+
 
   _asideStylesheet = ->
 
     if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "

+ 44 - 40
src/modules/Lungo.Router.Tablet.coffee
Ver fichero 

@@ -33,8 +33,6 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
         step section_id
 
         do _url unless Lungo.Config.history is false
 
         do _updateNavigationElements
 
-    # else do lng.Aside.hide
 
-    # console.error "Forward -->", _history
 
 
   ###
 
   Return to previous section.
 
@@ -42,15 +40,25 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
   ###
 
   back = (animating = true) ->
 
     return false if _animating
 
+    if not _sameSection()
 
+      target = lng.dom(event.target).closest(C.ELEMENT.SECTION)
 
+      if target.length
 
+        i = 0
 
+        while history() isnt target.attr("id") and i++ < 10
 
+          _applyDirection(lng.dom(C.ELEMENT.SECTION + HASHTAG + history()), "back-out")
 
+          do _removeLast
 
+        lng.Element.Cache.section = target
 
+
 
     do _removeLast
 
     current = lng.Element.Cache.section
 
     query = C.ELEMENT.SECTION + HASHTAG + history()
 
     future = current.siblings(query)
 
+
 
     if future.length
 
       _show future, current, true, animating
 
       do _url unless Lungo.Config.history is false
 
       do _updateNavigationElements
 
-    # console.error "Backward -->", _history
 
+
 
 
   ###
 
   Displays the <article> in a particular <section>.
 
@@ -65,12 +73,10 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
       section = target.closest C.ELEMENT.SECTION
 
       lng.Router.section(section.attr("id"))
 
       section.children("#{C.ELEMENT.ARTICLE}.#{C.CLASS.ACTIVE}").removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
 
-      target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
 
-      # lng.Element.Cache.article.removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
 
-      # lng.Element.Cache.article = target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
 
+      lng.Element.Cache.article.removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
 
+      lng.Element.Cache.article = target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
 
 
       if element?.data(C.ATTRIBUTE.TITLE)?
 
-        # lng.Element.Cache.section.find(C.QUERY.TITLE).text element.data(C.ATTRIBUTE.TITLE)
 
         section.find(C.QUERY.TITLE).text element.data(C.ATTRIBUTE.TITLE)
 
       do _url unless Lungo.Config.history is false
 
       _updateNavigationElements article_id
 
@@ -122,60 +128,52 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
       lng.Section.show(current, future)
 
     _fromCallback = false
 
 
-  _showFuture = (future, animating=false) ->
 
+  _showFuture = (future) ->
 
     current = undefined
 
     lng.Section.show(current, future)
 
-    if not animating and not _fromCallback then future.addClass(C.CLASS.SHOW)
 
+    if not _fromCallback then future.addClass(C.CLASS.SHOW)
 
     else _applyDirection(future, "in")
 
     _checkAside(current, future)
 
 
   _showForward = (current, future) ->
 
-    asideHandled = false
 
     if _isChild(current, future) then _applyDirection(future, "in")
 
     else
 
       do _removeLast
 
-      parent_id = _parentId(future)
 
       hideSelector = "section.#{C.CLASS.SHOW}"
 
+      parent_id = _parentId(future)
 
       if parent_id then hideSelector += ":not(##{parent_id})"
 
       elements = lng.dom(hideSelector)
 
-      if lng.Element.Cache.aside
 
-        do lng.Aside.hide
 
-        elements.removeClass C.CLASS.SHOW
 
-        _showFuture future, true
 
-        asideHandled = true
 
-      else
 
-        _applyDirection(elements, "back-out")
 
-        _callbackSection = future
 
+      _applyDirection(elements, "back-out")
 
+      _callbackSection = future
 
 
-    if not asideHandled and not _fromCallback
 
-      _checkAside(current, future)
 
+    _checkAside(current, future)
 
 
   _showBackward = (current, future) ->
 
     _applyDirection(current, "back-out")
 
     showSections = lng.dom("section.#{C.CLASS.SHOW}:not(##{current.attr('id')})")
 
     if showSections.length is 1 and showSections.first().data("children")?
 
-      lng.Aside.hide (-> lng.Aside.show showSections.first().data("aside"))
 
+      console.error "Muestro por quiiiiiii"
 
+      lng.Aside.show showSections.first().data("aside")
 
     _callbackSection = future
 
 
-  _visibleParent = (section) ->
 
-    return lng.dom("section[data-children~=#{section.attr('id')}].#{C.CLASS.SHOW}")
 
+  # _visibleParent = (section) ->
 
+  #   return lng.dom("section[data-children~=#{section.attr('id')}].#{C.CLASS.SHOW}")
 
 
   _checkAside = (current, target) ->
 
     aside_id = target.data("aside")
 
-    unless aside_id then do lng.Aside.hide
 
-    else if current?
 
-      do lng.Aside.hide unless lng.Element.Cache.aside?.hasClass("box")
 
-    else if target.data("children") and lng.dom("section.#{C.CLASS.SHOW}").length is 1
 
-      lng.Aside.show(aside_id)
 
-    else if not target.data("children")
 
-      unless _parentId target
 
-        lng.Aside.showFix(aside_id)
 
-
 
-  _targetIsChildren = (current, target) ->
 
-    children = current?.data("children")
 
-    return false unless children
 
-    target_id = target.attr "id"
 
-    return children.indexOf(target_id) isnt -1
 
+    current_aside = lng.Element.Cache.aside
 
+    if aside_id
 
+      unless current? and lng.Element.Cache.aside?
 
+        _showAside(aside_id, target)
 
+      else if not current_aside.hasClass("box")
 
+        do lng.Aside.hide
 
+    else
 
+      console.error 'no hay aside asociado'
 
+      do lng.Aside.hide
 
+
 
+  _showAside = (aside_id, target) ->
 
+    if target.data("children") then lng.Aside.show aside_id
 
+    else lng.Aside.showFix aside_id
 
 
   _parentId = (section) ->
 
     parent = lng.dom("[data-children~=#{section.attr('id')}]")
 
@@ -221,6 +219,13 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
     nav = lng.Element.Cache.section.find(C.QUERY.ARTICLE_REFERENCE).addClass C.CLASS.HIDE
 
     nav.filter("[data-article~='#{article_id}']").removeClass C.CLASS.HIDE
 
 
+    if lng.Element.Cache.aside
 
+      current_section_id = lng.Element.Cache.section.attr("id")
 
+      aside = lng.Element.Cache.aside
 
+      aside.find(C.QUERY.SECTION_ROUTER + "." + C.CLASS.ACTIVE).removeClass("active")
 
+      aside.find("[data-view-section=#{current_section_id}]").addClass(C.CLASS.ACTIVE)
 
+
 
+
 
   _removeLast = ->
 
     if _history.length > 1
 
       _history.length -= 1
 
@@ -232,5 +237,4 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
   history : history
 
   step    : step
 
   animationEnd : animationEnd
 
-
 
-
 
+  historys : -> _history

+ 3 - 0
src/stylesheets/lungo.animation.slide.styl
Ver fichero 

@@ -47,4 +47,7 @@ body[data-device="tablet"]
 
 @keyframes slideBackOutTablet
 
   from { transform: translateX(0); opacity: 1 }
 
   to   { transform: translateX(100%); opacity: 0 }
 
+// @keyframes slideBackOutTablet
 
+//   from { opacity: 1 }
 
+//   to   { opacity: 0 }