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

Changes to support android 2.2 and refactors

piniphone 13 lat temu
rodzic
9a7d0006bc
commit
4c217c5c53
14 zmienionych plików z 569 dodań i 308 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 63 0
      example/kf.html
  2. 73 42
      example/navigation.html
  3. 9 0
      src/boot/Lungo.Boot.Events.coffee
  4. 70 67
      src/modules/Lungo.Constants.coffee
  5. 142 43
      src/modules/Lungo.Router.coffee
  6. 2 1
      src/stylesheets/__init.styl
  7. 22 0
      src/stylesheets/lungo.animation.aside.styl
  8. 11 8
      src/stylesheets/lungo.animation.back.styl
  9. 18 17
      src/stylesheets/lungo.animation.cover.styl
  10. 16 17
      src/stylesheets/lungo.animation.fade.styl
  11. 28 11
      src/stylesheets/lungo.animation.slide.styl
  12. 0 20
      src/stylesheets/lungo.animation.styl
  13. 15 15
      src/stylesheets/lungo.layout.styl
  14. 100 67
      src/stylesheets/lungo.media.phone.styl

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

@@ -0,0 +1,63 @@
 
+<!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>

Plik diff jest za duży
+ 73 - 42
example/navigation.html


+ 9 - 0
src/boot/Lungo.Boot.Events.coffee
Wyświetl plik 

@@ -29,6 +29,8 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     lng.dom(C.QUERY.MENU_ROUTER).touch _onMenu
 
     lng.dom(C.QUERY.MENU_ROUTER).touch _onMenu
 
     lng.dom(QUERY.MENU_HREF).touch _closeMenu
 
     lng.dom(QUERY.MENU_HREF).touch _closeMenu
 
     lng.dom(QUERY.CONTROL_CHECKBOX).on "change", _changeCheckboxValue
 
     lng.dom(QUERY.CONTROL_CHECKBOX).on "change", _changeCheckboxValue
 
+    lng.dom(QUERY.SECTION_TRANSITION).on "webkitAnimationEnd", _sectionAnimationEnd
 
+    lng.dom(QUERY.SECTION_TRANSITION).on "animationend", _sectionAnimationEnd
 
 
 
   _onSection = (event) ->
 
   _onSection = (event) ->
 
     event.preventDefault()
 
     event.preventDefault()
 
@@ -93,4 +95,11 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
     el.removeClass "checked"
 
     el.removeClass "checked"
 
     if checked  then el.addClass "checked"
 
     if checked  then el.addClass "checked"
 
 
 
+  _sectionAnimationEnd = (event) ->
 
+    section = lng.dom(event.target)
 
+    section.removeClass(section.data(ATTRIBUTE.ANIMATION))
 
+    section.removeClass("show") unless section.data(ATTRIBUTE.STATE) is "active"
 
+    section.removeAttr "data-#{ATTRIBUTE.STATE}"
 
+    section.removeAttr "data-#{ATTRIBUTE.ANIMATION}"
 
+
 
   init: init
 
   init: init

+ 70 - 67
src/modules/Lungo.Constants.coffee
Wyświetl plik 

@@ -9,87 +9,90 @@ Object with data-attributes (HTML5) with a special <markup>
 
 
 
 Lungo.Constants =
 
 Lungo.Constants =
 
   ELEMENT:
 
   ELEMENT:
 
-    SECTION             : "section"
 
-    ARTICLE             : "article"
 
-    ASIDE               : "aside"
 
-    MENU                : "menu"
 
-    BODY                : "body"
 
-    DIV                 : "div"
 
-    LIST                : "<ul></ul>"
 
-    LI                  : "li"
 
+    SECTION              : "section"
 
+    ARTICLE              : "article"
 
+    ASIDE                : "aside"
 
+    MENU                 : "menu"
 
+    BODY                 : "body"
 
+    DIV                  : "div"
 
+    LIST                 : "<ul></ul>"
 
+    LI                   : "li"
 
 
 
   QUERY:
 
   QUERY:
 
-    ARTICLE_ROUTER      : "[data-view-article]"
 
-    SECTION_ROUTER      : "[data-view-section]"
 
-    ARTICLE_ROUTER_TOUCH: "header [data-view-article], footer [data-view-article], nav[data-control] [data-view-article]"
 
-    SECTION_ROUTER_TOUCH: "header [data-view-section], footer [data-view-section], nav[data-control] [data-view-section]"
 
-    ARTICLE_ROUTER_TAP  : "article [data-view-article]"
 
-    SECTION_ROUTER_TAP  : "article [data-view-section]"
 
-    ASIDE_ROUTER        : "[data-view-aside]"
 
-    MENU_ROUTER         : "[data-view-menu]"
 
+    ARTICLE_ROUTER       : "[data-view-article]"
 
+    SECTION_ROUTER       : "[data-view-section]"
 
+    ARTICLE_ROUTER_TOUCH : "header [data-view-article], footer [data-view-article], nav[data-control] [data-view-article]"
 
+    SECTION_ROUTER_TOUCH : "header [data-view-section], footer [data-view-section], nav[data-control] [data-view-section]"
 
+    ARTICLE_ROUTER_TAP   : "article [data-view-article]"
 
+    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"
 
-    HREF_ASIDE          : "section[data-aside].drag"
 
-    HREF_ROUTER         : "a[href][data-router]"
 
-    MENU_HREF           : "[data-control=menu] a[href]"
 
-    CONTROL_CHECKBOX    : "[data-control-checkbox]"
 
-    NAVIGATION_ITEM     : "a[href][data-router=\"article\"]"
 
-    ARTICLE_REFERENCE   : "[data-article]"
 
-    TITLE               : "header .title, footer .title"
 
-    ACTIVE_LIST_ITEM    : "li a.active, li.active"
 
+    LIST_IN_ELEMENT      : "article.list"
 
+    ELEMENT_SCROLLABLE   : "article.scroll"
 
+    HREF_ASIDE           : "section[data-aside].drag"
 
+    HREF_ROUTER          : "a[href][data-router]"
 
+    MENU_HREF            : "[data-control=menu] a[href]"
 
+    CONTROL_CHECKBOX     : "[data-control-checkbox]"
 
+    NAVIGATION_ITEM      : "a[href][data-router=\"article\"]"
 
+    ARTICLE_REFERENCE    : "[data-article]"
 
+    TITLE                : "header .title, footer .title"
 
+    ACTIVE_LIST_ITEM     : "li a.active, li.active"
 
 
 
   CLASS:
 
   CLASS:
 
-    ACTIVE              : "active"
 
-    ASIDE               : "aside"
 
-    SHOW                : "show"
 
-    HIDE                : "hide"
 
-    HIDING              : "hiding"
 
-    RIGHT               : "right"
 
-    LEFT                : "left"
 
-    HORIZONTAL          : "horizontal"
 
-    SMALL               : "small"
 
-    LAST                : "last"
 
+    ACTIVE               : "active"
 
+    ASIDE                : "aside"
 
+    SHOW                 : "show"
 
+    HIDE                 : "hide"
 
+    HIDING               : "hiding"
 
+    RIGHT                : "right"
 
+    LEFT                 : "left"
 
+    HORIZONTAL           : "horizontal"
 
+    SMALL                : "small"
 
+    LAST                 : "last"
 
 
 
   TRIGGER:
 
   TRIGGER:
 
-    LOAD                : "load"
 
-    UNLOAD              : "unload"
 
+    LOAD                 : "load"
 
+    UNLOAD               : "unload"
 
 
 
   TRANSITION:
 
   TRANSITION:
 
-    DURATION            : 400
 
-    ORIGIN              : "transition-origin"
 
-    ATTR                : "transition"
 
+    DURATION             : 400
 
+    ORIGIN               : "transition-origin"
 
+    ATTR                 : "transition"
 
 
 
   ATTRIBUTE:
 
   ATTRIBUTE:
 
-    ID                  : "id"
 
-    HREF                : "href"
 
-    TITLE               : "title"
 
-    ARTICLE             : "article"
 
-    CLASS               : "class"
 
-    WIDTH               : "width"
 
-    HEIGHT              : "height"
 
-    PIXEL               : "px"
 
-    PERCENT             : "%"
 
-    ROUTER              : "router"
 
-    FIRST               : "first"
 
-    LAST                : "last"
 
-    EMPTY               : ""
 
-    CHILDREN            : "children"
 
-    TRANSITION          : "transition"
 
+    ID                   : "id"
 
+    HREF                 : "href"
 
+    TITLE                : "title"
 
+    ARTICLE              : "article"
 
+    CLASS                : "class"
 
+    WIDTH                : "width"
 
+    HEIGHT               : "height"
 
+    PIXEL                : "px"
 
+    PERCENT              : "%"
 
+    ROUTER               : "router"
 
+    FIRST                : "first"
 
+    LAST                 : "last"
 
+    EMPTY                : ""
 
+    CHILDREN             : "children"
 
+    TRANSITION           : "transition"
 
+    STATE                : "state"
 
+    ANIMATION            : "animation"
 
 
 
   BINDING:
 
   BINDING:
 
-    START               : "{{"
 
-    END                 : "}}"
 
-    KEY                 : "value"
 
-    SELECTOR            : "{{value}}"
 
+    START                : "{{"
 
+    END                  : "}}"
 
+    KEY                  : "value"
 
+    SELECTOR             : "{{value}}"
 
 
 
   DEVICE:
 
   DEVICE:
 
-    PHONE               : "phone"
 
-    TABLET              : "tablet"
 
-    TV                  : "tv"
 
+    PHONE                : "phone"
 
+    TABLET               : "tablet"
 
+    TV                   : "tv"
 
 
 
   ERROR:
 
   ERROR:
 
-    DATABASE            : "ERROR: Connecting to Data.Sql."
 
-    DATABASE_TRANSACTION: "ERROR: Data.Sql >> "
 
-    ROUTER              : "ERROR: The target does not exists >>"
 
-    LOADING_RESOURCE    : "ERROR: Loading resource: "
 
+    DATABASE             : "ERROR: Connecting to Data.Sql."
 
+    DATABASE_TRANSACTION : "ERROR: Data.Sql >> "
 
+    ROUTER               : "ERROR: The target does not exists >>"
 
+    LOADING_RESOURCE     : "ERROR: Loading resource: "

+ 142 - 43
src/modules/Lungo.Router.coffee
Wyświetl plik 

@@ -12,11 +12,7 @@ Lungo.Router = do (lng = Lungo) ->
 
 
 
   C                   = lng.Constants
 
   C                   = lng.Constants
 
   HASHTAG             = "#"
 
   HASHTAG             = "#"
 
-  ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"]
 
   _history            = []
 
   _history            = []
 
-  _outPage            = undefined
 
-  _inPage             = undefined
 
-  _animating          = false
 
 
 
 
 
   ###
 
   ###
 
@@ -25,20 +21,17 @@ Lungo.Router = do (lng = Lungo) ->
 
   @param    {string} Id of the <section>
 
   @param    {string} Id of the <section>
 
   ###
 
   ###
 
   section = (section_id) ->
 
   section = (section_id) ->
 
-    if _animating then return
 
-    _outPage = lng.Element.Cache.section
 
-    if _notCurrentTarget(_outPage, section_id)
 
+    outPage = lng.Element.Cache.section
 
+    if _notCurrentTarget(outPage, section_id)
 
       query = C.ELEMENT.SECTION + HASHTAG + section_id
 
       query = C.ELEMENT.SECTION + HASHTAG + section_id
 
-      _inPage = if _outPage then _outPage.siblings(query) else lng.dom(query)
 
-      if _inPage.length > 0
 
-        if lng.DEVICE is C.DEVICE.PHONE and _outPage?
 
-          outClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "Out"
 
-          inClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "In"
 
-          _outPage.addClass(outClass).addClass("show")
 
-          _inPage.addClass(inClass).addClass("show")
 
-          do _bindAnimationEnd
 
-
 
-        lng.Section.show _outPage, _inPage
 
+      inPage = if outPage then outPage.siblings(query) else lng.dom(query)
 
+      if inPage.length
 
+        if lng.DEVICE is C.DEVICE.PHONE and outPage?
 
+          transition = inPage.data(C.ATTRIBUTE.TRANSITION)
 
+          _setAnimation inPage, "#{transition}In", "active"
 
+          _setAnimation outPage, "#{transition}Out", ""
 
+
 
+        lng.Section.show outPage, inPage
 
         lng.Router.step section_id
 
         lng.Router.step section_id
 
         do _url unless Lungo.Config.history is false
 
         do _url unless Lungo.Config.history is false
 
         do _updateNavigationElements
 
         do _updateNavigationElements
 
@@ -49,25 +42,23 @@ Lungo.Router = do (lng = Lungo) ->
 
   @method   back
 
   @method   back
 
   ###
 
   ###
 
   back = ->
 
   back = ->
 
-    if _animating then return
 
     do _removeLast
 
     do _removeLast
 
-    _outPage = lng.Element.Cache.section
 
+    outPage = lng.Element.Cache.section
 
     query = C.ELEMENT.SECTION + HASHTAG + history()
 
     query = C.ELEMENT.SECTION + HASHTAG + history()
 
-    _inPage = _outPage.siblings(query)
 
+    inPage = outPage.siblings(query)
 
     if lng.DEVICE is C.DEVICE.PHONE
 
     if lng.DEVICE is C.DEVICE.PHONE
 
       do lng.Aside.hide
 
       do lng.Aside.hide
 
-      outClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "OutBack"
 
-      inClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "InBack"
 
-      _outPage.addClass(outClass).addClass("show")
 
-      _inPage.addClass(inClass).addClass("show")
 
-      do _bindAnimationEnd
 
-      if _inPage.hasClass("aside") then lng.Aside.toggle()
 
-
 
-    lng.Section.show _outPage, _inPage
 
+      transition = outPage.data(C.ATTRIBUTE.TRANSITION)
 
+      _setAnimation inPage, "#{transition}InBack", "active"
 
+      _setAnimation outPage, "#{transition}OutBack", ""
 
+      if inPage.hasClass("aside") then lng.Aside.toggle()
 
+
 
+    lng.Section.show outPage, inPage
 
     do _url unless Lungo.Config.history is false
 
     do _url unless Lungo.Config.history is false
 
     do _updateNavigationElements
 
     do _updateNavigationElements
 
 
 
 
 
+
 
   ###
 
   ###
 
   Displays the <article> in a particular <section>.
 
   Displays the <article> in a particular <section>.
 
   @method   article
 
   @method   article
 
@@ -108,6 +99,10 @@ Lungo.Router = do (lng = Lungo) ->
 
   ###
 
   ###
 
   _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
 
   _notCurrentTarget = (current, id) -> current?.attr(C.ATTRIBUTE.ID) isnt id
 
 
 
+  _setAnimation = (section, animation, state) ->
 
+    section.data(C.ATTRIBUTE.STATE, state).data(C.ATTRIBUTE.ANIMATION, animation)
 
+    section.addClass("show").addClass(animation)
 
+
 
   _url = ->
 
   _url = ->
 
     _hashed_url = ""
 
     _hashed_url = ""
 
     _hashed_url += "#{section}/" for section in _history
 
     _hashed_url += "#{section}/" for section in _history
 
@@ -124,24 +119,128 @@ Lungo.Router = do (lng = Lungo) ->
 
 
 
   _removeLast = -> _history.length -= 1
 
   _removeLast = -> _history.length -= 1
 
 
 
-  _bindAnimationEnd = ->
 
-    _animating = true
 
-    document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
 
-
 
-  _unbindAnimationEnd = ->
 
-    document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
 
-
 
-  _transitionEnd = ->
 
-    _outPage.attr "class", ""
 
-    _inPage.attr "class", "show"
 
-    _outPage = undefined
 
-    _inPage = undefined
 
-    do _unbindAnimationEnd
 
-    _animating = false
 
-
 
 
 
   section : section
 
   section : section
 
   back    : back
 
   back    : back
 
   article : article
 
   article : article
 
   history : history
 
   history : history
 
   step    : step
 
   step    : step
 
+
 
+
 
+
 
+
 
+
 
+
 
+# Lungo.Router = do(lng = Lungo) ->
 
+#   C        = lng.Constants
 
+#   HASHTAG  = "#"
 
+#   _history = []
 
+
 
+
 
+#   ###
 
+#   Navigate to a <section>.
 
+#   @method   section
 
+#   @param    {string} Id of the <section>
 
+#   ###
 
+#   section = (section_id) ->
 
+#     current = lng.Element.Cache.section
 
+#     if _notCurrentTarget(current, section_id)
 
+#       query = C.ELEMENT.SECTION + HASHTAG + section_id
 
+#       target = if current then current.siblings(query) else lng.dom(query)
 
+#       if target.length > 0
 
+#         if lng.DEVICE is C.DEVICE.PHONE and current?
 
+#           current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST
 
+#           lng.Section.defineTransition target, current
 
+#           current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
+
 
+#         lng.Section.show current, target
 
+#         lng.Router.step section_id
 
+#         do _url if Lungo.Config.history
 
+#         do _updateNavigationElements
 
+
 
+
 
+#   ###
 
+#   Return to previous section.
 
+#   @method   back
 
+#   ###
 
+#   back = ->
 
+#     _removeLast()
 
+#     current = lng.Element.Cache.section
 
+#     query = C.ELEMENT.SECTION + HASHTAG + history()
 
+#     target = current.siblings(query)
 
+#     if lng.DEVICE is C.DEVICE.PHONE
 
+#       lng.Aside.hide()
 
+#       lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN
 
+#       current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING)
 
+#       setTimeout (->
 
+#         current.removeClass(C.CLASS.HIDING)
 
+#       ), C.TRANSITION.DURATION
 
+#       if target.hasClass("aside") then lng.Aside.toggle()
 
+
 
+#     lng.Section.show current, target
 
+#     do _url if Lungo.Config.history?
 
+#     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 _notCurrentTarget(lng.Element.Cache.article, article_id)
 
+#       lng.Router.section section_id
 
+#       target = lng.Element.Cache.section.find "##{article_id}"
 
+#       if target.length > 0
 
+#         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)
 
+#         do _url if Lungo.Config.history
 
+#         do _updateNavigationElements
 
+
 
+
 
+#   ###
 
+#   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
 
+#   ###
 
+#   _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 = lng.Element.Cache.article.attr C.ATTRIBUTE.ID
 
+
 
+#     lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE).filter("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
 
+
 
+#     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 = -> _history.length -= 1
 
+
 
+
 
+#   section : section
 
+#   back    : back
 
+#   article : article
 
+#   history : history
 
+#   step    : step

+ 2 - 1
src/stylesheets/__init.styl
Wyświetl plik 

@@ -9,7 +9,8 @@ ASIDE_SMALL_ICON       = 48px
 
 
 
 DEFAULT_TRANSITION     = easeOutSine
 
 DEFAULT_TRANSITION     = easeOutSine
 
 DEFAULT_TRANSITION     = easeInCubic
 
 DEFAULT_TRANSITION     = easeInCubic
 
-TRANSITION_TIME        = 1000ms
 
+DEFAULT_TRANSITION     = ease
 
+TRANSITION_TIME        = 800ms
 
 
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_SMALL        = 0.9em
 
 FONT_SIZE_SMALL        = 0.9em

+ 22 - 0
src/stylesheets/lungo.animation.aside.styl
Wyświetl plik 

@@ -0,0 +1,22 @@
 
+@import "__init.styl"
 
+
 
+LEFT = 250px
 
+
 
+.sectionAsideOpening
 
+  vendor(animation-name, sectionAsideOpening)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+
 
+.sectionAsideClosing
 
+  vendor(animation-name, sectionAsideClosing)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+
 
+.sectionAsideOpen
 
+  left: LEFT
 
+
 
+@keyframes sectionAsideOpening
 
+  to  { left: LEFT }
 
+
 
+@keyframes sectionAsideClosing
 
+  from { left: LEFT }

+ 11 - 8
src/stylesheets/lungo.animation.back.styl
Wyświetl plik 

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

+ 18 - 17
src/stylesheets/lungo.animation.cover.styl
Wyświetl plik 

@@ -5,32 +5,33 @@ TRANSLATE_Z = -150px
 
 ROTATE_X    = 20deg
 
 ROTATE_X    = 20deg
 
 
 
 .coverIn
 
 .coverIn
 
-  vendor(animation, coverIn TRANSITION_TIME ease both)
 
+  vendor(animation-name, coverIn)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 .coverOut
 
 .coverOut
 
-  vendor(animation, coverOut TRANSITION_TIME ease both)
 
+  vendor(animation-name, coverOut)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: -1
 
 .coverInBack
 
 .coverInBack
 
-  vendor(animation, coverInBack TRANSITION_TIME ease both)
 
+  vendor(animation-name, coverInBack)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: -1
 
 .coverOutBack
 
 .coverOutBack
 
-  vendor(animation, coverOutBack TRANSITION_TIME ease both)
 
-
 
+  vendor(animation-name, coverOutBack)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 
 
 @keyframes coverIn
 
 @keyframes coverIn
 
-  from {
 
-    transform: translateY(100%);
 
-  }
 
+  from { transform: translateY(110%) }
 
 
 
 @keyframes coverOut
 
 @keyframes coverOut
 
-  to {
 
-    transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y)
 
-  }
 
+  to { transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) }
 
 
 
 @keyframes coverInBack
 
 @keyframes coverInBack
 
-  from {
 
-    transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y)
 
-  }
 
+  from { transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) }
 
 
 
 @keyframes coverOutBack
 
 @keyframes coverOutBack
 
-  to {
 
-    transform: translateY(100%)
 
-  }
 
+  to { transform: translateY(110%) }

+ 16 - 17
src/stylesheets/lungo.animation.fade.styl
Wyświetl plik 

@@ -1,31 +1,30 @@
 
 @import "__init.styl"
 
 @import "__init.styl"
 
 
 
 .fadeIn
 
 .fadeIn
 
-  vendor(animation, fadeIn TRANSITION_TIME ease both)
 
+  vendor(animation-name, fadeIn)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 .fadeOut
 
 .fadeOut
 
-  vendor(animation, fadeOut TRANSITION_TIME ease both)
 
+  vendor(animation-name, fadeOut)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 .fadeInBack
 
 .fadeInBack
 
-  vendor(animation, fadeInBack TRANSITION_TIME ease both)
 
+  vendor(animation-name, fadeInBack)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 .fadeOutBack
 
 .fadeOutBack
 
-  vendor(animation, fadeOutBack TRANSITION_TIME ease both)
 
-
 
+  vendor(animation-name, fadeOutBack)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
 
 
 @keyframes fadeIn
 
 @keyframes fadeIn
 
-  from {
 
-    opacity: 0
 
-  }
 
+  from { opacity: 0 }
 
 
 
 @keyframes fadeOut
 
 @keyframes fadeOut
 
-  to {
 
-    opacity: 1
 
-  }
 
+  to { opacity: 1 }
 
 
 
 @keyframes fadeInBack
 
 @keyframes fadeInBack
 
-  from {
 
-    opacity: 0
 
-  }
 
+  from { opacity: 0 }
 
 
 
 @keyframes fadeOutBack
 
 @keyframes fadeOutBack
 
-  to {
 
-    opacity: 0
 
-  }
 
+  to { opacity: 0 }

+ 28 - 11
src/stylesheets/lungo.animation.slide.styl
Wyświetl plik 

@@ -1,23 +1,40 @@
 
 @import "__init.styl"
 
 @import "__init.styl"
 
 
 
+SCALE = .8
 
 
 
 .slideIn
 
 .slideIn
 
-  vendor(animation, slideIn TRANSITION_TIME ease both)
 
+  vendor(animation-name, slideIn)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: 3
 
 .slideOut
 
 .slideOut
 
-  vendor(animation, backOut TRANSITION_TIME ease both)
 
+  vendor(animation-name, backOut)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: -1
 
 .slideInBack
 
 .slideInBack
 
-  vendor(animation, backIn TRANSITION_TIME ease both)
 
+  vendor(animation-name, backIn)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: -1
 
 .slideOutBack
 
 .slideOutBack
 
-  vendor(animation, slideOutBack TRANSITION_TIME ease both)
 
-
 
+  vendor(animation-name, slideOutBack)
 
+  vendor(animation-duration, TRANSITION_TIME)
 
+  vendor(animation-timing-function, DEFAULT_TRANSITION)
 
+  z-index: 3
 
 
 
 @keyframes slideIn
 
 @keyframes slideIn
 
-  from {
 
-    transform: translateX(100%)
 
-  }
 
+  from { transform: translateX(100%) }
 
+  to   { transform: translateX(0) }
 
 
 
 @keyframes slideOutBack
 
 @keyframes slideOutBack
 
-  to {
 
-    transform: translateX(100%)
 
-  }
 
+  from { transform: translateX(0) }
 
+  to   { transform: translateX(100%) }
 
+
 
+@keyframes backIn
 
+  from { transform: scale(SCALE) }
 
+  to   { transform: scale(1) }
 
 
 
+@keyframes backOut
 
+  from { transform: scale(1) }
 
+  to   { transform: scale(SCALE) }

+ 0 - 20
src/stylesheets/lungo.animation.styl
Wyświetl plik 

@@ -1,20 +0,0 @@
 
-@import "__init.styl"
 
-
 
-body
 
-  vendor(perspective, 800px)
 
-  vendor(transform-style, preserve-3d)
 
-
 
-  & > section
 
-    display-box()
 
-    width: 100%
 
-    height: 100%
 
-    position: absolute
 
-    top: 0
 
-    left: 0
 
-    visibility: hidden
 
-    overflow: hidden
 
-    transform translate3d(0, 0, 0)
 
-    vendor(backface-visibility, hidden)
 
-
 
-    &.show
 
-      visibility: visible

+ 15 - 15
src/stylesheets/lungo.layout.styl
Wyświetl plik 

@@ -82,25 +82,25 @@ body
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
   /* ================================ SECTION ================================ */
 
   /* ================================ SECTION ================================ */
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
-  & > section
 
-    z-index: 2
 
-    width: inherit
 
-    &:not(.show)
 
-      z-index: 1
 
+  // & > section
 
+  //   z-index: 2
 
+  //   width: inherit
 
+  //   &:not(.show)
 
+  //     z-index: 1
 
 
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
   /* ================================= ASIDE ================================= */
 
   /* ================================= ASIDE ================================= */
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
-  & > aside
 
-    width: ASIDE_WIDTH
 
-    display: none
 
-    z-index: -1
 
-    &.active, &.show
 
-      display-box()
 
-    &.show
 
-      z-index: 0
 
-    &.right
 
-      right: 0px
 
+  // & > aside
 
+  //   width: ASIDE_WIDTH
 
+  //   display: none
 
+  //   z-index: -1
 
+  //   &.active, &.show
 
+  //     display-box()
 
+  //   &.show
 
+  //     z-index: 0
 
+  //   &.right
 
+  //     right: 0px
 
 
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
   /* =============================== EXCLUDE OS ============================== */
 
   /* =============================== EXCLUDE OS ============================== */

+ 100 - 67
src/stylesheets/lungo.media.phone.styl
Wyświetl plik 

@@ -1,82 +1,115 @@
 
+@import "__init.styl"
 
 
 
 /* ==== Any phone ==== */
 
 /* ==== Any phone ==== */
 
 @media only screen and (max-width: 767px)
 
 @media only screen and (max-width: 767px)
 
+
 
   body
 
   body
 
-    &[data-position="absolute"] > section
 
+    vendor(perspective, 800px)
 
+    vendor(transform-style, preserve-3d)
 
+    overflow: hidden
 
+
 
+    & > section
 
+      // overflow: hidden
 
+      display-box()
 
+      vendor(transform, translate3d(0, 0, 0))
 
+      vendor(backface-visibility, hidden)
 
       position: absolute
 
       position: absolute
 
-    &[data-position="fixed"] > section
 
-      position: fixed
 
+      width: 100%
 
+      height: 100%
 
+      top: 0
 
+      left: 0
 
+      z-index: 2
 
+      visibility: hidden
 
+      &.show
 
+        visibility: visible
 
 
 
     & > aside
 
     & > aside
 
+      width: ASIDE_WIDTH
 
       position: absolute
 
       position: absolute
 
+      z-index: -1
 
+      top: 0
 
+      left: 0
 
+      visibility: hidden
 
+      &.show
 
+        visibility: visible
 
 
 
-    & > section
 
-      display: none
 
-      &:not([data-transition]).show
 
-        display: block
 
 
 
-      // &.show.aside
 
-      //   &:not(.right)
 
-      //     transform translateX(ASIDE_WIDTH)
 
-      //   &.right
 
-      //     transform translateX(-(ASIDE_WIDTH))
 
-      // &.show.hide
 
-      //   z-index: -1
 
+  // body
 
+  //   &[data-position="absolute"] > section
 
+  //     position: absolute
 
+  //   &[data-position="fixed"] > section
 
+  //     position: fixed
 
+
 
+  //   & > aside
 
+  //     position: absolute
 
+
 
+  //   & > section
 
+  //     display: none
 
+  //     &:not([data-transition]).show
 
+  //       display: block
 
+
 
+  //     &.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
 
+  //     &[data-transition]
 
+  //       display-box()
 
+  //       transition-property opacity, z-index, transform,        scale, opacity
 
+  //       transition-duration TRANSITION_TIME
 
+  //       transition-timing-function DEFAULT_TRANSITION
 
+  //       backface-visibility hidden
 
 
 
-      // // Transition: SLIDE
 
-      // &[data-transition="slide"]
 
-      //   visibility: visible
 
-      //   z-index: 2
 
-      //   &.show, &:first-child
 
-      //     transform translateX(0%)
 
-      //     z-index: 1
 
-      //   &:not(first-child)
 
-      //     transform translateX(100%)
 
-      //   &.hide
 
-      //     transform scale(0.9)
 
-      //     z-index: -1
 
-      //     &:not(.last)
 
-      //       opacity: 0
 
-      //       transition none !important
 
-      //     &.last
 
-      //       opacity: 0.5 !important
 
+  //     // Transition: SLIDE
 
+  //     &[data-transition="slide"]
 
+  //       visibility: visible
 
+  //       z-index: 2
 
+  //       &.show, &:first-child
 
+  //         transform translateX(0%)
 
+  //         z-index: 1
 
+  //       &:not(first-child)
 
+  //         transform translateX(100%)
 
+  //       &.hide
 
+  //         transform scale(0.9)
 
+  //         z-index: -1
 
+  //         &:not(.last)
 
+  //           opacity: 0
 
+  //           transition none !important
 
+  //         &.last
 
+  //           opacity: 0.5 !important
 
 
 
-      // // Transition: COVER
 
-      // &[data-transition="cover"]
 
-      //   transform translateY(100%)
 
-      //   &.show, &.hide
 
-      //     transform translateY(0%)
 
-      //   &.hide
 
-      //     transform scale(0.9)
 
-      //     z-index: -1
 
-      //     &:not(.last)
 
-      //       opacity: 0
 
-      //       visibility: hidden
 
-      //     &.last
 
-      //       opacity: 0.2
 
+  //     // Transition: COVER
 
+  //     &[data-transition="cover"]
 
+  //       transform translateY(100%)
 
+  //       &.show, &.hide
 
+  //         transform translateY(0%)
 
+  //       &.hide
 
+  //         transform scale(0.9)
 
+  //         z-index: -1
 
+  //         &:not(.last)
 
+  //           opacity: 0
 
+  //           visibility: hidden
 
+  //         &.last
 
+  //           opacity: 0.2
 
 
 
-      // // Transition: POP
 
-      // &[data-transition="pop"]
 
-      //   opacity: 0
 
-      //   transform scale(1.15)
 
-      //   &.show
 
-      //     transform scale(1)
 
-      //     opacity: 1
 
-      //   &.hide
 
-      //     transform scale(0.9)
 
-      //     opacity: 0
 
+  //     // Transition: POP
 
+  //     &[data-transition="pop"]
 
+  //       opacity: 0
 
+  //       transform scale(1.15)
 
+  //       &.show
 
+  //         transform scale(1)
 
+  //         opacity: 1
 
+  //       &.hide
 
+  //         transform scale(0.9)
 
+  //         opacity: 0
 
 
 
-      // // Transition: FADE
 
-      // &[data-transition="fade"]
 
-      //   opacity: 0
 
-      //   &:first-child, &.show
 
-      //     opacity: 1
 
-      //   &:hide
 
-      //     opacity: 0
 
+  //     // Transition: FADE
 
+  //     &[data-transition="fade"]
 
+  //       opacity: 0
 
+  //       &:first-child, &.show
 
+  //         opacity: 1
 
+  //       &:hide
 
+  //         opacity: 0