Strona główna Odkrywaj Pomoc
Zaloguj się
pwa
/
Lungo.js
kopia lustrzana https://github.com/tapquo/Lungo.js.git
2
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

First steps for tablet routering

Basic routering for tablet devices. LungoRouter separated in
LungoRouterPhone and LungoRouterTablet
piniphone 13 lat temu
rodzic
5bc3232a41
commit
fa98639f3d
13 zmienionych plików z 448 dodań i 186 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 3 1
      GruntFile.coffee
  2. 0 63
      example/kf.html
  3. 15 31
      example/navigation.html
  4. 127 0
      example/navigation.tablet.html
  5. 8 3
      src/boot/Lungo.Boot.Events.coffee
  6. 21 9
      src/modules/Lungo.Aside.coffee
  7. 2 0
      src/modules/Lungo.Init.coffee
  8. 9 8
      src/modules/Lungo.Router.coffee
  9. 170 0
      src/modules/Lungo.Router.Tablet.coffee
  10. 12 18
      src/modules/Lungo.Section.coffee
  11. 16 4
      src/stylesheets/lungo.animation.aside.styl
  12. 8 15
      src/stylesheets/lungo.animation.slide.styl
  13. 57 34
      src/stylesheets/lungo.media.tablet.styl

+ 3 - 1
GruntFile.coffee
Wyświetl plik 

@@ -32,7 +32,9 @@ module.exports = (grunt) ->
 
         'src/modules/Lungo.Resource.coffee',
 
         'src/modules/Lungo.Scroll.coffee',
 
         'src/modules/Lungo.Service.coffee',
 
-        'src/modules/Lungo.Router.coffee',
 
+        # 'src/modules/Lungo.Router.coffee',
 
+        'src/modules/Lungo.Router.Phone.coffee',
 
+        'src/modules/Lungo.Router.Tablet.coffee',
 
         'src/modules/Lungo.Aside.coffee',
 
         'src/modules/Lungo.Section.coffee',
 
         'src/modules/Lungo.Article.coffee',

+ 0 - 63
example/kf.html
Wyświetl plik 

@@ -1,63 +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">
 
-
 
-    <style>
 
-
 
-        div {
 
-            width: 200px;
 
-            height: 200px;
 
-            background: red;
 
-            position: absolute;
 
-            /*-webkit-transform: translateX(100px);*/
 
-        }
 
-
 
-        body {
 
-            -webkit-perspective: 800px;
 
-            -webkit-transform-style: preserve-3d;
 
-        }
 
-
 
-        .moveme {
 
-            -webkit-animation-name: kf;
 
-            -webkit-animation-duration: 5s;
 
-            -webkit-animation-timing-function: linear;
 
-            -webkit-animation-iteration-count:1 ;
 
-        }
 
-
 
-        @-webkit-keyframes kf {
 
-            from {
 
-                -webkit-transform: translateX(100px) rotateX(100deg);
 
-            }
 
-            to {
 
-                -webkit-transform: translateX(0px) rotateX(0deg);
 
-            }
 
-        }
 
-
 
-    </style>
 
-
 
-</head>
 
-
 
-<body>
 
-
 
-    <div id="el" ></div>
 
-
 
-    <script>
 
-        var el = document.getElementById("el");
 
-        el.className = "moveme";
 
-        var animEvents = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"];
 
-        document.addEventListener(animEvents[1], function() {
 
-            alert("End!");
 
-        });
 
-    </script>
 
-</body>
 
-</html>

+ 15 - 31
example/navigation.html
Wyświetl plik 

@@ -20,34 +20,24 @@
 
 </head>
 
 
 <body>
 
-    <aside id="a1" data-transition="left">
 
-        <header data-title="Aside a1"></header>
 
-        <article id="a1a1" class="active list scroll">
 
-            <ul>
 
-                <li data-view-article="s1a1">show ARTICLE s1a1</li>
 
-                <li data-view-article="s1a2">show ARTICLE s1a2</li>
 
-                <li data-view-article="s1a1">show ARTICLE s1a1</li>
 
-                <li data-view-article="s1a2">show ARTICLE s1a2</li>
 
-                <li data-view-section="s2">show SECTION s2</li>
 
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
 
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
 
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
 
-                <li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
 
-            </ul>
 
+    <aside id="a1">
 
+        <header data-title="a1"></header>
 
+        <article id="a1a1">
 
+            <h1>a1.a1</h1>
 
+        </article>
 
+        <article id="a1a2">
 
+            <h1>S1.A2</h1>
 
         </article>
 
     </aside>
 
 
-    <aside id="a2" data-transition="right">
 
+    <aside id="a2">
 
         <header data-title="a2"></header>
 
-        <article id="a2a1" class="active list scroll">
 
-            <button data-router="back" class="tiny">back</button>
 
-            <button data-view-section="s1" class="tiny">s1</button>
 
-            <button data-view-section="s2" class="tiny">s2</button>
 
-            <button data-view-section="s3" class="tiny">s3</button>
 
+        <article id="a2a1">
 
+            <h1>a2.a1</h1>
 
         </article>
 
     </aside>
 
 
-    <section id="s1" data-transition="slide" data-children="one" data-aside="a1">
 
+    <section id="s1" data-t-ransition="slide" data-children="one" data-aside="a1">
 
         <header data-title="s1">
 
             <nav class="left">
 
                 <button data-icon="list" data-view-aside="a1"></button>
 
@@ -56,15 +46,14 @@
 
                 <button data-article="s1a1" data-view-article="s1a2" data-label="s1a2"></button>
 
                 <button data-article="s1a2" data-view-article="s1a1" data-label="s1a1"></button>
 
                 <button data-icon="arrow-right" data-view-section="s2"></button>
 
-                <button data-icon="list" data-view-aside="a2"></button>
 
             </nav>
 
         </header>
 
         <article id="s1a1"><h1>S1.A1</h1></article>
 
         <article id="s1a2"><h1>S1.A2</h1></article>
 
         <footer>
 
             <nav>
 
-                <a href="#" data-view-article="s1a1" data-icon="user" class="active"></a>
 
-                <a href="#" data-view-article="s1a2" data-icon="group"></a>
 
+                <a href="#" data-view-article="s1a2" data-icon="user" class="active"></a>
 
+                <a href="#" data-view-article="s1a1" data-icon="group"></a>
 
             </nav>
 
         </footer>
 
     </section>
 
@@ -84,7 +73,7 @@
 
         <article id="s2a2"><h1>s2.A2</h1></article>
 
     </section>
 
 
-    <section id="s3" data-transition="slide" data-children="one" data-aside="a2">
 
+    <section id="s3" data-t-ransition="slide" data-children="one" data-aside="a2">
 
         <header data-title="s3" data-back="home">
 
             <nav class="left">
 
                 <button data-icon="list" data-view-aside="a2"></button>
 
@@ -109,11 +98,6 @@
 
             history: false
 
         });
 
 
-        $$("[data-router=back]").tap(function(event) {
 
-            Lungo.Router.back();
 
-        });
 
-
 
-
 
     </script>
 
 </body>
 
-</html>
 
+</html>

+ 127 - 0
example/navigation.tablet.html
Wyświetl plik 

@@ -0,0 +1,127 @@
 
+<!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: true
 
+        });
 
+        $$("[data-router=back]").tap(function(event) { Lungo.Router.back();});
 
+    </script>
 
+</body>
 
+</html>

+ 8 - 3
src/boot/Lungo.Boot.Events.coffee
Wyświetl plik 

@@ -9,7 +9,8 @@ Initialize the automatic DOM UI events
 
 @author Ignacio Olalde <ina@tapquo.com> || @piniphone
 
 ###
 
 
-Lungo.Boot.Events = do(lng = Lungo) ->
 
+Lungo.Boot.Events = do (lng = Lungo) ->
 
+
 
   C = lng.Constants
 
   ATTRIBUTE = lng.Constants.ATTRIBUTE
 
   CLASS = lng.Constants.CLASS
 
@@ -32,6 +33,7 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     lng.dom(QUERY.CONTROL_CHECKBOX).on C.EVENT.CHANGE, _changeCheckboxValue
 
     for transition in C.EVENT.TRANSITION_END
 
       lng.dom(C.ELEMENT.SECTION).on transition, _transitionEnd
 
+      lng.dom(C.ELEMENT.ASIDE).on transition, _transitionEnd
 
 
   _onSection = (event) ->
 
     event.preventDefault()
 
@@ -49,7 +51,7 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
       _onAsyncResource el, C.ELEMENT.ARTICLE
 
     else
 
       lng.Router.article lng.Router.history(), el.data("view-article"), el
 
-      lng.Aside.hide()
 
+      # lng.Aside.hide()
 
 
   _onAsyncResource = (el, type) ->
 
     url = el.data "async"
 
@@ -100,7 +102,10 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
 
   _transitionEnd = (event) ->
 
     section = lng.dom(event.target)
 
-    if section.data("direction") then lng.Router.animationEnd event
 
+    asideRelated = section.hasClass("asideHidding") or section.hasClass("asideShowing")
 
+    shadowRelated = section.hasClass("shadowing") or section.hasClass("unshadowing")
 
+
 
+    if section.data("direction") or asideRelated or shadowRelated then lng.Router.animationEnd event
 
     else lng.Aside.animationEnd event

+ 21 - 9
src/modules/Lungo.Aside.coffee
Wyświetl plik 

@@ -16,24 +16,36 @@ Lungo.Aside = do (lng = Lungo) ->
 
   Display an aside element with a particular <section>
 
   @method show
 
   ###
 
-  show = (aside_id) ->
 
+  show = (aside_id, animate_section = true) ->
 
     aside = lng.dom("##{aside_id}")
 
     if aside.length
 
       lng.Element.Cache.aside = aside
 
+      aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
 
       aside.addClass(C.CLASS.SHOW)
 
-      lng.Element.Cache.section.data("aside-#{aside.data(C.TRANSITION.ATTR)}", "show")
 
+      if lng.DEVICE is C.DEVICE.PHONE
 
+        lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
 
+      else
 
+        aside_section = lng.dom("[data-aside=#{aside_id}]")
 
+        if aside_section.attr("id") isnt lng.Element.Cache.section.attr("id")
 
+          lng.Element.Cache.section.addClass "shadowing"
 
+        aside_section.removeClass("aside").addClass "asideShowing"
 
 
   ###
 
   Hide an aside element with a particular section
 
   @method hide
 
   ###
 
   hide = (callback) ->
 
-    aside = lng.Element.Cache.aside
 
-    if aside
 
+    if lng.Element.Cache.aside
 
       _callback = callback
 
-      aside_transition = aside.data(C.TRANSITION.ATTR)
 
-      section = lng.Element.Cache.section
 
-      section.data("aside-#{aside_transition}", "hide")
 
+      aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
 
+      if lng.DEVICE is C.DEVICE.PHONE
 
+        lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
 
+      else
 
+        lng.dom(".aside").removeClass("aside").addClass("asideHidding")
 
+        lng.Element.Cache.aside = null
 
+        if callback then callback.call callback
 
+        lng.dom(".shadow").removeClass("shadow").addClass("unshadowing")
 
+    else if callback then callback.call callback
 
 
   ###
 
   Toggle an aside element
 
@@ -52,12 +64,12 @@ Lungo.Aside = do (lng = Lungo) ->
 
   ###
 
   animationEnd = (event) ->
 
     section = lng.dom(event.target)
 
-    aside_transition = lng.Element.Cache.aside.data C.TRANSITION.ATTR
 
+    aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
 
     if section.data("aside-#{aside_transition}") is "hide"
 
       lng.Element.Cache.aside.removeClass(C.CLASS.SHOW)
 
       lng.Element.Cache.aside = null
 
       section.removeAttr("data-aside-#{aside_transition}")
 
-      if _callback then _callback.call(@)
 
+      if _callback then _callback.call _callback
 
       _callback = undefined

+ 2 - 0
src/modules/Lungo.Init.coffee
Wyświetl plik 

@@ -10,6 +10,8 @@ Lungo.init = (config) ->
 
   Lungo.Config = config
 
   Lungo.Resource.load config.resources if config and config.resources
 
   do Lungo.Boot.Device.init
 
+  isPhone = Lungo.DEVICE is Lungo.Constants.DEVICE.PHONE
 
+  Lungo.Router = if isPhone then Lungo.RouterPhone else Lungo.RouterTablet
 
   do Lungo.Boot.Events.init
 
   do Lungo.Boot.Data.init
 
   do Lungo.Boot.Layout.init

+ 9 - 8
src/modules/Lungo.Router.coffee
Wyświetl plik 

@@ -6,9 +6,11 @@ Handles the <sections> and <articles> to show
 
 
 @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
 @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
 
+@author Ignacio Olalde <ina@tapquo.com> || @piniphone
 
 ###
 
 
-Lungo.Router = do (lng = Lungo) ->
 
+
 
+Lungo.RouterPhone = do (lng = Lungo) ->
 
 
   C                   = lng.Constants
 
   HASHTAG             = "#"
 
@@ -27,11 +29,11 @@ Lungo.Router = do (lng = Lungo) ->
 
       query = C.ELEMENT.SECTION + HASHTAG + section_id
 
       future = if current then current.siblings(query) else lng.dom(query)
 
       if future.length
 
-        if lng.DEVICE is C.DEVICE.PHONE then _sectionPhone future, current
 
-        else _show future, current
 
+        _section future, current
 
         lng.Router.step section_id
 
         do _url unless Lungo.Config.history is false
 
         do _updateNavigationElements
 
+    else if lng.Element.Cache.aside then do lng.Aside.hide
 
 
   ###
 
   Return to previous section.
 
@@ -44,8 +46,7 @@ Lungo.Router = do (lng = Lungo) ->
 
     query = C.ELEMENT.SECTION + HASHTAG + history()
 
     future = current.siblings(query)
 
     if future.length
 
-      if lng.DEVICE is C.DEVICE.PHONE then _sectionPhone future, current, true
 
-      else _show future, current, true
 
+      _section future, current, true
 
       do _url unless Lungo.Config.history is false
 
       do _updateNavigationElements
 
 
@@ -97,7 +98,7 @@ Lungo.Router = do (lng = Lungo) ->
 
   ###
 
   Private methods
 
   ###
 
-  _sectionPhone = (future, current, backward = false) ->
 
+  _section = (future, current, backward = false) ->
 
     callback = -> _show future, current, backward
 
     if lng.Element.Cache.aside then lng.Aside.hide callback
 
     else do callback
 
@@ -106,10 +107,10 @@ Lungo.Router = do (lng = Lungo) ->
 
     if current? then _setSectionDirections future, current, backward
 
     lng.Section.show current, future
 
 
-  _setSectionDirections = (future, current, isBack=false) ->
 
+  _setSectionDirections = (future, current, backward=false) ->
 
     if not current? or not future.length then return false
 
     _animating = true
 
-    dirPrefix = if isBack then "back-" else ""
 
+    dirPrefix = if backward then "back-" else ""
 
     future.addClass(C.CLASS.SHOW)
 
     future.data(C.ATTRIBUTE.DIRECTION, "#{dirPrefix}in") if future.data(C.TRANSITION.ATTR)
 
     if current.data(C.TRANSITION.ATTR) then current.data(C.ATTRIBUTE.DIRECTION, "#{dirPrefix}out")

+ 170 - 0
src/modules/Lungo.Router.Tablet.coffee
Wyświetl plik 

@@ -0,0 +1,170 @@
 
+###
 
+Handles the <sections> and <articles> to show
 
+
 
+@namespace Lungo
 
+@class Router
 
+
 
+@author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+@author Guillermo Pascual <pasku@tapquo.com> || @pasku1
 
+@author Ignacio Olalde <ina@tapquo.com> || @piniphone
 
+###
 
+
 
+
 
+Lungo.RouterTablet = do (lng = Lungo) ->
 
+
 
+  C                   = lng.Constants
 
+  HASHTAG             = "#"
 
+  _history            = []
 
+  _animating          = false
 
+
 
+  ###
 
+  Navigate to a <section>.
 
+  @method   section
 
+  @param    {string} Id of the <section>
 
+  ###
 
+  section = (section_id) ->
 
+    return false if _animating
 
+    current = lng.Element.Cache.section
 
+    if _notCurrentTarget current, section_id
 
+      query = C.ELEMENT.SECTION + HASHTAG + section_id
 
+      future = if current then current.siblings(query) else lng.dom(query)
 
+      if future.length
 
+        _show future, current
 
+        step section_id
 
+        do _url unless Lungo.Config.history is false
 
+        do _updateNavigationElements
 
+    # else do lng.Aside.hide
 
+
 
+  ###
 
+  Return to previous section.
 
+  @method   back
 
+  ###
 
+  back = (animating = true) ->
 
+    return false if _animating
 
+    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
 
+
 
+  ###
 
+  Displays the <article> in a particular <section>.
 
+  @method   article
 
+  @param    {string} <section> Id
 
+  @param    {string} <article> Id
 
+  ###
 
+  article = (section_id, article_id, element) ->
 
+    if not _sameSection() then back false
 
+    target = lng.dom "article##{article_id}"
 
+    if target.length > 0
 
+      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)
 
+
 
+      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
 
+
 
+  ###
 
+  Triggered when <section> animation ends. Reset animation classes of section and aside
 
+  @method   animationEnd
 
+  @param    {eventObject}
 
+  ###
 
+  animationEnd = (event) ->
 
+    section = lng.dom(event.target)
 
+    direction = section.data(C.ATTRIBUTE.DIRECTION)
 
+    if direction
 
+      section.removeClass C.CLASS.SHOW if direction is "out" or direction is "back-out"
 
+      section.removeAttr "data-#{C.ATTRIBUTE.DIRECTION}"
 
+    if section.hasClass("asideHidding")
 
+      section.removeClass("asideHidding").removeClass("aside")
 
+    if section.hasClass("asideShowing")
 
+      section.removeClass("asideShowing").addClass("aside")
 
+    if section.hasClass("shadowing")
 
+      section.removeClass("shadowing").addClass("shadow")
 
+    if section.hasClass("unshadowing")
 
+      section.removeClass("unshadowing").removeClass("shadow")
 
+
 
+    _animating = false
 
+
 
+  ###
 
+  Create a new element to the browsing history based on the current section id.
 
+  @method step
 
+  @param  {string} Id of the section
 
+  ###
 
+  step = (section_id) -> _history.push section_id if section_id isnt history()
 
+
 
+  ###
 
+  Returns the current browsing history section id.
 
+  @method history
 
+  @return {string} Current section id
 
+  ###
 
+  history = -> _history[_history.length - 1]
 
+
 
+  ###
 
+  Private methods
 
+  ###
 
+  _show = (future, current, backward, animating = true) ->
 
+    if not backward and not _sameSection() then back false
 
+    if current?
 
+      if backward
 
+        if animating then current.data(C.ATTRIBUTE.DIRECTION, "back-out")
 
+        else current.removeClass("show")
 
+      else
 
+        future.addClass(C.CLASS.SHOW)
 
+        future.data(C.ATTRIBUTE.DIRECTION, "in") if future.data(C.TRANSITION.ATTR)
 
+
 
+    lng.Section.show current, future
 
+    do _checkSectionAside if animating
 
+
 
+
 
+  _checkSectionAside = (section) ->
 
+    aside_id = lng.Element.Cache.section?.data("aside")
 
+    is_other_aside = aside_id isnt lng.Element.Cache.aside?.attr("id")
 
+    lng.Aside.hide (-> lng.Aside.show aside_id)
 
+
 
+
 
+  _sameSection = ->
 
+    if not event or not lng.Element.Cache.section then return true
 
+    dispacher_section = lng.dom(event.target).closest("section,aside")
 
+    same = dispacher_section.attr("id") is lng.Element.Cache.section.attr("id")
 
+    return same
 
+
 
+  _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
 
+
 
+  _url = ->
 
+    _hashed_url = ""
 
+    _hashed_url += "#{section}/" for section in _history
 
+    _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)
 
+    # 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
 
+
 
+  _removeLast = ->
 
+    if _history.length > 1
 
+      _history.length -= 1
 
+
 
+
 
+  section : section
 
+  back    : back
 
+  article : article
 
+  history : history
 
+  step    : step
 
+  animationEnd : animationEnd
 
+
 
+

+ 12 - 18
src/modules/Lungo.Section.coffee
Wyświetl plik 

@@ -7,22 +7,19 @@ Initialize the <articles> layout of a certain <section>
 
 @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
 ###
 
 
-Lungo.Section = do(lng = Lungo) ->
 
+Lungo.Section = do (lng = Lungo) ->
 
 
   C = lng.Constants
 
 
-  show = (current, target) ->
 
-    if lng.DEVICE is C.DEVICE.PHONE then _phone target else _tablet current, target
 
-
 
+  show = (current, target, backward=false) ->
 
+    if lng.DEVICE is C.DEVICE.PHONE then _phone target else _tablet current, target, backward
 
     lng.Element.Cache.section = target
 
+
 
     active_article = target.find "#{C.ELEMENT.ARTICLE}.#{C.CLASS.ACTIVE}"
 
     if active_article.length is 0
 
       active_article = target.find(C.ELEMENT.ARTICLE).first().addClass(C.CLASS.ACTIVE)
 
-    lng.Element.Cache.article = active_article
 
-
 
-    # if lng.DEVICE isnt C.DEVICE.PHONE
 
-    #  #@TODO: debemos mostrar el aside si la seccion tiene el attributo data-aside
 
 
+    lng.Element.Cache.article = active_article
 
     current.trigger C.TRIGGER.UNLOAD if current
 
     target.trigger C.TRIGGER.LOAD
 
 
@@ -32,15 +29,12 @@ Lungo.Section = do(lng = Lungo) ->
 
   _phone = (target) ->
 
     target.addClass(C.CLASS.SHOW)
 
 
-  _tablet = (current, target) ->
 
-    children = current.data C.ATTRIBUTE.CHILDREN if current
 
-    if current and (not children or children.indexOf(target.attr(C.ATTRIBUTE.ID)) is -1)
 
-      current.addClass C.CLASS.HIDE
 
-      setTimeout (->current.removeClass(C.CLASS.SHOW).removeClass(C.CLASS.HIDE)), C.TRANSITION.DURATION
 
-
 
-    setTimeout (-> target.addClass(C.CLASS.SHOW)), C.TRANSITION.DURATION
 
+  _tablet = (current, target, backward) ->
 
+    target.addClass(C.CLASS.SHOW)
 
+    # if current and (not children or children.indexOf(target.attr(C.ATTRIBUTE.ID)) is -1)
 
+    #   current.addClass C.CLASS.HIDE
 
+    #   setTimeout (->current.removeClass(C.CLASS.SHOW).removeClass(C.CLASS.HIDE)), C.TRANSITION.DURATION
 
+    # setTimeout (-> target.addClass(C.CLASS.SHOW)), C.TRANSITION.DURATION
 
 
-  _assignTransitionOrigin = (section) ->
 
-    section.data C.TRANSITION.ORIGIN, section.data(C.TRANSITION.ATTR)
 
 
-  show: show
 
+  show: show

+ 16 - 4
src/stylesheets/lungo.animation.aside.styl
Wyświetl plik 

@@ -1,5 +1,6 @@
 
 @import "__init.styl"
 
 
+BOUNCE_DIST = 8
 
 
 section
 
   &[data-aside-left="show"]
 
@@ -15,23 +16,34 @@ aside
 
   &[data-transition=right]
 
     right: 0px
 
 
+  &[data-aside-left="hide"]
 
+    vendor(animation-name, asideLeftHide)
 
+  &[data-aside-left="show"]
 
+    vendor(animation-name, asideLeftHide)
 
+
 
 
 @keyframes sectionAsideLeftShow
 
   from { transform translateX(0) }
 
-  60%  { transform translateX(ASIDE_WIDTH + 8) }
 
+  60%  { transform translateX(ASIDE_WIDTH + BOUNCE_DIST) }
 
   to   { transform translateX(ASIDE_WIDTH) }
 
 
 @keyframes sectionAsideLeftHide
 
   from { transform translateX(ASIDE_WIDTH) }
 
-  25%  { transform translateX(ASIDE_WIDTH + 8) }
 
+  25%  { transform translateX(ASIDE_WIDTH + BOUNCE_DIST) }
 
   to   { transform translateX(0) }
 
 
 @keyframes sectionAsideRightShow
 
   from { transform translateX(0) }
 
-  60%  { transform translateX(-(ASIDE_WIDTH) - 8) }
 
+  60%  { transform translateX(-(ASIDE_WIDTH) - BOUNCE_DIST) }
 
   to   { transform translateX(-(ASIDE_WIDTH)) }
 
 
 @keyframes sectionAsideRightHide
 
   from { transform translateX(-(ASIDE_WIDTH)) }
 
-  25%  { transform translateX(-(ASIDE_WIDTH) - 8) }
 
+  25%  { transform translateX(-(ASIDE_WIDTH) - BOUNCE_DIST) }
 
   to   { transform translateX(0) }
 
+
 
+// =============================================
 
+
 
+@keyframes asideLeftHide
 
+  from { transform translateX(0) }
 
+  to   { transform translateX(-(ASIDE_WIDTH)) }

+ 8 - 15
src/stylesheets/lungo.animation.slide.styl
Wyświetl plik 

@@ -17,24 +17,17 @@ SCALE = .8
 
     vendor(animation-name, slideBackOut)
 
 
 @keyframes slideIn
 
-  from { transform: translateX(100%) }
 
-  to   { transform: translateX(0) }
 
+  from { transform: translateX(100%); opacity: 0 }
 
+  to   { transform: translateX(0); opacity: 1 }
 
 
-// @keyframes slideOut
 
-//   from { transform: scale(1) }
 
-//   to   { transform: scale(SCALE) }
 
 @keyframes slideOut
 
-  from { transform: translateZ(0) rotateX(0); opacity: 1 }
 
-  to   { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
 
+  from { transform: scale(1); opacity: 1 }
 
+  to   { transform: scale(SCALE); opacity: 0 }
 
 
 @keyframes slideBackOut
 
-  from { transform: translateX(0) }
 
-  to   { transform: translateX(100%) }
 
+  from { transform: translateX(0); opacity: 1 }
 
+  to   { transform: translateX(100%); opacity: 0 }
 
 
-// @keyframes slideBackIn
 
-//   from { transform: scale(SCALE) }
 
-//   to   { transform: scale(1) }
 
 @keyframes slideBackIn
 
-  from { transform: translateZ(-200px) rotateX(20deg); opacity: 0.1 }
 
-  to   { transform: translateZ(0) rotateX(0); opacity: 1 }
 
-
 
+  from { transform: scale(SCALE); opacity: 0 }
 
+  to   { transform: scale(1); opacity: 1 }

+ 57 - 34
src/stylesheets/lungo.media.tablet.styl
Wyświetl plik 

@@ -1,55 +1,78 @@
 
+@import "__init.styl"
 
+
 
+
 
 /* ==== Tablet ==== */
 
 @media only screen and (min-width: 768px)
 
   body
 
     display-box()
 
     box-orient(horizontal)
 
     overflow: hidden
 
+    vendor(perspective, 800px)
 
+    vendor(transform-style, preserve-3d)
 
+
 
+    & > section, & > aside
 
+      backface-visibility hidden
 
+      vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+      vendor(animation-duration, TRANSITION_TIME)
 
+      vendor(animation-fill-mode, forwards)
 
 
     & > aside
 
-      transform translateX(-100%)
 
-      transition-property transform
 
-      transition-duration TRANSITION_TIME
 
-      margin-right: -(ASIDE_WIDTH)
 
+      position: absolute
 
+      z-index: 0
 
+      left: 0
 
+      top: 0
 
+      visibility: hidden
 
       &.show
 
-        transform translateX(0px)
 
-        margin-right: 0px
 
-      &.hide
 
-        transform translateX(-100%)
 
-        margin-right: -(ASIDE_WIDTH) !important
 
+        visibility: visible
 
 
     & > section
 
+      z-index: 1
 
       display: none
 
-      opacity: 0
 
-      ordinal-group(2)
 
-      transform translateX(100%)
 
       &.show
 
-        animation showing TRANSITION_TIME
 
-        animation-fill-mode forwards
 
         display-box()
 
-      &.hide
 
-        animation hiding TRANSITION_TIME
 
+
 
+      &.asideShowing
 
+        z-index: 2
 
+        vendor(animation-name, withAside)
 
+      &.asideHidding
 
+        vendor(animation-name, withoutAside)
 
+      &.aside
 
+        z-index: 2
 
+        transform translateX(ASIDE_WIDTH)
 
+
 
+      &.shadowing
 
+        vendor(animation-name, withAsideOpacity)
 
+      &.unshadowing
 
+        vendor(animation-name, withoutAsideOpacity)
 
+      &.shadow
 
+        transform translateX(ASIDE_WIDTH)
 
+        opacity: .6
 
+
 
 
       &:not([data-children])
 
         box-flex(1)
 
+        &[data-aside]
 
+          width: 500px !important
 
+          color: red !important
 
 
       &[data-children]
 
         width: 320px
 
 
-      & [data-view-aside]
 
-        display: none !important
 
-
 
-@-webkit-keyframes showing
 
-  0%
 
-    opacity: 0
 
-    transform translateX(100%)
 
-  100%
 
-    opacity: 1
 
-    transform translateX(0%)
 
-
 
-@-webkit-keyframes hiding
 
-  0%
 
-    opacity: 1
 
-    transform translateX(0%)
 
-  100%
 
-    opacity: 0
 
-    transform translateX(100%)
 
+
 
+
 
+@keyframes withAside
 
+  0%   {transform translateX(0)}
 
+  100% {transform translateX(ASIDE_WIDTH)}
 
+
 
+@keyframes withoutAside
 
+  0%   {transform translateX(ASIDE_WIDTH)}
 
+  100% {transform translateX(0)}
 
+
 
+@keyframes withAsideOpacity
 
+  0%   {transform translateX(0)}
 
+  100% {transform translateX(ASIDE_WIDTH); opacity: .6;}
 
+
 
+@keyframes withoutAsideOpacity
 
+  0%   {transform translateX(ASIDE_WIDTH); opacity: .6;}
 
+  100% {transform translateX(0)}
 
+