Some no important changes

examples/test/app/app.js

@@ -6,20 +6,7 @@ var App = (function(lng, undefined) {
         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']
+                'aside.html', 'aside-profiles.html']
         }
     });
 
@@ -30,10 +17,6 @@ var App = (function(lng, undefined) {
         }
     })();
 
-    lng.View.Element.count('#btn-one', 7);
-    lng.View.Element.count('#btn-three', 0);
-    lng.View.Element.count('#aside-one', 17);
-
     return {
 
     };

examples/test/app/data.js

@@ -1,28 +1,3 @@
 App.Data = (function(lng, App, undefined) {
 
-
-    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/test/app/events.js

@@ -1,65 +1,9 @@
 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!"); });
-    lng.dom('#event_touchend').on('touchend', function(event) { alert("touchend!");  });
-    lng.dom('#event_touchmove').on('touchmove' , function(event) { alert("touchmove!"); });
-
-    //Tap Methods
-    lng.dom('#event_tap').tap(function(event) { alert("tap!"); });
-    //OR
-    //lng.dom('#event_tap').on('tap', function(event) { alert("TAP!"); });
-    lng.dom('#event_doubletap').doubleTap(function(event) { alert("doubleTap!"); });
-    lng.dom('#event_longtap').longTap(function(event) { alert("longTap!"); });
-
-    //Swipe Methods
-    lng.dom('#swipe').swipe(function(event) { alert("swipe!"); });
-    lng.dom('#swipe_left').swipeLeft(function(event) { alert("swipeLeft!"); });
-    lng.dom('#swipe_right').swipeRight(function(event) { alert("swipeRight!"); });
-    lng.dom('#swipe_up').swipeUp(function(event) { alert("swipeUp!"); });
-    lng.dom('#swipe_down').swipeDown(function(event) { alert("swipeDown!"); });
-
-    lng.dom('a[href="#scrolls"]').on('tap', function(event) {
-        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);

examples/test/app/services.js

@@ -1,78 +1,3 @@
 App.Services = (function(lng, App, undefined) {
 
-    var mockProfiles = function() {
-        var profiles = [];
-        var id = 0;
-
-        for (var j=0; j < 3; j++) {
-            for (var i=1, len=12; i <= len; i++ ) {
-                id++;
-                profiles.push({
-                    id: id,
-                    name: 'Profile nº' + i,
-                    description: 'Description nº' + i,
-                    avatar: 'assets/images/avatars/' + i + '.jpg'
-                });
-            }
-        }
-
-        //Normal List
-        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/test/app/view.js

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

examples/test/index.html

@@ -63,275 +63,23 @@
 </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">
+    <section id="test-1" class="pop">
+        <header data-title="Test-1">
             <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>
-
-        <!-- ============================= welcome ============================= -->
-        <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>
-                <p class="text">
-                    The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well organized CSS< and ending with the JavaScript API</p>
-            </div>
-        </article>
-
-        <!-- ============================= buttons ============================= -->
-        <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>
-                <a href="#" class="button big lightgreen">lightgreen</a>
-                <a href="#" class="button big green">green</a>
-                <a href="#" class="button big blue">blue</a>
-                <a href="#" class="button big arcticblue">articblue</a>
-                <a href="#" class="button big orange">orange</a>
-                <a href="#" class="button big magenta">magenta</a>
-                <a href="#" class="button big pink">pink</a>
-                <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>
-                <p class="text">In the listed examples you are seeing a attribute "data-icon", this attribute only need the semantic name of the icon you want to show and LungoJS will do the rest of the work.</p>
-
-                <ul>
-                    <li data-icon="map mini">map</li>
-                    <li data-icon="clock mini">clock</li>
-                    <li data-icon="calendar mini">calendar</li>
-                    <li data-icon="message mini">message</li>
-                    <li data-icon="chat mini">chat</li>
-                    <li data-icon="user mini">user</li>
-                    <li data-icon="group mini">group</li>
-                    <li data-icon="loading mini">loading</li>
-                    <li data-icon="refresh mini">refresh</li>
-                    <li data-icon="search mini">search</li>
-                    <li data-icon="pushpin mini">pushpin</li>
-                    <li data-icon="star mini">star</li>
-                    <li data-icon="heart mini">heart</li>
-                    <li data-icon="warning mini">warning</li>
-                    <li data-icon="add mini">add</li>
-                    <li data-icon="remove mini">remove</li>
-                    <li data-icon="question mini">question</li>
-                    <li data-icon="info mini">info</li>
-                    <li data-icon="check mini">check</li>
-                    <li data-icon="substract mini">substract</li>
-                    <li data-icon="close mini">close</li>
-                    <li data-icon="plus mini">plus</li>
-                    <li data-icon="up mini">up</li>
-                    <li data-icon="down mini">down</li>
-                    <li data-icon="left mini">left</li>
-                    <li data-icon="right mini">right</li>
-                    <li data-icon="home mini">home</li>
-                    <li data-icon="pencil mini">pencil</li>
-                    <li data-icon="edit mini">edit</li>
-                    <li data-icon="picture mini">picture</li>
-                    <li data-icon="camera mini">camera</li>
-                    <li data-icon="music mini">music</li>
-                    <li data-icon="wifi mini">wifi</li>
-                    <li data-icon="file mini">file</li>
-                    <li data-icon="files mini">files</li>
-                    <li data-icon="folder mini">folder</li>
-                    <li data-icon="key mini">key</li>
-                    <li data-icon="settings mini">settings</li>
-                    <li data-icon="chart mini">chart</li>
-                    <li data-icon="trash mini">trash</li>
-                    <li data-icon="target mini">target</li>
-                    <li data-icon="items mini">items</li>
-                    <li data-icon="download mini">download</li>
-                    <li data-icon="upload mini">upload</li>
-                    <li data-icon="basket mini">basket</li>
-                    <li data-icon="phone mini">phone</li>
-                    <li data-icon="mail mini">mail</li>
-                    <li data-icon="tag mini">tag</li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= data - attributes ============================= -->
-        <article id="data-attributes" class="list scrollable">
-            <div class="indented">
-                <h1 class="title">The data-attributes</h1>
-                <ul>
-                    <li data-icon="user">
-                        data-icon
-                        <small>Creates an icon LungoJS vectorized</small>
-                    </li>
-                    <li data-image="assets/images/avatars/1.jpg">
-                        data-image
-                        <small>Instance a &lt;img&gt; automatically</small>
-                    </li>
-                    <li>
-                        data-search
-                        <small>Creates a search input form</small>
-                    </li>
-                    <li data-search="Type your search..."></li>
-                </ul>
-
-                <h1 class="title">Others</h1>
-                <ul>
-                    <li>
-                        data-title
-                        <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
-                    </li>
-                    <li>
-                        <div class="onright" data-count="23 units"></div>
-                        data-count
-                        <small>Creates counters of different &lt;elements&gt;</small>
-                    </li>
-                    <li>
-                        data-back
-                        <small>Creates a button that goes to the previous section.</small>
-                    </li>
-                </ul>
-            </div>
-        </article>
-
-        <!-- ============================= events ============================= -->
-        <article id="events" class="list scrollable">
-            <div class="indented">
-                <ul>
-                    <li class="tip darker" data-icon="user">
-                        Test events
-                        <small>... in each row.</small>
-                    </li>
-                    <li class="anchor">Common Events</li>
-                    <li id="event_touchstart">Touchstart me!</li>
-                    <li id="event_touchend">Touchend me!</li>
-                    <li id="event_touchmove">Touchmove me!</li>
-                    <li class="anchor">Tap Events</li>
-                    <li id="event_tap">Tap me!</li>
-                    <li id="event_doubletap">Double-Tap me!</li>
-                    <li id="event_longtap">Long-Tap me!</li>
-                    <li class="anchor">Special Events</li>
-                    <li id="swipe" data-icon="user">
-                        Swipe me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_left" data-icon="left">Swipe-Left me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_right" data-icon="right">Swipe-Right me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_up" data-icon="up">Swipe-Up me!
-                        <small>Drag in any direction</small></li>
-                    <li id="swipe_down" data-icon="down">Swipe-Down me!
-                        <small>Drag in any direction</small></li>
-                </ul>
-            </div>
+        <article>
+            <a href="#test-2" data-target="section" class="button big red">Test 2</a>
         </article>
+    </section>
 
-        <!-- ============================= scrolls ============================= -->
-        <article id="scrolls">
-            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
-                <div style="width: 1036px;">
-                    <span>1</span>
-                    <span>2</span>
-                    <span>3</span>
-                    <span>4</span>
-                    <span>5</span>
-                    <span>6</span>
-                    <span>7</span>
-                    <span>8</span>
-                    <span>9</span>
-                    <span>10</span>
-                    <span>11</span>
-                    <span>12</span>
-                    <span>13</span>
-                    <span>14</span>
-                    <span>15</span>
-                </div>
-            </div>
-
-            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
-                <div>
-                    <span>1</span>
-                    <span>2</span>
-                    <span>3</span>
-                    <span>4</span>
-                    <span>5</span>
-                    <span>6</span>
-                    <span>7</span>
-                    <span>8</span>
-                    <span>9</span>
-                    <span>10</span>
-                    <span>11</span>
-                    <span>12</span>
-                </div>
-            </div>
-        </article>
-
-        <!-- ============================= authors ============================= -->
-        <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>
-
-                <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>
+    <section id="test-2" class="pop">
+        <header data-title="Test-2" data-back="home"></header>
+        <article>
         </article>
-
     </section>
 
+
     <!-- Third parties dependencies -->
     <script src="../../src/lib/QuoJS.js"></script>
     <script src="../../src/lib/iscroll-lite.js"></script>

src/stylesheets/css/Lungo.layout.css

@@ -8,7 +8,7 @@ section.flow{-webkit-transform:translate3d(100%, 0, 0) scale(0.7);-moz-transform
 section.flow.show-revoke{-webkit-animation:flow-show-revoke 350ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 section.flow.hide{-webkit-animation:flow-hide 350ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
 section.flow.hide-revoke{-webkit-animation:flow-hide-revoke 350ms 500ms cubic-bezier(0.39, 0.575, 0.565, 1) forwards;}
-header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
+header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:39px;}
 header{top:0px;}header .onleft{margin-left:4px !important;}
 header .onright{margin-right:4px !important;}
 footer{bottom:0px;}

src/stylesheets/less/Lungo.layout.less

@@ -8,11 +8,7 @@
  */
 
 @import "mixins.less";
-
-@defaultTrasition : @easeOutSine;
-@header_footer_height: 40px;
-	@header_extended_height: 74px;
-@footer_toolbar_height: 48px;
+@import "constants.less";
 
 /* @group <section> */
 section {
@@ -112,7 +108,8 @@ header, footer  {
 	position: absolute;
 	left: 0px;
 	width: 100%;
-	height: 38px;
+	//height: 38px;
+	height: @header-height;
 	display: block;
 	
 	z-index: 2;