Test gestures (QuoJS 2.3)

example/app/app.js

@@ -1,9 +1,5 @@
 var App = (function(lng, undefined) {
 
-    eventConsole = function(event) {
-        $$('#touchevents-console').html($$(event.target).data('event'));
-    };
-
     triggerCapture = function(event) {
         event.stopPropagation();
         lng.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
@@ -23,7 +19,6 @@ var App = (function(lng, undefined) {
     };
 
     return {
-        eventConsole: eventConsole,
         triggerCapture: triggerCapture,
         environment: environment
     };

example/app/events.touch.js

@@ -1,27 +1,14 @@
 
-Lungo.Events.init({
-    '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
-
+["singleTap", "doubleTap", "hold",
+    "swipe", "-swiping", "swipeLeft", "swipeRight", "swipeUp", "swipeDown",
+    "rotate", "rotateLeft", "rotateRight",
+    "pinch", "pinchIn", "pinchOut",
+    "drag", "dragLeft", "dragRight", "dragUp", "dragDown"].forEach(function(type) {
+    $$("section#touchevents #gestures").on(type, function(event) {
+        $$(this).siblings('#console').append(' | ' + type);
+    });
 });
 
+$$("[data-action=clean_console]").tap(function(event) {
+    $$('#console').html("");
+});

example/app/sections/touchevents.html

@@ -1,49 +1,14 @@
 <section id="touchevents" data-transition="slide">
-    <header data-title="Touch Events">
+    <header data-title="Test Gestures">
         <nav class="box">
             <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 
-    <article class="active">
-        <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>
-            </li>
+    <article id="example" class="active">
+        <div class="seven rows" id="gestures"></div>
+        <div class="two rows scroll console" id="console" ></div>
+        <div class="one row console"><a href="#" class="button anchor" data-action="clean_console">Clean Console</a></div>
 
-            <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>

example/stylesheets/app.css

@@ -6,11 +6,10 @@
     display: block;
 }
 
-#touchevents-console {
+.console {
     background: #292f34;
     color: white;
-    font-size: 3.0em;
-    line-height: 2.2em;
+    font-size: 1.0em;
     text-align: center;
 }
 

src/boot/Lungo.Boot.Events.js

@@ -28,7 +28,7 @@ Lungo.Boot.Events = (function(lng, undefined) {
     var init = function() {
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
-        lng.dom(SELECTORS.INPUT_CHECKBOX).touch(_changeCheckboxValue);
+        // lng.dom(SELECTORS.INPUT_CHECKBOX).tap(_changeCheckboxValue);
     };
 
     var _loadTarget = function(event) {