KitchenSink for touchevents

examples/test/app/app.js

@@ -7,8 +7,12 @@ var App = (function(lng, undefined) {
         }
     })();
 
-    return {
+    eventConsole = function(event) {
+        $$('#touchevents-console').html($$(event.target).data('event'));
+    };
 
+    return {
+        eventConsole: eventConsole
     };
 
 })(Lungo);

examples/test/app/events.touch.js

@@ -0,0 +1,36 @@
+
+Lungo.Events.init({
+    // 'tap section#touchevents': function() {
+    //     alert(1);
+    // },
+
+    // 'touch section#touchevents a[data-event=touch]': function() {
+    //     Lungo.Notification.show('Touch', 'Description', 'message', false, 2);
+    // },
+
+
+    'tap section#touchevents [data-event=tap]': App.eventConsole,
+    'doubleTap section#touchevents [data-event=doubleTap]': App.eventConsole,
+    'hold section#touchevents [data-event=hold]': App.eventConsole,
+
+    'swipe section#touchevents [data-event=swipe]': App.eventConsole,
+    'swipeLeft section#touchevents [data-event=swipeLeft]': App.eventConsole,
+    'swipeUp section#touchevents [data-event=swipeUp]': App.eventConsole,
+    'swipeRight section#touchevents [data-event=swipeRight]': App.eventConsole,
+    'swipeDown section#touchevents [data-event=swipeDown]': App.eventConsole,
+    'swiping section#touchevents [data-event=swiping]': App.eventConsole,
+
+    'rotate section#touchevents [data-event=rotate]': App.eventConsole,
+    'rotateLeft section#touchevents [data-event=rotateLeft]': App.eventConsole,
+    'rotateRight section#touchevents [data-event=rotateRight]': App.eventConsole,
+    'rotating section#touchevents [data-event=rotating]': App.eventConsole,
+
+    'pinch section#touchevents [data-event=pinch]': App.eventConsole,
+    'pinchIn section#touchevents [data-event=pinchIn]': App.eventConsole,
+    'pinchOut section#touchevents [data-event=pinchOut]': App.eventConsole,
+    'pinching section#touchevents [data-event=pinching]': App.eventConsole,
+
+    'drag section#touchevents [data-event=drag]': App.eventConsole
+
+});
+

examples/test/app/resources/asides/features.html

@@ -22,7 +22,7 @@
 
             <!-- List -->
             <li>
-                <a href="#list" data-target="section" data-count="3">
+                <a href="#list" data-target="section" data-count="17">
                     <strong>Lists</strong>
                     <small>Indented, Scroll</small>
                 </a>
@@ -40,7 +40,7 @@
             <!-- Icons -->
             <li>
                 <a href="#icon" data-target="section">
-                    <div class="bubble right">8</div>
+                    <div class="bubble right">109</div>
                     <strong>Icons</strong>
                     <small>Messages, skskks</small>
                 </a>
@@ -73,12 +73,13 @@
                     <small>Indented, Scroll</small>
                 </a>
             </li>
-            <!-- Buttons -->
+
+            <!-- Touch Events -->
             <li>
-                <a href="#" data-target="section">
-                    <div class="bubble right">8</div>
-                    <strong>Icons</strong>
-                    <small>Indented, Scroll</small>
+                <a href="#touchevents" data-target="section">
+                    <div class="bubble right">19</div>
+                    <strong>Touch Events</strong>
+                    <small>Touch, Tap, Double-Tap, Swipe...</small>
                 </a>
             </li>
 

examples/test/app/resources/sections/splash.html

@@ -0,0 +1,13 @@
+<section id="login">
+    <article class="indented splash current">
+        <h1>New user</h1>
+        <form class="roundeds">
+            <input type="text" placeholder="Your email" id="txt-signup-mail" value="">
+            <input type="text" placeholder="Your username" id="txt-signup-name" value="">
+            <input type="password" placeholder="Your password" id="txt-signup-password" value="">
+            <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
+            <a href="#back" data-target="section" class="button red big" data-icon="close">Return to login</a>
+            <a href="#back" data-target="section" class="button green " data-icon="user">Return to login</a>
+        </form>
+    </article>
+</section>

examples/test/app/resources/sections/touchevents.html

@@ -0,0 +1,45 @@
+<section id="touchevents" data-transition="slide">
+    <header data-title="Touch Events" data-back="home"></header>
+
+    <article>
+        <div class="two rows" id="touchevents-console">Test them...</div>
+        <div class="eight rows list scroll">
+        <ul>
+            <li class="anchor">Test events in your Mobile Device</li>
+            <li data-event="touch"><strong>Touch me!</strong></li>
+            <li data-event="tap" id="prueba"><strong>Tap me!</strong></li>
+            <li data-event="doubleTap"><strong>doubleTap me!</strong></li>
+            <li data-event="hold"><strong>hold me!</strong></li>
+            <li data-event="Drag">
+                <strong>Drag me!</strong>
+                <small>Swipe with 2 (or more) fingers</small></li>
+
+            <li data-event="swipe">
+                <strong>Swipe me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="swipeLeft"><strong>swipeLeft me!</strong></li>
+            <li data-event="swipeUp"><strong>swipeUp me!</strong></li>
+            <li data-event="swipeRight"><strong>swipeRight me!</strong></li>
+            <li data-event="swipeDown"><strong>swipeDown me!</strong></li>
+            <li data-event="swiping"><strong>swiping me!</strong></li>
+
+            <li data-event="rotate">
+                <strong>rotate me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="rotateLeft"><strong>rotateLeft me!</strong></li>
+            <li data-event="rotateRight"><strong>rotateRight me!</strong></li>
+            <li data-event="rotating"><strong>rotating me!</strong></li>
+
+            <li data-event="pinch">
+                <strong>pinch me!</strong>
+                <small>Drag in any direction</small></li>
+            <li data-event="pinchIn"><strong>pinchIn me!</strong></li>
+            <li data-event="pinchOut"><strong>pinchOut me!</strong></li>
+            <li data-event="pinching"><strong>pinching me!</strong></li>
+
+
+
+        </ul></div>
+    </article>
+
+</section>

examples/test/kitchensink.html

@@ -50,22 +50,30 @@
     <!--
     <link rel="stylesheet" href="assets/stylesheets/app.css">
 -->
+
+    <style>
+        #touchevents-console{
+            background: #292f34;
+            color: white;
+            font-size: 3.0em;
+            line-height: 2.2em;
+            text-align: center;
+        }
+
+         li {
+            padding-top: 128px !important;
+            padding-bottom: 128px !important;
+        }
+
+        #touchevents .list li:not(.anchor) {
+            padding: 64px 8px;
+        }
+    </style>
 </head>
 
 <body class="app">
-<!--         <section id="login">
-        <article class="indented splash current">
-            <h1>New user</h1>
-            <form class="roundeds">
-                <input type="text" placeholder="Your email" id="txt-signup-mail" value="">
-                <input type="text" placeholder="Your username" id="txt-signup-name" value="">
-                <input type="password" placeholder="Your password" id="txt-signup-password" value="">
-                <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
-                <a href="#back" data-target="section" class="button red big" data-icon="close">Return to login</a>
-                <a href="#back" data-target="section" class="button green " data-icon="user">Return to login</a>
-            </form>
-        </article>
-    </section> -->
+
+
 
     <section id="main" data-transition="slide">
         <header  class="">
@@ -151,7 +159,7 @@
             version: '2.0',
             sugars: ['map', 'pull'],
             resources: {
-                sections: [ 'layout.html', 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html'],
+                sections: [ 'layout.html', 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html', 'touchevents.html'],
                 templates: [],
                 asides: ['features.html', 'left.html', 'right.html']
             }
@@ -163,5 +171,6 @@
     <script src="app/services.js"></script>
     <script src="app/events.js"></script>
         <script src="app/events.notification.js"></script>
+        <script src="app/events.touch.js"></script>
 </body>
 </html>