New behavior <aside> element

examples/test-pro/app/app.js

@@ -1,6 +1,5 @@
 var App = (function(lng, undefined) {
 
-
     lng.App.init({
         name: 'Kitchen Sink',
         version: '1.1',
@@ -10,17 +9,6 @@ var App = (function(lng, undefined) {
         ]
     });
 
-    var _getEnvironmentFromQuoJS = (function() {
-        var environment = lng.Core.environment();
-        if (environment.isMobile) {
-           // alert('Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
-        }
-    })();
-
-    lng.View.Element.count('#btn-one', 7);
-    lng.View.Element.count('#btn-three', 0);
-    lng.View.Element.count('#aside-one', 17);
-
     return {
 
     };

examples/test-pro/app/events.js

@@ -1,33 +1,52 @@
 App.Events = (function(lng, undefined) {
 
-    /*
-    lng.ready(function() {
+
+    lng.dom().ready(function() {
 
     });
-    */
 
-    lng.dom('#test header a.blue').tap(function(event) {
-        App.Services.mockProfiles();
+    //Toggle Aside
+
+    //Event on dinamic items
+    lng.dom('#list-auto').on('swipeLeft', 'li', function(event){
+        console.error(this, event, 'swipe');
     });
 
+    //List.Append & List.prepend
     lng.dom('#test header a.red').tap(function(event) {
-        var lista = '<li class="selectable">\
-                        <img src="assets/images/avatars/1.jpg">\
-                        <div class="onright">Profile nº1</div>\
-                        Profile nº1<small>Description nº1</small>\
-                    </li>';
-        lng.dom('#list-added_list').append(lista);
+        var param = {
+            el: '#list-added',
+            template: 'profile-tmp',
+            data: {
+                name: 'Javier Jimenez Villar',
+                description: '@soyjavi'
+            }
+        };
+
+        if ($$(this).hasClass('prepend')) {
+            lng.View.Template.List.append(param);
+        } else {
+            lng.View.Template.List.prepend(param);
+        }
+    });
 
-        lng.View.Scroll.refresh('list-added');
+    //Scroll.Append & Scroll.Last // Scroll.first & Scroll.last
+    lng.dom('#test header a.green').tap(function(event) {
+        lng.View.Scroll.append('scroll-horizontal', '<span>1</span>');
+        lng.View.Scroll.first('scroll-horizontal');
+
+        lng.View.Scroll.append('scroll-vertical', '<span>1</span>');
+        lng.View.Scroll.last('scroll-vertical');
     });
 
+    //Remove Item >> Scroll.refresh
     lng.dom('article#list-added li').tap(function(event) {
         $$(this).remove();
         lng.View.Scroll.refresh('list-added');
     });
 
     //SPECIAL
-    $$('section#next').on('load', function(event) {
+    $$('section#test').on('load', function(event) {
         console.error('Load #navigation', event);
         lng.Router.article('#next', '#files');
     });

examples/test-pro/app/services.js

@@ -17,20 +17,18 @@ App.Services = (function(lng, App, undefined) {
         }
 
         //Normal List
-        var parameters = {
-            container_id: 'list-plain',
-            template_id: 'profile-tmp',
-            data: profiles
-        };
-
         lng.View.Template.List.create({
-            container_id: 'list-auto',
-            template_id: 'profile-tmp',
-            data: profiles
+            el: '#list-auto',
+            template: 'profile-tmp',
+            data: profiles,
+            order: {
+                field: 'name',
+                type: 'desc'
+            }
         });
     };
 
-    mockProfiles();
+    //mockProfiles();
 
     return {
         mockProfiles: mockProfiles

examples/test-pro/app/view.js

@@ -2,8 +2,7 @@ App.View = (function(lng, App, undefined) {
 
     lng.View.Template.create(
         'profile-tmp',
-        '<li class="selectable {{anchor}}">\
-                <img src="{{avatar}}" />\
+        '<li>\
                 <div class="onright">{{name}}</div>\
                 {{name}}\
                 <small>{{description}}</small>\

examples/test-pro/index.html

@@ -17,6 +17,9 @@
 
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
@@ -25,25 +28,96 @@
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.pro.css">
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="assets/stylesheets/app.css">
 
+    <style>
+        .scroll-demo {
+            background: #ccc;
+            margin: 10px;
+            overflow: hidden;
+        }
+
+        .scroll-demo.horizontal {
+            height: 68px;
+            width: inherit;
+            display: block;
+        }
+
+        .scroll-demo.vertical {
+            top: 72px;
+            width: 72px;
+            height: 196px;
+        }
+
+        .scroll-demo span {
+            height: 64px;
+            width: 64px;
+            background: #666;
+            text-align: center;
+            line-height: 64px;
+            display: inline-block;
+            margin: 2px 0px 0px 2px;
+        }
+    </style>
 </head>
 
 <body class="app">
+
+    <section id="sec-1" class="">
+        <header data-title="Test Asides">
+            <a href="#asi-1" data-target="aside" class="button blue">asi-1</a>
+
+            <a href="#asi-2" data-target="aside" class="button green onright">sec-2</a>
+        </header>
+        <footer class="toolbar">
+            <nav>
+                <a href="#art-1"  class="current" data-target="article" data-icon="left"></a>
+                <a href="#art-2" data-target="article" data-icon="right"></a>
+                <a href="#sec-2" data-target="section" data-icon="files"></a>
+            </nav>
+        </footer>
+
+        <article id="art-1">Art-1</article>
+        <article id="art-2">Art-2</article>
+    </section>
+
+    <section id="sec-2">
+        <header data-back="home"></header>
+        <article>
+        </article>
+    </section>
+
+
+    <aside id="asi-1" class="scrollable">
+        <a href="#art-1" data-target="article">Art-1</a>
+        <a href="#art-2" data-target="article">Art-2</a>
+        <a href="#sec-2" data-target="section">Sec-1</a>
+    </aside>
+
+    <aside id="asi-2" class="onright">
+        <a href="#art-1" data-target="article">Art-1</a>
+        <a href="#sec-2" data-target="section">Sec-1</a>
+    </aside>
+
+
+    <!--
     <section id="test">
-        <header data-title="LungoJS Kitchen Sink">
+        <header data-title="LungoJS Kitchen Sink" class="extended">
             <a href="#" data-target="aside" class="button" data-icon="refresh">&nbsp;Aside</a>
             <nav class="onright">
-                <a href="#" data-article="list-added" class="button red" data-icon="right">&nbsp;Add</a>
-                <a href="#" data-article="list-auto" class="button blue" data-icon="right">&nbsp;Add</a>
+                <a href="#" data-article="list-added" class="button red" data-icon="up"></a>
+                <a href="#" data-article="list-added" class="button red prepend" data-icon="down"></a>
+                <a href="#" data-article="list-auto" class="button blue" data-icon="plus"></a>
+                <a href="#" data-article="list-dinamics" class="button green">Append</a>
+            </nav>
+            <nav class="groupbar">
+                <a href="#list-added" class="current" data-target="article">Dinamic</a>
+                <a href="#list-auto" data-target="article">Automatic</a>
+                <a href="#list-dinamics" data-target="article">Special</a>
             </nav>
         </header>
 
         <footer class="toolbar">
             <nav>
-                <a href="#list-added" class="current" data-target="article" data-icon="add"></a>
-                <a href="#list-auto" data-target="article" data-icon="add"></a>
                 <a href="#async-local" data-target="section" data-icon="settings"></a>
                 <a href="#async-remote" data-target="section" data-icon="wifi"></a>
             </nav>
@@ -60,11 +134,20 @@
                 <a href="#a">slaka</a>
                 <a href="#a">slaka</a>
             </ul>
-
         </aside>
 
         <article id="list-added" class="list"></article>
         <article id="list-auto" class="list"></article>
+        <article id="list-dinamics">
+            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
+                <div style="width:1036px;">
+                </div>
+            </div>
+
+            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
+                <div></div>
+            </div>
+        </article>
     </section>
 
     <section id="next">
@@ -93,15 +176,13 @@
         <article id="files">Files</article>
         <article id="folder">Folder</article>
     </section>
-
+    -->
 
     <!-- Third parties dependencies -->
     <script src="../../src/lib/QuoJS.js"></script>
     <script src="../../src/lib/iscroll-lite.js"></script>
-
     <!-- LungoJS Libraries (Development mode)-->
     <script src="../../src/Lungo.js"></script>
-
     <script src="../../src/Lungo.App.js" ></script>
     <script src="../../src/Lungo.Core.js"></script>
     <script src="../../src/Lungo.Dom.js"></script>
@@ -120,6 +201,7 @@
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
+    <script src="../../src/Lungo.fallback.js"></script>
     <script src="../../src/boot/Lungo.Boot.js"></script>
     <script src="../../src/boot/Lungo.Boot.Async.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
@@ -128,14 +210,10 @@
     <script src="../../src/boot/Lungo.Boot.Data.js"></script>
     <script src="../../src/boot/Lungo.Boot.Section.js"></script>
     <script src="../../src/boot/Lungo.Boot.Article.js"></script>
-
     <!-- LungoJS - Sandbox App -->
     <script src="app/app.js"></script>
     <script src="app/events.js"></script>
     <script src="app/view.js"></script>
     <script src="app/services.js"></script>
-
-
-
 </body>
 </html>

src/view/Lungo.View.Aside.js

@@ -10,13 +10,62 @@
 
 LUNGO.View.Aside = (function(lng, undefined) {
 
-    var toggle = function(section_id) {
-        var articles = lng.dom(section_id + ' article');
-        articles.toggleClass('aside');
+     var SELECTORS = {
+        SECTION: 'section',
+        ASIDE: 'aside'
+    };
+
+    var CSS_CLASSES = {
+        ASIDE: 'aside',
+        ACTIVE: 'current',
+        ONRIGHT: 'onright'
+    };
+
+    /**
+     * ?
+     *
+     * @method show
+     *
+     * @param  {string} Element query selector
+     * @param  {string} Value for counter
+     */
+    var show = function(section_id, aside_id) {
+        var aside = lng.dom(SELECTORS.ASIDE + aside_id);
+        var aside_class = _classFromAside(aside);
+        var section = lng.dom(SELECTORS.SECTION + section_id);
+
+        section.addClass(aside_class).addClass(CSS_CLASSES.ASIDE);
+        aside.addClass(CSS_CLASSES.ACTIVE);
+    };
+
+    /**
+     * ?
+     *
+     * @method hide
+     *
+     * @param  {string} Element query selector
+     * @param  {string} Value for counter
+     */
+    var hide = function(section_id, aside_id) {
+        var aside = lng.dom(SELECTORS.ASIDE + aside_id);
+        var section = lng.dom(SELECTORS.SECTION + section_id);
+
+        section.removeClass(CSS_CLASSES.ASIDE).removeClass(CSS_CLASSES.ONRIGHT);
+
+        setTimeout(function() {
+            var current_aside = SELECTORS.ASIDE + aside_id + '.' + CSS_CLASSES.ACTIVE;
+            lng.dom(current_aside).removeClass(CSS_CLASSES.ACTIVE);
+        }, 300);
+    };
+
+    var _classFromAside = function(aside) {
+        var aside_class = aside.attr('class');
+        return aside_class || '';
     };
 
     return {
-        toggle: toggle
+        show: show,
+        hide: hide
     };
 
 })(LUNGO);