Final <markup/> for kitchen-sink

examples/kitchen-sink/app/app.js

@@ -7,6 +7,10 @@ var App = (function(lng, undefined) {
         resources: {
             sections: [
                 'navigation.html',
+                'navigation-index.html',
+                'navigation-normal.html',
+                'navigation-pop.html',
+                'navigation-flow.html',
                 'buttons.html',
                 'lists.html',
                 'settings.html',

examples/kitchen-sink/app/events.js

@@ -3,8 +3,8 @@ App.Events = (function(lng, undefined) {
     lng.ready(function() {
         App.Services.mockProfiles();
 
-
         lng.View.Aside.show('#kitchen-sink', '#kitchen-sink-scroll');
+        lng.View.Element.progress('.progress', 10, true, 'Downloading 1/5...');
     });
 
     lng.dom('#event_touchstart').touch(function(event) { alert("touchstart!"); });
@@ -31,6 +31,34 @@ App.Events = (function(lng, undefined) {
         App.View.mockScrolls();
     });
 
+    lng.dom('section#navigation-index article a').tap(function(event) {
+        var type_of_transition = lng.dom(this).attr('class') || 'normal';
+
+        lng.dom('section#navigation-index').removeClass('pop').removeClass('flow').addClass(type_of_transition);
+
+        setTimeout(function() {
+            lng.Router.section('navigation-' + type_of_transition);
+        }, 100);
+    });
+
+    //List.Append & List.prepend
+    lng.dom('section#lists header .onright a').tap(function(event) {
+        var param = {
+            el: '#list-dinamic',
+            template: 'profile-tmp',
+            data: {
+                name: 'Dinamic item list',
+                description: '@soyjavi'
+            }
+        };
+
+        if ($$(this).hasClass('prepend')) {
+            lng.View.Template.List.append(param);
+        } else {
+            lng.View.Template.List.prepend(param);
+        }
+    });
+
 
     //SPECIAL
     $$('section#navigation').on('load', function(event) {

examples/kitchen-sink/app/sections/aside-profiles.html

@@ -4,8 +4,8 @@
         <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>
         <div class="anchor">CoreTeam</div>
         <a href="http://twitter.com/pasku1" target="_blank" data-image="assets/images/avatars/pasku.jpg">Guillermo Pascual</a>
-        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
         <div class="anchor">Contributors</div>
+        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/b374f3bd05b1db4a974585ba57661815?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Jorge Casar</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/3d4bf44cff9779242dd82d20a0b7d0c8?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Dave Winders</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/884b5d1e91b826afc8c6b4fc3429dbd0?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">GermanDZ</a>

examples/kitchen-sink/app/sections/aside.html

@@ -1,5 +1,6 @@
 <aside id="kitchen-sink-scroll" class="scrollable">
     <div>
+        <div class="title">Select a option</div>
         <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
         <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
         <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>

examples/kitchen-sink/app/sections/forms.html

@@ -2,8 +2,9 @@
     <header data-title="Forms" class="extended" data-back="home">
         <nav class="groupbar">
             <a href="#form-inputs" data-target="article" class="current">Inputs</a>
-            <a href="#form-specials" data-target="article">Specials</a>
+            <a href="#form-others" data-target="article">Others</a>
             <a href="#form-switchs" data-target="article">Switchs</a>
+            <a href="#form-specials" data-target="article">Specials</a>
             <a href="#form-tips" data-target="article">Tips</a>
         </nav>
     </header>
@@ -41,7 +42,7 @@
         </div>
     </article>
 
-    <article id="form-specials" class="list">
+    <article id="form-others" class="list">
         <div class="indented">
             <ul class="form">
                 <li class="anchor" data-icon="edit">Example of search</li>
@@ -54,6 +55,17 @@
                     <input type="time" placeholder="Some time..." />
                     <input type="month" placeholder="Some month..." />
                 </li>
+                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-specials" class="list">
+        <div class="indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of progress</li>
+                <li data-progress="0%"></li>
+                <li class="anchor" data-icon="edit">Example of range</li>
                 <li> <input type="range"></li>
                 <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>

examples/kitchen-sink/app/sections/lists.html

@@ -1,15 +1,19 @@
 <section id="lists">
     <header data-back="home" data-title="Lists" class="extended">
+        <nav class="onright">
+            <a href="#" data-article="list-dinamic" class="button" data-icon="up"></a>
+            <a href="#" data-article="list-dinamic" class="button prepend" data-icon="down"></a>
+        </nav>
         <nav class="groupbar">
             <a href="#list-plain" data-target="article" class="current">Normal</a>
             <a href="#list-ordered" data-target="article">Ordered</a>
             <a href="#list-indented" data-target="article">Indented</a>
-            <a href="#list-rounded" data-target="article">Rounded</a>
+            <a href="#list-dinamic" data-target="article">Dinamic</a>
         </nav>
     </header>
 
     <article id="list-plain" class="list"></article>
     <article id="list-ordered" class="list"></article>
     <article id="list-indented" class="list indented scrollable"></article>
-    <article id="list-rounded" class="list indented rounded scrollable"></article>
+    <article id="list-dinamic" class="list scrollable"></article>
 </section>

examples/kitchen-sink/app/sections/navigation-flow.html

@@ -0,0 +1,4 @@
+<section id="navigation-flow" class="flow">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/kitchen-sink/app/sections/navigation-index.html

@@ -0,0 +1,10 @@
+<section id="navigation-index" class="">
+    <header data-back="home" data-title="Type of transitions"></header>
+    <article class="list indented">
+        <ul>
+            <li><a href="#">Normal Transition</a></li>
+            <li><a href="#" class="pop">Pop Transition</a></li>
+            <li><a href="#" class="flow">Flow Transition</a></li>
+        </ul>
+    </article>
+</section>

examples/kitchen-sink/app/sections/navigation-normal.html

@@ -0,0 +1,4 @@
+<section id="navigation-normal">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/kitchen-sink/app/sections/navigation-pop.html

@@ -0,0 +1,4 @@
+<section id="navigation-pop" class="pop">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/kitchen-sink/app/sections/navigation.html

@@ -1,8 +1,7 @@
 <section id="navigation">
     <header data-back="home" data-title="Navigation">
         <nav class="onright">
-            <a href="#" class="current" class="current" data-count="23" data-icon="star"><abbr>asas</abbr></a>
-            <a href="#navigation-secondary" class="current" data-target="section" data-icon="right"><abbr>Edit</abbr></a>
+            <a href="#navigation-index" class="current" data-target="section"><abbr>Transitions</abbr></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/services.js

@@ -28,10 +28,6 @@ App.Services = (function(lng, App, undefined) {
         parameters.el = '#list-indented';
         lng.View.Template.List.create(parameters);
 
-        //Rounded List
-        parameters.el = '#list-rounded';
-        lng.View.Template.List.create(parameters);
-
         //Ordered List
         parameters.el = '#list-ordered';
         parameters.order = { field: 'name', type: 'asc' };

examples/kitchen-sink/assets/stylesheets/app.css

@@ -1,37 +1,27 @@
-pre {
-    font-weight: normal;
-    font-size: 12px;
-    background: rgba(255,255,255,0.5);
-    border: 1px solid rgba(0,0,0,0.5);
-    margin-top: 10px;
-    padding: 10px;
-}
-
-/* @group <section> #demo_scroll */
-.container-scroll {
-    padding: 4px;
+.scroll-demo {
+    background: #ccc;
+    margin: 10px;
+    overflow: hidden;
 }
 
-.vertical {
-    height: 154px;
+.scroll-demo.horizontal {
+    height: 68px;
+    width: inherit;
+    display: block;
 }
 
-.horizontal {
-    position: relative;
-    top: 172px;
-    height: 75px;
+.scroll-demo.vertical {
+    top: 72px;
+    width: 72px;
+    height: 196px;
 }
 
-.container-scroll li{
-    height: 76px;
-    width: 76px;
-    background: #ccc;
-    font-size: 24px;
-    line-height: 76px;
-    list-style: none;
+.scroll-demo span {
+    height: 64px;
+    width: 64px;
+    background: #666;
     text-align: center;
-    float:left;
-    margin-right: 3px;
-    margin-bottom: 3px;
-}
-/* @end */
+    line-height: 64px;
+    display: inline-block;
+    margin: 2px 0px 0px 2px;
+}

examples/kitchen-sink/index.html

@@ -35,6 +35,31 @@
     <!-- App Stylesheet -->
     <link rel="stylesheet" href="assets/stylesheets/app.css">
 
+    <style>
+        @-webkit-keyframes flow-show {
+            0% { -webkit-transform: translateX(100%) scale(.7); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(0%) scale(1);}
+        }
+
+        @-webkit-keyframes flow-show-revoke {
+            0% { -webkit-transform: translateX(0%) scale(1); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(100%) scale(.7);}
+        }
+
+        @-webkit-keyframes flow-hide {
+            0% { -webkit-transform: translateX(0%) scale(1); }
+            50% { -webkit-transform: translateX(0%) scale(.7); }
+            100% { -webkit-transform: translateX(-100%) scale(.7); }
+        }
+
+        @-webkit-keyframes flow-hide-revoke {
+            0% { -webkit-transform: translateX(-100%) scale(.7); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(0%) scale(1);}
+        }
+    </style>
 </head>
 
 <body class="app">
@@ -234,8 +259,42 @@
 
         <!-- ============================= scrolls ============================= -->
         <article id="scrolls">
-            <div id="scroll_vertical" class="container-scroll vertical scrollable"></div>
-            <div id="scroll_horizontal" class="container-scroll horizontal scrollable"></div>
+            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
+                <div style="width: 1036px;">
+                    <span>1</span>
+                    <span>2</span>
+                    <span>3</span>
+                    <span>4</span>
+                    <span>5</span>
+                    <span>6</span>
+                    <span>7</span>
+                    <span>8</span>
+                    <span>9</span>
+                    <span>10</span>
+                    <span>11</span>
+                    <span>12</span>
+                    <span>13</span>
+                    <span>14</span>
+                    <span>15</span>
+                </div>
+            </div>
+
+            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
+                <div>
+                    <span>1</span>
+                    <span>2</span>
+                    <span>3</span>
+                    <span>4</span>
+                    <span>5</span>
+                    <span>6</span>
+                    <span>7</span>
+                    <span>8</span>
+                    <span>9</span>
+                    <span>10</span>
+                    <span>11</span>
+                    <span>12</span>
+                </div>
+            </div>
         </article>
 
         <!-- ============================= authors ============================= -->
@@ -313,8 +372,5 @@
     <script src="app/view.js"></script>
     <script src="app/data.js"></script>
     <script src="app/services.js"></script>
-
-
-
 </body>
 </html>

examples/release-test/app/app.js

@@ -1,13 +1,16 @@
 var App = (function(lng, undefined) {
 
-    //Define your LungoJS Application Instance
 
     lng.App.init({
-        name: 'Release-Test',
+        name: 'Kitchen Sink',
         version: '1.2',
         resources: {
             sections: [
                 'navigation.html',
+                'navigation-index.html',
+                'navigation-normal.html',
+                'navigation-pop.html',
+                'navigation-flow.html',
                 'buttons.html',
                 'lists.html',
                 'settings.html',
@@ -20,11 +23,10 @@ var App = (function(lng, undefined) {
         }
     });
 
-
     var _getEnvironmentFromQuoJS = (function() {
         var environment = lng.Core.environment();
         if (environment.isMobile) {
-            alert('RELESE: Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
+           // alert('Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
         }
     })();
 

examples/release-test/app/data.js

@@ -1,7 +1,28 @@
-App.Data = (function(lng, app, undefined) {
+App.Data = (function(lng, App, undefined) {
 
-    return {
 
-    }
+    lng.Data.Sql.init({
+        name: 'lungo.js',
+        version: '1.0',
+        schema: [
+            { name: 'test', drop: true, fields: {
+                id: 'INTEGER PRIMARY KEY',
+                name: 'TEXT',
+                done: 'INTEGER DEFAULT 0',
+                created_at: 'DATETIME'
+                }
+            }
+        ]
+    });
+
+    lng.Data.Sql.insert('test', {name:'javi', done:'1'});
+
+    lng.Data.Sql.insert('test',
+        [
+            {name:'aitor', done:'1'},
+            {name:'iker', done:'1'}
+        ]
+    );
+
 
 })(LUNGO, App);

examples/release-test/app/events.js

@@ -1,4 +1,11 @@
-App.Events = (function(lng, app, undefined) {
+App.Events = (function(lng, undefined) {
+
+    lng.ready(function() {
+        App.Services.mockProfiles();
+
+        lng.View.Aside.show('#kitchen-sink', '#kitchen-sink-scroll');
+        lng.View.Element.progress('.progress', 10, true, 'Downloading 1/5...');
+    });
 
     lng.dom('#event_touchstart').touch(function(event) { alert("touchstart!"); });
     //OR
@@ -24,4 +31,32 @@ App.Events = (function(lng, app, undefined) {
         App.View.mockScrolls();
     });
 
-})(LUNGO, App);
+    lng.dom('section#navigation-index article a').tap(function(event) {
+        var type_of_transition = lng.dom(this).attr('class') || 'normal';
+
+        lng.dom('section#navigation-index').removeClass('pop').removeClass('flow').addClass(type_of_transition);
+
+        setTimeout(function() {
+            lng.Router.section('navigation-' + type_of_transition);
+        }, 100);
+    });
+
+    //List.Append & List.prepend
+    lng.dom('section#lists header .onright a').tap(function(event) {
+        var param = {
+            el: '#list-dinamic',
+            template: 'profile-tmp',
+            data: {
+                name: 'Dinamic item list',
+                description: '@soyjavi'
+            }
+        };
+
+        if ($$(this).hasClass('prepend')) {
+            lng.View.Template.List.append(param);
+        } else {
+            lng.View.Template.List.prepend(param);
+        }
+    });
+
+})(LUNGO);

examples/release-test/app/sections/aside-profiles.html

@@ -4,8 +4,8 @@
         <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>
         <div class="anchor">CoreTeam</div>
         <a href="http://twitter.com/pasku1" target="_blank" data-image="assets/images/avatars/pasku.jpg">Guillermo Pascual</a>
-        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
         <div class="anchor">Contributors</div>
+        <a href="http://twitter.com/ikalbeniz" target="_blank" data-image="assets/images/avatars/ikalbeniz.jpg">Iker Perez de Albeniz</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/b374f3bd05b1db4a974585ba57661815?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Jorge Casar</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/3d4bf44cff9779242dd82d20a0b7d0c8?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Dave Winders</a>
         <a href="#" data-image="https://secure.gravatar.com/avatar/884b5d1e91b826afc8c6b4fc3429dbd0?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">GermanDZ</a>

examples/release-test/app/sections/aside.html

@@ -1,5 +1,6 @@
 <aside id="kitchen-sink-scroll" class="scrollable">
     <div>
+        <div class="title">Select a option</div>
         <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
         <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
         <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>

examples/release-test/app/sections/forms.html

@@ -2,8 +2,9 @@
     <header data-title="Forms" class="extended" data-back="home">
         <nav class="groupbar">
             <a href="#form-inputs" data-target="article" class="current">Inputs</a>
-            <a href="#form-specials" data-target="article">Specials</a>
+            <a href="#form-others" data-target="article">Others</a>
             <a href="#form-switchs" data-target="article">Switchs</a>
+            <a href="#form-specials" data-target="article">Specials</a>
             <a href="#form-tips" data-target="article">Tips</a>
         </nav>
     </header>
@@ -41,7 +42,7 @@
         </div>
     </article>
 
-    <article id="form-specials" class="list">
+    <article id="form-others" class="list">
         <div class="indented">
             <ul class="form">
                 <li class="anchor" data-icon="edit">Example of search</li>
@@ -54,6 +55,17 @@
                     <input type="time" placeholder="Some time..." />
                     <input type="month" placeholder="Some month..." />
                 </li>
+                <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-specials" class="list">
+        <div class="indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of progress</li>
+                <li data-progress="0%"></li>
+                <li class="anchor" data-icon="edit">Example of range</li>
                 <li> <input type="range"></li>
                 <li class="tip dark" data-icon="question mini">Only for iOS5 & Android 2.3+ Devices"</li>
             </ul>

examples/release-test/app/sections/lists.html

@@ -1,15 +1,19 @@
 <section id="lists">
     <header data-back="home" data-title="Lists" class="extended">
+        <nav class="onright">
+            <a href="#" data-article="list-dinamic" class="button" data-icon="up"></a>
+            <a href="#" data-article="list-dinamic" class="button prepend" data-icon="down"></a>
+        </nav>
         <nav class="groupbar">
             <a href="#list-plain" data-target="article" class="current">Normal</a>
             <a href="#list-ordered" data-target="article">Ordered</a>
             <a href="#list-indented" data-target="article">Indented</a>
-            <a href="#list-rounded" data-target="article">Rounded</a>
+            <a href="#list-dinamic" data-target="article">Dinamic</a>
         </nav>
     </header>
 
     <article id="list-plain" class="list"></article>
     <article id="list-ordered" class="list"></article>
     <article id="list-indented" class="list indented scrollable"></article>
-    <article id="list-rounded" class="list indented rounded scrollable"></article>
+    <article id="list-dinamic" class="list scrollable"></article>
 </section>

examples/release-test/app/sections/navigation-flow.html

@@ -0,0 +1,4 @@
+<section id="navigation-flow" class="flow">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/release-test/app/sections/navigation-index.html

@@ -0,0 +1,10 @@
+<section id="navigation-index" class="">
+    <header data-back="home" data-title="Type of transitions"></header>
+    <article class="list indented">
+        <ul>
+            <li><a href="#">Normal Transition</a></li>
+            <li><a href="#" class="pop">Pop Transition</a></li>
+            <li><a href="#" class="flow">Flow Transition</a></li>
+        </ul>
+    </article>
+</section>

examples/release-test/app/sections/navigation-normal.html

@@ -0,0 +1,4 @@
+<section id="navigation-normal">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/release-test/app/sections/navigation-pop.html

@@ -0,0 +1,4 @@
+<section id="navigation-pop" class="pop">
+    <header data-back="home"></header>
+    <article></article>
+</section>

examples/release-test/app/sections/navigation.html

@@ -1,8 +1,7 @@
 <section id="navigation">
     <header data-back="home" data-title="Navigation">
         <nav class="onright">
-            <a href="#" class="current" class="current" data-count="23" data-icon="star"><abbr>asas</abbr></a>
-            <a href="#navigation-secondary" class="current" data-target="section" data-icon="right"><abbr>Edit</abbr></a>
+            <a href="#navigation-index" class="current" data-target="section"><abbr>Transitions</abbr></a>
         </nav>
     </header>
 

examples/release-test/app/services.js

@@ -1,7 +1,78 @@
-App.Services = (function(lng, app, undefined) {
+App.Services = (function(lng, App, undefined) {
 
-    return {
+    var mockProfiles = function() {
+        var profiles = [];
+        var id = 0;
+
+        for (var j=0; j < 3; j++) {
+            for (var i=1, len=12; i <= len; i++ ) {
+                id++;
+                profiles.push({
+                    id: id,
+                    name: 'Profile nº' + i,
+                    description: 'Description nº' + i,
+                    avatar: 'assets/images/avatars/' + i + '.jpg'
+                });
+            }
+        }
+
+        //Normal List
+        var parameters = {
+            el: '#list-plain',
+            template: 'profile-tmp',
+            data: profiles
+        };
+        lng.View.Template.List.create(parameters);
+
+        //Indented List
+        parameters.el = '#list-indented';
+        lng.View.Template.List.create(parameters);
+
+        //Ordered List
+        parameters.el = '#list-ordered';
+        parameters.order = { field: 'name', type: 'asc' };
+        lng.View.Template.List.create(parameters);
+    };
+
+    var testService = function() {
+        lng.Service.Settings.timeout = 2500;
+        lng.Service.Settings.dataType = 'json';
+        lng.Service.Settings.error = function() {
+            console.error('Timeout exceed (500ms):', arguments);
+        };
 
+        var url = 'http://www.panoramio.com/map/get_panoramas.php';
+        var parameters = {
+            set: 'public',
+            from: 0,
+            to: 3,
+            minx: -180,
+            miny: -90,
+            maxx: 180,
+            maxy: 90,
+            size: 'medium',
+            mapfilter: true
+        };
+
+        lng.Service.get(url, parameters,
+            function(response) {
+                console.error('GET', response);
+            }
+        );
+
+        lng.Service.json(url, parameters,
+            function(response) {
+                console.error('JSON', response);
+            }
+        );
+
+        lng.Service.Settings.async = false;
+        var response = lng.Service.json(url, parameters);
+        console.error('SYNC', response);
+    };
+
+    return {
+        mockProfiles: mockProfiles
     }
 
 })(LUNGO, App);

examples/release-test/app/view.js

@@ -1,7 +1,29 @@
-App.View = (function(lng, app, undefined) {
+App.View = (function(lng, App, undefined) {
 
-    return{
+    lng.View.Template.create(
+        'profile-tmp',
+        '<li class="selectable {{anchor}}">\
+                <img src="{{avatar}}" />\
+                <div class="onright">{{name}}</div>\
+                {{name}}\
+                <small>{{description}}</small>\
+            </a>\
+        </li>'
+    );
 
+    var mockScrolls = function() {
+        var markup = '';
+        for (var i=0; i < 32; i++) {
+            markup += '<li>'+i+'</li>';
+        }
+
+        lng.View.Scroll.update('scroll_vertical', markup);
+        lng.View.Scroll.update('scroll_horizontal', markup);
+    };
+
+    return {
+        mockScrolls: mockScrolls
     }
 
+
 })(LUNGO, App);

examples/release-test/assets/stylesheets/app.css

@@ -0,0 +1,27 @@
+.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;
+}

examples/release-test/index.html

@@ -1,17 +1,18 @@
 <!doctype html>
-<html manifest="index.appcache">
+<html>
 <head>
     <meta charset="utf-8">
-    <title>LungoJS</title>
+    <title>LungoJS - Kitchen Sink</title>
     <meta name="description" content="">
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
     <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
     <meta http-equiv="cleartype" content="on">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <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">
     <!-- For iPhone 4 with high-resolution Retina display: -->
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
@@ -20,6 +21,34 @@
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="../../release/lungo-1.2.min.css">
     <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
+
+    <style>
+        @-webkit-keyframes flow-show {
+            0% { -webkit-transform: translateX(100%) scale(.7); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(0%) scale(1);}
+        }
+
+        @-webkit-keyframes flow-show-revoke {
+            0% { -webkit-transform: translateX(0%) scale(1); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(100%) scale(.7);}
+        }
+
+        @-webkit-keyframes flow-hide {
+            0% { -webkit-transform: translateX(0%) scale(1); }
+            50% { -webkit-transform: translateX(0%) scale(.7); }
+            100% { -webkit-transform: translateX(-100%) scale(.7); }
+        }
+
+        @-webkit-keyframes flow-hide-revoke {
+            0% { -webkit-transform: translateX(-100%) scale(.7); }
+            50% { -webkit-transform: translateX(0%) scale(.7);}
+            100% { -webkit-transform: translateX(0%) scale(1);}
+        }
+    </style>
 </head>
 
 <body class="app">
@@ -219,8 +248,42 @@
 
         <!-- ============================= scrolls ============================= -->
         <article id="scrolls">
-            <div id="scroll_vertical" class="container-scroll vertical scrollable"></div>
-            <div id="scroll_horizontal" class="container-scroll horizontal scrollable"></div>
+            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
+                <div style="width: 1036px;">
+                    <span>1</span>
+                    <span>2</span>
+                    <span>3</span>
+                    <span>4</span>
+                    <span>5</span>
+                    <span>6</span>
+                    <span>7</span>
+                    <span>8</span>
+                    <span>9</span>
+                    <span>10</span>
+                    <span>11</span>
+                    <span>12</span>
+                    <span>13</span>
+                    <span>14</span>
+                    <span>15</span>
+                </div>
+            </div>
+
+            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
+                <div>
+                    <span>1</span>
+                    <span>2</span>
+                    <span>3</span>
+                    <span>4</span>
+                    <span>5</span>
+                    <span>6</span>
+                    <span>7</span>
+                    <span>8</span>
+                    <span>9</span>
+                    <span>10</span>
+                    <span>11</span>
+                    <span>12</span>
+                </div>
+            </div>
         </article>
 
         <!-- ============================= authors ============================= -->
@@ -258,14 +321,13 @@
 
     </section>
 
-    <!-- LungoJS (Production mode) -->
+     <!-- LungoJS (Production mode) -->
     <script src="../../release/lungo-1.2.packed.js"></script>
-
     <!-- LungoJS - Sandbox App -->
     <script src="app/app.js"></script>
-    <script src="app/data.js"></script>
     <script src="app/events.js"></script>
-    <script src="app/services.js"></script>
     <script src="app/view.js"></script>
+    <script src="app/data.js"></script>
+    <script src="app/services.js"></script>
 </body>
 </html>

examples/test-pro/app/events.js

@@ -1,86 +0,0 @@
-App.Events = (function(lng, undefined) {
-
-    lng.ready(function(){
-        console.error('LUNGO.js is ready...');
-        App.Services.mockProfiles();
-
-
-        var homes = [
-            {id: 1, name: 'lemoa'},
-            {id: 2, name: 'zalla'}
-        ];
-
-        lng.View.Template.List.create({
-            el: '#art-3',
-            template: 'home-tmp',
-            data: homes
-        });
-
-        setTimeout(function() {lng.View.Element.progress('.progress', 10, true, 'Downloading 1/5...');}, 500);
-        setTimeout(function() {lng.View.Element.progress('.progress', 30, true, 'Downloading 2/5...');}, 1100);
-        setTimeout(function() {lng.View.Element.progress('.progress', 40, true, 'Downloading 3/5...');}, 1600);
-        setTimeout(function() {lng.View.Element.progress('.progress', 55, true, 'Downloading 4/5...');}, 1900);
-        setTimeout(function() {lng.View.Element.progress('.progress', 70, true, 'Downloading 5/5...');}, 2200);
-        setTimeout(function() {lng.View.Element.progress('.progress', 100, true, 'Finished.');}, 3000);
-    });
-
-    //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 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);
-        }
-    });
-
-    //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#test').on('load', function(event) {
-        console.error('Load #test', event);
-        lng.Router.article('#next', '#files');
-    });
-
-    $$('section#test').on('unload', function(event) {
-        console.error('Unload #test', event);
-    });
-
-    $$('article#art-2').on('load', function(event) {
-        console.error('load article', this, event);
-    });
-
-    $$('article#art-1').on('unload', function(event) {
-        console.error(LUNGO.Constants)
-        console.error('unload article', this, event);
-    });
-
-})(LUNGO);

examples/test-pro/app/sections/asides.html

@@ -1,24 +0,0 @@
-<aside id="asi-1" class="scrollable current">
-    <div>
-        <div class="title" data-count="33">Users</div>
-        <a href="#art-1" data-target="article" data-count="33" data-icon="home">Art-1</a>
-        <a href="#art-2" data-target="article" data-icon="user">Art-2</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <div class="anchor" data-count="13">Users</div>
-        <a href="#sec-2" data-target="section" data-icon="folder">Sec-1</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-        <a href="#art-1" data-target="article">@soyjavi</a>
-    <div>
-</aside>

examples/test-pro/app/sections/local.html

@@ -1,11 +0,0 @@
-<section id="async-local">
-    <header data-back="home"  data-title="Async Local Section"></header>
-
-    <article></article>
-</section>
-
-<section id="async-local2">
-    <header data-back="home"  data-title="Async Local Section"></header>
-
-    <article></article>
-</section>

examples/test-pro/app/sections/remote.html

@@ -1,4 +0,0 @@
-<section id="async-remote">
-    <header data-back="home"  data-title="Async Remote Section"></header>
-    <article></article>
-</section>

examples/test-pro/app/services.js

@@ -1,35 +0,0 @@
-App.Services = (function(lng, App, undefined) {
-
-    var mockProfiles = function() {
-        var profiles = [];
-        var id = 0;
-
-        for (var j=0; j < 3; j++) {
-            for (var i=1, len=12; i <= len; i++ ) {
-                id++;
-                profiles.push({
-                    id: id,
-                    name: 'Profile nº' + i,
-                    description: 'Description nº' + i,
-                    avatar: 'assets/images/avatars/' + i + '.jpg'
-                });
-            }
-        }
-
-        //Normal List
-        lng.View.Template.List.create({
-            el: '#list-auto',
-            template: 'profile-tmp',
-            data: profiles,
-            order: {
-                field: 'name',
-                type: 'desc'
-            }
-        });
-    };
-
-    return {
-        mockProfiles: mockProfiles
-    }
-
-})(LUNGO, App);

examples/test-pro/app/templates/list-home.html

@@ -1,6 +0,0 @@
-<li data-template="home-tmp" id={{id}}>
-	<span class="icon mini home"></span>
-	<div class="onright bubble red" data-icon="calendar">{{time}} ago</div>
-	{{name}}
-	<small data-search="earth">{{description}}</small>
-</li>

examples/test-pro/app/view.js

@@ -1,28 +0,0 @@
-App.View = (function(lng, App, undefined) {
-
-    lng.View.Template.create(
-        'profile-tmp',
-        '<li class="selectable" data-icon="home">\
-                <div class="onright">{{name}}</div>\
-                {{name}}\
-                <small>{{description}}</small>\
-            </a>\
-        </li>'
-    );
-
-    var mockScrolls = function() {
-        var markup = '';
-        for (var i=0; i < 32; i++) {
-            markup += '<li>'+i+'</li>';
-        }
-
-        lng.View.Scroll.update('scroll_vertical', markup);
-        lng.View.Scroll.update('scroll_horizontal', markup);
-    };
-
-    return {
-        mockScrolls: mockScrolls
-    }
-
-
-})(LUNGO, App);

src/stylesheets/css/Lungo.layout.nav.css

@@ -6,7 +6,7 @@ nav .bubble{position:relative;top:-8px;left:-8px;margin-right:-20px;}
 .toolbar{height:48px;display:block;}.toolbar nav{display:block;}
 .toolbar a{padding:0;}
 .toolbar .icon{display:block;top:0px;font-size:32px;line-height:48px;}
-.toolbar.with-labels .icon{line-height:40px;padding-bottom:8px;}
+.toolbar.with-labels .icon{line-height:36px;padding-bottom:12px;}
 .toolbar .bubble{top:-52px;left:4px;}
-.toolbar abbr{position:absolute;top:34px;width:inherit;height:11px;margin-left:0px;display:block !important;font-size:11px;line-height:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
+.toolbar abbr{position:absolute;top:32px;width:inherit;height:14px;margin-left:0px;display:block !important;font-size:11px;line-height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 .groupbar{position:absolute;top:39px;height:28px;width:100%;padding:4px 0 2px;display:block;line-height:28px;z-index:2;}.groupbar a{padding:0px;}

src/stylesheets/less/Lungo.layout.less

@@ -21,8 +21,9 @@ section {
 	top:  0px;
 	width: 100%;
 	height: 100%;
-	z-index: 1;
 	
+	//display: none;
+	z-index: 1;
 	.transform(translate3d(100%, 0, 0));
 	-webkit-backface-visibility: hidden;
 	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
@@ -31,8 +32,14 @@ section {
          -o-transition: @keyframe @defaultTrasition;
             transition: @keyframe @defaultTrasition;
 	*/
-	&:first-child, &.show {	.transform(translate3d(0%, 0, 0)); }
-	&.hide { .transform(translate3d(-100%, 0, 0)); }
+	&:first-child, &.show {	
+		.transform(translate3d(0%, 0, 0)); 
+		//display: block; 
+		}
+	&.hide { 
+		.transform(translate3d(-100%, 0, 0)); 
+		//display: none;
+		}
 	
 	&.pop {
     	.transform(scale(0.5));

src/stylesheets/less/Lungo.layout.nav.less

@@ -69,8 +69,8 @@ nav {
 	}
 	
 	&.with-labels .icon {
-    	line-height: 40px;
-		padding-bottom: 8px;
+    	line-height: 36px;
+		padding-bottom: 12px;
 	}
 	
 	& .bubble {
@@ -80,14 +80,14 @@ nav {
 	
 	& abbr {
 		position: absolute;
-		top: 34px;
+		top: 32px;
 		width: inherit;
-    	height: 11px;
+    	height: 14px;
 		margin-left: 0px;
     	display: block !important;
     	
     	font-size: 11px;
-    	line-height: 12px;
+    	line-height: 14px;
     	    	
     	overflow: hidden;
    		white-space: nowrap;