javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

simple dist, global tap listener

Browse Source
This commit is contained in:
Adam Bradley
2013-09-25 13:35:10 -05:00
parent 37d708b05e
commit 1e6a0c1959
30 changed files with 387 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
Gruntfile.js
View File

@ -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

113
dist/ionic-angular.js vendored Normal file
View File

@ -0,0 +1,113 @@
angular.module('ionic.ui.content', {})
.directive('content', function() {
return {
restrict: 'E',
replace: true,
template: '<div class="content"></div>'
}
});
;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: '<div class="view-wrapper" ng-transclude></div>',
}
})
.directive('tabs', function() {
return {
restrict: 'E',
replace: true,
require: '^tabBar',
transclude: true,
template: '<footer class="bar bar-tabs bar-footer bar-success">' +
'<nav class="tabs">' +
'<ul class="tabs-inner">' +
'<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' +
'</tab-item>' +
'</ul>' +
'</nav>' +
'</footer>'
}
})
.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: '<li class="tab-item" ng-class="{active:active}">' +
'<a href="#" ng-click="selectTab(tabIndex)">' +
'<i class="{{icon}}"></i>' +
'{{text}}' +
'</a></li>'
}
});

58
dist/ionic-simple.js vendored Normal file
View File

@ -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);

74
dist/ionic.js vendored
View File

@ -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]);
}
}
}

58
ext/simple/events.js Normal file
View File

@ -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);

23
ext/simple/init.js
View File

@ -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);

28
ext/simple/toggle.js
View File

@ -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);

61
js/events.js
View File

@ -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);

13
js/gestures.js
View File

@ -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]);
}
}
}

3
test/alerts.html
View File

@ -40,5 +40,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/button-groups.html
View File

@ -30,5 +30,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/buttons.html
View File

@ -32,5 +32,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/cards.html
View File

@ -23,5 +23,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/footers.html
View File

@ -99,5 +99,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/headers.html
View File

@ -48,5 +48,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

5
test/index.html
View File

@ -48,9 +48,8 @@
}
</script>
<script src="../js/gestures.js"></script>
<script src="../js/events.js"></script>
<script src="../ext/simple/init.js"></script>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/input-radio.html
View File

@ -68,5 +68,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/input-range.html
View File

@ -33,5 +33,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/input-select.html
View File

@ -36,5 +36,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/input-text.html
View File

@ -259,5 +259,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/input-textarea.html
View File

@ -115,5 +115,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

6
test/input-toggle.html
View File

@ -55,10 +55,8 @@
</section>
<script src="../js/gestures.js"></script>
<script src="../js/events.js"></script>
<script src="../ext/simple/init.js"></script>
<script src="../ext/simple/toggle.js"></script>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
<!-- for testing only -->

3
test/lists.html
View File

@ -77,5 +77,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

4
test/menus.html
View File

@ -250,8 +250,8 @@
This is my other left side panel!
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
<script src="../../js/ionic-panel.js"></script>
<script src="../../connectors/default/panel-handler.js"></script>
</body>
</html>

3
test/modals.html
View File

@ -57,5 +57,8 @@
return false;
}, closer);
</script>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/popovers.html
View File

@ -23,5 +23,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/pull-to-refresh.html
View File

@ -29,5 +29,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

4
test/side-menus.html
View File

@ -72,5 +72,9 @@
<h3 class="title"></h3>
</footer>
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/swipe.html
View File

@ -23,5 +23,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>

3
test/type.html
View File

@ -31,5 +31,8 @@
</section>
<script src="../dist/ionic.js"></script>
<script src="../dist/ionic-simple.js"></script>
</body>
</html>