Merge Branch 1.2

CHANGES.md

@@ -1,10 +1,24 @@
 # LungoJS
 ### HTML5 Mobile Framework, and stuff.
 
+## Changes in Version 1.2
+- New improved Scroll: Refresh, Append, Prepend...
+- New input element (iOS 5+, Android 2.3+): type="range"
+- New data-attribute: data-progress
+- New <section> transitions: pop & flow
+- ...
+- BUG FIXED:
+    -
+
+## Changes in Version 1.1.2
+- BUG FIXED:
+    - Icon repository supported in Android Honeycomb (3.0+)
+    - Icon repository supported in Android IceCream Sandwich (4.0+)
+
 ## Changes in Version 1.1.1
 
 - BUG FIXED:
-	- Issue #58: Fixed position in iOS Devices (4+)
+    - Issue #58: Fixed position in iOS Devices (4+)
     - Fixed height of a scroll when overwrite a .list
 
 ## Changes in Version 1.1

LICENSE.txt

@@ -1,10 +1,10 @@
-Copyright (c) 2011 TapQuo Inc (Javier Jimenez Villar)
+Copyright (c) 2011-2012 TapQuo Inc (Javier Jimenez Villar)
 
 ===============================================================================
 ===============================================================================
 
 OPEN SOURCE LICENSE FOR LUNGOJS
-Version 1.1
+Version 1.2
 
 LungoJS is an avid supporter of open source software. This is the appropriate
 option if you are creating an open source application with a license compatible
@@ -31,7 +31,7 @@ THE SOFTWARE IS LICENSED, NOT SOLD.
 ===============================================================================
 
 OPEN SOURCE LICENSE FAQ
-Version 1.1
+Version 1.2
 
 This document is for guidance purposes only and is not a legal document and is
 not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
@@ -42,7 +42,7 @@ advice.
 ===============================================================================
 
 LUNGOJS AND THE GPL v3
-Version 1.1
+Version 1.2
 
 -------------------------------------------------------------------------------
 What is the GPL v3?

examples/kitchen-sink/app/app.js

@@ -3,7 +3,24 @@ var App = (function(lng, undefined) {
 
     lng.App.init({
         name: 'Kitchen Sink',
-        version: '1.1.1'
+        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',
+                'forms.html',
+                'buttons-extra.html',
+                'aside.html',
+                'aside-profiles.html',
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html',
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/error.html']
+        }
     });
 
     var _getEnvironmentFromQuoJS = (function() {

examples/kitchen-sink/app/events.js

@@ -1,5 +1,12 @@
 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
     //lng.dom('#event_touchstart').on('touchstart', function(event) { alert("TOUCH_START!"); });
@@ -24,5 +31,46 @@ 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) {
+        console.error('Load #navigation', event);
+    });
+
+    $$('section#navigation').on('unload', function(event) {
+        console.error('Unload', event);
+    });
+
+    $$('article#authors').on('load', function(event) {
+        console.error('loaded article');
+    });
 
 })(LUNGO);

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

@@ -0,0 +1,15 @@
+<aside id="profiles" class="scrollable onright">
+    <div>
+        <div class="anchor">Author of LungoJS</div>
+        <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>
+        <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>
+        <a href="#" data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Juan Gallego Galisteo</a>
+        <a href="#" data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">John McLear</a>
+    </div>
+</aside>

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

@@ -0,0 +1,15 @@
+<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>
+        <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
+        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
+        <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>
+        <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
+        <a href="#events" data-target="article" data-icon="user">Events</a>
+        <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
+        <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
+    </div>
+</aside>

examples/kitchen-sink/app/sections/buttons-extra.html

@@ -0,0 +1,18 @@
+<section id="buttons-extra">
+    <header data-back="home" data-title="Example of buttons">
+        <nav class="onright">
+            <a href="#" class="button red " data-icon="add">With icon</a>
+            <a href="#" class="button arcticblue ">Text</a>
+        </nav>
+    </header>
+
+    <footer>
+        <nav class="onleft">
+            <a href="#" class="button blue ">Text</a>
+            <a href="#" class="button yellow " data-icon="left"></a>
+        </nav>
+        <a href="#" class="button orange onright" data-icon="right">onright</a>
+    </footer>
+
+    <article></article>
+</section>

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

@@ -0,0 +1,115 @@
+<section id="forms">
+    <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-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>
+
+    <article id="form-inputs" class="list scrollable">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of inputs</li>
+                <li>
+                    <label>type="text"</label>
+                    <input type="text" placeholder="Input text"/>
+                    <label>type="password"</label>
+                    <input type="password" placeholder="Input password"/>
+                </li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of textarea</li>
+                <li><textarea placeholder="Textarea sample"></textarea></li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of select</li>
+                <li>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+                <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-others" class="list">
+        <div class="indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of search</li>
+                <li data-search="Type a search..."></li>
+                <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
+                <li class="anchor" data-icon="edit">Example of type="*"</li>
+                <li>
+                    <input type="datetime" placeholder="Some datetime..." />
+                    <input type="date" placeholder="Some date..." />
+                    <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>
+        </div>
+    </article>
+
+    <article id="form-switchs" class="list">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of checkbox</li>
+                <li>
+                    <label>Do you like LungoJS forms?</label>
+                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
+                </li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of radio</li>
+                <li>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
+                </li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-tips" class="list scrollable">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor">Examples of tips</li>
+                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+
+                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="home">Example of anchor</li>
+                <li><label>Example of label</label></li>
+            </ul>
+        </div>
+    </article>
+</section>

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

@@ -0,0 +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-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-dinamic" class="list scrollable"></article>
+</section>

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

@@ -0,0 +1,5 @@
+<section id="async-local">
+    <header data-back="home"  data-title="Async Local Section"></header>
+
+    <article></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

@@ -0,0 +1,37 @@
+<section id="navigation">
+    <header data-back="home" data-title="Navigation">
+        <nav class="onright">
+            <a href="#navigation-index" class="button" data-target="section"><abbr>Transitions</abbr></a>
+        </nav>
+    </header>
+
+    <footer class="toolbar with-labels">
+        <nav>
+            <a href="#nav-1" data-target="article" class="current" data-icon="user" data-label="User"></a>
+            <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17" data-label="Calendar"></a>
+            <a href="#nav-3" data-target="article" data-icon="mail" data-label="Emails" data-count="124"></a>
+            <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
+        </nav>
+    </footer>
+
+    <article id="nav-1" data-title="Article 1"></article>
+    <article id="nav-2" data-title="Article 2"></article>
+    <article id="nav-3" data-title="Article 3"></article>
+    <article id="nav-4" data-title="Article 4"></article>
+</section>
+
+<section id="navigation-secondary">
+    <header data-back="left" data-title="Navigation"></header>
+
+    <footer>
+        <nav class="onright">
+            <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
+            <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
+            <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
+        </nav>
+    </footer>
+
+    <article id="nav-extra-1" data-title="Article 1"></article>
+    <article id="nav-extra-2" data-title="Article 2"></article>
+    <article id="nav-extra-3" data-title="Article 3"></article>
+</section>

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

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

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

@@ -0,0 +1,20 @@
+<section id="settings">
+    <header data-back="home" data-title="Settings">
+        <nav class="onright">
+            <a href="#settings_main" data-target="article" class="current" data-title="Settings" data-icon="user"></a>
+            <a href="#settings_second" data-target="article" data-title="Chat" data-icon="chat"></a>
+            <a href="#settings_third" data-target="article" data-title="Share Methods" data-icon="earth"></a>
+        </nav>
+    </header>
+
+    <article id="settings_main">s</article>
+    <article id="settings_second">s</article>
+    <article id="settings_third">s</article>
+
+    <footer class="toolbar">
+        <nav>
+            <a href="#" class="current" data-icon="substract"></a>
+            <a href="#" class="current" data-icon="add"></a>
+        </nav>
+    </footer>
+</section>

examples/kitchen-sink/app/services.js

@@ -18,26 +18,19 @@ App.Services = (function(lng, App, undefined) {
 
         //Normal List
         var parameters = {
-            container_id: 'list-plain',
-            template_id: 'profile-tmp',
+            el: '#list-plain',
+            template: 'profile-tmp',
             data: profiles
         };
         lng.View.Template.List.create(parameters);
 
         //Indented List
-        //parameters.container_id = 'list-indented-container';
-        //lng.View.Template.List.create(parameters);
-        lng.View.Template.Binding.create('list-indented-container', 'profile-tmp', profiles);
-
-        //Rounded List
-        //parameters.container_id = 'list-rounded';
-        //lng.View.Template.List.create(parameters);
-        lng.View.Template.Binding.create('list-rounded-container', 'profile-tmp', profiles);
+        parameters.el = '#list-indented';
+        lng.View.Template.List.create(parameters);
 
         //Ordered List
-        parameters.container_id = 'list-ordered';
-        parameters.order_field = 'name';
-        parameters.order_type = 'asc';
+        parameters.el = '#list-ordered';
+        parameters.order = { field: 'name', type: 'asc' };
         lng.View.Template.List.create(parameters);
     };
 
@@ -78,11 +71,8 @@ App.Services = (function(lng, App, undefined) {
         console.error('SYNC', response);
     };
 
-    mockProfiles();
-/*
     return {
         mockProfiles: mockProfiles
     }
-    */
 
 })(LUNGO, App);

examples/kitchen-sink/app/templates/list-home.html

@@ -0,0 +1 @@
+<li id={{id}} data-icon="home">{{name}}</li>

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

@@ -9,18 +9,21 @@
     <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">
     <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
-
     <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">
@@ -32,10 +35,35 @@
     <!-- 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">
-
+    <!--
     <section id="login">
         <article class="splash">
             <div class="indented">
@@ -47,8 +75,6 @@
                 <a href="#kitchen-sink" data-target="section" class="button big" data-icon="check">Go to Kitchen Sink!</a>
                 <div class="copyright">Copyright TapQuo Inc, 2011</div>
 
-
-
                 <div class="switch">
                     <span class="thumb"></span>
                     <input type="checkbox" checked="off" />
@@ -57,33 +83,19 @@
             </div>
         </article>
     </section>
+    -->
 
     <!-- ============================= kitchen-sink ============================= -->
 
     <section id="kitchen-sink">
         <header data-title="LungoJS Kitchen Sink">
-            <a href="#" class="button" data-target="aside" data-icon="items"></a>
+            <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
+            <a href="#profiles" data-target="aside" data-article="welcome" class="button onright">Profiles</a>
         </header>
 
-        <aside id="kitchen-sink-scroll" class="scrollable">
-            <div>
-                <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
-                <a href="#authors" data-target="article" data-icon="group">Author & Contributors</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>
-                <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
-                <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
-                <a href="#forms" data-target="article" data-icon="edit" data-count="7">Form Elements</a>
-                <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
-                <a href="#events" data-target="article" data-icon="user">Events</a>
-                <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
-            </div>
-        </aside>
-
         <!-- ============================= welcome ============================= -->
-
-        <article id="welcome" class="list scrollable">
-            <div class="indented">
+        <article id="welcome" class="list scrollable indented">
+            <div>
                 <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
                 <p class="text">
                     The first <strong>Mobile Framework</strong> that uses the actual features of #HTML5, #CSS3 and #JavaScript.</p>
@@ -92,52 +104,9 @@
             </div>
         </article>
 
-        <!-- ============================= authors ============================= -->
-
-        <article id="authors" class="list scrollable">
-            <div class="indented">
-                <ul>
-                    <li class="anchor" data-icon="pencil">Author</li>
-                    <li data-image="assets/images/avatars/soyjavi.jpg">
-                        Javi Jim&eacute;nez Villar
-                        <small>CEO & Creative Lead at Tapquo</small></li>
-                </ul>
-
-                <ul>
-                    <li class="anchor" data-icon="star">CoreTeam</li>
-                    <li data-image="assets/images/avatars/pasku.jpg">
-                        Guillermo Pascual
-                        <small>@pasku1</small></li>
-                    <li data-image="assets/images/avatars/ikalbeniz.jpg">
-                        Iker Perez Albeniz
-                        <small>@ikalneniz</small></li>
-                </ul>
-
-                <ul>
-                    <li class="anchor" data-icon="group">Contributors</li>
-                    <li 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
-                        <small>jorgecasar</small></li>
-                    <li 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
-                        <small>daithiw44</small></li>
-                    <li 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
-                        <small>GermanDZ</small></li>
-                    <li data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">
-                        Juan Gallego Galisteo
-                        <small>nickel</small></li>
-                    <li data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">
-                        John McLear
-                        <small>johnyma22</small></li>
-                </ul>
-            </div>
-        </article>
-
         <!-- ============================= buttons ============================= -->
-
-        <article id="buttons" class="scrollable">
-            <div class="indented">
+        <article id="buttons" class="scrollable indented">
+            <div>
                 <a href="#" class="button big">default</a>
                 <a href="#" class="button big disabled">disabled</a>
                 <a href="#" class="button big red">red</a>
@@ -159,7 +128,6 @@
         </article>
 
         <!-- ============================= icons ============================= -->
-
         <article id="icons" class="list scrollable">
             <div class="indented">
                 <h1 class="title">&lt;class&gt; icon: everything is a vector!</h1>
@@ -218,10 +186,7 @@
             </div>
         </article>
 
-
-
         <!-- ============================= data - attributes ============================= -->
-
         <article id="data-attributes" class="list scrollable">
             <div class="indented">
                 <h1 class="title">The data-attributes</h1>
@@ -261,81 +226,6 @@
         </article>
 
         <!-- ============================= events ============================= -->
-
-        <article id="forms" class="list scrollable">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of inputs</li>
-                    <li>
-                        <label>type="text"</label>
-                        <input type="text" placeholder="Input text"/>
-                        <label>type="password"</label>
-                        <input type="password" placeholder="Input password"/>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of search</li>
-                    <li data-search="Type a search..."></li>
-                    <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of textarea</li>
-                    <li><textarea placeholder="Textarea sample"></textarea></li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of select</li>
-                    <li>
-                        <label class="select">
-                            <select class="custom">
-                                <option value="1">One</option>
-                                <option value="2">Two</option>
-                                <option value="3">Three</option>
-                            </select>
-                        </label>
-                    </li>
-                    <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of checkbox</li>
-                    <li>
-                        <label>Do you like LungoJS forms?</label>
-                        <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of radio</li>
-                    <li>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor">Examples of tips</li>
-                    <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-
-                    <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="home">Example of anchor</li>
-                    <li><label>Example of label</label></li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= events ============================= -->
-
         <article id="events" class="list scrollable">
             <div class="indented">
                 <ul>
@@ -368,141 +258,90 @@
         </article>
 
         <!-- ============================= scrolls ============================= -->
-
         <article id="scrolls">
-            <div id="scroll_vertical" class="container-scroll vertical scrollable"></div>
-            <div id="scroll_horizontal" class="container-scroll horizontal scrollable"></div>
-        </article>
-
-    </section>
-
-    <!-- ============================= navigation ============================= -->
-
-    <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>
-            </nav>
-        </header>
-
-        <footer class="toolbar">
-            <nav>
-                <a href="#nav-1" data-target="article" class="current" data-icon="user"></a>
-                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#nav-3" data-target="article" data-icon="mail"></a>
-                <a href="#nav-4" data-target="article" data-icon="phone"></a>
-            </nav>
-        </footer>
-
-        <article id="nav-1" data-title="Article 1"></article>
-        <article id="nav-2" data-title="Article 2"></article>
-        <article id="nav-3" data-title="Article 3"></article>
-        <article id="nav-4" data-title="Article 4"></article>
-    </section>
-
-
-    <!-- ============================= navigation-extra ============================= -->
-
-    <section id="navigation-secondary">
-        <header data-back="left" data-title="Navigation"></header>
-
-        <footer>
-            <nav class="onright">
-                <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
-                <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
-            </nav>
-        </footer>
-
-        <article id="nav-extra-1" data-title="Article 1"></article>
-        <article id="nav-extra-2" data-title="Article 2"></article>
-        <article id="nav-extra-3" data-title="Article 3"></article>
-    </section>
-
-    <!-- ============================= buttons extra ============================= -->
-
-    <section id="buttons-extra">
-        <header data-back="home" data-title="Example of buttons">
-            <a href="#" class="button red onright" data-icon="add">With icon</a>
-            <a href="#" class="button arcticblue onright">Text</a>
-        </header>
-
-        <footer>
-            <a href="#" class="button blue onleft">Text</a>
-            <a href="#" class="button yellow onleft" data-icon="left"></a>
-            <a href="#" class="button orange onright" data-icon="right">onright</a>
-        </footer>
-
-        <article></article>
-    </section>
-
-
-
-    <!-- ============================= header footer ============================= -->
-
-    <!-- ============================= lists ============================= -->
-
-    <section id="lists">
-        <header data-back="home" data-title="List"></header>
-        <footer class="toolbar">
-            <nav>
-                <a href="#list-plain" data-target="article" class="current" data-title="Normal List" data-icon="home"></a>
-                <a href="#list-ordered" data-target="article" data-title="Ordered List" data-icon="items"></a>
-                <a href="#list-indented" data-target="article" data-title="Indented List" data-icon="target"></a>
-                <a href="#list-rounded" data-target="article" data-title="Rounded List" data-icon="files"></a>
-                <a href="#list-grouped" data-target="article" data-title="Grouped List" data-icon="folder"></a>
-            </nav>
-        </footer>
+            <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>
 
-        <article id="list-plain" class="list"></article>
-        <article id="list-ordered" class="list"></article>
-        <article id="list-indented" class="list scrollable">
-            <div class="indented"><ul id="list-indented-container"></ul></div>
-        </article>
-        <article id="list-rounded" class="list rounded scrollable">
-            <div class="indented"><ul id="list-rounded-container"></ul></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>
-        <article id="list-grouped" class="list">Coming Soon...</article>
-    </section>
-
-    <!-- ============================= forms ============================= -->
 
-    <!--
-    <section id="settings">
-        <header data-back="home" data-title="Settings">
-            <nav class="onright">
-                <a href="#settings_main" data-target="article" class="current" data-title="Settings" data-icon="user"></a>
-                <a href="#settings_second" data-target="article" data-title="Chat" data-icon="chat"></a>
-                <a href="#settings_third" data-target="article" data-title="Share Methods" data-icon="earth"></a>
-            </nav>
-        </header>
+        <!-- ============================= authors ============================= -->
+        <article id="urls" class="list scrollable">
+            <div class="indented">
+                <ul>
+                    <li class="anchor" data-icon="pencil">Send a mail</li>
+                    <li data-icon="mail">
+                        <a href="mailto:javi@tapquo.com">
+                        Send a email
+                        <small>href="mailto:"</small></a></li>
+                    <li data-icon="phone">
+                        <a href="tel:+34123">
+                        Phone call
+                        <small>href="tel:"</small></a></li>
+                    <li data-icon="chat">
+                        <a href="sms:+34123">
+                        Text a message
+                        <small>href="sms:"</small></a></li>
+                </ul>
 
-        <article id="settings_main">s</article>
-        <article id="settings_second">s</article>
-        <article id="settings_third">s</article>
+                <ul>
+                    <li class="anchor" data-icon="star">Specials for iOS</li>
+                    <li data-icon="pushpin">
+                        <a href="maps:ll=38.870454,-77.055702">
+                        View a point in a map
+                        <small>href="maps:"</small></a></li>
+                    <li data-icon="target">
+                        <a href="maps:ll=38.870454,-77.055702&z=10">
+                        View a point in a map (zoom)
+                        <small>href="maps: &z=10"</small></a></li>
+                </ul>
+            </div>
+        </article>
 
-        <footer class="toolbar">
-            <nav>
-                <a href="#" class="current" data-icon="substract"></a>
-                <a href="#" class="current" data-icon="add"></a>
-            </nav>
-        </footer>
     </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>
     <script src="../../src/Lungo.Service.js"></script>
+    <script src="../../src/Lungo.Constants.js"></script>
     <script src="../../src/router/Lungo.Router.js"></script>
     <script src="../../src/router/Lungo.Router.History.js" ></script>
     <script src="../../src/view/Lungo.View.Resize.js"></script>
@@ -517,7 +356,9 @@
     <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.Resources.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
     <script src="../../src/boot/Lungo.Boot.Events.js"></script>
@@ -531,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,17 +1,30 @@
 var App = (function(lng, undefined) {
 
-    //Define your LungoJS Application Instance
 
     lng.App.init({
-        name: 'Release-Test',
-        version: '1.1'
+        name: 'Kitchen Sink',
+        version: '1.2',
+        resources: {
+            sections: [
+                'navigation.html',
+                'navigation-index.html',
+                'navigation-normal.html',
+                'navigation-pop.html',
+                'navigation-flow.html',
+                'lists.html',
+                'settings.html',
+                'forms.html',
+                'buttons-extra.html',
+                'aside.html',
+                'aside-profiles.html',
+                'http://examples.tapquo.com/examples/kitchen-sink/app/sections/remote.html']
+        }
     });
 
-
     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

@@ -0,0 +1,15 @@
+<aside id="profiles" class="scrollable onright">
+    <div>
+        <div class="anchor">Author of LungoJS</div>
+        <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>
+        <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>
+        <a href="#" data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">Juan Gallego Galisteo</a>
+        <a href="#" data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">John McLear</a>
+    </div>
+</aside>

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

@@ -0,0 +1,15 @@
+<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>
+        <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
+        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
+        <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>
+        <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
+        <a href="#events" data-target="article" data-icon="user">Events</a>
+        <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
+        <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
+    </div>
+</aside>

examples/release-test/app/sections/buttons-extra.html

@@ -0,0 +1,19 @@
+<section id="buttons-extra">
+    <header data-back="home" data-title="Example of buttons">
+        <nav class="onright">
+            <a href="#" class="button">On right</a>
+        </nav>
+    </header>
+
+    <footer>
+        <nav class="onleft">
+            <a href="#" class="button blue ">Only Text</a>
+            <a href="#" class="button yellow" data-icon="left"></a>
+        </nav>
+        <nav class="onright">
+            <a href="#" class="button red" data-icon="add">With icon</a>
+        </nav>
+    </footer>
+
+    <article></article>
+</section>

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

@@ -0,0 +1,101 @@
+<section id="forms">
+    <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-others" data-target="article">Extras</a>
+            <a href="#form-switchs" data-target="article">Switchs</a>
+            <a href="#form-tips" data-target="article">Tips</a>
+        </nav>
+    </header>
+
+    <article id="form-inputs" class="list scrollable">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of inputs</li>
+                <li>
+                    <label>type="text"</label>
+                    <input type="text" placeholder="Input text"/>
+                    <label>type="password"</label>
+                    <input type="password" placeholder="Input password"/>
+                </li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of textarea</li>
+                <li><textarea placeholder="Textarea sample"></textarea></li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of select</li>
+                <li>
+                    <label class="select">
+                        <select class="custom">
+                            <option value="1">One</option>
+                            <option value="2">Two</option>
+                            <option value="3">Three</option>
+                        </select>
+                    </label>
+                </li>
+                <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-others" class="list">
+        <div class="indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of range</li>
+                <li> <input type="range"></li>
+                <li class="anchor" data-icon="edit">Example of type="date"</li>
+                <li>
+                    <input type="datetime" placeholder="Some datetime..." />
+                    <input type="date" placeholder="Some date..." />
+                    <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-switchs" class="list">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of checkbox</li>
+                <li>
+                    <label>Do you like LungoJS forms?</label>
+                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
+                </li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="edit">Example of radio</li>
+                <li>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
+                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
+                </li>
+            </ul>
+        </div>
+    </article>
+
+    <article id="form-tips" class="list scrollable">
+        <div class="container indented">
+            <ul class="form">
+                <li class="anchor">Examples of tips</li>
+                <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+                <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
+
+                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+                <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
+            </ul>
+
+            <ul class="form">
+                <li class="anchor" data-icon="home">Example of anchor</li>
+                <li><label>Example of label</label></li>
+            </ul>
+        </div>
+    </article>
+</section>

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

@@ -0,0 +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-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-dinamic" class="list scrollable"></article>
+</section>

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

@@ -0,0 +1,5 @@
+<section id="async-local">
+    <header data-back="home"  data-title="Async Local Section"></header>
+
+    <article></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

@@ -0,0 +1,37 @@
+<section id="navigation">
+    <header data-back="home" data-title="Navigation">
+        <nav class="onright">
+            <a href="#navigation-index" class="button" data-target="section">Transitions</a>
+        </nav>
+    </header>
+
+    <footer class="toolbar with-labels">
+        <nav>
+            <a href="#nav-1" data-target="article" class="current" data-icon="user" data-label="User"></a>
+            <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17" data-label="Calendar"></a>
+            <a href="#nav-3" data-target="article" data-icon="mail" data-label="Emails" data-count="124"></a>
+            <a href="#nav-4" data-target="article" data-icon="phone" data-label="Calls" data-count="12"></a>
+        </nav>
+    </footer>
+
+    <article id="nav-1" data-title="Article 1"></article>
+    <article id="nav-2" data-title="Article 2"></article>
+    <article id="nav-3" data-title="Article 3"></article>
+    <article id="nav-4" data-title="Article 4"></article>
+</section>
+
+<section id="navigation-secondary">
+    <header data-back="left" data-title="Navigation"></header>
+
+    <footer>
+        <nav class="onright">
+            <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
+            <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
+            <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
+        </nav>
+    </footer>
+
+    <article id="nav-extra-1" data-title="Article 1"></article>
+    <article id="nav-extra-2" data-title="Article 2"></article>
+    <article id="nav-extra-3" data-title="Article 3"></article>
+</section>

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

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

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

@@ -0,0 +1,20 @@
+<section id="settings">
+    <header data-back="home" data-title="Settings">
+        <nav class="onright">
+            <a href="#settings_main" data-target="article" class="current" data-title="Settings" data-icon="user"></a>
+            <a href="#settings_second" data-target="article" data-title="Chat" data-icon="chat"></a>
+            <a href="#settings_third" data-target="article" data-title="Share Methods" data-icon="earth"></a>
+        </nav>
+    </header>
+
+    <article id="settings_main">s</article>
+    <article id="settings_second">s</article>
+    <article id="settings_third">s</article>
+
+    <footer class="toolbar">
+        <nav>
+            <a href="#" class="current" data-icon="substract"></a>
+            <a href="#" class="current" data-icon="add"></a>
+        </nav>
+    </footer>
+</section>

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/templates/list-home.html

@@ -0,0 +1 @@
+<li id={{id}} data-icon="home">{{name}}</li>

examples/release-test/app/view.js

@@ -1,7 +1,23 @@
-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() {
+
+    };
+
+    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,78 +1,46 @@
 <!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">
     <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../release/lungo-1.1.1.min.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+    <link rel="stylesheet" href="lungojs/lungo-1.2.min.css">
+    <link rel="stylesheet" href="lungojs/lungo.theme.default.css">
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
 </head>
 
 <body class="app">
 
-
-    <section id="login">
-        <article class="splash">
-            <div class="indented">
-                <h1>Kitchen<span class="semi-opacity">Sink<span></h1>
-
-                <input type="text" placeholder="Type your user" />
-                <input type="password" placeholder="Type your password" />
-
-                <a href="#kitchen-sink" data-target="section" class="button big" data-icon="check">Go to Kitchen Sink!</a>
-                <div class="copyright">Copyright TapQuo Inc, 2011</div>
-
-
-
-                <div class="switch">
-                    <span class="thumb"></span>
-                    <input type="checkbox" checked="off" />
-                </div>
-
-            </div>
-        </article>
-    </section>
-
     <!-- ============================= kitchen-sink ============================= -->
 
     <section id="kitchen-sink">
         <header data-title="LungoJS Kitchen Sink">
-            <a href="#" class="button" data-target="aside" data-icon="items"></a>
+            <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
+            <nav class="onright">
+                <a href="#profiles" data-target="aside" data-article="welcome" class="button">Profiles</a>
+                <a href="#buttons-extra" data-target="section" data-article="buttons" class="button">Other Examples</a>
+            </nav>
         </header>
 
-        <aside id="kitchen-sink-scroll" class="scrollable">
-            <div>
-                <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
-                <a href="#authors" data-target="article" data-icon="group">Author & Contributors</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>
-                <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
-                <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
-                <a href="#forms" data-target="article" data-icon="edit" data-count="7">Form Elements</a>
-                <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
-                <a href="#events" data-target="article" data-icon="user">Events</a>
-                <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
-            </div>
-        </aside>
-
         <!-- ============================= welcome ============================= -->
-
-        <article id="welcome" class="list scrollable">
-            <div class="indented">
+        <article id="welcome" class="list scrollable indented">
+            <div>
                 <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
                 <p class="text">
                     The first <strong>Mobile Framework</strong> that uses the actual features of #HTML5, #CSS3 and #JavaScript.</p>
@@ -81,52 +49,9 @@
             </div>
         </article>
 
-        <!-- ============================= authors ============================= -->
-
-        <article id="authors" class="list scrollable">
-            <div class="indented">
-                <ul>
-                    <li class="anchor" data-icon="pencil">Author</li>
-                    <li data-image="assets/images/avatars/soyjavi.jpg">
-                        Javi Jim&eacute;nez Villar
-                        <small>CEO & Creative Lead at Tapquo</small></li>
-                </ul>
-
-                <ul>
-                    <li class="anchor" data-icon="star">CoreTeam</li>
-                    <li data-image="assets/images/avatars/pasku.jpg">
-                        Guillermo Pascual
-                        <small>@pasku1</small></li>
-                    <li data-image="assets/images/avatars/ikalbeniz.jpg">
-                        Iker Perez Albeniz
-                        <small>@ikalneniz</small></li>
-                </ul>
-
-                <ul>
-                    <li class="anchor" data-icon="group">Contributors</li>
-                    <li 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
-                        <small>jorgecasar</small></li>
-                    <li 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
-                        <small>daithiw44</small></li>
-                    <li 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
-                        <small>GermanDZ</small></li>
-                    <li data-image="https://secure.gravatar.com/avatar/b41d652ca9b88e636516d907599dcc87?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">
-                        Juan Gallego Galisteo
-                        <small>nickel</small></li>
-                    <li data-image="https://secure.gravatar.com/avatar/a3257b495a2bc4ae15405c7880300848?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png">
-                        John McLear
-                        <small>johnyma22</small></li>
-                </ul>
-            </div>
-        </article>
-
         <!-- ============================= buttons ============================= -->
-
-        <article id="buttons" class="scrollable">
-            <div class="indented">
+        <article id="buttons" class="scrollable indented">
+            <div>
                 <a href="#" class="button big">default</a>
                 <a href="#" class="button big disabled">disabled</a>
                 <a href="#" class="button big red">red</a>
@@ -140,15 +65,10 @@
                 <a href="#" class="button big yellow">yellow</a>
                 <a href="#" class="button big twitter">twitter</a>
                 <a href="#" class="button big facebook">facebook</a>
-
-                <div class="text">You can view other examples push in the next button</div>
-
-                <a href="#buttons-extra" data-target="section" class="button black big" data-icon="add">View other Examples</a>
             </div>
         </article>
 
         <!-- ============================= icons ============================= -->
-
         <article id="icons" class="list scrollable">
             <div class="indented">
                 <h1 class="title">&lt;class&gt; icon: everything is a vector!</h1>
@@ -207,10 +127,7 @@
             </div>
         </article>
 
-
-
         <!-- ============================= data - attributes ============================= -->
-
         <article id="data-attributes" class="list scrollable">
             <div class="indented">
                 <h1 class="title">The data-attributes</h1>
@@ -228,6 +145,12 @@
                         <small>Creates a search input form</small>
                     </li>
                     <li data-search="Type your search..."></li>
+
+                    <li>
+                        data-progress
+                        <small>Creates a progress element</small>
+                    </li>
+                    <li data-progress="25%"></li>
                 </ul>
 
                 <h1 class="title">Others</h1>
@@ -250,81 +173,6 @@
         </article>
 
         <!-- ============================= events ============================= -->
-
-        <article id="forms" class="list scrollable">
-            <div class="container indented">
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of inputs</li>
-                    <li>
-                        <label>type="text"</label>
-                        <input type="text" placeholder="Input text"/>
-                        <label>type="password"</label>
-                        <input type="password" placeholder="Input password"/>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of search</li>
-                    <li data-search="Type a search..."></li>
-                    <li class="tip darker" data-icon="question mini">It's a special form element you must set the attribute data-search="Placeholder text"</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of textarea</li>
-                    <li><textarea placeholder="Textarea sample"></textarea></li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of select</li>
-                    <li>
-                        <label class="select">
-                            <select class="custom">
-                                <option value="1">One</option>
-                                <option value="2">Two</option>
-                                <option value="3">Three</option>
-                            </select>
-                        </label>
-                    </li>
-                    <li class="tip dark" data-icon="question mini">It's a special form element you must set the label with class "select"</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of checkbox</li>
-                    <li>
-                        <label>Do you like LungoJS forms?</label>
-                        <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="edit">Example of radio</li>
-                    <li>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
-                        <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
-                    </li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor">Examples of tips</li>
-                    <li class="tip" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip dark" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-                    <li class="tip darker" data-icon="home mini">Lorem Ipsum is simply dummy text...</li>
-
-                    <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                    <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
-                </ul>
-
-                <ul class="form">
-                    <li class="anchor" data-icon="home">Example of anchor</li>
-                    <li><label>Example of label</label></li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= events ============================= -->
-
         <article id="events" class="list scrollable">
             <div class="indented">
                 <ul>
@@ -357,112 +205,87 @@
         </article>
 
         <!-- ============================= scrolls ============================= -->
-
         <article id="scrolls">
-            <div id="scroll_vertical" class="container-scroll vertical scrollable"></div>
-            <div id="scroll_horizontal" class="container-scroll horizontal scrollable"></div>
-        </article>
-
-    </section>
-
-    <!-- ============================= navigation ============================= -->
-
-    <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>
-            </nav>
-        </header>
-
-        <footer class="toolbar">
-            <nav>
-                <a href="#nav-1" data-target="article" class="current" data-icon="user"></a>
-                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#nav-3" data-target="article" data-icon="mail"></a>
-                <a href="#nav-4" data-target="article" data-icon="phone"></a>
-            </nav>
-        </footer>
-
-        <article id="nav-1" data-title="Article 1"></article>
-        <article id="nav-2" data-title="Article 2"></article>
-        <article id="nav-3" data-title="Article 3"></article>
-        <article id="nav-4" data-title="Article 4"></article>
-    </section>
-
-
-    <!-- ============================= navigation-extra ============================= -->
-
-    <section id="navigation-secondary">
-        <header data-back="left" data-title="Navigation"></header>
-
-        <footer>
-            <nav class="onright">
-                <a href="#nav-extra-1" data-target="article" class="current" data-icon="user"></a>
-                <a href="#nav-extra-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#nav-extra-3" data-target="article" data-icon="mail"></a>
-            </nav>
-        </footer>
-
-        <article id="nav-extra-1" data-title="Article 1"></article>
-        <article id="nav-extra-2" data-title="Article 2"></article>
-        <article id="nav-extra-3" data-title="Article 3"></article>
-    </section>
-
-    <!-- ============================= buttons extra ============================= -->
-
-    <section id="buttons-extra">
-        <header data-back="home" data-title="Example of buttons">
-            <a href="#" class="button red onright" data-icon="add">With icon</a>
-            <a href="#" class="button arcticblue onright">Text</a>
-        </header>
-
-        <footer>
-            <a href="#" class="button blue onleft">Text</a>
-            <a href="#" class="button yellow onleft" data-icon="left"></a>
-            <a href="#" class="button orange onright" data-icon="right">onright</a>
-        </footer>
-
-        <article></article>
-    </section>
-
-
-
-    <!-- ============================= header footer ============================= -->
+            <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>
 
-    <!-- ============================= lists ============================= -->
+            <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>
 
-    <section id="lists">
-        <header data-back="home" data-title="List"></header>
-        <footer class="toolbar">
-            <nav>
-                <a href="#list-plain" data-target="article" class="current" data-title="Normal List" data-icon="home"></a>
-                <a href="#list-ordered" data-target="article" data-title="Ordered List" data-icon="items"></a>
-                <a href="#list-indented" data-target="article" data-title="Indented List" data-icon="target"></a>
-                <a href="#list-rounded" data-target="article" data-title="Rounded List" data-icon="files"></a>
-                <a href="#list-grouped" data-target="article" data-title="Grouped List" data-icon="folder"></a>
-            </nav>
-        </footer>
+        <!-- ============================= authors ============================= -->
+        <article id="urls" class="list scrollable">
+            <div class="indented">
+                <ul>
+                    <li class="anchor" data-icon="pencil">Send a mail</li>
+                    <li data-icon="mail">
+                        <a href="mailto:javi@tapquo.com">
+                        Send a email
+                        <small>href="mailto:"</small></a></li>
+                    <li data-icon="phone">
+                        <a href="tel:+34123">
+                        Phone call
+                        <small>href="tel:"</small></a></li>
+                    <li data-icon="chat">
+                        <a href="sms:+34123">
+                        Text a message
+                        <small>href="sms:"</small></a></li>
+                </ul>
 
-        <article id="list-plain" class="list"></article>
-        <article id="list-ordered" class="list"></article>
-        <article id="list-indented" class="list scrollable">
-            <div class="indented"><ul id="list-indented-container"></ul></div>
-        </article>
-        <article id="list-rounded" class="list rounded scrollable">
-            <div class="indented"><ul id="list-rounded-container"></ul></div>
+                <ul>
+                    <li class="anchor" data-icon="star">Specials for iOS</li>
+                    <li data-icon="pushpin">
+                        <a href="maps:ll=38.870454,-77.055702">
+                        View a point in a map
+                        <small>href="maps:"</small></a></li>
+                    <li data-icon="target">
+                        <a href="maps:ll=38.870454,-77.055702&z=10">
+                        View a point in a map (zoom)
+                        <small>href="maps: &z=10"</small></a></li>
+                </ul>
+            </div>
         </article>
-        <article id="list-grouped" class="list">Coming Soon...</article>
-    </section>
 
-    <!-- LungoJS (Production mode) -->
-    <script src="../../release/lungo-1.1.1.packed.js"></script>
+    </section>
 
+     <!-- LungoJS (Production mode) -->
+    <script src="lungojs/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/release-test/lungojs/LICENSE.txt

@@ -0,0 +1,244 @@
+Copyright (c) 2011-2012 TapQuo Inc (Javier Jimenez Villar)
+
+===============================================================================
+===============================================================================
+
+OPEN SOURCE LICENSE FOR LUNGOJS
+Version 1.2
+
+LungoJS is an avid supporter of open source software. This is the appropriate
+option if you are creating an open source application with a license compatible
+with the GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html). Although
+the GPLv3 has many terms, the most important is that you must provide the
+source code of your application to your users so they can be free to modify
+your application for their own needs.
+
+View the license terms: http://www.gnu.org/copyleft/gpl.html
+
+THIS DOCUMENT IS A LEGAL AGREEMENT (the “License Agreement”) BETWEEN TAPQUO INC.
+(“We,” “Us”) AND YOU OR THE ORGANIZATION ON WHOSE BEHALF YOU ARE UNDERTAKING
+THE LICENSE DESCRIBED BELOW (“You”) IN RELATION TO THE LUNGOJS SOFTWARE
+LIBRARY (THE “Software”), AND/OR ALL RELATED MATERIALS. BY DOWNLOADING,
+INSTALLING, COPYING OR OTHERWISE USING THE SOFTWARE, YOU ACCEPT THE FOLLOWING
+TERMS AND CONDITIONS. IF YOU DO NOT AGREE WITH ANY OF THE TERMS OR CONDITIONS
+OF THIS LICENSE AGREEMENT, DO NOT PROCEED WITH THE DOWNLOADING, COPYING,
+INSTALLATION OR ANY OTHER USE OF THE SOFTWARE OR ANY PORTION THEREOF. THE
+SOFTWARE IS PROTECTED BY UNITED STATES COPYRIGHT LAWS AND INTERNATIONAL
+COPYRIGHT LAWS, AS WELL AS OTHER INTELLECTUAL PROPERTY LAWS AND TREATIES.
+THE SOFTWARE IS LICENSED, NOT SOLD.
+
+===============================================================================
+===============================================================================
+
+OPEN SOURCE LICENSE FAQ
+Version 1.2
+
+This document is for guidance purposes only and is not a legal document and is
+not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
+the GPLv3 in their entirety and consult legal counsel if you require additional
+advice.
+
+===============================================================================
+===============================================================================
+
+LUNGOJS AND THE GPL v3
+Version 1.2
+
+-------------------------------------------------------------------------------
+What is the GPL v3?
+-------------------------------------------------------------------------------
+The GNU General Public License(GPL) is the most widely used free and open
+source software (FOSS) license in the world. The GPL was created and sponsored
+by the Free Software Foundation (FSF). Read the GPL v3 license
+
+-------------------------------------------------------------------------------
+What are the advantages of GPL v3?
+-------------------------------------------------------------------------------
+The GPL is the most widely used open source license in the world. Linux, MySQL,
+Wordpress and other major open source projects are all licensed under the GPL.
+The GPL is designed to ensure that you have the freedom to modify the software
+you use as you see fit. In return, you are asked to ensure that any users of
+software that you have built using GPL software receive the same freedom to
+modify your software in turn. Licensing under GPLv3 ensures the highest amount
+of availability in the open source community.
+
+-------------------------------------------------------------------------------
+What LungoJS products are available under the GPL v3?
+-------------------------------------------------------------------------------
+LungoJS Core, LungoJS Sugars and LungoJS Themes are all available under GPL v3.
+
+===============================================================================
+===============================================================================
+
+The GPL v3
+
+-------------------------------------------------------------------------------
+What am I not allowed to do with code that is released under the GPL v3?
+-------------------------------------------------------------------------------
+You can download the code base, install it, and modify it as needed. If you
+modify the code, we encourage you to contribute it back to the LungoJS community
+by contributing your modifications under GPL v3 in the LungoJS forums. If you
+convey your modifications (under the GPL definition of conveyance) then you
+must make your modifications available in source form to the users to whom you
+distributed your software. More information about what the GPL license allows
+is available in the GPL license itself, the Quick Guide to the GPLv3 and the
+official GPL FAQ.
+
+-------------------------------------------------------------------------------
+What is a modification?
+-------------------------------------------------------------------------------
+The simple rule to follow is if you modify any functionality or file in a Lungo
+product for a purpose other than configuration, then you have created a
+modification. All modifications of a GPLv3 licensed products are subject to the
+GPL v3 license. Additional information is available in the official GPL FAQ.
+
+The following are examples of modifications:
+    Modify JavaScript, LESS or CSS source file
+    Extend LungoJS class or override any LungoJS functions or methods
+    Modifying an LungoJS API
+
+The following are not modifications:
+    Creating a new theme in a new CSS file
+    Creating or applying a locale/language pack
+    Overriding property defaults on class prototypes (configuration)
+
+-------------------------------------------------------------------------------
+What licenses are compatible with GPL v3?
+-------------------------------------------------------------------------------
+A list of compatible licenses is available on gnu.org. This compatiblity list
+includes licenses that can be included in a GPL’ed work. The diagram below
+shows the directions of compatibility for some common licenses:
+
+
+-------------------------------------------------------------------------------
+Where can I find additional information about the GPL v3?
+-------------------------------------------------------------------------------
+The best sources are the GPL license itself, the Quick Guide to the GPLv3” and
+the official GPL FAQ.
+
+-------------------------------------------------------------------------------
+What is the LungoJS interpretation of “conveyance” under the GPL v3?
+-------------------------------------------------------------------------------
+The short answer to this question is that when a non-employee of the
+organization that created the modifications to GPL v3, uses those modifications,
+then the program has been “conveyed”.
+
+The long answer to this question is unfortunately, quite complicated,due to the
+complex wording of the GPL, the ambiguity of certain terms in copyright law and
+the nature of JavaScript programs. Here is our interpretation of what
+constitutes “conveyance” under the languages of the GPL v3.
+
+Derived Works
+When a software program calls code that is licensed under the GPLv3, then that
+software program becomes a derived work of the GPL’d code and hence subject to
+the GPLv3 copyright license. If the software program is then “conveyed” to a
+user, the GPLv3 requires that the source code to that software program also be
+“conveyed.” “Conveyance” for a web application is triggered when a user outside
+the legal entity that created the application uses the application.
+
+The Definition of a Software Program
+Since the boundaries defining an individual software program can be hazy in
+modern app architectures, we follow the rule “when determining what constitutes
+the software program, follow the main principle of the GPL v3, which states
+that users should be free to modify the entire software program that
+incorporates GPL’d code for their own purposes”. For software programs built
+using today’s web architectures that use remote network-based service
+interfaces for internal communication instead of traditional static or dynamic
+linking, the relevant software program is the totality of the application code,
+including code executed on the server and code executed on the client, provided
+that the server code is integral to the application. We exclude from the
+definition of “software program”, software incorporated into the software
+program via a service interface that provides functionality ancillary to the
+main purpose of the program, functionality un-related to application logic, or
+functionality that is used by a number of separate applications other than the
+application in question. With this caveat, please remember that the use of any
+specific technical approach in and of itself does not guarantee that
+“derivation” will not be held to have occurred.
+
+Example
+For example: let’s take a mortgage processing software program. Let’s say that
+the application has a front-end (that generates web pages linked to LungoJS
+JavaScript) that communicates over JSON/HTTP with a backend service. This
+backend service contains approval and validation logic for this application
+alone. Even if only the front-end uses LungoJS code, you should consider that
+the combination of front and back ends constitutes the application, and the
+source code for both back and front end would need to be provided to the
+application’s end users under GPLv3 if the application is used by an end-user
+who is not part of the same legal entity that holds the GPLv3 license to the
+LungoJS code.
+
+Next, let’s assume that the mortgage application web-pages also offer
+functionality that allows users to search current interest rates, and file a
+customer support ticket (functionality ancillary to the purpose of the
+application) and those functions are provided by separate server-side services.
+We do not consider those programs to compose part of the software program for
+the purposes of the GPLv3. For example, in all cases we would not consider a
+database that provides data interfaces to the application over standard
+interfaces to be part of the application.
+
+Reasonableness Test
+As mentioned above, in many cases, there can be ambiguity about the exact
+boundaries of a software program. In these cases, we apply a “reasonableness”
+test to establish application boundaries. Following the principles of the GPL
+v3, we should ask “what would a user who is conveyed a copy of the application
+reasonably expect to receive in source code form in order to modify the
+application for his or her needs.”
+
+Certain Technical Strategies
+Our interpretation is that the use of technical strategies that store and
+transmit LungoJS code as data (for example by storing JavaScript libraries as
+data-files within a database which are then transmitted as data files to the
+browser and only then converted into a program through the use of eval()) does
+not change the above definition of software program under the GPLv3 definitions.
+
+Definition of License Holder
+Following GPL v3 guidelines, we consider the holder of the GPL v3 license to be
+the legal entity that owns the rights to the work product of the developer who
+writes the software code that calls LungoJS functions. For example, a developer
+that downloads LungoJS and uses it to build an application that is copied to
+multiple offices within their company and serves web pages to employees across
+the country, has not triggered “conveyance” of the program since the containing
+corporate entity is the licensee, not the individual developer. However if a
+contractor, agent, employee of another subsidiary or other non-employee uses
+that software, then conveyance has occurred.
+
+In addition, if a copy of the software program is provided by the developer to
+a person in another legal entity, then we consider that “conveyance”, as
+defined by the GPLv3, has occurred, and that person must be provided with a
+copy of the source for the software program. Further conveyance by the
+recipient would only be permitted under the GPL v3.
+
+Conveyance vs. Propagation
+Since LungoJS are software programs that can run within the browser while
+disconnected from the network or the rest of a server program; when a LungoJS
+based interface is embedded in a web-page served to a user who does not have an
+employee relationship with the original licensed entity, we consider that
+“conveyance” rather than simple web page “propagation” as defined by the GPL v3
+has occurred, and the source code of the whole application must be provided to
+the user.  Users who are not entitled to use the software under the original
+license grant to the recipient legal entity (whose developer downloaded and
+wrote to the LungoJS libraries) include contractors, agents, and distributors
+of the original legal entity, as well as employees of related corporate
+subsidiaries or parents. In these cases, a user who is a contractor must be
+provided with a copy of the source code of the application with further
+conveyance by the contractor permitted only under the GPL v3. This also applies
+to web development firms who create software programs under contract for a
+client.
+
+In the case of the GPLv3 licensed entities, our interpretation is that the
+distribution of abstraction/intermediary libraries to contractors or users
+outside the licensed legal entity for development purposes also falls under
+the definition of “conveyance.”
+
+-------------------------------------------------------------------------------
+GPL v3 Is The Official License
+-------------------------------------------------------------------------------
+While this is our best attempt to characterize our interpretation of the GPL v3,
+relatively little of this interpretation has been confirmed in law due to the
+limited case law surrounding GPL v3. In all cases, the GPL v3 text itself
+constitutes the actual legal agreement between LungoJS and our GPL v3 licensees.
+This FAQ does not constitute legal advice, but reflects our position on the
+responsibilities of users who use our software licensed under the GPLv3. We do
+not provide legal advice to current or potential users of our GPLv3 licensed
+programs, so we ask you to consult your own legal counsel if you have further
+questions.

examples/release-test/lungojs/lungo.theme.default.css

@@ -0,0 +1,294 @@
+/**
+ * Stylesheet
+ *
+ * @namespace LUNGO.Theme
+ * @class Default
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "lungo.theme.default.font.css";
+
+.app {
+  background: #000000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+/* @group <header> & <footer> & <article> */
+header {
+  background-color: #05b8e2;
+  border-top: 1px solid #05bde9;
+  border-bottom: 1px solid #07acd0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+footer {
+  background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
+  border-top: 1px inset #1c1c1c;
+}
+.title {
+  color: #ffffff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+article {
+  background-color: #ededed;
+}
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
+}
+/* @end */
+/* @group <nav> */
+nav a {
+  color: rgba(255, 255, 255, 0.5);
+}
+nav a.current, nav a.active {
+  color: #ffffff;
+}
+.toolbar a {
+  color: rgba(255, 255, 255, 0.2);
+}
+.toolbar a.current, .toolbar a.active {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  text-shadow: 0px 1px 4px #000;
+}
+.groupbar {
+  background: #ededed;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #6e6e6e;
+  border-bottom: solid 3px #05bde9;
+}
+/* @end */
+/* @group <aside> */
+aside {
+  background: #252525;
+}
+aside .title {
+  background: #101010;
+  border: none;
+}
+aside a {
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+  border-bottom: 1px inset #101010;
+  border-top: 1px inset #868686;
+}
+aside a.current {
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  border-top: 1px inset #1c1c1c;
+}
+aside a .icon {
+  text-shadow: none;
+  color: #7a7a7a;
+}
+aside .anchor {
+  background: #101010;
+  color: #7a7a7a;
+}
+section.aside {
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+}
+section.aside.onright {
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+}
+@media handheld, only screen and (min-width: 768px) {
+  section.current, section.show {
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+  section.current.onright, section.show.onright {
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+}
+/* @end */
+/* @group .list */
+.list, .list li:not(.toolbar) a {
+  color: #2a2a2a;
+}
+.list li {
+  background: #fff;
+  border-bottom: 1px inset #e1e1e1;
+}
+.list li:last-child {
+  border-bottom: none;
+}
+.list li.selectable:active {
+  background: #93d6e7;
+  color: #1b6777;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+.list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
+  color: #ffffff;
+  text-shadow: none;
+}
+.list li small, .list li .onright:not(.bubble) {
+  color: #888;
+}
+.list.indented li {
+  border-left: solid 1px #e1e1e1;
+  border-right: solid 1px #e1e1e1;
+}
+.list.indented li:first-child {
+  border-top: solid 1px #e1e1e1;
+}
+.list.indented li:last-child {
+  border-bottom: solid 1px  #e1e1e1;
+}
+.list .anchor {
+  background: #93d6e7;
+  color: #1b6777;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  border: none;
+}
+.list .tip {
+  color: #7a7a7a;
+}
+.list .tip.darker {
+  background-color: #2c2c2d;
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+}
+.list .tip.darker a {
+  color: #fff !important;
+}
+.list .tip.dark {
+  background-color: #f4f4f4;
+  box-shadow: inset 0px 1px 0px #fff;
+  text-shadow: 0px 1px 0px #fff;
+}
+.list .toolbar {
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.list .toolbar .toolbar a {
+  box-shadow: 1px 0px 0px #d9d9d9;
+}
+.list .toolbar .toolbar a:last-child {
+  box-shadow: none;
+}
+.list .toolbar .toolbar a.current {
+  background: transparent;
+  color: #333;
+  text-shadow: none !important;
+}
+/* @end */
+/* @group widgets */
+.splash {
+  background: #07acd0;
+  color: #fff;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+}
+/* @group .button */
+.button {
+  border-bottom: 1px inset rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.button:active, .button.active {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+header .button:active,
+footer .button:active,
+header .button:active,
+footer .button:active {
+  height: 29px;
+  position: relative;
+  top: 1px;
+}
+.button.default {
+  background: #5a5a5a;
+}
+.button.default:active, .button.default.active {
+  background: #4b4b4b;
+}
+/* @end */
+/* @group <inputs> */
+input, textarea, select {
+  border: 1px solid #e1e1e1;
+  color: #858585;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+input:focus, textarea:focus, select:focus {
+  border-color: #05b8e2;
+  color: #05b8e2;
+}
+label {
+  color: #05b8e2;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.select:after {
+  background: #858585;
+  color: white;
+}
+input[type="checkbox"] + span, input[type="radio"] + span {
+  color: #fff;
+  background: #a0a0a0;
+}
+input[type="checkbox"] + span::before, input[type="radio"] + span::before {
+  background: #c1c1c1;
+}
+input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
+  background: #07acd0;
+}
+/* @group range */
+input[type="range"] {
+  background-color: #c7c7c7;
+}
+input[type="range"]:active {
+  background-color: #34b7dc;
+}
+input[type="range"]::-webkit-slider-thumb {
+  border: solid 7px rgba(255, 255, 255, 0.5);
+  background: #34b7dc;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0px 0px 4px #34b7dc;
+}
+/* @end */
+/* @group .progress */
+.progress .labels {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #858585;
+}
+.progress .bar {
+  background: #c7c7c7;
+}
+.progress .bar .value {
+  background: #34b7dc;
+}
+.progress .bar .value .glow {
+  background-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 3px #34b7dc;
+}
+/* @end */
+/* @end */
+.bubble {
+  color: #fff;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  text-shadow: none;
+  font-weight: bold !important;
+}
+header .bubble.count {
+  background: #2c2c2d;
+}
+.bubble.count {
+  background: #05b8e2;
+}
+/* @end */

examples/todo.js/app/data.js

@@ -46,13 +46,13 @@ App.Data = (function(lng, App, undefined) {
 
     var _pendingTodos = function() {
         lng.Data.Sql.select('todo', {done:0}, function(result) {
-            App.View.list('pending', 'pending-tmp', result);
+            App.View.list('#pending', 'pending-tmp', result);
         });
     };
 
     var _doneTodos = function() {
         lng.Data.Sql.select('todo', {done:1}, function(result){
-            App.View.list('done', 'list-tmp', result);
+            App.View.list('#done', 'list-tmp', result);
         });
     };
 

examples/todo.js/app/view.js

@@ -47,11 +47,11 @@ App.View = (function(lng, App, undefined) {
 
     var list = function(container, template, rows) {
         lng.View.Template.List.create({
-            container_id: container,
-            template_id: template,
+            el: container,
+            template: template,
             data: rows
         });
-        lng.View.Element.count('a[href="#' + container + '"]', rows.length);
+        lng.View.Element.count('a[href="' + container + '"]', rows.length);
     };
 
     return{

examples/todo.js/index.html

@@ -18,7 +18,7 @@
     <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
     <link rel="apple-touch-startup-image" href="assets/images/default.png">
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="../../release/lungo-1.1.2.min.css">
+    <link rel="stylesheet" href="../../release/lungo-1.2.min.css">
     <link rel="stylesheet" href="../../release/lungo.theme.default.css">
     <!-- Sugars :) -->
     <link rel="stylesheet" href="assets/sugars/lungo.sugar.growl.min.css">
@@ -26,8 +26,8 @@
 
 <body class="app">
     <section id="login">
-        <article class="splash">
-            <div class="indented">
+        <article class="splash indented">
+            <div>
                 <h1>ToDo.<span class="semi-opacity">js<span></h1>
                 <input type="text" placeholder="Type your user" />
                 <input type="password" placeholder="Type your password" />
@@ -40,51 +40,42 @@
 	<section id="main">
 		<header data-title="ToDo.js">
             <nav class="onright">
-			     <a href="#new" data-target="section" data-icon="add"></a>
+			     <a href="#new" data-target="section" class="active" data-icon="plus"><abbr>New Task</abbr></a>
             </nav>
 		</header>
 
         <article id="pending" class="list"></article>
         <article id="done" class="list"></article>
 
-        <footer class="toolbar">
+        <footer class="toolbar with-labels">
             <nav>
-                <a href="#pending" data-target="article" class="current" data-title="Pending ToDo's" data-icon="folder"></a>
-                <a href="#done" data-target="article" data-title="Done ToDo's" data-icon="trash"></a>
+                <a href="#pending" data-target="article" class="current" data-label="Pending" data-icon="folder"></a>
+                <a href="#done" data-target="article" data-label="Done" data-icon="check"></a>
             </nav>
         </footer>
     </section>
 
     <section id="view">
-        <header data-back="home articblue" data-title="View" >
+        <header data-title="View" >
+            <nav class="onleft">
+                <a href="#back" data-target="section" class="current" data-icon="left"><abbr>Back</abbr></a>
+            </nav>
             <nav class="onright">
-                <a href="#" id="btnDeleteTodo" data-icon="trash"></a>
+                <a href="#" id="btnDeleteTodo" class="active" data-icon="trash"><abbr>Delete</abbr></a>
             </nav>
         </header>
-        <article class="list">
-            <div class="indented">
-                <ul class="form">
-                    <li class="tip dark" data-icon="pencil mini">Edit ToDo</li>
-                    <li class="dark">
-                        <label>Name</label>
-                        <input type="text" id="txtEditName" placeholder="Input text"/>
-                        <label>Description</label>
-                        <textarea id="txtEditDescription" placeholder="Textarea sample"></textarea>
-                    </li>
-                    <li>
-                        <label>Type</label>
-                        <label class="select">
-                            <select id="txtEditType">
-                                <option value="1">One</option>
-                                <option value="2">Two</option>
-                                <option value="3">Three</option>
-                            </select>
-                        </label>
-                    </li>
-                </ul>
+        <article class="list indented">
+            <ul class="form">
+                <li class="tip dark" data-icon="pencil mini">Edit ToDo</li>
+                <li class="dark">
+                    <label>Name</label>
+                    <input type="text" id="txtEditName" placeholder="Input text"/>
+                    <label>Description</label>
+                    <textarea id="txtEditDescription" placeholder="Textarea sample"></textarea>
+                </li>
                 <a href="#" id="btnUpdateTodo" class="button big" data-icon="pencil">Update</a>
                 <a href="#" id="btnDoneTodo" class="button big red" data-icon="check">Done</a>
-            </div>
+            </ul>
         </article>
     </section>
 
@@ -94,36 +85,23 @@
                 <a href="#back" data-target="section" class="current" data-icon="left"><abbr>Back</abbr></a>
             </nav>
         </header>
-		<article class="list">
-            <div class="indented">
-                <ul class="form">
-                    <li>
-                        <label>Name</label>
-                        <input type="text" id="txtNewName" placeholder="Input text"/>
-                    </li>
-                    <li>
-                        <label>Description</label>
-                        <textarea id="txtNewDescription" placeholder="Textarea sample"></textarea>
-                    </li>
-                    <li>
-                        <label>Type</label>
-                        <label class="select">
-                            <select id="txtNewType">
-                                <option value="1">Personal</option>
-                                <option value="2">Someday</option>
-                                <option value="3">Tomorrow</option>
-                            </select>
-                        </label>
-                    </li>
-                </ul>
+		<article class="list indented">
+            <ul class="form">
+                <li>
+                    <label>Name</label>
+                    <input type="text" id="txtNewName" placeholder="Input text"/>
+                </li>
+                <li>
+                    <label>Description</label>
+                    <textarea id="txtNewDescription" placeholder="Textarea sample"></textarea>
+                </li>
                 <a href="#" id="btnNewTodo" class="button big" data-icon="check">Add ToDo</a>
-            </div>
+            </ul>
 		</article>
 	</section>
 
     <!-- LungoJS (Production mode) -->
-    <script src="../../release/lungo-1.1.2.packed.js"></script>
-
+    <script src="../../release/lungo-1.2.packed.js"></script>
     <script src="assets/sugars/lungo.sugar.growl.min.js"></script>
     <!-- LungoJS - Sandbox App -->
     <script src="app/app.js"></script>
@@ -132,4 +110,4 @@
     <script src="app/services.js"></script>
     <script src="app/view.js"></script>
 </body>
-</html>
+</html>

release/LICENSE.txt

@@ -1,10 +1,10 @@
-Copyright (c) 2011 TapQuo Inc (Javier Jimenez Villar)
+Copyright (c) 2011-2012 TapQuo Inc (Javier Jimenez Villar)
 
 ===============================================================================
 ===============================================================================
 
 OPEN SOURCE LICENSE FOR LUNGOJS
-Version 1.1.2
+Version 1.2
 
 LungoJS is an avid supporter of open source software. This is the appropriate
 option if you are creating an open source application with a license compatible
@@ -31,7 +31,7 @@ THE SOFTWARE IS LICENSED, NOT SOLD.
 ===============================================================================
 
 OPEN SOURCE LICENSE FAQ
-Version 1.1.2
+Version 1.2
 
 This document is for guidance purposes only and is not a legal document and is
 not legally binding. We encourage you to read the GPL v3 and the Quick Guide to
@@ -42,7 +42,7 @@ advice.
 ===============================================================================
 
 LUNGOJS AND THE GPL v3
-Version 1.1.2
+Version 1.2
 
 -------------------------------------------------------------------------------
 What is the GPL v3?

release/lungo.theme.default.css

@@ -6,15 +6,19 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
+
+@import "lungo.theme.default.font.css";
+
 .app {
   background: #000000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
 /* @group <header> & <footer> & <article> */
 header {
-  background-color: #91bd09;
-  border-top: 1px solid #b7de3f;
-  border-bottom: 1px solid #758e29;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  background-color: #05b8e2;
+  border-top: 1px solid #05bde9;
+  border-bottom: 1px solid #07acd0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 }
 footer {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
@@ -25,7 +29,7 @@ footer {
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 article {
-  background-color: #f9f9f9;
+  background-color: #ededed;
 }
 article .title {
   color: #797979;
@@ -36,22 +40,37 @@ article .title {
 nav a {
   color: rgba(255, 255, 255, 0.5);
 }
-nav a.current, nav a:active {
+nav a.current, nav a.active {
   color: #ffffff;
 }
 .toolbar a {
   color: rgba(255, 255, 255, 0.2);
 }
-.toolbar a.current, .toolbar a:active {
+.toolbar a.current, .toolbar a.active {
   background: #1c1c1c;
   box-shadow: inset 0px 0px 8px #101010;
   text-shadow: 0px 1px 4px #000;
 }
+.groupbar {
+  background: #ededed;
+  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+}
+.groupbar a {
+  color: #6e6e6e;
+}
+.groupbar a.current {
+  color: #6e6e6e;
+  border-bottom: solid 3px #05bde9;
+}
 /* @end */
 /* @group <aside> */
 aside {
   background: #252525;
 }
+aside .title {
+  background: #101010;
+  border: none;
+}
 aside a {
   color: #fff;
   text-shadow: 0px 1px 0px #000;
@@ -71,8 +90,19 @@ aside .anchor {
   background: #101010;
   color: #7a7a7a;
 }
-aside  ~ article {
-  box-shadow: -1px 0px 4px #000000;
+section.aside {
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+}
+section.aside.onright {
+  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+}
+@media handheld, only screen and (min-width: 768px) {
+  section.current, section.show {
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+  section.current.onright, section.show.onright {
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+  }
 }
 /* @end */
 /* @group .list */
@@ -87,8 +117,8 @@ aside  ~ article {
   border-bottom: none;
 }
 .list li.selectable:active {
-  background: #c1de6a;
-  color: #5d7b03;
+  background: #93d6e7;
+  color: #1b6777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
@@ -98,12 +128,19 @@ aside  ~ article {
 .list li small, .list li .onright:not(.bubble) {
   color: #888;
 }
-.list .indented ul {
-  border: 1px solid #e1e1e1;
+.list.indented li {
+  border-left: solid 1px #e1e1e1;
+  border-right: solid 1px #e1e1e1;
+}
+.list.indented li:first-child {
+  border-top: solid 1px #e1e1e1;
+}
+.list.indented li:last-child {
+  border-bottom: solid 1px  #e1e1e1;
 }
 .list .anchor {
-  background: #c1de6a;
-  color: #5d7b03;
+  background: #93d6e7;
+  color: #1b6777;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
   border: none;
 }
@@ -140,16 +177,38 @@ aside  ~ article {
 /* @end */
 /* @group widgets */
 .splash {
-  background: #91bd09;
+  background: #07acd0;
   color: #fff;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 /* @group .button */
-a.button {
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0px rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
+.button {
+  border-bottom: 1px inset rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
 }
-a.button:active {
-  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
+.button:active, .button.active {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+header .button:active,
+footer .button:active,
+header .button:active,
+footer .button:active {
+  height: 29px;
+  position: relative;
+  top: 1px;
+}
+.button.default {
+  background: #5a5a5a;
+}
+.button.default:active, .button.default.active {
+  background: #4b4b4b;
 }
 /* @end */
 /* @group <inputs> */
@@ -159,11 +218,11 @@ input, textarea, select {
   font-family: 'Roboto', Helvetica, Arial, sans-serif;
 }
 input:focus, textarea:focus, select:focus {
-  border-color: #91bd09;
-  color: #91bd09;
+  border-color: #05b8e2;
+  color: #05b8e2;
 }
 label {
-  color: #91bd09;
+  color: #05b8e2;
   text-transform: uppercase;
   font-weight: bold;
 }
@@ -179,14 +238,49 @@ input[type="checkbox"] + span::before, input[type="radio"] + span::before {
   background: #c1c1c1;
 }
 input[type="checkbox"]:checked + span, input[type="radio"]:checked + span {
-  background: #758e29;
+  background: #07acd0;
+}
+/* @group range */
+input[type="range"] {
+  background-color: #c7c7c7;
 }
+input[type="range"]:active {
+  background-color: #34b7dc;
+}
+input[type="range"]::-webkit-slider-thumb {
+  border: solid 7px rgba(255, 255, 255, 0.5);
+  background: #34b7dc;
+}
+input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0px 0px 4px #34b7dc;
+}
+/* @end */
+/* @group .progress */
+.progress .labels {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #858585;
+}
+.progress .bar {
+  background: #c7c7c7;
+}
+.progress .bar .value {
+  background: #34b7dc;
+}
+.progress .bar .value .glow {
+  background-color: rgba(255, 255, 255, 0.25);
+  box-shadow: 0px 0px 3px #34b7dc;
+}
+/* @end */
 /* @end */
 .bubble {
   color: #fff;
   -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
   border-radius: 2px;
   -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
   background-clip: padding-box;
   text-shadow: none;
   font-weight: bold !important;
@@ -195,6 +289,6 @@ header .bubble.count {
   background: #2c2c2d;
 }
 .bubble.count {
-  background: #91bd09;
+  background: #05b8e2;
 }
 /* @end */

spec/Lungo.Core.Spec.js

@@ -1,9 +0,0 @@
-describe('Lungo Core', function() {
-    it('', function() {
-
-    });
-    
-    it('', function() {
-        
-    });
-});

spec/Lungo.Spec.js

@@ -1,11 +0,0 @@
-describe('Lungo', function() {
-
-    it('Lungo namespace exists', function() {
-        expect(LUNGO).toBeDefined();
-    });
-    
-    it('Lungo version exists', function() {
-        expect(LUNGO.VERSION).toBeDefined();
-    });
-
-});            

spec/SpecRunner.html

@@ -1,57 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta name="author" content="Guillermo Pascual" />
-  <meta charset="UTF-8" />
-  <title>Lungo Spec Runner</title>
-  
-  <link rel="shortcut icon" type="image/png" href="../vendor/jasmine-1.1.0/jasmine_favicon.png">
-  <link rel="stylesheet" type="text/css" href="../vendor/jasmine-1.1.0/jasmine.css">
-
-  <!-- lib source files here... -->
-    <script type="text/javascript" src="../vendor/jasmine-1.1.0/jasmine.js"></script>
-    <script type="text/javascript" src="../vendor/jasmine-1.1.0/jasmine-html.js"></script>
-  <!-- end lib source files -->
-
-  <!-- Lungo source files here... -->
-    <script type="text/javascript" src="../src/Lungo/Lungo.js"></script>
-    <script type="text/javascript" src="../src/Lungo/Lungo.Core.js"></script>
-  <!-- end Lungo source files -->
-
-  <!-- Lungo spec files here... -->
-    <script type="text/javascript" src="Lungo.Spec.js"></script>
-    <script type="text/javascript" src="Lungo.Core.Spec.js"></script>
-  <!-- Lungo spec files -->
-
-  <script type="text/javascript">
-    (function() {
-        var jasmineEnv = jasmine.getEnv();
-        jasmineEnv.updateInterval = 1000;
-
-        var trivialReporter = new jasmine.TrivialReporter();
-
-        jasmineEnv.addReporter(trivialReporter);
-
-        jasmineEnv.specFilter = function(spec) {
-            return trivialReporter.specFilter(spec);
-        };
-
-        var currentWindowOnload = window.onload;
-
-        window.onload = function() {
-            if (currentWindowOnload) {
-                currentWindowOnload();
-            }
-            execJasmine();
-        };
-
-        function execJasmine() {
-            jasmineEnv.execute();
-        }
-    })();
-  </script>
-</head>
-<body>
-    
-</body>
-</html>

src/Lungo.Constants.js

@@ -0,0 +1,75 @@
+/**
+ * Object with data-attributes (HTML5) with a special <markup>
+ *
+ * @namespace LUNGO
+ * @class Constants
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
+ */
+
+LUNGO.Constants = {
+
+    ELEMENT: {
+        SECTION: 'section',
+        ARTICLE: 'article',
+        ASIDE: 'aside',
+        BODY: 'body',
+        DIV: 'div',
+        LIST: '<ul></ul>',
+        SPAN: '<span>&nbsp;</span>'
+    },
+
+    CLASS: {
+        ACTIVE: 'active',
+        ASIDE: 'aside',
+        SHOW: 'show',
+        SHOW_REVOKE: 'show-revoke',
+        HIDE: 'hide',
+        HIDE_REVOKE: 'hide-revoke',
+        CURRENT: 'current',
+        RIGHT: 'onright',
+        LEFT: 'onleft',
+        HORIZONTAL: 'horizontal',
+        FLOW: 'flow'
+    },
+
+    TRIGGER: {
+        LOAD: 'load',
+        UNLOAD: 'unload'
+    },
+
+    ATTRIBUTE: {
+        ID: 'id',
+        HREF: 'href',
+        TITLE: 'title',
+        ARTICLE: 'article',
+        CLASS: 'class',
+        WIDTH: 'width',
+        HEIGHT: 'height',
+        PIXEL: 'px',
+        PERCENT: '%',
+        TARGET: 'target',
+        FIRST: 'first',
+        LAST: 'last',
+        EMPTY: ''
+    },
+
+    BINDING: {
+        START: '{{',
+        END: '}}',
+        KEY: 'value',
+        PARSER: /\{{.*?\}}/gi
+    },
+
+    ERROR: {
+        CREATE_SCROLL: 'ERROR: Impossible to create a <scroll> without ID.',
+        BINDING_DATA_TYPE: 'ERROR: Processing the type of binding data.',
+        BINDING_TEMPLATE: 'ERROR: Binding Template not exists >> ',
+        BINDING_LIST: 'ERROR: Processing parameters for list binding.',
+        DATABASE: 'ERROR: Connecting to Data.Sql.',
+        ROUTER: 'ERROR: The target does not exists >>',
+        LOADING_RESOURCE: 'ERROR: Loading resource.'
+    }
+
+};

src/Lungo.Core.js

@@ -11,6 +11,7 @@
 LUNGO.Core = (function(lng, $$, undefined) {
 
     var ARRAY_PROTO = Array.prototype;
+    var HASHTAG_CHARACTER = '#';
 
     /**
      * Console system to display messages when you are in debug mode.
@@ -138,6 +139,71 @@ LUNGO.Core = (function(lng, $$, undefined) {
         return $$.environment();
     };
 
+    /**
+     * Returns a ordered list of objects by a property
+     *
+     * @method orderByProperty
+     *
+     * @param {list} List of objects
+     * @param {string} Name of property
+     * @param {string} Type of order: asc (ascendent) or desc (descendent)
+     * @return {list} Ordered list
+     */
+    var orderByProperty = function(data, property, order) {
+        var order_operator = (order === 'desc') ? -1 : 1;
+
+        return data.sort(function(a, b) {
+            return (a[property] < b[property]) ? - order_operator :
+                (a[property] > b[property])
+                ?
+                order_operator : 0;
+            }
+        );
+    };
+
+    /**
+     * Returns a correct URL using hashtag character
+     *
+     * @method parseUrl
+     *
+     * @param {string} Url
+     * @return {string} Url parsed
+     */
+    var parseUrl = function(href) {
+        var href_hashtag = href.lastIndexOf(HASHTAG_CHARACTER);
+        if (href_hashtag > 0) {
+            href = href.substring(href_hashtag);
+        } else if (href_hashtag === -1) {
+            href = HASHTAG_CHARACTER + href ;
+        }
+        return href;
+    };
+
+    /**
+     * Returns a Object in a list by a property value
+     *
+     * @method objectInListByProperty
+     *
+     * @param {list} List of objects
+     * @param {string} Name of property
+     * @param {var} Value for comparision
+     * @return {object} Instance of object founded (if exists)
+     */
+     var findByProperty = function(list, property, value) {
+        var search = null;
+
+        for (var i = 0, len = list.length; i < len; i++) {
+            var element = list[i];
+
+            if (element[property] == value) {
+                search = element;
+                break;
+            }
+        };
+
+        return search;
+    };
+
     return {
         log: log,
         execute: execute,
@@ -147,7 +213,10 @@ LUNGO.Core = (function(lng, $$, undefined) {
         toType: toType,
         toArray: toArray,
         isMobile: isMobile,
-        environment: environment
+        environment: environment,
+        orderByProperty: orderByProperty,
+        parseUrl: parseUrl,
+        findByProperty: findByProperty
     };
 
 })(LUNGO, Quo);

src/Lungo.Fallback.js

@@ -0,0 +1,62 @@
+/**
+ * ?
+ *
+ * @namespace LUNGO
+ * @class Fallback
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+LUNGO.Fallback = (function(lng, undefined) {
+
+    var CLASS = lng.Constants.CLASS;
+
+    var androidButtons = function() {
+    	environment = lng.Core.environment();
+        if (environment.isMobile && environment.os.name === 'android') {
+            lng.dom(document.body).on('touchstart', '.button', _addClassActiveToButton);
+            lng.dom(document.body).on('touchend', '.button', _removeClassActiveToButton);
+        }
+    };
+
+    var androidInputs = function(article_id, active) {
+        environment = lng.Core.environment();
+        if (environment.isMobile && environment.os.name === 'android' && environment.os.version < '4') {
+            var selector = article_id + ' input, ' + article_id + ' textarea, ' + article_id + ' select';
+            var input_elements = lng.dom(selector);
+            for (var i = 0, len = input_elements.length; i < len; i++) {
+                (active) ? _enableAndroidInput(input_elements[i]) : _disableAndroidInput(input_elements[i]);
+            }
+        }
+    };
+
+    var positionFixed = function(sections) {
+    	environment = lng.Core.environment();
+        if (environment.isMobile && environment.os.name === 'ios' && environment.os.version >= '4.2') {
+            sections.style('position', 'fixed');
+        }
+    };
+
+    var _enableAndroidInput = function(input) {
+        input.removeAttribute('disabled');
+    };
+
+    var _disableAndroidInput = function(input) {
+        input.setAttribute('disabled', 'disabled');
+    };
+
+    var _addClassActiveToButton = function(element) {
+        lng.dom(this).addClass(CLASS.ACTIVE);
+    };
+
+    var _removeClassActiveToButton = function(element) {
+        lng.dom(this).removeClass(CLASS.ACTIVE);
+    };
+
+    return {
+    	androidButtons: androidButtons,
+        androidInputs: androidInputs,
+    	positionFixed: positionFixed
+    }
+
+})(LUNGO);

src/Lungo.Service.js

@@ -11,6 +11,13 @@
 
 LUNGO.Service = (function(lng, $$, undefined) {
 
+    var URL_CACHE_INDEX_KEY = 'lungojs_service_cache';
+    var DATE_PATTERN = {
+        MINUTE: 'minute',
+        HOUR: 'hour',
+        DAY: 'day'
+    };
+
     /**
      * Load data from the server using a HTTP GET request.
      *
@@ -52,10 +59,84 @@ LUNGO.Service = (function(lng, $$, undefined) {
         return $$.json(url, data, success);
     };
 
+    /**
+     * Auto-caching system with date pattern.
+     *
+     * @method cache
+     *
+     * @param  {string} Containing the URL to which the request is sent
+     * @param  {object} A map or string that is sent to the server with the request
+     * @param  {string} Date pattern (example: 15 minutes, 1 hour, 3 days)
+     * @param  {Function} [OPTIONAL] Callback function after the request
+     * @param  {string} Mime-Type: json, xml, html, or text [OPTIONAL]
+     */
+    var cache = function(url, data, date_pattern, callback, dataType) {
+        var url_key = url + $$.serializeParameters(data);
+
+        if (_urlCached(url_key, date_pattern)) {
+            var value = lng.Data.Storage.persistent(url_key);
+            if (value) {
+                return callback.call(callback, value);
+            }
+        } else {
+            return $$.get(url, data, function(result) {
+                _saveServiceInCache(url_key, result);
+                callback.call(callback, result);
+            }, dataType);
+        }
+    };
+
+    var _urlCached = function(url, date_pattern) {
+        var in_cache = false;
+
+        var url_cache_index = lng.Data.Storage.persistent(URL_CACHE_INDEX_KEY);
+        if (url_cache_index) {
+            var time_between = _calculateTimeSpent(url_cache_index[url]);
+            in_cache = _checkIsValidPattern(time_between, date_pattern);
+        }
+
+        return in_cache;
+    };
+
+    var _calculateTimeSpent = function(url_last_access) {
+        var now = new Date().getTime();
+        var service_last_access = new Date(url_last_access).getTime();
+
+        return now - service_last_access;
+    };
+
+    var _checkIsValidPattern = function(time_between, date_pattern) {
+        var pattern = date_pattern.split(' ');
+        var diference_time = _calculateDiferenceTime(pattern[1], time_between);
+
+        return (diference_time < pattern[0]) ? true : false;
+    };
+
+    var _calculateDiferenceTime = function(pattern_name, time_between) {
+        var diference = (time_between / 1000) / 60;
+
+        if (pattern_name.indexOf(DATE_PATTERN.HOUR) >= 0) {
+            diference = diference / 60;
+        } else if (pattern_name.indexOf(DATE_PATTERN.DAY) >= 0) {
+            diference = (diference / 60) / 24;
+        }
+
+        return diference;
+    };
+
+    var _saveServiceInCache = function(url, result) {
+        var service_cache_index = lng.Data.Storage.persistent(URL_CACHE_INDEX_KEY) || {};
+        service_cache_index[url] = new Date();
+
+        lng.Data.Storage.persistent(URL_CACHE_INDEX_KEY, service_cache_index);
+        lng.Data.Storage.persistent(url, result);
+    };
+
     return {
         get: get,
         post: post,
         json: json,
+        cache: cache,
         Settings: $$.ajaxSettings
     };
 

src/Lungo.js

@@ -14,7 +14,7 @@
  *
  * @copyright 2011 TapQuo Inc (c)
  * @license   http://www.github.com/tapquo/lungo/blob/master/LICENSE.txt
- * @version   1.1
+ * @version   1.2
  * @link      https://github.com/TapQuo/Lungo.js
  *
  * @author   Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
@@ -23,10 +23,11 @@
 
 var LUNGO = LUNGO || {};
 
-LUNGO.VERSION = '1.1.1';
+LUNGO.VERSION = '1.2';
 
 LUNGO.Attributes || (LUNGO.Attributes = {});
 LUNGO.Data || (LUNGO.Data = {});
 LUNGO.Sugar || (LUNGO.Sugar = {});
 LUNGO.View || (LUNGO.View = {});
-LUNGO.Device || (LUNGO.Device = {});
+LUNGO.Device || (LUNGO.Device = {});
+LUNGO.ready || (LUNGO.ready = Quo().ready);

src/attributes/Lungo.Attributes.Data.js

@@ -24,6 +24,19 @@ LUNGO.Attributes.Data = {
         selector: '*',
         html: '<input type="search" placeholder="{{value}}"/><a href="#" class="button" data-icon="search"></a>'
     },
+    Progress: {
+        tag: 'progress',
+        selector: '*',
+        html: '<div class="progress" id="yeal">\
+                    <span class="labels"><span></span><span></span></span>\
+                    <span class="bar"><span class="value" style="width:{{value}};"><span class="glow"></span></span></span>\
+                </div>'
+    },
+    Label: {
+        tag: 'label',
+        selector: 'a',
+        html: '<abbr>{{value}}</abbr>'
+    },
     Icon: {
         tag: 'icon',
         selector: '*',
@@ -42,6 +55,6 @@ LUNGO.Attributes.Data = {
     Back: {
         tag: 'back',
         selector: 'header, footer',
-        html: '<a href="#back" data-target="section" class="onleft button"><span class="icon {{value}}"></span></a>'
+        html: '<a href="#back" data-target="section" class="onleft button default"><span class="icon {{value}}"></span></a>'
     }
 };

src/boot/Lungo.Boot.Article.js

@@ -10,8 +10,10 @@
 
 LUNGO.Boot.Article = (function(lng, undefined) {
 
+    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var ELEMENT = lng.Constants.ELEMENT;
     var SELECTORS = {
-        LIST_IN_ARTICLE: 'article.list',
+        LIST_IN_ARTICLE: 'article.list, aside.list',
         SCROLL_IN_ARTICLE: '.scrollable',
         CHECKBOX_IN_ARTICLE: '.checkbox, .radio'
     };
@@ -38,18 +40,18 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
     var _createListElement = function(article) {
         if (article.children().length === 0) {
-            var article_id = article.attr('id');
-            article.append('<ul id="' + article_id + '_list"></ul>');
+            var article_id = article.attr(ATTRIBUTE.ID);
+            article.append(ELEMENT.LIST);
         }
     };
 
     var _createScrollElement = function(scroll) {
-        var scroll_id = scroll.attr('id');
-        lng.View.Scroll.create(scroll_id);
+        var scroll_id = scroll.attr(ATTRIBUTE.ID);
+        lng.View.Scroll.init(scroll_id);
     };
 
     var _createCheckboxElement = function(checkbox) {
-        checkbox.append('<span>&nbsp;</span>');
+        checkbox.append(ELEMENT.SPAN);
     };
 
     return {

src/boot/Lungo.Boot.Events.js

@@ -10,6 +10,14 @@
 
 LUNGO.Boot.Events = (function(lng, undefined) {
 
+    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+    var CLASS = lng.Constants.CLASS;
+    var ELEMENT = lng.Constants.ELEMENT;
+    var SELECTORS = {
+        HREF_TARGET: 'a[href][data-target]',
+        HREF_TARGET_FROM_ASIDE: 'aside a[href][data-target]'
+    };
+
     /**
      * Initializes the automatic subscription events by markup of the project.
      *
@@ -18,14 +26,15 @@ LUNGO.Boot.Events = (function(lng, undefined) {
      */
     var start = function() {
         var touch_move_event  = 'touchmove';
-        var orientation_change = 'orientationchange';
-        var target_selector = 'a[href][data-target]';
-        var target_selector_from_aside = 'aside a[href][data-target]';
-
-        lng.dom(document).on(touch_move_event, _iScroll);
-        lng.dom(window).on(orientation_change, _changeOrientation);
-        lng.dom(target_selector_from_aside).tap(_toggleAside);
-        lng.dom(target_selector).tap(_loadTarget);
+        var resize = 'resize';
+
+        //@ToDo: Error with input type="range"
+        //lng.dom(document).on(touch_move_event, _iScroll);
+        lng.dom(window).on(resize, _changeOrientation);
+        lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_loadTargetFromAside);
+        lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
+
+        lng.Fallback.androidButtons();
     };
 
     var _iScroll = function(event) {
@@ -36,12 +45,17 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         lng.View.Resize.toolbars();
     };
 
-    var _toggleAside = function(event) {
+    var _loadTargetFromAside = function(event) {
         var link = lng.dom(this);
-        var section_id =  _getParentIdOfElement(link);
-        lng.View.Aside.toggle(section_id);
+        var aside_id = '#' + link.parent(ELEMENT.ASIDE).attr(ATTRIBUTE.ID);
+        var section_id = '#' + lng.dom('section.aside, section.current').first().attr(ATTRIBUTE.ID);
+
+        if (link.data(ATTRIBUTE.TARGET) === ELEMENT.ARTICLE) {
+            lng.dom(ELEMENT.ASIDE + aside_id + ' ' + SELECTORS.HREF_TARGET).removeClass(CLASS.CURRENT);
+            link.addClass(CLASS.CURRENT);
+        }
+        _hideAsideIfNecesary(section_id, aside_id);
 
-        event.preventDefault();
     };
 
     var _loadTarget = function(event) {
@@ -52,25 +66,26 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     };
 
     var _selectTarget = function(link) {
-        var target_type = link.data('target');
+        var target_type = link.data(ATTRIBUTE.TARGET);
 
         switch(target_type) {
-            case 'section':
-                var target_id = link.attr('href');
+            case ELEMENT.SECTION:
+                var target_id = link.attr(ATTRIBUTE.HREF);
                 _goSection(target_id);
                 break;
 
-            case 'article':
+            case ELEMENT.ARTICLE:
                 _goArticle(link);
                 break;
 
-            case 'aside':
+            case ELEMENT.ASIDE:
                 _goAside(link);
                 break;
         }
     };
 
     var _goSection = function(id) {
+        id = lng.Core.parseUrl(id);
         if (id === '#back') {
             lng.Router.back();
         } else {
@@ -79,20 +94,23 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     };
 
     var _goArticle = function(element) {
-        var section_id =  _getParentIdOfElement(element);
-        var article_id =  element.attr('href');
+        var section_id = lng.Router.History.current();
+        var article_id =  element.attr(ATTRIBUTE.HREF);
 
         lng.Router.article(section_id, article_id);
     };
 
     var _goAside = function(element) {
-        var section_id = _getParentIdOfElement(element);
-        lng.View.Aside.toggle(section_id);
+        var section_id = lng.Router.History.current();
+        var aside_id = element.attr(ATTRIBUTE.HREF);
+
+        lng.Router.aside(section_id, aside_id);
     };
 
-    var _getParentIdOfElement = function(element) {
-        var parent_id = '#' + element.parent('section').attr('id');
-        return parent_id;
+    var _hideAsideIfNecesary = function(section_id, aside_id) {
+        if (window.innerWidth < 768) {
+            lng.View.Aside.hide(section_id, aside_id);
+        }
     };
 
     return {

src/boot/Lungo.Boot.Layout.js

@@ -12,6 +12,9 @@ LUNGO.Boot.Layout = (function(lng, undefined) {
     var _window = null;
     var _document = null;
 
+    var ELEMENT = lng.Constants.ELEMENT;
+    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
+
     /**
      * Initializes the automatic subscription events by markup of the project.
      *
@@ -31,7 +34,7 @@ LUNGO.Boot.Layout = (function(lng, undefined) {
         if (_window.innerHeight == 356) {
             var _height = 416;
 
-            lng.dom('body').style('height', _height + 'px');
+            lng.dom(ELEMENT.BODY).style(ATTRIBUTE.HEIGHT, _height + ATTRIBUTE.PIXEL);
             _hideNavigationBar();
         }
     };
@@ -50,7 +53,7 @@ LUNGO.Boot.Layout = (function(lng, undefined) {
                 }
             }, 15 );
 
-            _window.addEventListener( 'load', function(){
+            _window.addEventListener('load', function(){
                 setTimeout(function(){
                     _window.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
                 }, 0);

src/boot/Lungo.Boot.Resources.js

@@ -0,0 +1,98 @@
+/**
+ * Load Resources
+ *
+ * @namespace LUNGO.Boot
+ * @class Resources
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+LUNGO.Boot.Resources = (function(lng, $$, undefined) {
+
+    var ELEMENT = lng.Constants.ELEMENT;
+    var ERROR = lng.Constants.ERROR;
+
+    var RESOURCE = {
+        SECTION: 'sections',
+        TEMPLATE: 'templates',
+        SCRIPT: 'scripts'
+    };
+
+    /**
+     * Start loading async sections (local & remote)
+     *
+     * @method start
+     *
+     */
+    var start = function() {
+        var resources = lng.App.get('resources');
+        for (resource_key in resources) {
+            _loadResources(resource_key, resources[resource_key]);
+        }
+    };
+
+    var _loadResources = function(resource_key, resources, callback) {
+        for (index in resources) {
+            var url = _parseUrl(resources[index], resource_key);
+
+            try {
+                var response = _loadAsyncResource(url);
+                _factoryResources(resource_key, response);
+            } catch(error) {
+                lng.Core.log(3, ERROR.LOADING_RESOURCE + ' ' + error);
+            }
+        }
+    };
+
+    var _parseUrl = function(section_url, folder) {
+        return (/http/.test(section_url)) ? section_url : 'app/' + folder + '/' + section_url;
+    };
+
+    var _loadAsyncResource = function(url) {
+        return $$.ajax({
+            url: url,
+            async: false,
+            dataType: 'html',
+            error: function() {
+                console.error('[ERROR] Loading url', arguments);
+            }
+        });
+    };
+
+    var _factoryResources = function(resource_key, response) {
+        switch(resource_key) {
+            case RESOURCE.SECTION:
+                _pushSectionInLayout(response);
+                break;
+
+            case RESOURCE.TEMPLATE:
+                _createTemplate(response);
+                break;
+
+            case RESOURCE.SCRIPT:
+                break;
+        }
+    };
+
+    var _pushSectionInLayout = function(section) {
+        if (lng.Core.toType(section) === 'string') {
+            lng.dom(ELEMENT.BODY).append(section);
+        }
+    };
+
+    var _createTemplate = function(markup) {
+        var div = document.createElement(ELEMENT.DIV);
+        div.innerHTML = markup;
+
+        var template_id = lng.dom(div.firstChild).data('template');
+
+        if (template_id) {
+            lng.View.Template.create(template_id, markup);
+        }
+    };
+
+    return {
+        start: start
+    };
+
+})(LUNGO, Quo);

src/boot/Lungo.Boot.Section.js

@@ -10,12 +10,9 @@
 
 LUNGO.Boot.Section = (function(lng, undefined) {
 
-    var SELECTORS = {
-        ARTICLE: 'article',
-        SECTION: 'section'
-    };
-
-    var ACTIVE_CLASS = 'current';
+    var ELEMENT = lng.Constants.ELEMENT;
+    var CLASS = lng.Constants.CLASS;
+    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
 
     /**
      * Initializes all <section>s of the project
@@ -23,51 +20,39 @@ LUNGO.Boot.Section = (function(lng, undefined) {
      * @method init
      */
     var start = function() {
-        var sections = lng.dom(SELECTORS.SECTION);
-
+        var sections = lng.dom(ELEMENT.SECTION);
         _initFirstSection(sections);
         _initAllSections(sections);
-        _initAllAsides();
 
         lng.View.Resize.toolbars();
     };
 
     var _initFirstSection = function(sections) {
         var first_section = sections.first();
-        var first_section_id = '#' + first_section.attr('id');
+        var first_section_id = '#' + first_section.attr(ATTRIBUTE.ID);
 
-        first_section.addClass(ACTIVE_CLASS);
+        first_section.addClass(CLASS.CURRENT);
         lng.Router.History.add(first_section_id);
     };
 
     var _initAllSections = function(sections) {
-
-        if (lng.Core.isMobile()) {
-            _setPositionFixedInIOS(sections);
-        }
+        lng.Fallback.positionFixed(sections);
 
         for (var i = 0, len = sections.length; i < len; i++) {
             var section = lng.dom(sections[i]);
-            _initFirstArticle(section);
+            _initArticles(section);
         }
     };
 
-    var _initFirstArticle = function(section) {
-        section.children(SELECTORS.ARTICLE).first().addClass(ACTIVE_CLASS);
-    };
+    var _initArticles = function(section) {
+        var first_article = section.children(ELEMENT.ARTICLE).first();
+        first_article.addClass(CLASS.CURRENT);
 
-    var _initAllAsides = function() {
-        lng.dom('aside').addClass('show');
+        var first_article_id = first_article.attr(ATTRIBUTE.ID);
+        var section_id = '#' + section.attr(ATTRIBUTE.ID);
+        lng.View.Article.showReferenceLinks(section_id, first_article_id);
     };
 
-    var _setPositionFixedInIOS = function(sections) {
-        var environment = lng.Core.environment();
-
-        if (environment.os.name === 'ios' && environment.os.version >= '4.') {
-            sections.style('position', 'fixed');
-        }
-    }
-
     return {
         start: start
     };

src/boot/Lungo.Boot.js

@@ -11,6 +11,7 @@
 LUNGO.Boot = (function(lng, undefined) {
 
     return function() {
+        lng.Boot.Resources.start();
         lng.Boot.Layout.start();
         lng.Boot.Events.start();
         lng.Boot.Data.start();

src/data/Lungo.Data.Cache.js

@@ -1,6 +1,6 @@
-/** 
+/**
  * Temporary cache system
- * 
+ *
  * @namespace LUNGO.Data
  * @class Cache
  *
@@ -41,7 +41,7 @@ LUNGO.Data.Cache = (function(lng, undefined) {
         if (arguments.length === 1) {
             return _cache[key];
         } else {
-            return _cache[arguments[0]][arguments[1]];
+            return (_cache[arguments[0]]) ? _cache[arguments[0]][arguments[1]] : undefined;
         }
     };
 

src/data/Lungo.Data.Sql.js

@@ -10,6 +10,7 @@
 
 LUNGO.Data.Sql = (function(lng, undefined) {
 
+    var ERROR = lng.Constants.ERROR;
     var CONFIG = {
         name: 'lungo_db',
         version: '1.0',
@@ -33,7 +34,7 @@ LUNGO.Data.Sql = (function(lng, undefined) {
         if (db) {
             _createSchema();
         } else {
-            lng.Core.log(3, 'lng.Data.Sql >> Failed to connect to database.');
+            lng.Core.log(3, ERROR.DATABASE);
         }
     };
 
@@ -119,10 +120,10 @@ LUNGO.Data.Sql = (function(lng, undefined) {
     var execute = function(sql, callback) {
         lng.Core.log(1, 'lng.Data.Sql >> ' + sql);
 
-        db.transaction(function(tx) {
-            tx.executeSql(sql, [], function(tx, rs) {
+        db.transaction( function(transaction) {
+            transaction.executeSql(sql, [], function(transaction, rs) {
                 _callbackResponse(callback, rs);
-            }, function(transaction, error){
+            }, function(transaction, error) {
                 transaction.executedQuery = sql;
                 _throwError.apply(null, arguments);
             });
@@ -172,7 +173,7 @@ LUNGO.Data.Sql = (function(lng, undefined) {
                 var value = fields[field];
                 if (sql) sql += ' ' + separator + ' ';
                 sql += field + '=';
-                sql += (typeof value === 'string') ? '"' + value + '"' : value;
+                sql += (isNaN(value)) ? '"' + value + '"' : value;
             }
         }
         return sql;
@@ -193,7 +194,7 @@ LUNGO.Data.Sql = (function(lng, undefined) {
                 var value = row[field];
                 fields += (fields) ? ', ' + field : field;
                 if (values) values += ', ';
-                values += (typeof value === 'string') ? '"' + value + '"' : value;
+                values += (isNaN(value)) ? '"' + value + '"' : value;
             }
         }