Domů Procházet Nápověda
Přihlásit se
pwa
/
Lungo.js
zrcadlo https://github.com/tapquo/Lungo.js.git
2
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Procházet zdrojové kódy

First steps for tablet routering

Basic routering for tablet devices. LungoRouter separated in
LungoRouterPhone and LungoRouterTablet
piniphone před 13 roky
rodič
5bc3232a41
revize
fa98639f3d
13 změnil soubory, kde provedl 448 přidání a 186 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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
Zobrazit soubor 

@@ -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)}
 
+