Quellcode durchsuchen

Some fixes on tablet routering

pinaypunto vor 13 Jahren
Ursprung
Commit
cfd23d9e76

+ 19 - 4
example/others/tablet1.html

@@ -21,6 +21,14 @@
 
 <body>
 
+<!--
+    <section id="start">
+        <article>
+            <button data-view-section="ranking" data-icon="arrow-left"> start</button>
+        </article>
+    </section>
+ -->
+
     <!-- aside -->
     <aside id="menu">
         <header data-title="Formula1"></header>
@@ -106,7 +114,6 @@
         <article id="team-article">
             <button class="anchor" data-view-section="comments">view comments</button>
         </article>
-
     </section>
 
     <section id="comments" data-transition="slide">
@@ -121,11 +128,9 @@
         </article>
     </section>
 
-
-
     <!-- Lungo dependencies -->
     <script src="../components/quojs/quo.js"></script>
-    <script src="../../package/lungo/lungo.js"></script>
+    <script src="../../build/lungo.debug.js"></script>
 
     <!-- LungoJS - Sandbox App -->
     <script>
@@ -137,3 +142,13 @@
     </script>
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+

+ 2 - 1
example/others/tablet2.html

@@ -85,7 +85,8 @@
 
     <!-- Lungo dependencies -->
     <script src="../components/quojs/quo.js"></script>
-    <script src="../../package/lungo/lungo.js"></script>
+    <script src="../../build/lungo.debug.js"></script>
+
 
     <!-- LungoJS - Sandbox App -->
     <script>

+ 2 - 1
example/others/tablet3.html

@@ -79,7 +79,8 @@
 
     <!-- Lungo dependencies -->
     <script src="../components/quojs/quo.js"></script>
-    <script src="../../package/lungo/lungo.js"></script>
+    <script src="../../build/lungo.debug.js"></script>
+
 
     <!-- LungoJS - Sandbox App -->
     <script>

+ 5 - 4
example/others/tablet4.html

@@ -23,14 +23,14 @@
 
     <section id="security" data-transition="slide">
         <article>
-            security
+            securityyyyyyyyy
             <button data-view-section="main">Go main!</button>
         </article>
     </section>
 
-    <section id="main" data-transition="slide" data-children="other">
+    <section id="main" data-transition="slide">
         <article>
-            main
+            main!!!
             <button data-view-section="back">Go back!</button>
             <button data-view-section="other">Go other!</button>
         </article>
@@ -46,7 +46,8 @@
 
     <!-- Lungo dependencies -->
     <script src="../components/quojs/quo.js"></script>
-    <script src="../../package/lungo/lungo.js"></script>
+    <script src="../../build/lungo.debug.js"></script>
+
     <script>
         Lungo.init({
             name: 'test',

+ 0 - 66
example/others/tablet5.html

@@ -1,66 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Tablet5</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="../../package/lungo/lungo.css">
-    <link rel="stylesheet" href="../../package/lungo/lungo.theme.css">
-    <link rel="stylesheet" href="../../package/lungo.icon/lungo.icon.css">
-
-</head>
-
-<body>
-
-    <section id="security" data-transition="slide">
-        <article>
-            security
-            <button data-view-section="main">Go main!</button>
-        </article>
-    </section>
-
-    <section id="main" data-transition="slide">
-        <article>
-            main!!!
-            <button data-view-section="back">Go back!</button>
-            <button data-view-section="other">Go other!</button>
-        </article>
-    </section>
-
-    <section id="other" data-transition="slide">
-        <article>
-            other
-            <button data-view-section="back">Go back!</button>
-        </article>
-    </section>
-
-
-    <!-- Lungo dependencies -->
-    <script src="../components/quojs/quo.js"></script>
-    <script src="../../package/lungo/lungo.js"></script>
-    <script>
-        Lungo.init({
-            name: 'test',
-            history: false
-        });
-    </script>
-</body>
-</html>
-
-
-
-
-
-
-
-
-

+ 30 - 8
src/modules/Lungo.Router.Tablet.coffee

@@ -29,11 +29,14 @@ Lungo.RouterTablet = do (lng = Lungo) ->
       query = C.ELEMENT.SECTION + HASHTAG + section_id
       future = if current then current.siblings(query) else lng.dom(query)
       if future.length
-        _show future, current
+        if current and _isSimpleSection(current) and _isSimpleSection(future)
+          _simpleRoutering current, future
+        else _show future, current
         step section_id
         do _url unless Lungo.Config.history is false
         do _updateNavigationElements
 
+
   ###
   Return to previous section.
   @method   back
@@ -55,7 +58,9 @@ Lungo.RouterTablet = do (lng = Lungo) ->
     future = current.siblings(query)
 
     if future.length
-      _show future, current, true, animating
+      if current and _isSimpleSection(current) and _isSimpleSection(future)
+        _simpleRoutering current, future
+      else _show future, current, true, animating
       do _url unless Lungo.Config.history is false
       do _updateNavigationElements
 
@@ -127,22 +132,33 @@ Lungo.RouterTablet = do (lng = Lungo) ->
   Private methods
   ###
   _show = (future, current, backward=false) ->
-    unless current? then _showFuture(future)
+    unless current?
+      lng.Section.show(undefined, future)
+      _showFuture(future)
     else
       if backward then _showBackward(current, future)
       else _showForward(current, future)
       lng.Section.show(current, future)
     _fromCallback = false
 
+  ### returns true with a section without data-aside and data-childrens ###
+  _isSimpleSection = (section) ->
+    not section.data("children")? and not section.data("aside")?
+
+  ### show/hide simple sections ###
+  _simpleRoutering = (current, future) ->
+    lng.Section.show current, future
+    current.removeClass "show"
+    future.addClass "show"
+
+  ### Shows a section when there is no current section ###
   _showFuture = (future) ->
-    current = lng.Element.Cache.section
-    lng.Section.show(undefined, future)
-    currentHasAside = lng.Element.Cache.section?.data("aside")?
     if not _fromCallback or not lng.Element.Cache.section?.data("aside")
       future.addClass(C.CLASS.SHOW)
     else _applyDirection(future, "in")
     _checkAside(undefined, future)
 
+  ### Shows a section when there is current section ###
   _showForward = (current, future) ->
     if _isChild(current, future) then _applyDirection(future, "in")
     else
@@ -222,11 +238,17 @@ Lungo.RouterTablet = do (lng = Lungo) ->
     _hashed_url += lng.Element.Cache.article.attr "id"
     setTimeout (-> window.location.hash = _hashed_url), 0
 
+
   _updateNavigationElements = (article_id) ->
     article_id = lng.Element.Cache.article?.attr(C.ATTRIBUTE.ID) unless article_id
     # Active visual signal for elements
-    links = lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE)
-    links.filter("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
+    # links = lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE)
+    lng.Element.Cache.section.find(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE)
+    if lng.Element.Cache.section.data("aside")?
+      related_aside = lng.dom("aside##{lng.Element.Cache.section.data("aside")}")
+      related_aside.find(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE)
+
+    lng.dom("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
     # Hide/Show elements in current article
     nav = lng.Element.Cache.section.find(C.QUERY.ARTICLE_REFERENCE).addClass C.CLASS.HIDE
     nav.filter("[data-article~='#{article_id}']").removeClass C.CLASS.HIDE