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

Tablet approach and some phone fixes

piniphone 13 лет назад
Родитель
abae1c6b5a
Сommit
e721b8a2f6
9 измененных файлов с 196 добавлено и 37 удалено
Единый вид Показать статистику Diff
  1. 1 1
      example/index.html
  2. 102 0
      example/navigation.tablet2.html
  3. 1 1
      example/static/asides/features.html
  4. 50 18
      src/modules/Lungo.Aside.coffee
  5. 4 0
      src/modules/Lungo.Constants.coffee
  6. 7 4
      src/modules/Lungo.Router.Tablet.coffee
  7. 0 4
      src/modules/Lungo.Section.coffee
  8. 15 0
      src/stylesheets/lungo.layout.nav.styl
  9. 16 9
      src/stylesheets/lungo.media.tablet.styl

+ 1 - 1
example/index.html
Просмотреть файл 

@@ -113,7 +113,7 @@
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                     Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
 
                 </li>
 
                 </li>
 
                 <li>
 
                 <li>
 
-                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" target="_blank" class="button anchor theme" data-label="Tweet me"></a>
 
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" target="_blank" class="button theme" data-label="Tweet me"></a>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </article>
 
         </article>

+ 102 - 0
example/navigation.tablet2.html
Просмотреть файл 

@@ -0,0 +1,102 @@
 
+<!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-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">
 
+        mail 1
 
+    </section>
 
+    <section id="mail2">
 
+        mail 2
 
+    </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>

+ 1 - 1
example/static/asides/features.html
Просмотреть файл 

@@ -1,4 +1,4 @@
 
-<aside id="features">
 
+<aside id="features" data-transition="left">
 
     <header data-title="Features">
 
     <header data-title="Features">
 
         <nav class="on-right">
 
         <nav class="on-right">
 
             <a href="#" class="buttons" data-icon="settings"></a>
 
             <a href="#" class="buttons" data-icon="settings"></a>

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

@@ -11,36 +11,47 @@ Lungo.Aside = do (lng = Lungo) ->
 
 
 
   C = lng.Constants
 
   C = lng.Constants
 
   _callback = undefined
 
   _callback = undefined
 
+  _customAsideAnimation = undefined
 
 
 
   ###
 
   ###
 
   Display an aside element with a particular <section>
 
   Display an aside element with a particular <section>
 
   @method show
 
   @method show
 
   ###
 
   ###
 
-  show = (aside_id, animate_section = true) ->
 
+  show = (aside_id, animate_section = true, fromX = 0) ->
 
     aside = lng.dom("##{aside_id}")
 
     aside = lng.dom("##{aside_id}")
 
     if aside.length
 
     if aside.length
 
       lng.Element.Cache.aside = aside
 
       lng.Element.Cache.aside = aside
 
       aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
 
       aside_transition = aside.data(C.TRANSITION.ATTR) or "left"
 
       aside.addClass(C.CLASS.SHOW)
 
       aside.addClass(C.CLASS.SHOW)
 
       if lng.DEVICE is C.DEVICE.PHONE
 
       if lng.DEVICE is C.DEVICE.PHONE
 
-        lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
 
+        if fromX then _phoneCustomAnimation fromX, false
 
+        else lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
 
       else
 
       else
 
         aside_section = lng.dom("[data-aside=#{aside_id}]")
 
         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"
 
+        if aside_section.data("children")
 
+          if aside_section.attr("id") isnt lng.Element.Cache.section.attr("id")
 
+            lng.Element.Cache.section.addClass "shadowing"
 
+          aside_section.removeClass("aside").addClass "asideShowing"
 
+
 
+  showFix = (aside_id) ->
 
+    aside = lng.dom("##{aside_id}")
 
+    if aside.length
 
+      lng.Element.Cache.aside = aside
 
+      aside.addClass(C.CLASS.SHOW).addClass("box")
 
 
 
   ###
 
   ###
 
   Hide an aside element with a particular section
 
   Hide an aside element with a particular section
 
   @method hide
 
   @method hide
 
   ###
 
   ###
 
-  hide = (callback) ->
 
+  hide = (callback, fromX) ->
 
+    console.error fromX
 
     if lng.Element.Cache.aside
 
     if lng.Element.Cache.aside
 
       _callback = callback
 
       _callback = callback
 
       aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
 
       aside_transition = lng.Element.Cache.aside.data(C.TRANSITION.ATTR) or "left"
 
       if lng.DEVICE is C.DEVICE.PHONE
 
       if lng.DEVICE is C.DEVICE.PHONE
 
         lng.Element.Cache.section.removeClass("aside").removeClass("aside-right")
 
         lng.Element.Cache.section.removeClass("aside").removeClass("aside-right")
 
-        lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
 
+        if fromX then _phoneCustomAnimation fromX, true
 
+        else lng.Element.Cache.section.data("aside-#{aside_transition}", "hide")
 
       else
 
       else
 
         lng.dom(".aside").removeClass("aside").addClass("asideHidding")
 
         lng.dom(".aside").removeClass("aside").addClass("asideHidding")
 
         lng.Element.Cache.aside = null
 
         lng.Element.Cache.aside = null
 
@@ -73,26 +84,26 @@ Lungo.Aside = do (lng = Lungo) ->
 
       if _callback then _callback.call _callback
 
       if _callback then _callback.call _callback
 
       _callback = undefined
 
       _callback = undefined
 
     else
 
     else
 
-      unless aside_transition.indexOf("right") is -1
 
-        section.removeAttr("data-aside-#{aside_transition}").addClass "aside-right"
 
-      else
 
-        section.removeAttr("data-aside-#{aside_transition}").addClass "aside"
 
-
 
+      className = if aside_transition.indexOf("right") is -1 then "aside" else "aside-right"
 
+      section.removeAttr("style").removeAttr("data-aside-#{aside_transition}").addClass(className)
 
+    if _customAsideAnimation
 
+      _customAsideAnimation.remove()
 
+      _customAsideAnimation = undefined
 
 
 
   ###
 
   ###
 
   @todo
 
   @todo
 
   @method draggable
 
   @method draggable
 
   ###
 
   ###
 
   draggable = ->
 
   draggable = ->
 
-    MIN_XDIFF = parseInt(document.body.getBoundingClientRect().width / 3, 10)
 
-    MIN_XDIFF = 128
 
+    return false unless lng.DEVICE is C.DEVICE.PHONE
 
+    MIN_XDIFF = 96
 
     lng.dom(C.QUERY.HREF_ASIDE).each ->
 
     lng.dom(C.QUERY.HREF_ASIDE).each ->
 
       started = false
 
       started = false
 
       el = lng.dom(this)
 
       el = lng.dom(this)
 
       section = el.closest("section")
 
       section = el.closest("section")
 
       aside = lng.dom("aside#" + el.data("aside"))
 
       aside = lng.dom("aside#" + el.data("aside"))
 
       section.swiping (gesture) ->
 
       section.swiping (gesture) ->
 
-        unless section.hasClass("aside")
 
+        unless section.hasClass("aside") or section.hasClass("aside-right")
 
           xdiff = gesture.currentTouch.x - gesture.iniTouch.x
 
           xdiff = gesture.currentTouch.x - gesture.iniTouch.x
 
           ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
 
           ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
 
           started = (if started then true else xdiff > 3 * ydiff and xdiff < 50)
 
           started = (if started then true else xdiff > 3 * ydiff and xdiff < 50)
 
@@ -109,9 +120,8 @@ Lungo.Aside = do (lng = Lungo) ->
 
         ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
 
         ydiff = Math.abs(gesture.currentTouch.y - gesture.iniTouch.y)
 
         section.attr "style", ""
 
         section.attr "style", ""
 
         if diff > MIN_XDIFF and started
 
         if diff > MIN_XDIFF and started
 
-          show aside
 
-        else
 
-          hide aside
 
+          show(aside.attr("id"), true, gesture.currentTouch.x)
 
+        else hide
 
         started = false
 
         started = false
 
 
 
 
 
@@ -121,8 +131,30 @@ Lungo.Aside = do (lng = Lungo) ->
 
   _asideStylesheet = ->
 
   _asideStylesheet = ->
 
     if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "
 
     if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "
 
 
 
+  _phoneCustomAnimation = (fromX, hide=false) ->
 
+    if hide then kfStyle = document.createTextNode("""
 
+        @-webkit-keyframes asideCustomKF {
 
+          0%   { -webkit-transform: translateX(#{fromX}px); }
 
+          40%  { -webkit-transform: translateX(#{fromX + 8}px); }
 
+          100% { -webkit-transform: translateX(0); }
 
+        }""")
 
+    else kfStyle = document.createTextNode("""
 
+        @-webkit-keyframes asideCustomKF {
 
+          0%   { -webkit-transform: translateX(#{fromX}px); }
 
+          60%  { -webkit-transform: translateX(#{C.ASIDE.NORMAL + 8}px); }
 
+          100% { -webkit-transform: translateX(#{C.ASIDE.NORMAL}px); }
 
+        }""")
 
+    _customAsideAnimation = document.createElement('style')
 
+    _customAsideAnimation.type = 'text/css'
 
+    _customAsideAnimation.appendChild(kfStyle)
 
+    document.getElementsByTagName("head")[0].appendChild(_customAsideAnimation)
 
+    lng.Element.Cache.section.style("-webkit-animation-name", "asideCustomKF")
 
+
 
+
 
+
 
   toggle: toggle
 
   toggle: toggle
 
   show: show
 
   show: show
 
+  showFix: showFix
 
   hide: hide
 
   hide: hide
 
   draggable: draggable
 
   draggable: draggable
 
   animationEnd: animationEnd
 
   animationEnd: animationEnd

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

@@ -64,6 +64,10 @@ Lungo.Constants =
 
     ORIGIN               : "transition-origin"
 
     ORIGIN               : "transition-origin"
 
     ATTR                 : "transition"
 
     ATTR                 : "transition"
 
 
 
+  ASIDE:
 
+    NORMAL               : 264
 
+
 
+
 
   ATTRIBUTE:
 
   ATTRIBUTE:
 
     ID                   : "id"
 
     ID                   : "id"
 
     HREF                 : "href"
 
     HREF                 : "href"

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

@@ -123,13 +123,16 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
         future.data(C.ATTRIBUTE.DIRECTION, "in") if future.data(C.TRANSITION.ATTR)
 
         future.data(C.ATTRIBUTE.DIRECTION, "in") if future.data(C.TRANSITION.ATTR)
 
 
 
     lng.Section.show current, future
 
     lng.Section.show current, future
 
-    do _checkSectionAside if animating
 
+    do _checkAside if animating
 
 
 
 
 
-  _checkSectionAside = (section) ->
 
+  _checkAside = ->
 
     aside_id = lng.Element.Cache.section?.data("aside")
 
     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)
 
+    if aside_id and not lng.Element.Cache.section.data("children")
 
+      lng.Aside.showFix aside_id
 
+    else
 
+      # is_other_aside = aside_id isnt lng.Element.Cache.aside?.attr("id")
 
+      lng.Aside.hide (-> lng.Aside.show aside_id)
 
 
 
 
 
   _sameSection = ->
 
   _sameSection = ->

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

@@ -31,10 +31,6 @@ Lungo.Section = do (lng = Lungo) ->
 
 
 
   _tablet = (current, target, backward) ->
 
   _tablet = (current, target, backward) ->
 
     target.addClass(C.CLASS.SHOW)
 
     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
 
 
 
 
 
   show: show
 
   show: show

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

@@ -109,6 +109,8 @@ nav
 
           font-size: FONT_SIZE_LARGE
 
           font-size: FONT_SIZE_LARGE
 
           line-height: 1.0em
 
           line-height: 1.0em
 
 
 
+
 
+
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
   /* ================================ FOOTER ================================= */
 
   /* ================================ FOOTER ================================= */
 
   /* ========================================================================= */
 
   /* ========================================================================= */
 
@@ -152,3 +154,16 @@ nav
 
         overflow: hidden
 
         overflow: hidden
 
         white-space: nowrap
 
         white-space: nowrap
 
         text-overflow: ellipsis
 
         text-overflow: ellipsis
 
+
 
+  /* ========================================================================= */
 
+  /* =========================== MENU KEYFRAMES ============================== */
 
+  /* ========================================================================= */
 
+
 
+@keyframes menuShow
 
+  0%   {transform translateY(-120%)}
 
+  75%  {transform translateY(8px)}
 
+  100% {transform translateY(0)}
 
+@keyframes menuHide
 
+  0%   {transform translateY(0)}
 
+  25%  {transform translateY(8px)}
 
+  100% {transform translateY(-120%)}

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

@@ -17,18 +17,27 @@
 
       vendor(animation-fill-mode, forwards)
 
       vendor(animation-fill-mode, forwards)
 
 
 
     & > aside
 
     & > aside
 
-      position: absolute
 
-      z-index: 0
 
-      left: 0
 
-      top: 0
 
-      visibility: hidden
 
-      &.show
 
-        visibility: visible
 
+      &.box
 
+        z-index: 0
 
+        display: none
 
+        &.show
 
+          ordinal-group(1)
 
+          display-box()
 
+
 
+      &:not(.box)
 
+        position: absolute
 
+        z-index: 0
 
+        left: 0
 
+        top: 0
 
+        visibility: hidden
 
+        &.show
 
+          visibility: visible
 
 
 
     & > section
 
     & > section
 
       z-index: 1
 
       z-index: 1
 
       display: none
 
       display: none
 
       &.show
 
       &.show
 
+        ordinal-group(2)
 
         display-box()
 
         display-box()
 
 
 
       &.asideShowing
 
       &.asideShowing
 
@@ -48,7 +57,6 @@
 
         transform translateX(ASIDE_WIDTH)
 
         transform translateX(ASIDE_WIDTH)
 
         opacity: .6
 
         opacity: .6
 
 
 
-
 
       &:not([data-children])
 
       &:not([data-children])
 
         box-flex(1)
 
         box-flex(1)
 
 
 
@@ -56,7 +64,6 @@
 
         width: 320px
 
         width: 320px
 
 
 
 
 
-
 
 @keyframes withAside
 
 @keyframes withAside
 
   0%   {transform translateX(0)}
 
   0%   {transform translateX(0)}
 
   100% {transform translateX(ASIDE_WIDTH)}
 
   100% {transform translateX(ASIDE_WIDTH)}