New example project for new features

examples/test-pro/app/app.js

@@ -0,0 +1,28 @@
+var App = (function(lng, undefined) {
+
+
+    lng.App.init({
+        name: 'Kitchen Sink',
+        version: '1.1',
+        sections: [/*
+            'local.html',
+            'http://examples.tapquo.com/remote.html'*/
+        ]
+    });
+
+    var _getEnvironmentFromQuoJS = (function() {
+        var environment = lng.Core.environment();
+        if (environment.isMobile) {
+           // alert('Your phone is ' + environment.os.name + ' (' + environment.os.version + ')');
+        }
+    })();
+
+    lng.View.Element.count('#btn-one', 7);
+    lng.View.Element.count('#btn-three', 0);
+    lng.View.Element.count('#aside-one', 17);
+
+    return {
+
+    };
+
+})(LUNGO);

examples/test-pro/app/events.js

@@ -0,0 +1,39 @@
+App.Events = (function(lng, undefined) {
+
+    /*
+    lng.ready(function() {
+
+    });
+    */
+
+    lng.dom('#test header a.blue').tap(function(event) {
+        App.Services.mockProfiles();
+    });
+
+    lng.dom('#test header a.red').tap(function(event) {
+        var lista = '<li class="selectable">\
+                        <img src="assets/images/avatars/1.jpg">\
+                        <div class="onright">Profile nº1</div>\
+                        Profile nº1<small>Description nº1</small>\
+                    </li>';
+        lng.dom('#list-added_list').append(lista);
+
+        lng.View.Scroll.refresh('list-added');
+    });
+
+    lng.dom('article#list-added li').tap(function(event) {
+        $$(this).remove();
+        lng.View.Scroll.refresh('list-added');
+    });
+
+    //SPECIAL
+    $$('section#next').on('load', function(event) {
+        console.error('Load #navigation', event);
+        lng.Router.article('#next', '#files');
+    });
+
+    $$('section#next').on('unload', function(event) {
+        console.error('Unload', event);
+    });
+
+})(LUNGO);

examples/test-pro/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/test-pro/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/test-pro/app/services.js

@@ -0,0 +1,39 @@
+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 = {
+            container_id: 'list-plain',
+            template_id: 'profile-tmp',
+            data: profiles
+        };
+
+        lng.View.Template.List.create({
+            container_id: 'list-auto',
+            template_id: 'profile-tmp',
+            data: profiles
+        });
+    };
+
+    mockProfiles();
+
+    return {
+        mockProfiles: mockProfiles
+    }
+
+})(LUNGO, App);

examples/test-pro/app/view.js

@@ -0,0 +1,29 @@
+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-pro/index.html

@@ -0,0 +1,141 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <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="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">
+    <!-- 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.list.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.pro.css">
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="assets/stylesheets/app.css">
+
+</head>
+
+<body class="app">
+    <section id="test">
+        <header data-title="LungoJS Kitchen Sink">
+            <a href="#" data-target="aside" class="button" data-icon="refresh">&nbsp;Aside</a>
+            <nav class="onright">
+                <a href="#" data-article="list-added" class="button red" data-icon="right">&nbsp;Add</a>
+                <a href="#" data-article="list-auto" class="button blue" data-icon="right">&nbsp;Add</a>
+            </nav>
+        </header>
+
+        <footer class="toolbar">
+            <nav>
+                <a href="#list-added" class="current" data-target="article" data-icon="add"></a>
+                <a href="#list-auto" data-target="article" data-icon="add"></a>
+                <a href="#async-local" data-target="section" data-icon="settings"></a>
+                <a href="#async-remote" data-target="section" data-icon="wifi"></a>
+            </nav>
+        </footer>
+
+        <aside id="prueba" class="scrollable">
+            <ul>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+                <a href="#a">slaka</a>
+            </ul>
+
+        </aside>
+
+        <article id="list-added" class="list"></article>
+        <article id="list-auto" class="list"></article>
+    </section>
+
+    <section id="next">
+        <header data-back="home" class="extended">
+            <a href="#" data-article="file" class="button onright blue" data-icon="file"></a>
+            <a href="#" data-article="files" class="button onright green" data-icon="files"></a>
+            <a href="#" data-article="folder" class="button onright red" data-icon="folder"></a>
+
+
+            <nav class="groupbar">
+                <a href="#file" data-target="article">File</a>
+                <a href="#files" data-target="article">Files</a>
+                <a href="#folder" data-target="article">Folder</a>
+            </nav>
+        </header>
+
+        <footer class="toolbar with-labels">
+            <nav>
+                 <a href="#file" data-target="article" data-icon="file" data-label="File"></a>
+                 <a href="#files" data-target="article" data-icon="files" data-label="Files"></a>
+                 <a href="#folder" data-target="article" data-icon="files" data-label="Folder"></a>
+            </nav>
+        </footer>
+
+        <article id="file">File</article>
+        <article id="files">Files</article>
+        <article id="folder">Folder</article>
+    </section>
+
+
+    <!-- Third parties dependencies -->
+    <script src="../../src/lib/QuoJS.js"></script>
+    <script src="../../src/lib/iscroll-lite.js"></script>
+
+    <!-- LungoJS Libraries (Development mode)-->
+    <script src="../../src/Lungo.js"></script>
+
+    <script src="../../src/Lungo.App.js" ></script>
+    <script src="../../src/Lungo.Core.js"></script>
+    <script src="../../src/Lungo.Dom.js"></script>
+    <script src="../../src/Lungo.Service.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>
+    <script src="../../src/view/Lungo.View.Article.js" ></script>
+    <script src="../../src/view/Lungo.View.Aside.js" ></script>
+    <script src="../../src/view/Lungo.View.Scroll.js"></script>
+    <script src="../../src/view/Lungo.View.Element.js"></script>
+    <script src="../../src/view/Lungo.View.Template.js"></script>
+    <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
+    <script src="../../src/view/Lungo.View.Template.List.js"></script>
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
+    <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/boot/Lungo.Boot.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Async.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>
+    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
+
+    <!-- LungoJS - Sandbox App -->
+    <script src="app/app.js"></script>
+    <script src="app/events.js"></script>
+    <script src="app/view.js"></script>
+    <script src="app/services.js"></script>
+
+
+
+</body>
+</html>