Kitchen Sink 1.0

examples/kitchen-sink/app/data.js

@@ -4,14 +4,14 @@ App.Data = (function(lng, App, undefined) {
         name: 'lungo.js',
         version: '1.0',
         schema: [
-            { name: 'demo', drop: true, fields: {  
+            { name: 'demo', drop: true, fields: {
                 id: 'INTEGER PRIMARY KEY',
                 name: 'TEXT',
                 done: 'INTEGER DEFAULT 0',
-                created_at: 'DATETIME' 
+                created_at: 'DATETIME'
                 }
             }
         ]
     });
-               
+
 })(LUNGO, App);

examples/kitchen-sink/app/events.js

@@ -3,49 +3,45 @@ App.Events = (function(lng, undefined) {
     lng.Dom.Event.live('#event_touchstart', 'TOUCH_START', function(event) {
         alert("TOUCH_START!");
     });
-    
+
     lng.Dom.Event.live('#event_touchend', 'TOUCH_END', function(event) {
         alert("TOUCH_END!");
     });
-    
+
     lng.Dom.Event.live('#event_touchmove', 'TOUCH_MOVE', function(event) {
         alert("TOUCH_MOVE!");
     });
-    
+
     lng.Dom.Event.live('#event_tap', 'TAP', function(event) {
         alert("TAP!");
     });
-    
+
     lng.Dom.Event.live('#event_doubletap', 'DOUBLE_TAP', function(event) {
         alert("DOUBLE_TAP!");
     });
-    
+
     lng.Dom.Event.live('#swipe', 'SWIPE', function(event) {
         alert("SWIPE!");
     });
-    
+
     lng.Dom.Event.live('#swipe_left', 'SWIPE_LEFT', function(event) {
         alert("SWIPE_LEFT!");
     });
-    
+
     lng.Dom.Event.live('#swipe_right', 'SWIPE_RIGHT', function(event) {
         alert("SWIPE_RIGHT!");
     });
-    
+
     lng.Dom.Event.live('#swipe_up', 'SWIPE_UP', function(event) {
         alert("SWIPE_UP!");
     });
-    
+
     lng.Dom.Event.live('#swipe_down', 'SWIPE_DOWN', function(event) {
         alert("SWIPE_DOWN!");
     });
 
-    lng.Dom.Event.delegate('body', '#load_list', 'TAP', function(event) {
-        App.Services.getMockList();
-    });
-
-    lng.Dom.Event.live('#load_scroll_mocks', 'TAP', function(event) {
-        App.View.scroll_mockup();
+    lng.Dom.Event.live('a[href="#scrolls"]', 'TAP', function(event) {
+        App.View.mockScrolls();
     });
 
 })(LUNGO);

examples/kitchen-sink/app/view.js

@@ -11,18 +11,18 @@ App.View = (function(lng, App, undefined) {
         </li>'
     );
 
-    var scroll_mockup = function(){
-        var _markup = '';
+    var mockScrolls = function() {
+        var markup = '';
         for (var i=0; i < 32; i++) {
-            _markup += '<li>'+i+'</li>';
+            markup += '<li>'+i+'</li>';
         }
 
-        lng.View.Scroll.update('scroll_vertical', _markup);
-        lng.View.Scroll.update('scroll_horizontal', _markup);
-    }
+        lng.View.Scroll.update('scroll_vertical', markup);
+        lng.View.Scroll.update('scroll_horizontal', markup);
+    };
 
-    return{
-        scroll_mockup: scroll_mockup
+    return {
+        mockScrolls: mockScrolls
     }
 
 })(LUNGO, App);

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

@@ -5,4 +5,33 @@ pre {
     border: 1px solid rgba(0,0,0,0.5);
     margin-top: 10px;
     padding: 10px;
-}
+}
+
+/* @group <section> #demo_scroll */
+.container-scroll {
+    padding: 4px;
+}
+
+.vertical {
+    height: 154px;
+}
+
+.horizontal {
+    position: relative;
+    top: 172px;
+    height: 75px;
+}
+
+.container-scroll li{
+    height: 76px;
+    width: 76px;
+    background: #ccc;
+    font-size: 24px;
+    line-height: 76px;
+    list-style: none;
+    text-align: center;
+    float:left;
+    margin-right: 3px;
+    margin-bottom: 3px;
+}
+/* @end */

examples/kitchen-sink/index.html

@@ -66,9 +66,13 @@
                 <a href="#data-attributes" data-target="article" data-icon="picture" data-count="6">Data Attributes</a>
                 <a href="#forms" data-target="section" data-icon="write" data-count="7">Form Elements</a>
                 <a href="#lists" data-target="section" data-icon="note" data-count="5">Lists</a>
+                <a href="#events" data-target="article" data-icon="user">Events</a>
+                <a href="#scrolls" data-target="article" data-icon="points">Scrolls</a>
             </div>
         </aside>
 
+        <!-- ============================= welcome ============================= -->
+
         <article id="welcome" class="list scrollable">
             <div class="indented">
                 <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
@@ -79,6 +83,8 @@
             </div>
         </article>
 
+        <!-- ============================= authors ============================= -->
+
         <article id="authors" class="list scrollable">
             <div class="indented">
                 <ul>
@@ -294,6 +300,43 @@
             </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_tap">Tap me!</li>
+                    <li id="event_doubletap">Double-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>
+
+        <!-- ============================= 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 ============================= -->