Added working drag, fixed scrolling on drag, fixed cordova example

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-*.sw[mpcod]
+*.sw[mnpcod]
 
 .sass-cache/
 framework.sublime-project

dist/framework.css

@@ -428,8 +428,8 @@ main {
     color: #333333;
     text-decoration: none; }
   .button-default.active, .button-default:active {
-    background-color: #e6e6e6;
+    background-color: #ebebeb;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #c4c4c4; }
 
 .button-secondary {
@@ -440,8 +440,8 @@ main {
     color: #333333;
     text-decoration: none; }
   .button-secondary.active, .button-secondary:active {
-    background-color: gainsboro;
+    background-color: #e1e1e1;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #b3b3b3; }
 
 .button-primary {
@@ -452,8 +452,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-primary.active, .button-primary:active {
-    background-color: #3d7be2;
+    background-color: #4581e4;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #3d67ae; }
 
 .button-info {
@@ -464,8 +464,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-info.active, .button-info:active {
-    background-color: #34c6df;
+    background-color: #3dc8e0;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #3998a9; }
 
 .button-success {
@@ -476,8 +476,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-success.active, .button-success:active {
-    background-color: #6fac45;
+    background-color: #73b447;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #597e41; }
 
 .button-warning {
@@ -488,8 +488,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-warning.active, .button-warning:active {
-    background-color: #eba612;
+    background-color: #edaa1a;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #a47a21; }
 
 .button-danger {
@@ -500,8 +500,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-danger.active, .button-danger:active {
-    background-color: #cc3724;
+    background-color: #d43926;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #94362a; }
 
 .button-dark {
@@ -512,8 +512,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-dark.active, .button-dark:active {
-    background-color: #2b2b2b;
+    background-color: #303030;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: black; }
 
 .list-divider {

example/cordova/iOS/www/css/framework.css

@@ -428,8 +428,8 @@ main {
     color: #333333;
     text-decoration: none; }
   .button-default.active, .button-default:active {
-    background-color: #e6e6e6;
+    background-color: #ebebeb;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #c4c4c4; }
 
 .button-secondary {
@@ -440,8 +440,8 @@ main {
     color: #333333;
     text-decoration: none; }
   .button-secondary.active, .button-secondary:active {
-    background-color: gainsboro;
+    background-color: #e1e1e1;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #b3b3b3; }
 
 .button-primary {
@@ -452,8 +452,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-primary.active, .button-primary:active {
-    background-color: #3d7be2;
+    background-color: #4581e4;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #3d67ae; }
 
 .button-info {
@@ -464,8 +464,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-info.active, .button-info:active {
-    background-color: #34c6df;
+    background-color: #3dc8e0;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #3998a9; }
 
 .button-success {
@@ -476,8 +476,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-success.active, .button-success:active {
-    background-color: #6fac45;
+    background-color: #73b447;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #597e41; }
 
 .button-warning {
@@ -488,8 +488,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-warning.active, .button-warning:active {
-    background-color: #eba612;
+    background-color: #edaa1a;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #a47a21; }
 
 .button-danger {
@@ -500,8 +500,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-danger.active, .button-danger:active {
-    background-color: #cc3724;
+    background-color: #d43926;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: #94362a; }
 
 .button-dark {
@@ -512,8 +512,8 @@ main {
     color: white;
     text-decoration: none; }
   .button-dark.active, .button-dark:active {
-    background-color: #2b2b2b;
+    background-color: #303030;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
+    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12);
     border-color: black; }
 
 .list-divider {

example/cordova/iOS/www/index.html

@@ -10,7 +10,7 @@
 <body>
   <section class="panel-page-container">
     
-    <section data-panel="left-panel" class="panel-content">
+    <section id="this-panel" data-panel="left-panel" class="panel-content">
       Panel!
     </section>
     
@@ -20,7 +20,8 @@
     
     <main class="content-padded has-header">
       <p>A whole bunch of content</p>
-      <a class="button button-primary" data-toggle-panel="left-panel" href="#">Panel</a>
+      <a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
+      
     </main>
     
   </section>

example/cordova/iOS/www/js/framework-events.js

@@ -51,6 +51,12 @@
     handleClick: function(e) {
       var target = e.target;
 
+      if(framework.Gestures.HAS_TOUCHEVENTS) {
+        // We don't allow any clicks on mobile
+        e.preventDefault();
+        return false;
+      }
+
       if (
         !  target
         || e.which > 1
@@ -65,14 +71,11 @@
         //|| target.getAttribute('data-ignore') == 'push'
       ) {
         // Allow it
-        console.log("EVENT: click", e);
         return;
       }
       // We need to cancel this one
       e.preventDefault();
 
-      // TODO: should we do this?
-      // e.stopPropagation();
     },
     
     handlePopState: function(event) {
@@ -89,7 +92,7 @@
   framework.offGesture = framework.EventController.offGesture;
 
   // Set up various listeners
-  window.addEventListener('click', framework.EventController.handleClick);
+	window.addEventListener('click', framework.EventController.handleClick);
-  window.addEventListener('popstate', framework.EventController.handlePopState);
+  //window.addEventListener('popstate', framework.EventController.handlePopState);
 
 })(this, document, FM = this.FM || {});

example/cordova/iOS/www/js/framework-gestures.js

@@ -1176,8 +1176,8 @@
       // prevent default browser behavior when dragging occurs
       // be careful with it, it makes the element a blocking element
       // when you are using the drag gesture, it is a good practice to set this true
-      drag_block_horizontal   : false,
+      drag_block_horizontal   : true,
-      drag_block_vertical     : false,
+      drag_block_vertical     : true,
       // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
       // It disallows vertical directions if the initial direction was horizontal, and vice versa.
       drag_lock_to_axis       : false,

example/cordova/iOS/www/js/framework-panel.js

@@ -6,10 +6,11 @@
   isPanelOpen;
 
   function onTap(e) {
+    var el = e.target;
+    return togglePanel(e, el, el.dataset.togglePanel);
+		
     if(e.target) {
-      el = e.target;
       if(el.dataset.togglePanel) {
-        return togglePanel(e, el, el.dataset.togglePanel);
       }
       while(el.parentElement) {
         el = el.parentElement;
@@ -50,6 +51,6 @@
     }
   }
   
-  framework.on("click", onTap);
+  framework.onGesture("tap", onTap, document.getElementById('open-panel'));
 
 })(this, document, FM = this.FM || {});

example/events.html

@@ -12,12 +12,38 @@
         -webkit-transition: 0.1s ease-in-out all;
         -webkit-transform:translate3d(120%,0,0) ;
       }
+      #remove-box {
+        width: 200px;
+        height: 200px;
+      }
+      .relative {
+        position: relative;
+      }
+      button {
+        width: 100px;
+        height: 100px;
+      }
+      .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        background-color: red;
+      }
     </style>
   </head>
   <body>
     <div class="content content-padded">
       <a href="#" id="tap-button" class="button button-success">Tap me!</a>
       <a href="#" id="swipe-button" class="button button-success">Swipe me!</a>
+      <div id="remove-box" class="relative">
+        <div id="remove-box-overlay" class="overlay">Tap to remove me</div>
+        <form action="/badurl">
+          <button type="submit">Under click</button>
+        </form>
+      </div>
       <div id="event-log"></div>
     </div>
     <script src="../../js/framework/framework-utils.js"></script>

example/events.js

@@ -8,6 +8,24 @@ var logEvent = function(data) {
 
 var tb = document.getElementById('tap-button');
 var sb = document.getElementById('swipe-button');
+var rb = document.getElementById('remove-box-overlay');
+
+window.FM.on('click', function(e) {
+  console.log('GOT CLICK', e);
+  logEvent({
+    type: 'click',
+    event: e
+  });
+}, tb);
+
+window.FM.onGesture('tap', function(e) {
+  e.target.parentNode.removeChild(e.target);
+  console.log('GOT CLICK ON BOX', e);
+  logEvent({
+    type: 'clickbox',
+    event: e
+  });
+}, rb);
 
 window.FM.onGesture('tap', function(e) {
   console.log('GOT TAP', e);
@@ -24,13 +42,6 @@ window.FM.onGesture('touch', function(e) {
   });
 }, tb);
 
-window.FM.onGesture('tap', function(e) {
-  console.log('GOT TAP', e);
-  logEvent({
-    type: 'tap',
-    event: e
-  });
-}, tb);
 window.FM.onGesture('release', function(e) {
   console.log('GOT RELEASE', e);
   logEvent({

example/events/drag.html

@@ -0,0 +1,35 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../dist/framework.css">
+    <style>
+      #drag-me {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="content content-padded">
+      <div id="drag-me">Drag me around!</div>
+    </div>
+    <script src="../../js/framework/framework-utils.js"></script>
+    <script src="../../js/framework/framework-gestures.js"></script>
+    <script src="../../js/framework/framework-events.js"></script>
+    <script>
+      var db = document.getElementById('drag-me');
+      window.FM.onGesture('drag', function(e) {
+        console.log('Dragging', e);
+        var touch = e.gesture.touches[0];
+        db.style.left = touch.pageX-50;
+        db.style.top = touch.pageY-50;
+      }, db);
+    </script>
+  </body>
+</html>

example/panels.html

@@ -13,7 +13,7 @@
 
     <section class="panel-page-container">
 
-      <section data-panel="left-panel" class="panel-content">
+      <section id="this-panel" data-panel="left-panel" class="panel-content">
         Panel!
       </section>
 
@@ -23,7 +23,7 @@
 
       <main class="content-padded has-header">
         <p>A whole bunch of content</p>
-        <a class="button button-primary" data-toggle-panel="left-panel" href="#">Panel</a>
+        <a class="button button-primary" id="open-panel" data-toggle-panel="left-panel" href="#">Panel</a>
       </main>
 
     </section>

js/framework/framework-events.js

@@ -51,6 +51,12 @@
     handleClick: function(e) {
       var target = e.target;
 
+      if(framework.Gestures.HAS_TOUCHEVENTS) {
+        // We don't allow any clicks on mobile
+        e.preventDefault();
+        return false;
+      }
+
       if (
         !  target
         || e.which > 1
@@ -65,14 +71,11 @@
         //|| target.getAttribute('data-ignore') == 'push'
       ) {
         // Allow it
-        console.log("EVENT: click", e);
         return;
       }
       // We need to cancel this one
       e.preventDefault();
 
-      // TODO: should we do this?
-      // e.stopPropagation();
     },
     
     handlePopState: function(event) {
@@ -89,7 +92,7 @@
   framework.offGesture = framework.EventController.offGesture;
 
   // Set up various listeners
-  window.addEventListener('click', framework.EventController.handleClick);
+	window.addEventListener('click', framework.EventController.handleClick);
-  window.addEventListener('popstate', framework.EventController.handlePopState);
+  //window.addEventListener('popstate', framework.EventController.handlePopState);
 
 })(this, document, FM = this.FM || {});

js/framework/framework-gestures.js

@@ -1176,8 +1176,8 @@
       // prevent default browser behavior when dragging occurs
       // be careful with it, it makes the element a blocking element
       // when you are using the drag gesture, it is a good practice to set this true
-      drag_block_horizontal   : false,
+      drag_block_horizontal   : true,
-      drag_block_vertical     : false,
+      drag_block_vertical     : true,
       // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
       // It disallows vertical directions if the initial direction was horizontal, and vice versa.
       drag_lock_to_axis       : false,

js/framework/framework-panel.js

@@ -6,10 +6,11 @@
   isPanelOpen;
 
   function onTap(e) {
+    var el = e.target;
+    return togglePanel(e, el, el.dataset.togglePanel);
+		
     if(e.target) {
-      el = e.target;
       if(el.dataset.togglePanel) {
-        return togglePanel(e, el, el.dataset.togglePanel);
       }
       while(el.parentElement) {
         el = el.parentElement;
@@ -50,6 +51,6 @@
     }
   }
   
-  framework.on("click", onTap);
+  framework.onGesture("tap", onTap, document.getElementById('open-panel'));
 
 })(this, document, FM = this.FM || {});