Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
pwa
/
Lungo.js
zrkadlo https://github.com/tapquo/Lungo.js.git
2
0
Fork 0
Súbory Issues 0 Wiki
Prechádzať zdrojové kódy

Fix z-index in new data-transition=slide

Javi Jimenez Villar 13 rokov pred
rodič
9c0a6eea6d
commit
98bf55d44c
4 zmenil súbory, kde vykonal 128 pridanie a 28 odobranie
Jednotné zobrazenie Ukázať štatistiku rozdielnych dát
  1. 83 0
      example/navigation.html
  2. 1 0
      src/modules/Lungo.Constants.coffee
  3. 30 26
      src/modules/Lungo.Router.coffee
  4. 14 2
      src/stylesheets/lungo.media.phone.styl

+ 83 - 0
example/navigation.html
Zobraziť súbor 

@@ -0,0 +1,83 @@
 
+<!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="a">
 
+        <header data-title="aside"></header>
 
+        <article></article>
 
+    </aside>
 
+
 
+    <section id="zero" data-transition="slide" data-children="one" data-aside="a">
 
+        <header data-title="Zero">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="a"></button>
 
+            </nav>
 
+            <nav class="right">
 
+                <button data-icon="arrow-right" data-view-section="two"></button>
 
+            </nav>
 
+        </header>
 
+        <article id="zero-1"></article>
 
+    </section>
 
+
 
+    <section id="one" data-transition="slide" data-children="two" data-aside="a">
 
+        <header data-title="One">
 
+            <nav class="right">
 
+                <button data-icon="arrow-right" data-view-section="two"></button>
 
+            </nav>
 
+        </header>
 
+        <article id="one-1"></article>
 
+    </section>
 
+
 
+    <section id="two" data-transition="slide" data-children="three">
 
+        <header data-back="home" data-title="Two">
 
+            <nav class="right">
 
+                <button data-icon="arrow-right" data-view-section="three"></button>
 
+            </nav>
 
+        </header>
 
+        <article id="two-1"></article>
 
+    </section>
 
+
 
+    <section id="three" data-transition="slide" data-children="four">
 
+        <header data-back="home" data-title="Three">
 
+            <nav class="right">
 
+                <button data-icon="arrow-down" data-view-section="four"></button>
 
+            </nav>
 
+        </header>
 
+        <article id="three-1"></article>
 
+    </section>
 
+
 
+    <section id="four" data-transition="cover">
 
+        <header data-back="home" data-title="Four"></header>
 
+        <article id="four-1"></article>
 
+    </section>
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo.brownie/lungo.debug.js"></script>
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init({
 
+            name: 'Flexbox',
 
+            version: '2.2',
 
+            history: false
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 0
src/modules/Lungo.Constants.coffee
Zobraziť súbor 

@@ -49,6 +49,7 @@ Lungo.Constants =
 
     LEFT                : "left"
 
     LEFT                : "left"
 
     HORIZONTAL          : "horizontal"
 
     HORIZONTAL          : "horizontal"
 
     SMALL               : "small"
 
     SMALL               : "small"
 
+    LAST                : "last"
 
 
 
   TRIGGER:
 
   TRIGGER:
 
     LOAD                : "load"
 
     LOAD                : "load"

+ 30 - 26
src/modules/Lungo.Router.coffee
Zobraziť súbor 

@@ -26,8 +26,9 @@ Lungo.Router = do(lng = Lungo) ->
 
       target = if current then current.siblings(query) else lng.dom(query)
 
       target = if current then current.siblings(query) else lng.dom(query)
 
       if target.length > 0
 
       if target.length > 0
 
         if lng.DEVICE is C.DEVICE.PHONE and current?
 
         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
 
           lng.Section.defineTransition target, current
 
-          current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE)
 
+          current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
 
 
         lng.Section.show current, target
 
         lng.Section.show current, target
 
         lng.Router.step section_id
 
         lng.Router.step section_id
 
@@ -35,25 +36,6 @@ Lungo.Router = do(lng = Lungo) ->
 
         do _updateNavigationElements
 
         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
 
-
 
-
 
   ###
 
   ###
 
   Return to previous section.
 
   Return to previous section.
 
   @method   back
 
   @method   back
 
@@ -67,7 +49,9 @@ Lungo.Router = do(lng = Lungo) ->
 
       lng.Aside.hide()
 
       lng.Aside.hide()
 
       lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN
 
       lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN
 
       current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING)
 
       current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING)
 
-      setTimeout (-> current.removeClass(C.CLASS.HIDING)), C.TRANSITION.DURATION
 
+      setTimeout (->
 
+        current.removeClass(C.CLASS.HIDING)
 
+      ), C.TRANSITION.DURATION
 
       if target.hasClass("aside") then lng.Aside.toggle()
 
       if target.hasClass("aside") then lng.Aside.toggle()
 
 
 
     lng.Section.show current, target
 
     lng.Section.show current, target
 
@@ -75,6 +59,26 @@ Lungo.Router = do(lng = Lungo) ->
 
     do _updateNavigationElements
 
     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.
 
   Create a new element to the browsing history based on the current section id.
 
   @method step
 
   @method step
 
@@ -112,8 +116,8 @@ Lungo.Router = do(lng = Lungo) ->
 
   _removeLast = -> _history.length -= 1
 
   _removeLast = -> _history.length -= 1
 
 
 
 
 
-  section: section
 
-  article: article
 
-  back: back
 
-  history: history
 
-  step: step
 
+  section : section
 
+  back    : back
 
+  article : article
 
+  history : history
 
+  step    : step

+ 14 - 2
src/stylesheets/lungo.media.phone.styl
Zobraziť súbor 

@@ -37,13 +37,20 @@
 
       /* Transition: SLIDE */
 
       /* Transition: SLIDE */
 
       &[data-transition="slide"]
 
       &[data-transition="slide"]
 
         visibility: visible
 
         visibility: visible
 
+        z-index: 2
 
         &.show, &:first-child
 
         &.show, &:first-child
 
           transform translateX(0%)
 
           transform translateX(0%)
 
+          z-index: 1
 
         &:not(first-child)
 
         &:not(first-child)
 
           transform translateX(100%)
 
           transform translateX(100%)
 
         &.hide
 
         &.hide
 
           transform scale(0.9)
 
           transform scale(0.9)
 
-          opacity: 0.75
 
+          z-index: 0
 
+          &:not(.last)
 
+            opacity: 0
 
+            transition none !important
 
+          &.last
 
+            opacity: 0.5 !important
 
 
 
       /* Transition: COVER */
 
       /* Transition: COVER */
 
       &[data-transition="cover"]
 
       &[data-transition="cover"]
 
@@ -52,7 +59,12 @@
 
           transform translateY(0%)
 
           transform translateY(0%)
 
         &.hide
 
         &.hide
 
           transform scale(0.9)
 
           transform scale(0.9)
 
-          opacity: 0.75
 
+          z-index: -1
 
+          &:not(.last)
 
+            opacity: 0
 
+            visibility: hidden
 
+          &.last
 
+            opacity: 0.2
 
 
 
       /* Transition: POP */
 
       /* Transition: POP */
 
       &[data-transition="pop"]
 
       &[data-transition="pop"]