Главная Обзор Помощь
Вход
pwa
/
Lungo.js
зеркало из https://github.com/tapquo/Lungo.js.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Aside animations

Router, Aside and Section refactors and section animation on aside open
piniphone 13 лет назад
Родитель
3382ec2891
Сommit
1e918abf31
10 измененных файлов с 147 добавлено и 154 удалено
Разделённый вид Показать статистику Diff
  1. 32 14
      example/navigation.html
  2. 7 8
      src/boot/Lungo.Boot.Events.coffee
  3. 34 45
      src/modules/Lungo.Aside.coffee
  4. 0 1
      src/modules/Lungo.Constants.coffee
  5. 21 4
      src/modules/Lungo.Router.coffee
  6. 6 20
      src/modules/Lungo.Section.coffee
  7. 30 15
      src/stylesheets/lungo.animation.aside.styl
  8. 0 27
      src/stylesheets/lungo.animation.back.styl
  9. 1 2
      src/stylesheets/lungo.layout.styl
  10. 16 18
      src/stylesheets/lungo.media.phone.styl

+ 32 - 14
example/navigation.html
Просмотреть файл 

@@ -20,24 +20,41 @@
 
 </head>
 
 
 <body>
 
-    <aside id="a1">
 
-        <header data-title="a1"></header>
 
-        <article id="a1a1">
 
-            <h1>a1.a1</h1>
 
-        </article>
 
-        <article id="a1a2">
 
-            <h1>S1.A2</h1>
 
+    <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>
 
         </article>
 
     </aside>
 
 
-    <aside id="a2">
 
+    <aside id="a2" data-transition="right">
 
         <header data-title="a2"></header>
 
-        <article id="a2a1">
 
-            <h1>a2.a1</h1>
 
+        <article id="a2a1" 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>
 
         </article>
 
     </aside>
 
 
-    <section id="s1" data-t-ransition="slide" data-children="one" data-aside="a1">
 
+    <section id="s1" data-transition="slide" data-children="one" data-aside="a1">
 
         <header data-title="s1">
 
             <nav class="left">
 
                 <button data-icon="list" data-view-aside="a1"></button>
 
@@ -46,14 +63,15 @@
 
                 <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="s1a2" data-icon="user" class="active"></a>
 
-                <a href="#" data-view-article="s1a1" data-icon="group"></a>
 
+                <a href="#" data-view-article="s1a1" data-icon="user" class="active"></a>
 
+                <a href="#" data-view-article="s1a2" data-icon="group"></a>
 
             </nav>
 
         </footer>
 
     </section>
 
@@ -73,7 +91,7 @@
 
         <article id="s2a2"><h1>s2.A2</h1></article>
 
     </section>
 
 
-    <section id="s3" data-t-ransition="slide" data-children="one" data-aside="a2">
 
+    <section id="s3" data-transition="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>

+ 7 - 8
src/boot/Lungo.Boot.Events.coffee
Просмотреть файл 

@@ -31,7 +31,7 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     lng.dom(QUERY.MENU_HREF).touch _closeMenu
 
     lng.dom(QUERY.CONTROL_CHECKBOX).on C.EVENT.CHANGE, _changeCheckboxValue
 
     for transition in C.EVENT.TRANSITION_END
 
-      lng.dom(QUERY.SECTION_TRANSITION).on transition, _onAnimationEnd
 
+      lng.dom(C.ELEMENT.SECTION).on transition, _transitionEnd
 
 
   _onSection = (event) ->
 
     event.preventDefault()
 
@@ -73,8 +73,9 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
 
 
   _onAside = (event) ->
 
-    event.preventDefault()
 
-    lng.Aside.toggle()
 
+    do event.preventDefault
 
+    aside_id = lng.dom(event.target).closest(C.QUERY.ASIDE_ROUTER).data "view-aside"
 
+    lng.Aside.toggle aside_id
 
 
   _onMenu = (event) ->
 
     event.preventDefault()
 
@@ -97,12 +98,10 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     el.removeClass "checked"
 
     if checked  then el.addClass "checked"
 
 
-  _onAnimationEnd = (event) ->
 
+  _transitionEnd = (event) ->
 
     section = lng.dom(event.target)
 
-    direction = section.data(ATTRIBUTE.DIRECTION)
 
-    section.removeClass C.CLASS.SHOW if direction is "out" or direction is "back-out"
 
-    section.removeAttr "data-#{ATTRIBUTE.DIRECTION}"
 
+    if section.data("direction") then lng.Router.animationEnd event
 
+    else lng.Aside.animationEnd event
 
 
-    # Activar/Desactivar los controles de la seccion activa: ASIDE
 
 
   init: init

+ 34 - 45
src/modules/Lungo.Aside.coffee
Просмотреть файл 

@@ -7,66 +7,55 @@ Initialize the <articles> layout of a certain <section>
 
 @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
 ###
 
 
-Lungo.Aside = do(lng = Lungo) ->
 
+Lungo.Aside = do (lng = Lungo) ->
 
+
 
   C = lng.Constants
 
 
   ###
 
-  Active aside for a determinate section
 
-  @method active
 
-  @param  {object} Section element
 
+  Display an aside element with a particular <section>
 
+  @method show
 
   ###
 
-  active = (section) ->
 
-    aside_id = section.data("aside")
 
-    current_aside = lng.Element.Cache.aside
 
-
 
-    # Deactive
 
-    if current_aside and aside_id isnt current_aside?.attr(C.ATTRIBUTE.ID)
 
-      if lng.DEVICE is C.DEVICE.PHONE
 
-        current_aside.removeClass(C.CLASS.SHOW).removeClass C.CLASS.ACTIVE
 
-      else
 
-        current_aside.addClass(C.CLASS.HIDE)
 
-        setTimeout (-> current_aside.removeClass(C.CLASS.SHOW).removeClass(C.CLASS.ACTIVE).removeClass(C.CLASS.HIDE)), C.TRANSITION.DURATION
 
-      lng.Element.Cache.aside = null
 
-
 
-    # Active
 
-    if aside_id
 
-      lng.Element.Cache.aside = lng.dom(C.ELEMENT.ASIDE + "#" + aside_id)
 
-      lng.Element.Cache.aside.addClass C.CLASS.ACTIVE
 
-      lng.Aside.show aside_id  unless lng.DEVICE is C.DEVICE.PHONE
 
-    lng.Element.Cache.aside
 
+  show = (aside_id) ->
 
+    aside = lng.dom("##{aside_id}")
 
+    if aside.length
 
+      lng.Element.Cache.aside = aside
 
+      aside.addClass(C.CLASS.SHOW)
 
+      lng.Element.Cache.section.data("aside-#{aside.data(C.TRANSITION.ATTR)}", "show")
 
 
+  ###
 
+  Hide an aside element with a particular section
 
+  @method hide
 
+  ###
 
+  hide = ->
 
+    aside = lng.Element.Cache.aside
 
+    if aside
 
+      aside_transition = aside.data(C.TRANSITION.ATTR)
 
+      section = lng.Element.Cache.section
 
+      section.data("aside-#{aside_transition}", "hide")
 
 
   ###
 
   Toggle an aside element
 
   @method toggle
 
   @param  {string} Aside id
 
   ###
 
-  toggle = ->
 
-    if lng.Element.Cache.aside
 
-      is_visible = lng.Element.Cache.aside.hasClass(C.CLASS.SHOW)
 
-      if is_visible then lng.Aside.hide() else lng.Aside.show()
 
+  toggle = (aside) ->
 
+    if lng.Element.Cache.aside then do lng.Aside.hide
 
+    else lng.Aside.show aside
 
 
 
   ###
 
-  Display an aside element with a particular <section>
 
-  @method show
 
+  Triggered when <aside> animation ends.
 
+  @method   animationEnd
 
+  @param    {object} event
 
   ###
 
-  show = ->
 
-    if lng.Element.Cache.aside?
 
-      setTimeout (-> lng.Element.Cache.aside.addClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
-      if lng.DEVICE is C.DEVICE.PHONE
 
-        lng.Element.Cache.aside.addClass C.CLASS.SHOW
 
-        lng.Element.Cache.section.addClass(_asideStylesheet()).addClass(C.CLASS.ASIDE)
 
-
 
+  animationEnd = (event) ->
 
+    section = lng.dom(event.target)
 
+    aside_transition = lng.Element.Cache.aside.data C.TRANSITION.ATTR
 
+    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}")
 
 
-  ###
 
-  Hide an aside element with a particular section
 
-  @method hide
 
-  ###
 
-  hide = ->
 
-    if lng.Element.Cache.aside? and lng.DEVICE is C.DEVICE.PHONE
 
-      lng.Element.Cache.section.removeClass(C.CLASS.ASIDE)
 
-      setTimeout (-> lng.Element.Cache.aside.removeClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
 
   ###
 
   @todo
 
@@ -110,8 +99,8 @@ Lungo.Aside = do(lng = Lungo) ->
 
   _asideStylesheet = ->
 
     if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "
 
 
-  active: active
 
   toggle: toggle
 
   show: show
 
   hide: hide
 
   draggable: draggable
 
+  animationEnd: animationEnd

+ 0 - 1
src/modules/Lungo.Constants.coffee
Просмотреть файл 

@@ -27,7 +27,6 @@ Lungo.Constants =
 
     SECTION_ROUTER_TAP   : "article [data-view-section]"
 
     ASIDE_ROUTER         : "[data-view-aside]"
 
     MENU_ROUTER          : "[data-view-menu]"
 
-    SECTION_TRANSITION   : "section[data-transition]"
 
 
     LIST_IN_ELEMENT      : "article.list"
 
     ELEMENT_SCROLLABLE   : "article.scroll"

+ 21 - 4
src/modules/Lungo.Router.coffee
Просмотреть файл 

@@ -13,6 +13,7 @@ Lungo.Router = do (lng = Lungo) ->
 
   C                   = lng.Constants
 
   HASHTAG             = "#"
 
   _history            = []
 
+  _animating          = false
 
 
 
   ###
 
@@ -21,8 +22,9 @@ Lungo.Router = do (lng = Lungo) ->
 
   @param    {string} Id of the <section>
 
   ###
 
   section = (section_id) ->
 
+    return false if _animating
 
     current = lng.Element.Cache.section
 
-    if _notCurrentTarget(current, section_id)
 
+    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
 
@@ -40,14 +42,15 @@ Lungo.Router = do (lng = Lungo) ->
 
   @method   back
 
   ###
 
   back = ->
 
+    return false if _animating
 
     do _removeLast
 
     current = lng.Element.Cache.section
 
     query = C.ELEMENT.SECTION + HASHTAG + history()
 
     future = current.siblings(query)
 
     if lng.DEVICE is C.DEVICE.PHONE
 
-      do lng.Aside.hide
 
+      # do lng.Aside.hide
 
       _setSectionDirections future, current, true
 
-      if future.hasClass("aside") then lng.Aside.toggle()
 
+      # if future.hasClass("aside") then lng.Aside.toggle()
 
 
     lng.Section.show current, future
 
     do _url unless Lungo.Config.history is false
 
@@ -74,6 +77,19 @@ Lungo.Router = do (lng = Lungo) ->
 
         do _updateNavigationElements
 
 
 
+  ###
 
+  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)
 
+    section.removeClass C.CLASS.SHOW if direction is "out" or direction is "back-out"
 
+    section.removeAttr "data-#{C.ATTRIBUTE.DIRECTION}"
 
+    _animating = false
 
+
 
+
 
   ###
 
   Create a new element to the browsing history based on the current section id.
 
   @method step
 
@@ -88,13 +104,13 @@ Lungo.Router = do (lng = Lungo) ->
 
   ###
 
   history = -> _history[_history.length - 1]
 
 
-
 
   ###
 
   Private methods
 
   ###
 
   _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
 
 
   _setSectionDirections = (future, current, isBack=false) ->
 
+    _animating = true
 
     dirPrefix = if isBack then "back-" else ""
 
     future.addClass(C.CLASS.SHOW)
 
     future.data(C.ATTRIBUTE.DIRECTION, "#{dirPrefix}in") if future.data(C.TRANSITION.ATTR)
 
@@ -123,3 +139,4 @@ Lungo.Router = do (lng = Lungo) ->
 
   article : article
 
   history : history
 
   step    : step
 
+  animationEnd : animationEnd

+ 6 - 20
src/modules/Lungo.Section.coffee
Просмотреть файл 

@@ -8,41 +8,29 @@ Initialize the <articles> layout of a certain <section>
 
 ###
 
 
 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
 
 
     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
 
-    lng.Element.Cache.aside = lng.Aside.active target
 
-    if target.hasClass "aside" then lng.Aside.show()
 
+
 
+    # if lng.DEVICE isnt C.DEVICE.PHONE
 
+    #  #@TODO: debemos mostrar el aside si la seccion tiene el attributo data-aside
 
 
     current.trigger C.TRIGGER.UNLOAD if current
 
     target.trigger C.TRIGGER.LOAD
 
 
-
 
-  defineTransition = (target, current) ->
 
-    target_transition = target.data C.ATTRIBUTE.TRANSITION
 
-    if target_transition
 
-      _assignTransitionOrigin current
 
-      assignTransition current, target_transition
 
-
 
-
 
-  assignTransition = (section, transitionName) ->
 
-    section.data C.ATTRIBUTE.TRANSITION, transitionName
 
-
 
-
 
   ###
 
   Private methods
 
   ###
 
   _phone = (target) ->
 
-    target.removeClass(C.CLASS.HIDE).addClass(C.CLASS.SHOW)
 
+    target.addClass(C.CLASS.SHOW)
 
 
   _tablet = (current, target) ->
 
     children = current.data C.ATTRIBUTE.CHILDREN if current
 
@@ -55,6 +43,4 @@ Lungo.Section = do(lng = Lungo) ->
 
   _assignTransitionOrigin = (section) ->
 
     section.data C.TRANSITION.ORIGIN, section.data(C.TRANSITION.ATTR)
 
 
-  show: show
 
-  defineTransition: defineTransition
 
-  assignTransition: assignTransition
 
+  show: show

+ 30 - 15
src/stylesheets/lungo.animation.aside.styl
Просмотреть файл 

@@ -1,22 +1,37 @@
 
 @import "__init.styl"
 
 
-LEFT = 250px
 
 
-.sectionAsideOpening
 
-  vendor(animation-name, sectionAsideOpening)
 
-  vendor(animation-duration, TRANSITION_TIME)
 
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+section
 
+  &[data-aside-left="show"]
 
+    vendor(animation-name, sectionAsideLeftShow)
 
+  &[data-aside-left="hide"]
 
+    vendor(animation-name, sectionAsideLeftHide)
 
+  &[data-aside-right="show"]
 
+    vendor(animation-name, sectionAsideRightShow)
 
+  &[data-aside-right="hide"]
 
+    vendor(animation-name, sectionAsideRightHide)
 
 
-.sectionAsideClosing
 
-  vendor(animation-name, sectionAsideClosing)
 
-  vendor(animation-duration, TRANSITION_TIME)
 
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+aside
 
+  &[data-transition=right]
 
+    right: 0px
 
 
-.sectionAsideOpen
 
-  left: LEFT
 
 
-@keyframes sectionAsideOpening
 
-  to  { left: LEFT }
 
+@keyframes sectionAsideLeftShow
 
+  from { transform translateX(0) }
 
+  60%  { transform translateX(ASIDE_WIDTH + 8) }
 
+  to   { transform translateX(ASIDE_WIDTH) }
 
 
-@keyframes sectionAsideClosing
 
-  from { left: LEFT }
 
+@keyframes sectionAsideLeftHide
 
+  from { transform translateX(ASIDE_WIDTH) }
 
+  25%  { transform translateX(ASIDE_WIDTH + 8) }
 
+  to   { transform translateX(0) }
 
+
 
+@keyframes sectionAsideRightShow
 
+  from { transform translateX(0) }
 
+  60%  { transform translateX(-(ASIDE_WIDTH) - 8) }
 
+  to   { transform translateX(-(ASIDE_WIDTH)) }
 
+
 
+@keyframes sectionAsideRightHide
 
+  from { transform translateX(-(ASIDE_WIDTH)) }
 
+  25%  { transform translateX(-(ASIDE_WIDTH) - 8) }
 
+  to   { transform translateX(0) }

+ 0 - 27
src/stylesheets/lungo.animation.back.styl
Просмотреть файл 

@@ -1,27 +0,0 @@
 
-@import "__init.styl"
 
-
 
-TRANSLATE_Z = -300px
 
-ROTATE_X    = 20deg
 
-ORIGIN      = 100% 50%
 
-
 
-.backIn
 
-  vendor(animation-name, backIn)
 
-  vendor(animation-duration, TRANSITION_TIME)
 
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
-.backOut
 
-  vendor(animation-name, backOut)
 
-  vendor(animation-duration, TRANSITION_TIME)
 
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
-  z-index: -1
 
-
 
-@keyframes backIn
 
-  from {
 
-    transform: translateZ(TRANSLATE_Z)
 
-    // transform-origin: ORIGIN
 
-  }
 
-
 
-@keyframes backOut
 
-  to {
 
-    transform: translateZ(TRANSLATE_Z)
 
-    // transform-origin: ORIGIN
 
-  }

+ 1 - 2
src/stylesheets/lungo.layout.styl
Просмотреть файл 

@@ -99,8 +99,7 @@ body
 
       display-box()
 
     &.show
 
       z-index: 0
 
-    &.right
 
-      right: 0px
 
+
 
 
   /* ========================================================================= */
 
   /* =============================== EXCLUDE OS ============================== */

+ 16 - 18
src/stylesheets/lungo.media.phone.styl
Просмотреть файл 

@@ -19,22 +19,20 @@
 
       &:not([data-transition]).show
 
         display: block
 
 
-      &.show.aside
 
-        &:not(.right)
 
-          transform translateX(ASIDE_WIDTH)
 
-        &.right
 
-          transform translateX(-(ASIDE_WIDTH))
 
-      &.show.hide
 
-        z-index: -1
 
+      // &.show.aside
 
+      //   &:not(.right)
 
+      //     transform translateX(ASIDE_WIDTH)
 
+      //   &.right
 
+      //     transform translateX(-(ASIDE_WIDTH))
 
+      // &.show.hide
 
+      //   z-index: -1
 
 
-      &[data-transition]
 
-        display-box()
 
-        // transition-property opacity, z-index, transform, scale, opacity
 
-        // transition-duration TRANSITION_TIME
 
-        // transition-timing-function DEFAULT_TRANSITION
 
-        backface-visibility hidden
 
-        vendor(animation-duration, TRANSITION_TIME)
 
-        vendor(animation-timing-function, DEFAULT_TRANSITION)
 
-        visibility: hidden
 
-        &.show
 
-          visibility: visible
 
+    & [data-transition], & [data-aside-transition]
 
+      display-box()
 
+      backface-visibility hidden
 
+      vendor(animation-duration, TRANSITION_TIME)
 
+      vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+      vendor(animation-fill-mode, forwards)
 
+      visibility: hidden
 
+      &.show
 
+        visibility: visible