Почетна Преглед Помоћ
Пријавите се
pwa
/
Lungo2.0.js
огледало од https://github.com/xabstract/Lungo2.0.js.git
2
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Преглед изворни кода

New aside behavior (.right.aside)

Javi Jimenez Villar пре 13 година
родитељ
ec426a6007
комит
6324d003f9
12 измењених фајлова са 32 додато и 56 уклоњено
Један поглед Покажи статистику Diff
  1. 3 4
      example/app/asides/features.html
  2. 0 13
      example/app/asides/left.html
  3. 10 6
      example/app/asides/right.html
  4. 3 8
      example/app/sections/aside.html
  5. 1 1
      example/components/lungo.brownie
  6. 5 3
      example/index.html
  7. 1 1
      src/boot/Lungo.Boot.Device.coffee
  8. 1 1
      src/modules/Lungo.Constants.coffee
  9. 3 11
      src/router/Lungo.Router.Aside.coffee
  10. 0 1
      src/router/Lungo.Router.Section.coffee
  11. 4 6
      src/stylesheets/lungo.media.phone.styl
  12. 1 1
      src/stylesheets/lungo.widgets.button.styl

+ 3 - 4
example/app/asides/features.html
Прегледај датотеку 

@@ -1,4 +1,4 @@
 
-<aside id="features" class="left">
 
+<aside id="features">
 
     <header data-title="Features">
 
     <header data-title="Features">
 
         <nav class="right">
 
         <nav class="right">
 
             <a href="#" class="buttons" data-icon="settings"></a>
 
             <a href="#" class="buttons" data-icon="settings"></a>
 
@@ -32,13 +32,12 @@
 
 
 
             <!-- Asides -->
 
             <!-- Asides -->
 
             <li data-view-section="aside" data-async="app/sections/aside.html">
 
             <li data-view-section="aside" data-async="app/sections/aside.html">
 
-                <div class="tag right">8</div>
 
-                <strong>Asides</strong>
 
+                <strong>Aside</strong>
 
             </li>
 
             </li>
 
 
 
             <!-- Menu -->
 
             <!-- Menu -->
 
             <li data-view-section="menu" data-async="app/sections/menu.html">
 
             <li data-view-section="menu" data-async="app/sections/menu.html">
 
-                <div class="tag right">1</div>
 
+                <div class="tag right">2</div>
 
                 <strong>Menu</strong>
 
                 <strong>Menu</strong>
 
             </li>
 
             </li>

+ 0 - 13
example/app/asides/left.html
Прегледај датотеку 

@@ -1,13 +0,0 @@
 
-<aside id="left" class="left">
 
-    <header data-title="Example of Aside"></header>
 
-    <article class="list">
 
-        <ul>
 
-            <li>
 
-                <a href="#aside-example" data-router="article" data-icon="user">
 
-                    <strong>Tap to close</strong>
 
-                    <small>Lorem ipsum dolor sit amet.</small>
 
-                </a>
 
-            </li>
 
-        </ul>
 
-    </article>
 
-</aside>

+ 10 - 6
example/app/asides/right.html
Прегледај датотеку 

@@ -1,7 +1,11 @@
 
-<aside id="right" class="right small">
 
-    <nav>
 
-        <a href="#aside-example" data-router="article" class="active" data-icon="clock"></a>
 
-        <a href="#aside-example" data-router="article" data-icon="user" data-count="14"></a>
 
-        <a href="#aside-example" data-router="article" data-icon="pushpin"></a>
 
-    </nav>
 
+<aside id="right" class="right">
 
+    <header data-title="Example of Aside"></header>
 
+    <article class="list active">
 
+        <ul>
 
+            <li data-view-aside="right" data-icon="user">
 
+                <strong>Tap to close</strong>
 
+                <small>Lorem ipsum dolor sit amet.</small>
 
+            </li>
 
+        </ul>
 
+    </article>
 
 </aside>
 
 </aside>

+ 3 - 8
example/app/sections/aside.html
Прегледај датотеку 

@@ -1,13 +1,8 @@
 
-<section id="aside" data-transition="slide">
 
+<section id="aside" data-transition="slide" data-aside="right">
 
     <header data-title="Asides" data-back="home">
 
     <header data-title="Asides" data-back="home">
 
         <nav class="right">
 
         <nav class="right">
 
-            <a href="#" data-view="aside" data-async="app/asides/left.html" data-icon="left" class="button anchor blue">Example of normal aside</a>
 
-            <a href="#" data-router="aside" data-async="app/asides/right.html" data-icon="right" class="button anchor red">Example of mini right aside</a>
 
+            <button data-view-aside="right" data-label="Show Aside"></button>
 
         </nav>
 
         </nav>
 
     </header>
 
     </header>
 
-    <article id="aside-example" class="active indented">
 
-        <div>
 
-
 
-        </div>
 
-    </article>
 
+    <article id="aside-example"></article>
 
 </section>
 
 </section>

+ 1 - 1
example/components/lungo.brownie
Прегледај датотеку 

@@ -1 +1 @@
 
-Subproject commit 04e598bb2512a11bf746f4995d06ddcd719525d2
 
+Subproject commit 3f980c32d772499e5131ef8adfc0cbfa1da83bd6

+ 5 - 3
example/index.html
Прегледај датотеку 

@@ -58,14 +58,14 @@
 
 
 
 <body class="app">
 
 <body class="app">
 
 
 
-    <section id="main" data-transition="" data-aside="features">
 
+    <section id="main" data-transition="" data-aside="features" class="drag">
 
         <header>
 
         <header>
 
             <nav>
 
             <nav>
 
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
 
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
 
             </nav>
 
             </nav>
 
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
             <nav class="right">
 
             <nav class="right">
 
-                <a href="#" data-action="twitter" class="button theme" data-icon="brand twitter"></a>
 
+                <a href="#" data-action="twitter" class="button" data-icon="brand twitter" data-article="main-article"></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
@@ -119,7 +119,9 @@
 
         Lungo.init({
 
         Lungo.init({
 
             name: 'Kitchen Sink',
 
             name: 'Kitchen Sink',
 
             version: '2.1.0222',
 
             version: '2.1.0222',
 
-            resources: ['app/asides/features.html']
 
+            resources: [
 
+                'app/asides/features.html',
 
+                'app/asides/right.html']
 
         });
 
         });
 
     </script>
 
     </script>
 
     <script src="app/app.js"></script>
 
     <script src="app/app.js"></script>

+ 1 - 1
src/boot/Lungo.Boot.Device.coffee
Прегледај датотеку 

@@ -18,6 +18,6 @@ Lungo.Boot.Device = do(lng = Lungo) ->
 
     env = lng.Core.environment()
 
     env = lng.Core.environment()
 
     lng.DEVICE = (if env.screen.width < 768 then DEVICE.PHONE else DEVICE.TABLET)
 
     lng.DEVICE = (if env.screen.width < 768 then DEVICE.PHONE else DEVICE.TABLET)
 
     lng.dom(document.body).data "device", lng.DEVICE
 
     lng.dom(document.body).data "device", lng.DEVICE
 
-    lng.Aside.draggable()  if lng.DEVICE is lng.Constants.DEVICE.PHONE
 
+    lng.Aside.draggable() if lng.DEVICE is lng.Constants.DEVICE.PHONE
 
 
 
   init: init
 
   init: init

+ 1 - 1
src/modules/Lungo.Constants.coffee
Прегледај датотеку 

@@ -30,7 +30,7 @@ Lungo.Constants =
 
 
 
     LIST_IN_ELEMENT     : "article.list"
 
     LIST_IN_ELEMENT     : "article.list"
 
     ELEMENT_SCROLLABLE  : "article.scroll"
 
     ELEMENT_SCROLLABLE  : "article.scroll"
 
-    HREF_ASIDE          : "section[data-aside]"
 
+    HREF_ASIDE          : "section[data-aside].drag"
 
     HREF_ROUTER         : "a[href][data-router]"
 
     HREF_ROUTER         : "a[href][data-router]"
 
     MENU_HREF           : "[data-control=menu] a[href]"
 
     MENU_HREF           : "[data-control=menu] a[href]"
 
     INPUT_CHECKBOX      : "input[type=range].checkbox"
 
     INPUT_CHECKBOX      : "input[type=range].checkbox"

+ 3 - 11
src/router/Lungo.Router.Aside.coffee
Прегледај датотеку 

@@ -52,8 +52,7 @@ Lungo.Aside = do(lng = Lungo) ->
 
       setTimeout (-> lng.Element.Cache.aside.addClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
       setTimeout (-> lng.Element.Cache.aside.addClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
       if lng.DEVICE is C.DEVICE.PHONE
 
       if lng.DEVICE is C.DEVICE.PHONE
 
         lng.Element.Cache.aside.addClass C.CLASS.SHOW
 
         lng.Element.Cache.aside.addClass C.CLASS.SHOW
 
-        aside_stylesheet = _asideStylesheet()
 
-        lng.Element.Cache.section.addClass(aside_stylesheet).addClass C.CLASS.ASIDE
 
+        lng.Element.Cache.section.addClass(_asideStylesheet()).addClass(C.CLASS.ASIDE)
 
 
 
 
 
   ###
 
   ###
 
@@ -62,7 +61,7 @@ Lungo.Aside = do(lng = Lungo) ->
 
   ###
 
   ###
 
   hide = ->
 
   hide = ->
 
     if lng.Element.Cache.aside? and lng.DEVICE is C.DEVICE.PHONE
 
     if lng.Element.Cache.aside? and lng.DEVICE is C.DEVICE.PHONE
 
-      lng.Element.Cache.section.removeClass C.CLASS.ASIDE
 
+      lng.Element.Cache.section.removeClass(C.CLASS.ASIDE)
 
       setTimeout (-> lng.Element.Cache.aside.removeClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
       setTimeout (-> lng.Element.Cache.aside.removeClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
 
 
   ###
 
   ###
 
@@ -105,14 +104,7 @@ Lungo.Aside = do(lng = Lungo) ->
 
   Private methods
 
   Private methods
 
   ###
 
   ###
 
   _asideStylesheet = ->
 
   _asideStylesheet = ->
 
-    aside_stylesheet = lng.Element.Cache.aside.attr(C.ATTRIBUTE.CLASS)
 
-    stylesheet = ""
 
-
 
-    #@todo: Refactor
 
-    if aside_stylesheet
 
-      stylesheet += (if (aside_stylesheet.indexOf(C.CLASS.RIGHT) > -1) then C.CLASS.RIGHT + " " else "")
 
-      stylesheet += (if (aside_stylesheet.indexOf(C.CLASS.SMALL) > -1) then C.CLASS.SMALL + " " else "")
 
-    stylesheet
 
+    if lng.Element.Cache.aside?.hasClass(C.CLASS.RIGHT) then "#{C.CLASS.RIGHT}" else "  "
 
 
 
   active: active
 
   active: active
 
   toggle: toggle
 
   toggle: toggle

+ 0 - 1
src/router/Lungo.Router.Section.coffee
Прегледај датотеку 

@@ -23,7 +23,6 @@ Lungo.Section = do(lng = Lungo) ->
 
     lng.Element.Cache.aside = lng.Aside.active target
 
     lng.Element.Cache.aside = lng.Aside.active target
 
     if target.hasClass "aside" then lng.Aside.show()
 
     if target.hasClass "aside" then lng.Aside.show()
 
 
 
-
 
     current.trigger C.TRIGGER.UNLOAD if current
 
     current.trigger C.TRIGGER.UNLOAD if current
 
     target.trigger C.TRIGGER.LOAD
 
     target.trigger C.TRIGGER.LOAD

+ 4 - 6
src/stylesheets/lungo.media.phone.styl
Прегледај датотеку 

@@ -13,15 +13,13 @@
 
     position: absolute
 
     position: absolute
 
 
 
   section
 
   section
 
-    &.aside
 
-      &:not(.small)
 
+    &.show.aside
 
+      &:not(.right)
 
         transform translateX(ASIDE_WIDTH)
 
         transform translateX(ASIDE_WIDTH)
 
-      &.small
 
-        transform translateX(ASIDE_WIDTH_SMALL)
 
       &.right
 
       &.right
 
         transform translateX(-(ASIDE_WIDTH))
 
         transform translateX(-(ASIDE_WIDTH))
 
-        &.small
 
-          transform translateX(-(ASIDE_WIDTH_SMALL))
 
+    &.show.hide
 
+      z-index: -1
 
 
 
     &[data-transition]
 
     &[data-transition]
 
       display-box()
 
       display-box()

+ 1 - 1
src/stylesheets/lungo.widgets.button.styl
Прегледај датотеку 

@@ -27,7 +27,7 @@
 
       font-size: 1.3em
 
       font-size: 1.3em
 
       float: left
 
       float: left
 
     & .icon + abbr
 
     & .icon + abbr
 
-      margin-left: 6px
 
+      margin-left: 4px
 
       float: right
 
       float: right
 
 
 
   article &
 
   article &