Prechádzať zdrojové kódy

Fix z-index in new data-transition=slide

Javi Jimenez Villar 13 rokov pred
rodič
commit
98bf55d44c

+ 83 - 0
example/navigation.html

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

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

+ 30 - 26
src/modules/Lungo.Router.coffee

@@ -26,8 +26,9 @@ Lungo.Router = do(lng = Lungo) ->
       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)
+          current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
         lng.Section.show current, target
         lng.Router.step section_id
@@ -35,25 +36,6 @@ Lungo.Router = do(lng = Lungo) ->
         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.
   @method   back
@@ -67,7 +49,9 @@ Lungo.Router = do(lng = Lungo) ->
       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
+      setTimeout (->
+        current.removeClass(C.CLASS.HIDING)
+      ), C.TRANSITION.DURATION
       if target.hasClass("aside") then lng.Aside.toggle()
 
     lng.Section.show current, target
@@ -75,6 +59,26 @@ Lungo.Router = do(lng = Lungo) ->
     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
@@ -112,8 +116,8 @@ Lungo.Router = do(lng = Lungo) ->
   _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

@@ -37,13 +37,20 @@
       /* 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)
-          opacity: 0.75
+          z-index: 0
+          &:not(.last)
+            opacity: 0
+            transition none !important
+          &.last
+            opacity: 0.5 !important
 
       /* Transition: COVER */
       &[data-transition="cover"]
@@ -52,7 +59,12 @@
           transform translateY(0%)
         &.hide
           transform scale(0.9)
-          opacity: 0.75
+          z-index: -1
+          &:not(.last)
+            opacity: 0
+            visibility: hidden
+          &.last
+            opacity: 0.2
 
       /* Transition: POP */
       &[data-transition="pop"]