diff --git a/.gitignore b/.gitignore index 335b4f2d8d..42da0c25b9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .DS_Store -*.sw[mpcod] +*.sw[mnpcod] .sass-cache/ framework.sublime-project diff --git a/dist/framework.css b/dist/framework.css index eb90b0e65f..99fba5cdd9 100644 --- a/dist/framework.css +++ b/dist/framework.css @@ -428,8 +428,8 @@ main { color: #333333; text-decoration: none; } .button-default.active, .button-default:active { - background-color: #e6e6e6; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #ebebeb; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #e1e1e1; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #4581e4; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #3dc8e0; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #73b447; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #edaa1a; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #d43926; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #303030; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); border-color: black; } .list-divider { diff --git a/example/cordova/iOS/CodiqaProject.xcodeproj/project.xcworkspace/xcuserdata/driftyadmin.xcuserdatad/UserInterfaceState.xcuserstate b/example/cordova/iOS/CodiqaProject.xcodeproj/project.xcworkspace/xcuserdata/driftyadmin.xcuserdatad/UserInterfaceState.xcuserstate index 3d4288f734..d745fe98fb 100644 Binary files a/example/cordova/iOS/CodiqaProject.xcodeproj/project.xcworkspace/xcuserdata/driftyadmin.xcuserdatad/UserInterfaceState.xcuserstate and b/example/cordova/iOS/CodiqaProject.xcodeproj/project.xcworkspace/xcuserdata/driftyadmin.xcuserdatad/UserInterfaceState.xcuserstate differ diff --git a/example/cordova/iOS/www/css/framework.css b/example/cordova/iOS/www/css/framework.css index eb90b0e65f..99fba5cdd9 100644 --- a/example/cordova/iOS/www/css/framework.css +++ b/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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #ebebeb; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #e1e1e1; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #4581e4; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #3dc8e0; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #73b447; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #edaa1a; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #d43926; + 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; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); + background-color: #303030; + box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); border-color: black; } .list-divider { diff --git a/example/cordova/iOS/www/index.html b/example/cordova/iOS/www/index.html index d38afadd14..fe7939f67f 100755 --- a/example/cordova/iOS/www/index.html +++ b/example/cordova/iOS/www/index.html @@ -10,7 +10,7 @@
-
+
Panel!
@@ -20,7 +20,8 @@

A whole bunch of content

- Panel + Panel +
diff --git a/example/cordova/iOS/www/js/framework-events.js b/example/cordova/iOS/www/js/framework-events.js index 543eb64fa4..a84e1d1348 100644 --- a/example/cordova/iOS/www/js/framework-events.js +++ b/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('popstate', framework.EventController.handlePopState); + window.addEventListener('click', framework.EventController.handleClick); + //window.addEventListener('popstate', framework.EventController.handlePopState); })(this, document, FM = this.FM || {}); diff --git a/example/cordova/iOS/www/js/framework-gestures.js b/example/cordova/iOS/www/js/framework-gestures.js index a9e494687a..26b7a08bef 100644 --- a/example/cordova/iOS/www/js/framework-gestures.js +++ b/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_vertical : false, + drag_block_horizontal : true, + 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, diff --git a/example/cordova/iOS/www/js/framework-panel.js b/example/cordova/iOS/www/js/framework-panel.js index bdce6bd6ee..2f2ff18c11 100644 --- a/example/cordova/iOS/www/js/framework-panel.js +++ b/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 || {}); diff --git a/example/events.html b/example/events.html index 1dc83e3fbd..302f297f9b 100644 --- a/example/events.html +++ b/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; + }
Tap me! Swipe me! +
+
Tap to remove me
+
+ +
+
diff --git a/example/events.js b/example/events.js index dba0246e7c..714ee65e92 100644 --- a/example/events.js +++ b/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({ diff --git a/example/events/drag.html b/example/events/drag.html new file mode 100644 index 0000000000..dd2b31bf65 --- /dev/null +++ b/example/events/drag.html @@ -0,0 +1,35 @@ + + + + Example + + + + + + + +
+
Drag me around!
+
+ + + + + + diff --git a/example/panels.html b/example/panels.html index 74e7beb920..2b4a41810d 100644 --- a/example/panels.html +++ b/example/panels.html @@ -13,7 +13,7 @@
-
+
Panel!
@@ -23,7 +23,7 @@

A whole bunch of content

- Panel + Panel
diff --git a/js/framework/framework-events.js b/js/framework/framework-events.js index 543eb64fa4..a84e1d1348 100644 --- a/js/framework/framework-events.js +++ b/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('popstate', framework.EventController.handlePopState); + window.addEventListener('click', framework.EventController.handleClick); + //window.addEventListener('popstate', framework.EventController.handlePopState); })(this, document, FM = this.FM || {}); diff --git a/js/framework/framework-gestures.js b/js/framework/framework-gestures.js index a9e494687a..26b7a08bef 100644 --- a/js/framework/framework-gestures.js +++ b/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_vertical : false, + drag_block_horizontal : true, + 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, diff --git a/js/framework/framework-panel.js b/js/framework/framework-panel.js index bdce6bd6ee..2f2ff18c11 100644 --- a/js/framework/framework-panel.js +++ b/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 || {});