From 1e6a0c1959ea2cdd126ce511a08949fdb2f0643e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 25 Sep 2013 13:35:10 -0500 Subject: [PATCH] simple dist, global tap listener --- Gruntfile.js | 14 ++++- dist/ionic-angular.js | 113 ++++++++++++++++++++++++++++++++++++++ dist/ionic-simple.js | 58 +++++++++++++++++++ dist/ionic.js | 74 ++++++++++++++----------- ext/simple/events.js | 58 +++++++++++++++++++ ext/simple/init.js | 23 -------- ext/simple/toggle.js | 28 ---------- js/events.js | 61 ++++++++++---------- js/gestures.js | 13 ++++- test/alerts.html | 3 + test/button-groups.html | 3 + test/buttons.html | 3 + test/cards.html | 3 + test/footers.html | 3 + test/headers.html | 3 + test/index.html | 7 +-- test/input-radio.html | 3 + test/input-range.html | 3 + test/input-select.html | 3 + test/input-text.html | 3 + test/input-textarea.html | 3 + test/input-toggle.html | 6 +- test/lists.html | 3 + test/menus.html | 6 +- test/modals.html | 3 + test/popovers.html | 3 + test/pull-to-refresh.html | 3 + test/side-menus.html | 4 ++ test/swipe.html | 3 + test/type.html | 3 + 30 files changed, 387 insertions(+), 129 deletions(-) create mode 100644 dist/ionic-angular.js create mode 100644 dist/ionic-simple.js create mode 100644 ext/simple/events.js delete mode 100644 ext/simple/init.js delete mode 100644 ext/simple/toggle.js diff --git a/Gruntfile.js b/Gruntfile.js index 998d244fd3..6e01d917b4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -20,6 +20,18 @@ module.exports = function(grunt) { 'js/controllers/**/*.js' ], dest: 'dist/<%= pkg.name %>.js' + }, + distAngular: { + src: [ + 'ext/angular/src/*.js' + ], + dest: 'dist/<%= pkg.name %>-angular.js' + }, + distSimple: { + src: [ + 'ext/simple/*.js' + ], + dest: 'dist/<%= pkg.name %>-simple.js' } }, jshint: { @@ -43,7 +55,7 @@ module.exports = function(grunt) { }, watch: { scripts: { - files: ['js/**/*.js'], + files: ['js/**/*.js', 'ext/**/*.js'], tasks: ['concat'], options: { spawn: false diff --git a/dist/ionic-angular.js b/dist/ionic-angular.js new file mode 100644 index 0000000000..159e50fb5f --- /dev/null +++ b/dist/ionic-angular.js @@ -0,0 +1,113 @@ +angular.module('ionic.ui.content', {}) + +.directive('content', function() { + return { + restrict: 'E', + replace: true, + template: '
' + } +}); +;angular.module('ionic.ui.tabbar', {}) + +.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) { + console.log('Tab controller'); + var tabs = $scope.tabs = []; + + + $scope.selectTab = function(index) { + }; + $scope.beforeTabSelect = function(index) { + }; + $scope.tabSelected = function(index) { + }; + + this.addTab = function(tab) { + tabs.push(tab); + }; + + this.getSelectedTabIndex = function() { + return $scope.selectedIndex; + }; + + this.selectTabAtIndex = function(index) { + $scope.selectedIndex = index; + console.log('Scope selected tab is', index); + }; + + this.getNumTabs = function() { + return tabs.length; + }; +}]) + +.directive('tabBar', function() { + return { + restrict: 'E', + replace: true, + scope: {}, + transclude: true, + controller: 'TabBarCtrl', + //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html', + template: '
', + } +}) + +.directive('tabs', function() { + return { + restrict: 'E', + replace: true, + require: '^tabBar', + transclude: true, + template: '' + } +}) + +.directive('tabItem', function() { + return { + restrict: 'E', + replace: true, + require: '^tabBar', + scope: { + text: '@', + icon: '@', + active: '=', + tabSelected: '@', + }, + compile: function(element, attrs, transclude) { + return function(scope, element, attrs, tabBarCtrl) { + var getActive, setActive; + + scope.$watch('active', function(active) { + console.log('ACTIVE CHANGED', active); + }); + }; + }, + link: function(scope, element, attrs, tabBarCtrl) { + + // Store the index of this list item, which + // specifies which tab item it is + scope.tabIndex = element.index(); + + scope.active = true; + + scope.selectTab = function(index) { + console.log('SELECT TAB', index); + tabBarCtrl.selectTabAtIndex(index); + }; + + tabBarCtrl.addTab(scope); + }, + template: '
  • ' + + '' + + '' + + '{{text}}' + + '
    • ' + } +}); + diff --git a/dist/ionic-simple.js b/dist/ionic-simple.js new file mode 100644 index 0000000000..2b014a9c83 --- /dev/null +++ b/dist/ionic-simple.js @@ -0,0 +1,58 @@ +(function(window, document, ionic) { + + // polyfill use to simulate native "tap" + function inputTapPolyfill(ele, e) { + if(ele.type === "radio" || ele.type === "checkbox") { + ele.checked = !ele.checked; + } else if(ele.type === "submit" || ele.type === "button") { + ele.click(); + } else { + ele.focus(); + } + e.stopPropagation(); + e.preventDefault(); + return false; + } + + function tapPolyfill(e) { + // evaluate the actual source event, not the created event by gestures.js + if(!e.gesture) return; + + var + e = e.gesture.srcEvent, + ele = e.target; + + if(!e) return; + + while(ele) { + if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) { + return inputTapPolyfill(ele, e); + } else if( ele.tagName === "LABEL" ) { + if(ele.control) { + return inputTapPolyfill(ele.control, e); + } + } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) { + ele.click(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + ele = ele.parentElement; + } + + // they didn't tap one of the above elements + // if the currently active element is an input, and they tapped outside + // of the current input, then unset its focus (blur) so the keyboard goes away + var activeElement = document.activeElement; + if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) { + activeElement.blur(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + } + + // global tap event listener polyfill for HTML elements that were "tapped" by the user + ionic.on("tap", tapPolyfill, window); + +})(this, document, ionic); diff --git a/dist/ionic.js b/dist/ionic.js index 15a752b57a..b5c841d631 100644 --- a/dist/ionic.js +++ b/dist/ionic.js @@ -150,38 +150,38 @@ if ( document.readyState === "complete" ) { gesture.off(type, callback); }, - // With a click event, we need to check the target - // and if it's an internal target that doesn't want - // a click, cancel it - handleClick: function(e) { - var target = e.target; + // // With a click event, we need to check the target + // // and if it's an internal target that doesn't want + // // a click, cancel it + // handleClick: function(e) { + // var target = e.target; - if(ionic.Gestures.HAS_TOUCHEVENTS) { - // We don't allow any clicks on mobile - e.preventDefault(); - return false; - } + // if(ionic.Gestures.HAS_TOUCHEVENTS) { + // // We don't allow any clicks on mobile + // e.preventDefault(); + // return false; + // } - if ( - ! target - || e.which > 1 - || e.metaKey - || e.ctrlKey - //|| isScrolling - // || location.protocol !== target.protocol - // || location.host !== target.host - // // Not sure abotu this one - // //|| !target.hash && /#/.test(target.href) - // || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') - //|| target.getAttribute('data-ignore') == 'push' - ) { - // Allow it - return; - } - // We need to cancel this one - e.preventDefault(); + // if ( + // ! target + // || e.which > 1 + // || e.metaKey + // || e.ctrlKey + // //|| isScrolling + // // || location.protocol !== target.protocol + // // || location.host !== target.host + // // // Not sure abotu this one + // // //|| !target.hash && /#/.test(target.href) + // // || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') + // //|| target.getAttribute('data-ignore') == 'push' + // ) { + // // Allow it + // return; + // } + // // We need to cancel this one + // e.preventDefault(); - }, + // }, handlePopState: function(event) { console.log("EVENT: popstate", event); @@ -196,8 +196,9 @@ if ( document.readyState === "complete" ) { ionic.onGesture = function() { ionic.EventController.onGesture.apply(ionic.EventController.onGesture, arguments); } ionic.offGesture = function() { ionic.EventController.offGesture.apply(ionic.EventController.offGesture, arguments); } + // DISABLING FOR NOW. THE TAP CODE AT THE EXT LEVEL SHOULD BE DOING THIS // Set up various listeners - window.addEventListener('click', ionic.EventController.handleClick); + //window.addEventListener('click', ionic.EventController.handleClick); })(window.ionic); ;/** @@ -292,9 +293,16 @@ if ( document.readyState === "complete" ) { ionic.Gestures.event.determineEventTypes(); // Register all gestures inside ionic.Gestures.gestures - for(var name in ionic.Gestures.gestures) { - if(ionic.Gestures.gestures.hasOwnProperty(name)) { - ionic.Gestures.detection.register(ionic.Gestures.gestures[name]); + if(this === this.window) { + // this is a window, only add these + ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap); + + } else { + // everything else but the window + for(var name in ionic.Gestures.gestures) { + if(ionic.Gestures.gestures.hasOwnProperty(name)) { + ionic.Gestures.detection.register(ionic.Gestures.gestures[name]); + } } } diff --git a/ext/simple/events.js b/ext/simple/events.js new file mode 100644 index 0000000000..2b014a9c83 --- /dev/null +++ b/ext/simple/events.js @@ -0,0 +1,58 @@ +(function(window, document, ionic) { + + // polyfill use to simulate native "tap" + function inputTapPolyfill(ele, e) { + if(ele.type === "radio" || ele.type === "checkbox") { + ele.checked = !ele.checked; + } else if(ele.type === "submit" || ele.type === "button") { + ele.click(); + } else { + ele.focus(); + } + e.stopPropagation(); + e.preventDefault(); + return false; + } + + function tapPolyfill(e) { + // evaluate the actual source event, not the created event by gestures.js + if(!e.gesture) return; + + var + e = e.gesture.srcEvent, + ele = e.target; + + if(!e) return; + + while(ele) { + if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) { + return inputTapPolyfill(ele, e); + } else if( ele.tagName === "LABEL" ) { + if(ele.control) { + return inputTapPolyfill(ele.control, e); + } + } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) { + ele.click(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + ele = ele.parentElement; + } + + // they didn't tap one of the above elements + // if the currently active element is an input, and they tapped outside + // of the current input, then unset its focus (blur) so the keyboard goes away + var activeElement = document.activeElement; + if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) { + activeElement.blur(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + } + + // global tap event listener polyfill for HTML elements that were "tapped" by the user + ionic.on("tap", tapPolyfill, window); + +})(this, document, ionic); diff --git a/ext/simple/init.js b/ext/simple/init.js deleted file mode 100644 index 376181c993..0000000000 --- a/ext/simple/init.js +++ /dev/null @@ -1,23 +0,0 @@ -(function(window, document, ionic) { - - // add tap events to links - function onLinkTap(e) { - this.click(); - } - - function addTapToLinks() { - for(var x = 0; x < document.links.length; x++) { - if(!document.links[x]._hasTap) { - ionic.on('tap', onLinkTap, document.links[x]); - document.links[x]._hasTap = true; - } - } - } - - ionic.ResetTap = function() { - addTapToLinks() - }; - - ionic.ResetTap(); - -})(this, document, ionic); diff --git a/ext/simple/toggle.js b/ext/simple/toggle.js deleted file mode 100644 index 63042f1ade..0000000000 --- a/ext/simple/toggle.js +++ /dev/null @@ -1,28 +0,0 @@ -(function(window) { - - iconic = window.iconic || {}; - - // add tap events to links - function onToggleTap(e) { - if(e.currentTarget.control) { - e.currentTarget.control.checked = !e.currentTarget.control.checked; - e.stopPropagation(); - } - } - - ionic.ResetToggles = function() { - var - x, - toggles = document.getElementsByClassName("toggle"); - - for(x = 0; x < toggles.length; x++) { - if(!toggles[x].hasTap) { - ionic.on('tap', onToggleTap, toggles[x]); - toggles[x].hasTap = true; - } - } - }; - - ionic.ResetToggles(); - -})(this); diff --git a/js/events.js b/js/events.js index 62f03f992b..cf3f8f301e 100644 --- a/js/events.js +++ b/js/events.js @@ -57,38 +57,38 @@ gesture.off(type, callback); }, - // With a click event, we need to check the target - // and if it's an internal target that doesn't want - // a click, cancel it - handleClick: function(e) { - var target = e.target; + // // With a click event, we need to check the target + // // and if it's an internal target that doesn't want + // // a click, cancel it + // handleClick: function(e) { + // var target = e.target; - if(ionic.Gestures.HAS_TOUCHEVENTS) { - // We don't allow any clicks on mobile - e.preventDefault(); - return false; - } + // if(ionic.Gestures.HAS_TOUCHEVENTS) { + // // We don't allow any clicks on mobile + // e.preventDefault(); + // return false; + // } - if ( - ! target - || e.which > 1 - || e.metaKey - || e.ctrlKey - //|| isScrolling - // || location.protocol !== target.protocol - // || location.host !== target.host - // // Not sure abotu this one - // //|| !target.hash && /#/.test(target.href) - // || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') - //|| target.getAttribute('data-ignore') == 'push' - ) { - // Allow it - return; - } - // We need to cancel this one - e.preventDefault(); + // if ( + // ! target + // || e.which > 1 + // || e.metaKey + // || e.ctrlKey + // //|| isScrolling + // // || location.protocol !== target.protocol + // // || location.host !== target.host + // // // Not sure abotu this one + // // //|| !target.hash && /#/.test(target.href) + // // || target.hash && target.href.replace(target.hash, '') === location.href.replace(location.hash, '') + // //|| target.getAttribute('data-ignore') == 'push' + // ) { + // // Allow it + // return; + // } + // // We need to cancel this one + // e.preventDefault(); - }, + // }, handlePopState: function(event) { console.log("EVENT: popstate", event); @@ -103,7 +103,8 @@ ionic.onGesture = function() { ionic.EventController.onGesture.apply(ionic.EventController.onGesture, arguments); } ionic.offGesture = function() { ionic.EventController.offGesture.apply(ionic.EventController.offGesture, arguments); } + // DISABLING FOR NOW. THE TAP CODE AT THE EXT LEVEL SHOULD BE DOING THIS // Set up various listeners - window.addEventListener('click', ionic.EventController.handleClick); + //window.addEventListener('click', ionic.EventController.handleClick); })(window.ionic); diff --git a/js/gestures.js b/js/gestures.js index 7dbb356e2e..53efe0f313 100644 --- a/js/gestures.js +++ b/js/gestures.js @@ -90,9 +90,16 @@ ionic.Gestures.event.determineEventTypes(); // Register all gestures inside ionic.Gestures.gestures - for(var name in ionic.Gestures.gestures) { - if(ionic.Gestures.gestures.hasOwnProperty(name)) { - ionic.Gestures.detection.register(ionic.Gestures.gestures[name]); + if(this === this.window) { + // this is a window, only add these + ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap); + + } else { + // everything else but the window + for(var name in ionic.Gestures.gestures) { + if(ionic.Gestures.gestures.hasOwnProperty(name)) { + ionic.Gestures.detection.register(ionic.Gestures.gestures[name]); + } } } diff --git a/test/alerts.html b/test/alerts.html index 57d097c49c..4a73569d4c 100644 --- a/test/alerts.html +++ b/test/alerts.html @@ -39,6 +39,9 @@ + + + diff --git a/test/button-groups.html b/test/button-groups.html index 21ee298ea3..70c9307d72 100644 --- a/test/button-groups.html +++ b/test/button-groups.html @@ -29,6 +29,9 @@ + + + diff --git a/test/buttons.html b/test/buttons.html index 164ea342d7..b51cbacf65 100644 --- a/test/buttons.html +++ b/test/buttons.html @@ -31,6 +31,9 @@ + + + diff --git a/test/cards.html b/test/cards.html index 9360938280..2e7eb06818 100644 --- a/test/cards.html +++ b/test/cards.html @@ -22,6 +22,9 @@ + + + diff --git a/test/footers.html b/test/footers.html index 4d95e2fff8..4a3437002e 100644 --- a/test/footers.html +++ b/test/footers.html @@ -98,6 +98,9 @@ + + + diff --git a/test/headers.html b/test/headers.html index e06c4127b1..b8c0f0ecb1 100644 --- a/test/headers.html +++ b/test/headers.html @@ -47,6 +47,9 @@ + + + diff --git a/test/index.html b/test/index.html index e2bc33e500..d407da003b 100644 --- a/test/index.html +++ b/test/index.html @@ -47,10 +47,9 @@ document.links[x].href += "?r=" + Math.random(); } - - - - + + + diff --git a/test/input-radio.html b/test/input-radio.html index 9643537b50..07cb78377f 100644 --- a/test/input-radio.html +++ b/test/input-radio.html @@ -67,6 +67,9 @@ + + + diff --git a/test/input-range.html b/test/input-range.html index 7d4bc03354..b8a0732f28 100644 --- a/test/input-range.html +++ b/test/input-range.html @@ -32,6 +32,9 @@ + + + diff --git a/test/input-select.html b/test/input-select.html index 7e1c38ca60..74927a1f82 100644 --- a/test/input-select.html +++ b/test/input-select.html @@ -35,6 +35,9 @@ + + + diff --git a/test/input-text.html b/test/input-text.html index cb7d827e82..5f9423095c 100644 --- a/test/input-text.html +++ b/test/input-text.html @@ -258,6 +258,9 @@ + + + diff --git a/test/input-textarea.html b/test/input-textarea.html index 0f5f2a15f0..cf6a5b53b8 100644 --- a/test/input-textarea.html +++ b/test/input-textarea.html @@ -114,6 +114,9 @@ + + + diff --git a/test/input-toggle.html b/test/input-toggle.html index a4d9cbdd07..a9362fc327 100644 --- a/test/input-toggle.html +++ b/test/input-toggle.html @@ -55,10 +55,8 @@ - - - - + + diff --git a/test/lists.html b/test/lists.html index cff228c11f..c6e96b1aa4 100644 --- a/test/lists.html +++ b/test/lists.html @@ -76,6 +76,9 @@ + + + diff --git a/test/menus.html b/test/menus.html index 84b4867262..8add2e37f5 100644 --- a/test/menus.html +++ b/test/menus.html @@ -249,9 +249,9 @@ + + + - - - diff --git a/test/modals.html b/test/modals.html index 25a5e1f3c7..05709cd4df 100644 --- a/test/modals.html +++ b/test/modals.html @@ -57,5 +57,8 @@ return false; }, closer); + + + diff --git a/test/popovers.html b/test/popovers.html index 82ce9d9465..04fd939126 100644 --- a/test/popovers.html +++ b/test/popovers.html @@ -22,6 +22,9 @@ + + + diff --git a/test/pull-to-refresh.html b/test/pull-to-refresh.html index 583c89ba80..fb5456a5a6 100644 --- a/test/pull-to-refresh.html +++ b/test/pull-to-refresh.html @@ -28,6 +28,9 @@ + + + diff --git a/test/side-menus.html b/test/side-menus.html index a2fc697d8d..c935297694 100644 --- a/test/side-menus.html +++ b/test/side-menus.html @@ -72,5 +72,9 @@

    + + + + diff --git a/test/swipe.html b/test/swipe.html index 502b5eb7cb..e704a42f53 100644 --- a/test/swipe.html +++ b/test/swipe.html @@ -22,6 +22,9 @@ + + + diff --git a/test/type.html b/test/type.html index 3b923bf2d0..515da6f853 100644 --- a/test/type.html +++ b/test/type.html @@ -30,6 +30,9 @@ + + +