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

Fixes for tablet examples

piniphone 13 лет назад
Родитель
95fcfe8d0f
Сommit
17f4c9f0ef
6 измененных файлов с 201 добавлено и 15 удалено
Разделённый вид Показать статистику Diff
  1. 3 2
      example/components.html
  2. 167 0
      example/scramin.html
  3. 8 1
      example/tablet1.html
  4. 1 1
      src/modules/Lungo.Aside.coffee
  5. 14 8
      src/modules/Lungo.Router.Tablet.coffee
  6. 8 3
      src/stylesheets/lungo.animation.slide.styl

+ 3 - 2
example/components.html
Просмотреть файл 

@@ -67,17 +67,18 @@
 
             </h1>
 
 
             <nav class="on-right">
 
+                         <!--
 
+
 
                 <a href="#" class="button" data-icon="inbox" data-count="19"></a>
 
                 <button data-icon="share"></button>
 
-                         <!--
 
 
                 <a href="#" data-icon="menu" data-loading="white"></a>
 
                 <button data-label="send" data-icon="envelope"></button>
 
                 <button data-label="send"></button>
 
+                -->
 
 
                 <a href="#" class="button" data-view-menu="options" data-icon="menu"></a>
 
                 <a href="#" class="button" data-view-menu="options-icons" data-icon="grid"></a>
 
-                -->
 
 
             </nav>
 
         </header>

+ 167 - 0
example/scramin.html
Просмотреть файл 

@@ -0,0 +1,167 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>LngSCRAMIN</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 -->
 
+    <aside id="menu">
 
+        <header data-title="Scram.in">
 
+            <nav class="on-right">
 
+                <a href="#" data-view-article="profile" data-icon="cog" data-title="Profile"></a>
 
+            </nav>
 
+        </header>
 
+        <article class="active list scroll">
 
+            <ul>
 
+                <li data-view-article="main-section"><h1>FOR TODAY</h1></li>
 
+                <li data-view-article="main-section">Slidus</li>
 
+                <li data-view-article="main-section">Lungo</li>
 
+                <li data-view-article="main-section">Everead</li>
 
+            </ul>
 
+        </article>
 
+    </aside>
 
+
 
+    <section id="login" data-transition="slide">
 
+        <article>
 
+            login
 
+            <button data-view-section="main-section" class="">va al main</button>
 
+        </article>
 
+    </section>
 
+
 
+    <!-- main section with articles -->
 
+    <section id="main-section" data-transition="slide" data-children="card-info" data-aside="menu">
 
+        <header data-title="Game">
 
+            <nav class="left">
 
+                <button data-icon="list" data-view-aside="menu"></button>
 
+            </nav>
 
+        </header>
 
+        <!--
 
+        <nav data-control="groupbar">
 
+            <a href="#" data-view-article="today" data-label="cards"></a>
 
+            <a href="#" data-view-article="rules" data-label="rules"></a>
 
+            <a href="#" data-view-article="rounds" data-label="rounds"></a>
 
+            <a href="#" data-view-article="players" data-label="players"></a>
 
+        </nav>
 
+         -->
 
+        <!-- cards articles -->
 
+        <article id="today" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="card-info">today card n1</li>
 
+                <li data-view-section="card-info">today card n2</li>
 
+                <li data-view-section="card-info">today card n3</li>
 
+            </ul>
 
+        </article>
 
+        <article id="someday" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="card-info">someday card n1</li>
 
+                <li data-view-section="card-info">someday card n2</li>
 
+                <li data-view-section="card-info">someday card n3</li>
 
+            </ul>
 
+        </article>
 
+        <article id="finished" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="card-info">finished card n1</li>
 
+                <li data-view-section="card-info">finished card n2</li>
 
+                <li data-view-section="card-info">finished card n3</li>
 
+            </ul>
 
+        </article>
 
+        <article id="mine" class="list scroll">
 
+            <ul>
 
+                <li data-view-section="card-info">mine card n1</li>
 
+                <li data-view-section="card-info">mine card n2</li>
 
+                <li data-view-section="card-info">mine card n3</li>
 
+            </ul>
 
+        </article>
 
+        <!-- rules article -->
 
+        <article id="rules" class="list scroll">Rules</article>
 
+        <!-- rounds article -->
 
+        <article id="rounds" class="list scroll">Rounds</article>
 
+        <!-- players article -->
 
+        <article id="players" class="list scroll">players</article>
 
+
 
+        <footer data-article="today someday finished mine">
 
+            <nav>
 
+                <a href="#" data-view-article="today" data-icon="calendar"></a>
 
+                <a href="#" data-view-article="someday" data-icon="inbox"></a>
 
+                <a href="#" data-view-article="finished" data-icon="ok"></a>
 
+                <a href="#" data-view-article="mine" data-icon="user"></a>
 
+            </nav>
 
+        </footer>
 
+    </section>
 
+
 
+    <!-- driver section -->
 
+    <section id="card-info" data-transition="slide">
 
+        <header data-title="Card info">
 
+            <nav class="left">
 
+                <button data-view-section="back" data-icon="arrow-left"></button>
 
+            </nav>
 
+        </header>
 
+        <article id="card-info-main">Card info here!</article>
 
+        <article id="card-info-comments">Card info comments here!</article>
 
+        <footer>
 
+            <nav>
 
+                <a href="#" data-view-article="card-info-main">Info</a>
 
+                <a href="#" data-view-article="card-info-comments">Comments</a>
 
+            </nav>
 
+        </footer>
 
+    </section>
 
+
 
+    <!-- team section -->
 
+    <section id="team" data-transition="slide" data-children="comments">
 
+        <header data-title="Ranking teams">
 
+            <nav class="left">
 
+                <button data-icon="arrow-left" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="team-article">
 
+            <button class="anchor" data-view-section="comments">view comments</button>
 
+        </article>
 
+
 
+    </section>
 
+
 
+    <section id="comments" data-transition="slide">
 
+        <header data-title="Team comments">
 
+            <nav class="left">
 
+                <button data-icon="arrow-left" data-view-section="back"></button>
 
+            </nav>
 
+            <nav class="on-right"></nav>
 
+        </header>
 
+        <article id="comments-article">
 
+            comments
 
+        </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: 'Tablet tests',
 
+            version: '2.2',
 
+            history: false
 
+        });
 
+    </script>
 
+</body>
 
+</html>

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

@@ -2,7 +2,7 @@
 
 <html>
 
 <head>
 
     <meta charset="utf-8">
 
-    <title>Lungo Flexbox - SDK</title>
 
+    <title>Tablet1</title>
 
     <meta name="description" content="">
 
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
     <meta name="HandheldFriendly" content="True">
 
@@ -74,6 +74,13 @@
 
                 <li data-view-section="team">Renault</li><li data-view-section="team">Renault</li>
 
             </ul>
 
         </article>
 
+
 
+        <footer>
 
+            <nav>
 
+                <a href="#" data-view-article="byTeam" data-icon="calendar">byTeam</a>
 
+                <a href="#" data-view-article="byDriver" data-icon="calendar">byDriver</a>
 
+            </nav>
 
+        </footer>
 
     </section>
 
 
     <!-- driver section -->

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

@@ -28,7 +28,7 @@ Lungo.Aside = do (lng = Lungo) ->
 
           else lng.Element.Cache.section.data("aside-#{aside_transition}", "show")
 
         else
 
           aside.addClass(C.CLASS.SHOW)
 
-          aside_section = lng.dom("[data-aside=#{aside_id}][data-children].#{C.CLASS.SHOW}")
 
+          aside_section = lng.dom("[data-aside=#{aside_id}][data-children]")
 
           if aside_section.attr("id") isnt lng.Element.Cache.section?.attr("id")
 
             lng.Element.Cache.section.addClass "shadowing"
 
             childs = aside_section.data("children").split(" ")

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

@@ -67,7 +67,8 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
   @param    {string} <article> Id
 
   ###
 
   article = (section_id, article_id, element) ->
 
-    if not _sameSection() then back false
 
+    if not _sameSection() and section_id isnt lng.Element.Cache.section.attr("id")
 
+      back false
 
     target = lng.dom "article##{article_id}"
 
     if target.length > 0
 
       section = target.closest C.ELEMENT.SECTION
 
@@ -129,11 +130,17 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
     _fromCallback = false
 
 
   _showFuture = (future) ->
 
-    current = undefined
 
-    lng.Section.show(current, future)
 
-    if not _fromCallback then future.addClass(C.CLASS.SHOW)
 
+    console.error "Show future --> ", future.attr("id"), "curr->", lng.Element.Cache.section
 
+    lng.Element.Cache.dump()
 
+    current = lng.Element.Cache.section
 
+    lng.Section.show(undefined, future)
 
+    currentHasAside = lng.Element.Cache.section?.data("aside")?
 
+    console.error "has asside -->", currentHasAside
 
+    if not _fromCallback or not lng.Element.Cache.section?.data("aside")
 
+      console.error 'por aqui'
 
+      future.addClass(C.CLASS.SHOW)
 
     else _applyDirection(future, "in")
 
-    _checkAside(current, future)
 
+    _checkAside(undefined, future)
 
 
   _showForward = (current, future) ->
 
     if _isChild(current, future) then _applyDirection(future, "in")
 
@@ -152,7 +159,7 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
     _applyDirection(current, "back-out")
 
     showSections = lng.dom("section.#{C.CLASS.SHOW}:not(##{current.attr('id')})")
 
     if showSections.length is 1 and showSections.first().data("children")?
 
-      console.error "Muestro por quiiiiiii"
 
+      console.error "Show aside -->", showSections.first().data("aside")
 
       lng.Aside.show showSections.first().data("aside")
 
     _callbackSection = future
 
 
@@ -168,7 +175,6 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
       else if not current_aside.hasClass("box")
 
         do lng.Aside.hide
 
     else
 
-      console.error 'no hay aside asociado'
 
       do lng.Aside.hide
 
 
   _showAside = (aside_id, target) ->
 
@@ -211,7 +217,7 @@ Lungo.RouterTablet = do (lng = Lungo) ->
 
     setTimeout (-> window.location.hash = _hashed_url), 0
 
 
   _updateNavigationElements = (article_id) ->
 
-    article_id = lng.Element.Cache.article.attr(C.ATTRIBUTE.ID) unless article_id
 
+    article_id = lng.Element.Cache.article?.attr(C.ATTRIBUTE.ID) unless article_id
 
     # Active visual signal for elements
 
     links = lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE)
 
     links.filter("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)

+ 8 - 3
src/stylesheets/lungo.animation.slide.styl
Просмотреть файл 

@@ -41,13 +41,18 @@ body[data-device="tablet"]
 
       z-index: 2
 
       vendor(animation-name, slideBackOutTablet)
 
 
+// @keyframes slideInTablet
 
+//   from { transform: translateX(100%) rotateY(70deg) translateZ(-400px); opacity: 0 }
 
+//   to   { transform: translateX(0) rotateY(0) translateZ(0); opacity: 1 }
 
+// @keyframes slideBackOutTablet
 
+//   from { transform: translateX(0) rotateY(0) translateZ(0); opacity: 1 }
 
+//   to   { transform: translateX(100%) rotateY(70deg) translateZ(-400px); opacity: 0 }
 
+
 
 @keyframes slideInTablet
 
   from { transform: translateX(100%); opacity: 0 }
 
   to   { transform: translateX(0); opacity: 1 }
 
 @keyframes slideBackOutTablet
 
   from { transform: translateX(0); opacity: 1 }
 
   to   { transform: translateX(100%); opacity: 0 }
 
-// @keyframes slideBackOutTablet
 
-//   from { opacity: 1 }
 
-//   to   { opacity: 0 }
 
+