New Kitchen-Sink (BETAc)

kitchen-sink/app/asides/features.html

@@ -90,6 +90,14 @@
                 </a>
             </li>
 
+            <!-- Notifications -->
+            <li>
+                <a href="#pull" data-router="section">
+                    <strong>Pull & Refresh</strong>
+                    <small>Beautiful refresh event</small>
+                </a>
+            </li>
+
             <!-- Colours -->
             <li>
                 <a href="#color" data-router="section" data-title="Colours">

kitchen-sink/app/events.pull.js

@@ -0,0 +1,12 @@
+var config = {
+    refresh: {
+        title: 'REFRESHING...',
+        callback: function() {
+            setTimeout(function(){
+                pull.hide();
+            }, 1000);
+        }
+    }
+};
+
+var pull = new Lungo.Element.Pull('section#pull article', config);

kitchen-sink/app/sections/aside.html

@@ -1,6 +1,6 @@
 <section id="aside" data-transition="slide">
     <header data-title="Asides">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/color.html

@@ -1,6 +1,6 @@
 <section id="color" data-transition="slide">
     <header data-title="Colors">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/data-attribute.html

@@ -1,6 +1,6 @@
 <section id="data" data-transition="slide">
     <header data-title="Data Attributes">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/form.html

@@ -1,6 +1,6 @@
 <section id="form" data-transition="slide">
     <header data-title="Form Elements">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/grid.html

@@ -1,6 +1,6 @@
 <section id="grid" data-transition="slide">
     <header data-title="Grid System">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/icon.html

@@ -1,6 +1,6 @@
 <section id="icon" data-transition="slide">
     <header class="extended" data-title="Icons Repository">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/layout.html

@@ -1,9 +1,9 @@
 <section id="layout" data-transition="slide">
     <header data-title="Layout" class="extended">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
-        <nav class="right button">
+        <nav class="right box">
             <a href="#splash" data-router="section" data-icon="user" data-label="Splash"></a>
         </nav>
     </header>

kitchen-sink/app/sections/list.html

@@ -1,6 +1,6 @@
 <section id="list" data-transition="slide">
     <header data-title="Lists" class="extended">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/notification.html

@@ -1,6 +1,6 @@
 <section id="notification" data-transition="slide">
     <header data-title="Notifications">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/pull.html

@@ -0,0 +1,20 @@
+<section id="pull" data-pull="normal" data-transition="slide">
+    <header data-title="Pull & Refresh">
+        <nav class="box">
+            <a href="#back" data-router="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article class="list indented">
+        <ul>
+             <li class="dark" data-icon="help">
+                    <strong>
+                    Test this featury only drag down.
+                </strong>
+                <small>This element has an associated event</small>
+            </li>
+        </ul>
+
+    </article>
+
+</section>

kitchen-sink/app/sections/scroll.html

@@ -1,6 +1,6 @@
 <section id="scroll" data-transition="slide">
     <header data-title="Scrolls">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/app/sections/touchevents.html

@@ -1,6 +1,6 @@
 <section id="touchevents" data-transition="slide">
     <header data-title="Touch Events">
-        <nav class="button">
+        <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>

kitchen-sink/index.html

@@ -34,6 +34,8 @@
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.icon.brand.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.loading.css">
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.notification.css">
+    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.pull.css">
+
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.theme.default.css">
     <!--
     <link rel="stylesheet" href="../package/lungo.css">
@@ -48,12 +50,9 @@
 <body class="app">
     <section id="main" data-transition="slide">
         <header  class="">
-            <nav class="left ">
+            <nav class="left box">
                 <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
-            <nav class="right ">
-                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" target="_blank" ></a>
-            </nav>
             <div class="left">
                 <div class="centered title with-subtitle">
                     Lungo Framework
@@ -64,8 +63,7 @@
 
         <article id="main-article" class="list indented scroll">
             <ul>
-
-                <li class="contrast">
+                <li class="dark">
                     <strong>
                     A framework for developers who want to design, build and share cross device apps.
                 </strong>
@@ -86,6 +84,11 @@
                     <strong>Multi-Device full support</strong>
                     Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
                 </li>
+
+                <li>
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button big theme" data-label="Tweet me"></a>
+
+                </li>
             </ul>
         </article>
     </section>
@@ -150,6 +153,7 @@
                         'app/sections/data-attribute.html',
                         'app/sections/scroll.html',
                         'app/sections/color.html',
+                        'app/sections/pull.html',
                         'app/asides/features.html',
                         'app/asides/left.html',
                         'app/asides/right.html']
@@ -163,5 +167,7 @@
     <script src="app/app.js"></script>
         <script src="app/events.notification.js"></script>
         <script src="app/events.touch.js"></script>
+        <script src="app/events.pull.js"></script>
+
 </body>
 </html>

kitchen-sink/pull.html

@@ -1,192 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>KitchenSink - Lungo 2.0</title>
-    <meta name="description" content="">
-    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
-    <meta name="HandheldFriendly" content="True">
-    <meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <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">
-    <meta http-equiv="cleartype" content="on">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
-    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
-    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/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.layout.grid.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.widgets.icon.brand.css">
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.loading.css">
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.notification.css">
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.widgets.pull.css">
-
-    <link rel="stylesheet" href="../src/stylesheets/css/Lungo.theme.default.css">
-
-
-
-    <!--
-    <link rel="stylesheet" href="../../release/lungo.css">
-    <link rel="stylesheet" href="../../release/lungo.icon.css">
-    <link rel="stylesheet" href="../../release/lungo.icon.brand.css">
-    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
-    -->
-    <!-- App Stylesheet -->
-    <link rel="stylesheet" href="stylesheets/app.css">
-</head>
-
-<body class="app">
-    <section id="main" data-transition="slide" data-pull="normal">
-        <header  class="">
-            <nav class="left button">
-                <a href="#features" data-router="aside" data-icon="menu"></a>
-            </nav>
-            <nav class="right button">
-                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" target="_blank" ></a>
-            </nav>
-            <div class="left">
-                <div class="centered title with-subtitle">
-                    Lungo Framework
-                    <small class="subtitle">version 2</small>
-                </div>
-                </div>
-        </header>
-
-        <article id="main-article" class="list indented scroll">
-            <ul>
-
-                <li class="contrast">
-                    <strong>
-                    A framework for developers who want to design, build and share cross device apps.
-                </strong>
-                </li>
-                <li data-icon="brand html5" class="feature">
-                    <strong>HTML5 Optimized Apps</strong>
-                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
-                </li>
-                <li data-icon="brand github-2" class="feature">
-                    <strong>Open Source Project</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
-                <li data-icon="book" class="feature">
-                    <strong>Powerfull JavaScript API</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
-                <li data-icon="brand branch" class="feature">
-                    <strong>Multi-Device full support</strong>
-                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
-                </li>
-            </ul>
-        </article>
-
-
-        <article id="second-article" class="list indented scroll"
-            <ul>
-                <li class="contrast " data-loading="white">
-
-                </li>
-
-                <li class="contrast">
-                    <strong>
-                    A framework for developers who want to design, build and share cross device apps.
-                </strong>
-                </li>
-                <li data-icon="brand html5" class="feature">
-                    <strong>HTML5 Optimized Apps</strong>
-                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
-                </li>
-                <li data-icon="brand github-2" class="feature">
-                    <strong>Open Source Project</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
-                <li data-icon="book" class="feature">
-                    <strong>Powerfull JavaScript API</strong>
-                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
-                </li>
-                <li data-icon="brand branch" class="feature">
-                    <strong>Multi-Device full support</strong>
-                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
-                </li>
-            </ul>
-        </article>
-    </section>
-
-    <!-- Lungo dependencies -->
-    <script src="../src/lib/quo.debug.js"></script>
-    <!--
-    <script src="../../release/lungo.js"></script>
-    -->
-    <script src="../src/Lungo.js"></script>
-    <script src="../src/Lungo.Init.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/Lungo.Events.js"></script>
-    <script src="../src/Lungo.Notification.js"></script>
-    <script src="../src/Lungo.Fallback.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.Article.js" ></script>
-    <script src="../src/view/Lungo.View.Aside.js" ></script>
-
-    <script src="../src/element/Lungo.Element.Cache.js"></script>
-    <script src="../src/element/Lungo.Element.Carousel.js"></script>
-    <script src="../src/element/Lungo.Element.Count.js"></script>
-    <script src="../src/element/Lungo.Element.Loading.js"></script>
-    <script src="../src/element/Lungo.Element.Progress.js"></script>
-    <script src="../src/element/Lungo.Element.Pull.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.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>
-    <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>
-        Lungo.init();
-
-        var config = {
-            refresh: {
-                title: 'REFRESHING...',
-                callback: function() {
-                    console.error(arguments);
-                    setTimeout(function(){
-                        pull.hide();
-                    }, 2000);
-                }
-            }
-        };
-
-        var pull = new Lungo.Element.Pull('#main-article', config);
-
-    </script>
-</body>
-</html>