mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
3029 lines
89 KiB
JavaScript
3029 lines
89 KiB
JavaScript
/*
|
|
Copyright 2013 Drifty Co.
|
|
http://drifty.com/
|
|
|
|
Ionic - an amazing HTML5 mobile app framework.
|
|
http://ionicframework.com/
|
|
|
|
By @maxlynch, @helloimben, @adamdbradley <3
|
|
|
|
Licensed under the MIT license. Please see LICENSE for more information.
|
|
*/
|
|
;
|
|
|
|
// Create namespaces
|
|
window.ionic = {
|
|
controllers: {},
|
|
views: {}
|
|
};
|
|
;
|
|
|
|
(function(ionic) {
|
|
ionic.Animator = {
|
|
animate: function(element, className, fn) {
|
|
return {
|
|
leave: function() {
|
|
var endFunc = function() {
|
|
console.log('Animation finished for element', element);
|
|
|
|
element.classList.remove('leave');
|
|
element.classList.remove('leave-active');
|
|
|
|
element.removeEventListener('webkitTransitionEnd', endFunc);
|
|
element.removeEventListener('transitionEnd', endFunc);
|
|
};
|
|
element.addEventListener('webkitTransitionEnd', endFunc);
|
|
element.addEventListener('transitionEnd', endFunc);
|
|
|
|
element.classList.add('leave');
|
|
element.classList.add('leave-active');
|
|
return this;
|
|
},
|
|
enter: function() {
|
|
var endFunc = function() {
|
|
console.log('Animation finished for element', element);
|
|
|
|
element.classList.remove('enter');
|
|
element.classList.remove('enter-active');
|
|
|
|
element.removeEventListener('webkitTransitionEnd', endFunc);
|
|
element.removeEventListener('transitionEnd', endFunc);
|
|
};
|
|
element.addEventListener('webkitTransitionEnd', endFunc);
|
|
element.addEventListener('transitionEnd', endFunc);
|
|
|
|
element.classList.add('enter');
|
|
element.classList.add('enter-active');
|
|
|
|
return this;
|
|
}
|
|
};
|
|
}
|
|
};
|
|
})(ionic);
|
|
;
|
|
/**
|
|
* ion-events.js
|
|
*
|
|
* Author: Max Lynch <max@drifty.com>
|
|
*
|
|
* Framework events handles various mobile browser events, and
|
|
* detects special events like tap/swipe/etc. and emits them
|
|
* as custom events that can be used in an app.
|
|
*
|
|
* Portions lovingly adapted from github.com/maker/ratchet and github.com/alexgibson/tap.js - thanks guys!
|
|
*/
|
|
|
|
(function(ionic) {
|
|
ionic.EventController = {
|
|
VIRTUALIZED_EVENTS: ['tap', 'swipe', 'swiperight', 'swipeleft', 'drag', 'hold', 'release'],
|
|
|
|
// Trigger a new event
|
|
trigger: function(eventType, data) {
|
|
// TODO: Do we need to use the old-school createEvent stuff?
|
|
var event = new CustomEvent(eventType, data);
|
|
|
|
// Make sure to trigger the event on the given target, or dispatch it from
|
|
// the window if we don't have an event target
|
|
data && data.target && data.target.dispatchEvent(event) || window.dispatchEvent(event);
|
|
},
|
|
|
|
// Bind an event
|
|
on: function(type, callback, element) {
|
|
var e = element || window;
|
|
|
|
// Bind a gesture if it's a virtual event
|
|
for(var i = 0, j = this.VIRTUALIZED_EVENTS.length; i < j; i++) {
|
|
if(type == this.VIRTUALIZED_EVENTS[i]) {
|
|
var gesture = new ionic.Gesture(element);
|
|
gesture.on(type, callback);
|
|
return gesture;
|
|
}
|
|
}
|
|
|
|
// Otherwise bind a normal event
|
|
e.addEventListener(type, callback);
|
|
},
|
|
|
|
off: function(type, callback, element) {
|
|
element.removeEventListener(type, callback);
|
|
},
|
|
|
|
// Register for a new gesture event on the given element
|
|
onGesture: function(type, callback, element) {
|
|
var gesture = new ionic.Gesture(element);
|
|
gesture.on(type, callback);
|
|
return gesture;
|
|
},
|
|
|
|
// Unregister a previous gesture event
|
|
offGesture: function(gesture, type, callback) {
|
|
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;
|
|
|
|
// 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();
|
|
|
|
// },
|
|
|
|
handlePopState: function(event) {
|
|
console.log("EVENT: popstate", event);
|
|
},
|
|
};
|
|
|
|
|
|
// Map some convenient top-level functions for event handling
|
|
ionic.on = function() { ionic.EventController.on.apply(ionic.EventController, arguments); }
|
|
ionic.off = function() { ionic.EventController.off.apply(ionic.EventController, arguments); }
|
|
ionic.trigger = function() { ionic.EventController.trigger.apply(ionic.EventController.trigger, arguments); }
|
|
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.ionic);
|
|
;
|
|
/**
|
|
* Simple gesture controllers with some common gestures that emit
|
|
* gesture events.
|
|
*
|
|
* Ported from github.com/EightMedia/ionic.Gestures.js - thanks!
|
|
*/
|
|
(function(ionic) {
|
|
|
|
/**
|
|
* ionic.Gestures
|
|
* use this to create instances
|
|
* @param {HTMLElement} element
|
|
* @param {Object} options
|
|
* @returns {ionic.Gestures.Instance}
|
|
* @constructor
|
|
*/
|
|
ionic.Gesture = function(element, options) {
|
|
return new ionic.Gestures.Instance(element, options || {});
|
|
};
|
|
|
|
ionic.Gestures = {};
|
|
|
|
// default settings
|
|
ionic.Gestures.defaults = {
|
|
// add styles and attributes to the element to prevent the browser from doing
|
|
// its native behavior. this doesnt prevent the scrolling, but cancels
|
|
// the contextmenu, tap highlighting etc
|
|
// set to false to disable this
|
|
stop_browser_behavior: {
|
|
// this also triggers onselectstart=false for IE
|
|
userSelect: 'none',
|
|
// this makes the element blocking in IE10 >, you could experiment with the value
|
|
// see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
|
|
touchAction: 'none',
|
|
touchCallout: 'none',
|
|
contentZooming: 'none',
|
|
userDrag: 'none',
|
|
tapHighlightColor: 'rgba(0,0,0,0)'
|
|
}
|
|
|
|
// more settings are defined per gesture at gestures.js
|
|
};
|
|
|
|
// detect touchevents
|
|
ionic.Gestures.HAS_POINTEREVENTS = window.navigator.pointerEnabled || window.navigator.msPointerEnabled;
|
|
ionic.Gestures.HAS_TOUCHEVENTS = ('ontouchstart' in window);
|
|
|
|
// dont use mouseevents on mobile devices
|
|
ionic.Gestures.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android|silk/i;
|
|
ionic.Gestures.NO_MOUSEEVENTS = ionic.Gestures.HAS_TOUCHEVENTS && window.navigator.userAgent.match(ionic.Gestures.MOBILE_REGEX);
|
|
|
|
// eventtypes per touchevent (start, move, end)
|
|
// are filled by ionic.Gestures.event.determineEventTypes on setup
|
|
ionic.Gestures.EVENT_TYPES = {};
|
|
|
|
// direction defines
|
|
ionic.Gestures.DIRECTION_DOWN = 'down';
|
|
ionic.Gestures.DIRECTION_LEFT = 'left';
|
|
ionic.Gestures.DIRECTION_UP = 'up';
|
|
ionic.Gestures.DIRECTION_RIGHT = 'right';
|
|
|
|
// pointer type
|
|
ionic.Gestures.POINTER_MOUSE = 'mouse';
|
|
ionic.Gestures.POINTER_TOUCH = 'touch';
|
|
ionic.Gestures.POINTER_PEN = 'pen';
|
|
|
|
// touch event defines
|
|
ionic.Gestures.EVENT_START = 'start';
|
|
ionic.Gestures.EVENT_MOVE = 'move';
|
|
ionic.Gestures.EVENT_END = 'end';
|
|
|
|
// hammer document where the base events are added at
|
|
ionic.Gestures.DOCUMENT = window.document;
|
|
|
|
// plugins namespace
|
|
ionic.Gestures.plugins = {};
|
|
|
|
// if the window events are set...
|
|
ionic.Gestures.READY = false;
|
|
|
|
/**
|
|
* setup events to detect gestures on the document
|
|
*/
|
|
function setup() {
|
|
if(ionic.Gestures.READY) {
|
|
return;
|
|
}
|
|
|
|
// find what eventtypes we add listeners to
|
|
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]);
|
|
}
|
|
}
|
|
|
|
// Add touch events on the document
|
|
ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_MOVE, ionic.Gestures.detection.detect);
|
|
ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_END, ionic.Gestures.detection.detect);
|
|
|
|
// ionic.Gestures is ready...!
|
|
ionic.Gestures.READY = true;
|
|
}
|
|
|
|
/**
|
|
* create new hammer instance
|
|
* all methods should return the instance itself, so it is chainable.
|
|
* @param {HTMLElement} element
|
|
* @param {Object} [options={}]
|
|
* @returns {ionic.Gestures.Instance}
|
|
* @constructor
|
|
*/
|
|
ionic.Gestures.Instance = function(element, options) {
|
|
var self = this;
|
|
|
|
// A null element was passed into the instance, which means
|
|
// whatever lookup was done to find this element failed to find it
|
|
// so we can't listen for events on it.
|
|
if(element === null) {
|
|
console.error('Null element passed to gesture (element does not exist). Not listening for gesture');
|
|
return;
|
|
}
|
|
|
|
// setup ionic.GesturesJS window events and register all gestures
|
|
// this also sets up the default options
|
|
setup();
|
|
|
|
this.element = element;
|
|
|
|
// start/stop detection option
|
|
this.enabled = true;
|
|
|
|
// merge options
|
|
this.options = ionic.Gestures.utils.extend(
|
|
ionic.Gestures.utils.extend({}, ionic.Gestures.defaults),
|
|
options || {});
|
|
|
|
// add some css to the element to prevent the browser from doing its native behavoir
|
|
if(this.options.stop_browser_behavior) {
|
|
ionic.Gestures.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
|
|
}
|
|
|
|
// start detection on touchstart
|
|
ionic.Gestures.event.onTouch(element, ionic.Gestures.EVENT_START, function(ev) {
|
|
if(self.enabled) {
|
|
ionic.Gestures.detection.startDetect(self, ev);
|
|
}
|
|
});
|
|
|
|
// return instance
|
|
return this;
|
|
};
|
|
|
|
|
|
ionic.Gestures.Instance.prototype = {
|
|
/**
|
|
* bind events to the instance
|
|
* @param {String} gesture
|
|
* @param {Function} handler
|
|
* @returns {ionic.Gestures.Instance}
|
|
*/
|
|
on: function onEvent(gesture, handler){
|
|
var gestures = gesture.split(' ');
|
|
for(var t=0; t<gestures.length; t++) {
|
|
this.element.addEventListener(gestures[t], handler, false);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
/**
|
|
* unbind events to the instance
|
|
* @param {String} gesture
|
|
* @param {Function} handler
|
|
* @returns {ionic.Gestures.Instance}
|
|
*/
|
|
off: function offEvent(gesture, handler){
|
|
var gestures = gesture.split(' ');
|
|
for(var t=0; t<gestures.length; t++) {
|
|
this.element.removeEventListener(gestures[t], handler, false);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
/**
|
|
* trigger gesture event
|
|
* @param {String} gesture
|
|
* @param {Object} eventData
|
|
* @returns {ionic.Gestures.Instance}
|
|
*/
|
|
trigger: function triggerEvent(gesture, eventData){
|
|
// create DOM event
|
|
var event = ionic.Gestures.DOCUMENT.createEvent('Event');
|
|
event.initEvent(gesture, true, true);
|
|
event.gesture = eventData;
|
|
|
|
// trigger on the target if it is in the instance element,
|
|
// this is for event delegation tricks
|
|
var element = this.element;
|
|
if(ionic.Gestures.utils.hasParent(eventData.target, element)) {
|
|
element = eventData.target;
|
|
}
|
|
|
|
element.dispatchEvent(event);
|
|
return this;
|
|
},
|
|
|
|
|
|
/**
|
|
* enable of disable hammer.js detection
|
|
* @param {Boolean} state
|
|
* @returns {ionic.Gestures.Instance}
|
|
*/
|
|
enable: function enable(state) {
|
|
this.enabled = state;
|
|
return this;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* this holds the last move event,
|
|
* used to fix empty touchend issue
|
|
* see the onTouch event for an explanation
|
|
* @type {Object}
|
|
*/
|
|
var last_move_event = null;
|
|
|
|
|
|
/**
|
|
* when the mouse is hold down, this is true
|
|
* @type {Boolean}
|
|
*/
|
|
var enable_detect = false;
|
|
|
|
|
|
/**
|
|
* when touch events have been fired, this is true
|
|
* @type {Boolean}
|
|
*/
|
|
var touch_triggered = false;
|
|
|
|
|
|
ionic.Gestures.event = {
|
|
/**
|
|
* simple addEventListener
|
|
* @param {HTMLElement} element
|
|
* @param {String} type
|
|
* @param {Function} handler
|
|
*/
|
|
bindDom: function(element, type, handler) {
|
|
var types = type.split(' ');
|
|
for(var t=0; t<types.length; t++) {
|
|
element.addEventListener(types[t], handler, false);
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* touch events with mouse fallback
|
|
* @param {HTMLElement} element
|
|
* @param {String} eventType like ionic.Gestures.EVENT_MOVE
|
|
* @param {Function} handler
|
|
*/
|
|
onTouch: function onTouch(element, eventType, handler) {
|
|
var self = this;
|
|
|
|
this.bindDom(element, ionic.Gestures.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
|
|
var sourceEventType = ev.type.toLowerCase();
|
|
|
|
// onmouseup, but when touchend has been fired we do nothing.
|
|
// this is for touchdevices which also fire a mouseup on touchend
|
|
if(sourceEventType.match(/mouse/) && touch_triggered) {
|
|
return;
|
|
}
|
|
|
|
// mousebutton must be down or a touch event
|
|
else if( sourceEventType.match(/touch/) || // touch events are always on screen
|
|
sourceEventType.match(/pointerdown/) || // pointerevents touch
|
|
(sourceEventType.match(/mouse/) && ev.which === 1) // mouse is pressed
|
|
){
|
|
enable_detect = true;
|
|
}
|
|
|
|
// mouse isn't pressed
|
|
else if(sourceEventType.match(/mouse/) && ev.which !== 1) {
|
|
enable_detect = false;
|
|
}
|
|
|
|
|
|
// we are in a touch event, set the touch triggered bool to true,
|
|
// this for the conflicts that may occur on ios and android
|
|
if(sourceEventType.match(/touch|pointer/)) {
|
|
touch_triggered = true;
|
|
}
|
|
|
|
// count the total touches on the screen
|
|
var count_touches = 0;
|
|
|
|
// when touch has been triggered in this detection session
|
|
// and we are now handling a mouse event, we stop that to prevent conflicts
|
|
if(enable_detect) {
|
|
// update pointerevent
|
|
if(ionic.Gestures.HAS_POINTEREVENTS && eventType != ionic.Gestures.EVENT_END) {
|
|
count_touches = ionic.Gestures.PointerEvent.updatePointer(eventType, ev);
|
|
}
|
|
// touch
|
|
else if(sourceEventType.match(/touch/)) {
|
|
count_touches = ev.touches.length;
|
|
}
|
|
// mouse
|
|
else if(!touch_triggered) {
|
|
count_touches = sourceEventType.match(/up/) ? 0 : 1;
|
|
}
|
|
|
|
// if we are in a end event, but when we remove one touch and
|
|
// we still have enough, set eventType to move
|
|
if(count_touches > 0 && eventType == ionic.Gestures.EVENT_END) {
|
|
eventType = ionic.Gestures.EVENT_MOVE;
|
|
}
|
|
// no touches, force the end event
|
|
else if(!count_touches) {
|
|
eventType = ionic.Gestures.EVENT_END;
|
|
}
|
|
|
|
// store the last move event
|
|
if(count_touches || last_move_event === null) {
|
|
last_move_event = ev;
|
|
}
|
|
|
|
// trigger the handler
|
|
handler.call(ionic.Gestures.detection, self.collectEventData(element, eventType, self.getTouchList(last_move_event, eventType), ev));
|
|
|
|
// remove pointerevent from list
|
|
if(ionic.Gestures.HAS_POINTEREVENTS && eventType == ionic.Gestures.EVENT_END) {
|
|
count_touches = ionic.Gestures.PointerEvent.updatePointer(eventType, ev);
|
|
}
|
|
}
|
|
|
|
//debug(sourceEventType +" "+ eventType);
|
|
|
|
// on the end we reset everything
|
|
if(!count_touches) {
|
|
last_move_event = null;
|
|
enable_detect = false;
|
|
touch_triggered = false;
|
|
ionic.Gestures.PointerEvent.reset();
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
/**
|
|
* we have different events for each device/browser
|
|
* determine what we need and set them in the ionic.Gestures.EVENT_TYPES constant
|
|
*/
|
|
determineEventTypes: function determineEventTypes() {
|
|
// determine the eventtype we want to set
|
|
var types;
|
|
|
|
// pointerEvents magic
|
|
if(ionic.Gestures.HAS_POINTEREVENTS) {
|
|
types = ionic.Gestures.PointerEvent.getEvents();
|
|
}
|
|
// on Android, iOS, blackberry, windows mobile we dont want any mouseevents
|
|
else if(ionic.Gestures.NO_MOUSEEVENTS) {
|
|
types = [
|
|
'touchstart',
|
|
'touchmove',
|
|
'touchend touchcancel'];
|
|
}
|
|
// for non pointer events browsers and mixed browsers,
|
|
// like chrome on windows8 touch laptop
|
|
else {
|
|
types = [
|
|
'touchstart mousedown',
|
|
'touchmove mousemove',
|
|
'touchend touchcancel mouseup'];
|
|
}
|
|
|
|
ionic.Gestures.EVENT_TYPES[ionic.Gestures.EVENT_START] = types[0];
|
|
ionic.Gestures.EVENT_TYPES[ionic.Gestures.EVENT_MOVE] = types[1];
|
|
ionic.Gestures.EVENT_TYPES[ionic.Gestures.EVENT_END] = types[2];
|
|
},
|
|
|
|
|
|
/**
|
|
* create touchlist depending on the event
|
|
* @param {Object} ev
|
|
* @param {String} eventType used by the fakemultitouch plugin
|
|
*/
|
|
getTouchList: function getTouchList(ev/*, eventType*/) {
|
|
// get the fake pointerEvent touchlist
|
|
if(ionic.Gestures.HAS_POINTEREVENTS) {
|
|
return ionic.Gestures.PointerEvent.getTouchList();
|
|
}
|
|
// get the touchlist
|
|
else if(ev.touches) {
|
|
return ev.touches;
|
|
}
|
|
// make fake touchlist from mouse position
|
|
else {
|
|
ev.indentifier = 1;
|
|
return [ev];
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* collect event data for ionic.Gestures js
|
|
* @param {HTMLElement} element
|
|
* @param {String} eventType like ionic.Gestures.EVENT_MOVE
|
|
* @param {Object} eventData
|
|
*/
|
|
collectEventData: function collectEventData(element, eventType, touches, ev) {
|
|
|
|
// find out pointerType
|
|
var pointerType = ionic.Gestures.POINTER_TOUCH;
|
|
if(ev.type.match(/mouse/) || ionic.Gestures.PointerEvent.matchType(ionic.Gestures.POINTER_MOUSE, ev)) {
|
|
pointerType = ionic.Gestures.POINTER_MOUSE;
|
|
}
|
|
|
|
return {
|
|
center : ionic.Gestures.utils.getCenter(touches),
|
|
timeStamp : new Date().getTime(),
|
|
target : ev.target,
|
|
touches : touches,
|
|
eventType : eventType,
|
|
pointerType : pointerType,
|
|
srcEvent : ev,
|
|
|
|
/**
|
|
* prevent the browser default actions
|
|
* mostly used to disable scrolling of the browser
|
|
*/
|
|
preventDefault: function() {
|
|
if(this.srcEvent.preventManipulation) {
|
|
this.srcEvent.preventManipulation();
|
|
}
|
|
|
|
if(this.srcEvent.preventDefault) {
|
|
this.srcEvent.preventDefault();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* stop bubbling the event up to its parents
|
|
*/
|
|
stopPropagation: function() {
|
|
this.srcEvent.stopPropagation();
|
|
},
|
|
|
|
/**
|
|
* immediately stop gesture detection
|
|
* might be useful after a swipe was detected
|
|
* @return {*}
|
|
*/
|
|
stopDetect: function() {
|
|
return ionic.Gestures.detection.stopDetect();
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
ionic.Gestures.PointerEvent = {
|
|
/**
|
|
* holds all pointers
|
|
* @type {Object}
|
|
*/
|
|
pointers: {},
|
|
|
|
/**
|
|
* get a list of pointers
|
|
* @returns {Array} touchlist
|
|
*/
|
|
getTouchList: function() {
|
|
var self = this;
|
|
var touchlist = [];
|
|
|
|
// we can use forEach since pointerEvents only is in IE10
|
|
Object.keys(self.pointers).sort().forEach(function(id) {
|
|
touchlist.push(self.pointers[id]);
|
|
});
|
|
return touchlist;
|
|
},
|
|
|
|
/**
|
|
* update the position of a pointer
|
|
* @param {String} type ionic.Gestures.EVENT_END
|
|
* @param {Object} pointerEvent
|
|
*/
|
|
updatePointer: function(type, pointerEvent) {
|
|
if(type == ionic.Gestures.EVENT_END) {
|
|
this.pointers = {};
|
|
}
|
|
else {
|
|
pointerEvent.identifier = pointerEvent.pointerId;
|
|
this.pointers[pointerEvent.pointerId] = pointerEvent;
|
|
}
|
|
|
|
return Object.keys(this.pointers).length;
|
|
},
|
|
|
|
/**
|
|
* check if ev matches pointertype
|
|
* @param {String} pointerType ionic.Gestures.POINTER_MOUSE
|
|
* @param {PointerEvent} ev
|
|
*/
|
|
matchType: function(pointerType, ev) {
|
|
if(!ev.pointerType) {
|
|
return false;
|
|
}
|
|
|
|
var types = {};
|
|
types[ionic.Gestures.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == ionic.Gestures.POINTER_MOUSE);
|
|
types[ionic.Gestures.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == ionic.Gestures.POINTER_TOUCH);
|
|
types[ionic.Gestures.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == ionic.Gestures.POINTER_PEN);
|
|
return types[pointerType];
|
|
},
|
|
|
|
|
|
/**
|
|
* get events
|
|
*/
|
|
getEvents: function() {
|
|
return [
|
|
'pointerdown MSPointerDown',
|
|
'pointermove MSPointerMove',
|
|
'pointerup pointercancel MSPointerUp MSPointerCancel'
|
|
];
|
|
},
|
|
|
|
/**
|
|
* reset the list
|
|
*/
|
|
reset: function() {
|
|
this.pointers = {};
|
|
}
|
|
};
|
|
|
|
|
|
ionic.Gestures.utils = {
|
|
/**
|
|
* extend method,
|
|
* also used for cloning when dest is an empty object
|
|
* @param {Object} dest
|
|
* @param {Object} src
|
|
* @parm {Boolean} merge do a merge
|
|
* @returns {Object} dest
|
|
*/
|
|
extend: function extend(dest, src, merge) {
|
|
for (var key in src) {
|
|
if(dest[key] !== undefined && merge) {
|
|
continue;
|
|
}
|
|
dest[key] = src[key];
|
|
}
|
|
return dest;
|
|
},
|
|
|
|
|
|
/**
|
|
* find if a node is in the given parent
|
|
* used for event delegation tricks
|
|
* @param {HTMLElement} node
|
|
* @param {HTMLElement} parent
|
|
* @returns {boolean} has_parent
|
|
*/
|
|
hasParent: function(node, parent) {
|
|
while(node){
|
|
if(node == parent) {
|
|
return true;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return false;
|
|
},
|
|
|
|
|
|
/**
|
|
* get the center of all the touches
|
|
* @param {Array} touches
|
|
* @returns {Object} center
|
|
*/
|
|
getCenter: function getCenter(touches) {
|
|
var valuesX = [], valuesY = [];
|
|
|
|
for(var t= 0,len=touches.length; t<len; t++) {
|
|
valuesX.push(touches[t].pageX);
|
|
valuesY.push(touches[t].pageY);
|
|
}
|
|
|
|
return {
|
|
pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
|
|
pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
|
|
};
|
|
},
|
|
|
|
|
|
/**
|
|
* calculate the velocity between two points
|
|
* @param {Number} delta_time
|
|
* @param {Number} delta_x
|
|
* @param {Number} delta_y
|
|
* @returns {Object} velocity
|
|
*/
|
|
getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
|
|
return {
|
|
x: Math.abs(delta_x / delta_time) || 0,
|
|
y: Math.abs(delta_y / delta_time) || 0
|
|
};
|
|
},
|
|
|
|
|
|
/**
|
|
* calculate the angle between two coordinates
|
|
* @param {Touch} touch1
|
|
* @param {Touch} touch2
|
|
* @returns {Number} angle
|
|
*/
|
|
getAngle: function getAngle(touch1, touch2) {
|
|
var y = touch2.pageY - touch1.pageY,
|
|
x = touch2.pageX - touch1.pageX;
|
|
return Math.atan2(y, x) * 180 / Math.PI;
|
|
},
|
|
|
|
|
|
/**
|
|
* angle to direction define
|
|
* @param {Touch} touch1
|
|
* @param {Touch} touch2
|
|
* @returns {String} direction constant, like ionic.Gestures.DIRECTION_LEFT
|
|
*/
|
|
getDirection: function getDirection(touch1, touch2) {
|
|
var x = Math.abs(touch1.pageX - touch2.pageX),
|
|
y = Math.abs(touch1.pageY - touch2.pageY);
|
|
|
|
if(x >= y) {
|
|
return touch1.pageX - touch2.pageX > 0 ? ionic.Gestures.DIRECTION_LEFT : ionic.Gestures.DIRECTION_RIGHT;
|
|
}
|
|
else {
|
|
return touch1.pageY - touch2.pageY > 0 ? ionic.Gestures.DIRECTION_UP : ionic.Gestures.DIRECTION_DOWN;
|
|
}
|
|
},
|
|
|
|
|
|
/**
|
|
* calculate the distance between two touches
|
|
* @param {Touch} touch1
|
|
* @param {Touch} touch2
|
|
* @returns {Number} distance
|
|
*/
|
|
getDistance: function getDistance(touch1, touch2) {
|
|
var x = touch2.pageX - touch1.pageX,
|
|
y = touch2.pageY - touch1.pageY;
|
|
return Math.sqrt((x*x) + (y*y));
|
|
},
|
|
|
|
|
|
/**
|
|
* calculate the scale factor between two touchLists (fingers)
|
|
* no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
|
|
* @param {Array} start
|
|
* @param {Array} end
|
|
* @returns {Number} scale
|
|
*/
|
|
getScale: function getScale(start, end) {
|
|
// need two fingers...
|
|
if(start.length >= 2 && end.length >= 2) {
|
|
return this.getDistance(end[0], end[1]) /
|
|
this.getDistance(start[0], start[1]);
|
|
}
|
|
return 1;
|
|
},
|
|
|
|
|
|
/**
|
|
* calculate the rotation degrees between two touchLists (fingers)
|
|
* @param {Array} start
|
|
* @param {Array} end
|
|
* @returns {Number} rotation
|
|
*/
|
|
getRotation: function getRotation(start, end) {
|
|
// need two fingers
|
|
if(start.length >= 2 && end.length >= 2) {
|
|
return this.getAngle(end[1], end[0]) -
|
|
this.getAngle(start[1], start[0]);
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
|
|
/**
|
|
* boolean if the direction is vertical
|
|
* @param {String} direction
|
|
* @returns {Boolean} is_vertical
|
|
*/
|
|
isVertical: function isVertical(direction) {
|
|
return (direction == ionic.Gestures.DIRECTION_UP || direction == ionic.Gestures.DIRECTION_DOWN);
|
|
},
|
|
|
|
|
|
/**
|
|
* stop browser default behavior with css props
|
|
* @param {HtmlElement} element
|
|
* @param {Object} css_props
|
|
*/
|
|
stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
|
|
var prop,
|
|
vendors = ['webkit','khtml','moz','Moz','ms','o',''];
|
|
|
|
if(!css_props || !element.style) {
|
|
return;
|
|
}
|
|
|
|
// with css properties for modern browsers
|
|
for(var i = 0; i < vendors.length; i++) {
|
|
for(var p in css_props) {
|
|
if(css_props.hasOwnProperty(p)) {
|
|
prop = p;
|
|
|
|
// vender prefix at the property
|
|
if(vendors[i]) {
|
|
prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
|
|
}
|
|
|
|
// set the style
|
|
element.style[prop] = css_props[p];
|
|
}
|
|
}
|
|
}
|
|
|
|
// also the disable onselectstart
|
|
if(css_props.userSelect == 'none') {
|
|
element.onselectstart = function() {
|
|
return false;
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
ionic.Gestures.detection = {
|
|
// contains all registred ionic.Gestures.gestures in the correct order
|
|
gestures: [],
|
|
|
|
// data of the current ionic.Gestures.gesture detection session
|
|
current: null,
|
|
|
|
// the previous ionic.Gestures.gesture session data
|
|
// is a full clone of the previous gesture.current object
|
|
previous: null,
|
|
|
|
// when this becomes true, no gestures are fired
|
|
stopped: false,
|
|
|
|
|
|
/**
|
|
* start ionic.Gestures.gesture detection
|
|
* @param {ionic.Gestures.Instance} inst
|
|
* @param {Object} eventData
|
|
*/
|
|
startDetect: function startDetect(inst, eventData) {
|
|
// already busy with a ionic.Gestures.gesture detection on an element
|
|
if(this.current) {
|
|
return;
|
|
}
|
|
|
|
this.stopped = false;
|
|
|
|
this.current = {
|
|
inst : inst, // reference to ionic.GesturesInstance we're working for
|
|
startEvent : ionic.Gestures.utils.extend({}, eventData), // start eventData for distances, timing etc
|
|
lastEvent : false, // last eventData
|
|
name : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
|
|
};
|
|
|
|
this.detect(eventData);
|
|
},
|
|
|
|
|
|
/**
|
|
* ionic.Gestures.gesture detection
|
|
* @param {Object} eventData
|
|
*/
|
|
detect: function detect(eventData) {
|
|
if(!this.current || this.stopped) {
|
|
return;
|
|
}
|
|
|
|
// extend event data with calculations about scale, distance etc
|
|
eventData = this.extendEventData(eventData);
|
|
|
|
// instance options
|
|
var inst_options = this.current.inst.options;
|
|
|
|
// call ionic.Gestures.gesture handlers
|
|
for(var g=0,len=this.gestures.length; g<len; g++) {
|
|
var gesture = this.gestures[g];
|
|
|
|
// only when the instance options have enabled this gesture
|
|
if(!this.stopped && inst_options[gesture.name] !== false) {
|
|
// if a handler returns false, we stop with the detection
|
|
if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
|
|
this.stopDetect();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// store as previous event event
|
|
if(this.current) {
|
|
this.current.lastEvent = eventData;
|
|
}
|
|
|
|
// endevent, but not the last touch, so dont stop
|
|
if(eventData.eventType == ionic.Gestures.EVENT_END && !eventData.touches.length-1) {
|
|
this.stopDetect();
|
|
}
|
|
|
|
return eventData;
|
|
},
|
|
|
|
|
|
/**
|
|
* clear the ionic.Gestures.gesture vars
|
|
* this is called on endDetect, but can also be used when a final ionic.Gestures.gesture has been detected
|
|
* to stop other ionic.Gestures.gestures from being fired
|
|
*/
|
|
stopDetect: function stopDetect() {
|
|
// clone current data to the store as the previous gesture
|
|
// used for the double tap gesture, since this is an other gesture detect session
|
|
this.previous = ionic.Gestures.utils.extend({}, this.current);
|
|
|
|
// reset the current
|
|
this.current = null;
|
|
|
|
// stopped!
|
|
this.stopped = true;
|
|
},
|
|
|
|
|
|
/**
|
|
* extend eventData for ionic.Gestures.gestures
|
|
* @param {Object} ev
|
|
* @returns {Object} ev
|
|
*/
|
|
extendEventData: function extendEventData(ev) {
|
|
var startEv = this.current.startEvent;
|
|
|
|
// if the touches change, set the new touches over the startEvent touches
|
|
// this because touchevents don't have all the touches on touchstart, or the
|
|
// user must place his fingers at the EXACT same time on the screen, which is not realistic
|
|
// but, sometimes it happens that both fingers are touching at the EXACT same time
|
|
if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
|
|
// extend 1 level deep to get the touchlist with the touch objects
|
|
startEv.touches = [];
|
|
for(var i=0,len=ev.touches.length; i<len; i++) {
|
|
startEv.touches.push(ionic.Gestures.utils.extend({}, ev.touches[i]));
|
|
}
|
|
}
|
|
|
|
var delta_time = ev.timeStamp - startEv.timeStamp,
|
|
delta_x = ev.center.pageX - startEv.center.pageX,
|
|
delta_y = ev.center.pageY - startEv.center.pageY,
|
|
velocity = ionic.Gestures.utils.getVelocity(delta_time, delta_x, delta_y);
|
|
|
|
ionic.Gestures.utils.extend(ev, {
|
|
deltaTime : delta_time,
|
|
|
|
deltaX : delta_x,
|
|
deltaY : delta_y,
|
|
|
|
velocityX : velocity.x,
|
|
velocityY : velocity.y,
|
|
|
|
distance : ionic.Gestures.utils.getDistance(startEv.center, ev.center),
|
|
angle : ionic.Gestures.utils.getAngle(startEv.center, ev.center),
|
|
direction : ionic.Gestures.utils.getDirection(startEv.center, ev.center),
|
|
|
|
scale : ionic.Gestures.utils.getScale(startEv.touches, ev.touches),
|
|
rotation : ionic.Gestures.utils.getRotation(startEv.touches, ev.touches),
|
|
|
|
startEvent : startEv
|
|
});
|
|
|
|
return ev;
|
|
},
|
|
|
|
|
|
/**
|
|
* register new gesture
|
|
* @param {Object} gesture object, see gestures.js for documentation
|
|
* @returns {Array} gestures
|
|
*/
|
|
register: function register(gesture) {
|
|
// add an enable gesture options if there is no given
|
|
var options = gesture.defaults || {};
|
|
if(options[gesture.name] === undefined) {
|
|
options[gesture.name] = true;
|
|
}
|
|
|
|
// extend ionic.Gestures default options with the ionic.Gestures.gesture options
|
|
ionic.Gestures.utils.extend(ionic.Gestures.defaults, options, true);
|
|
|
|
// set its index
|
|
gesture.index = gesture.index || 1000;
|
|
|
|
// add ionic.Gestures.gesture to the list
|
|
this.gestures.push(gesture);
|
|
|
|
// sort the list by index
|
|
this.gestures.sort(function(a, b) {
|
|
if (a.index < b.index) {
|
|
return -1;
|
|
}
|
|
if (a.index > b.index) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
|
|
return this.gestures;
|
|
}
|
|
};
|
|
|
|
|
|
ionic.Gestures.gestures = ionic.Gestures.gestures || {};
|
|
|
|
/**
|
|
* Custom gestures
|
|
* ==============================
|
|
*
|
|
* Gesture object
|
|
* --------------------
|
|
* The object structure of a gesture:
|
|
*
|
|
* { name: 'mygesture',
|
|
* index: 1337,
|
|
* defaults: {
|
|
* mygesture_option: true
|
|
* }
|
|
* handler: function(type, ev, inst) {
|
|
* // trigger gesture event
|
|
* inst.trigger(this.name, ev);
|
|
* }
|
|
* }
|
|
|
|
* @param {String} name
|
|
* this should be the name of the gesture, lowercase
|
|
* it is also being used to disable/enable the gesture per instance config.
|
|
*
|
|
* @param {Number} [index=1000]
|
|
* the index of the gesture, where it is going to be in the stack of gestures detection
|
|
* like when you build an gesture that depends on the drag gesture, it is a good
|
|
* idea to place it after the index of the drag gesture.
|
|
*
|
|
* @param {Object} [defaults={}]
|
|
* the default settings of the gesture. these are added to the instance settings,
|
|
* and can be overruled per instance. you can also add the name of the gesture,
|
|
* but this is also added by default (and set to true).
|
|
*
|
|
* @param {Function} handler
|
|
* this handles the gesture detection of your custom gesture and receives the
|
|
* following arguments:
|
|
*
|
|
* @param {Object} eventData
|
|
* event data containing the following properties:
|
|
* timeStamp {Number} time the event occurred
|
|
* target {HTMLElement} target element
|
|
* touches {Array} touches (fingers, pointers, mouse) on the screen
|
|
* pointerType {String} kind of pointer that was used. matches ionic.Gestures.POINTER_MOUSE|TOUCH
|
|
* center {Object} center position of the touches. contains pageX and pageY
|
|
* deltaTime {Number} the total time of the touches in the screen
|
|
* deltaX {Number} the delta on x axis we haved moved
|
|
* deltaY {Number} the delta on y axis we haved moved
|
|
* velocityX {Number} the velocity on the x
|
|
* velocityY {Number} the velocity on y
|
|
* angle {Number} the angle we are moving
|
|
* direction {String} the direction we are moving. matches ionic.Gestures.DIRECTION_UP|DOWN|LEFT|RIGHT
|
|
* distance {Number} the distance we haved moved
|
|
* scale {Number} scaling of the touches, needs 2 touches
|
|
* rotation {Number} rotation of the touches, needs 2 touches *
|
|
* eventType {String} matches ionic.Gestures.EVENT_START|MOVE|END
|
|
* srcEvent {Object} the source event, like TouchStart or MouseDown *
|
|
* startEvent {Object} contains the same properties as above,
|
|
* but from the first touch. this is used to calculate
|
|
* distances, deltaTime, scaling etc
|
|
*
|
|
* @param {ionic.Gestures.Instance} inst
|
|
* the instance we are doing the detection for. you can get the options from
|
|
* the inst.options object and trigger the gesture event by calling inst.trigger
|
|
*
|
|
*
|
|
* Handle gestures
|
|
* --------------------
|
|
* inside the handler you can get/set ionic.Gestures.detectionic.current. This is the current
|
|
* detection sessionic. It has the following properties
|
|
* @param {String} name
|
|
* contains the name of the gesture we have detected. it has not a real function,
|
|
* only to check in other gestures if something is detected.
|
|
* like in the drag gesture we set it to 'drag' and in the swipe gesture we can
|
|
* check if the current gesture is 'drag' by accessing ionic.Gestures.detectionic.current.name
|
|
*
|
|
* @readonly
|
|
* @param {ionic.Gestures.Instance} inst
|
|
* the instance we do the detection for
|
|
*
|
|
* @readonly
|
|
* @param {Object} startEvent
|
|
* contains the properties of the first gesture detection in this sessionic.
|
|
* Used for calculations about timing, distance, etc.
|
|
*
|
|
* @readonly
|
|
* @param {Object} lastEvent
|
|
* contains all the properties of the last gesture detect in this sessionic.
|
|
*
|
|
* after the gesture detection session has been completed (user has released the screen)
|
|
* the ionic.Gestures.detectionic.current object is copied into ionic.Gestures.detectionic.previous,
|
|
* this is usefull for gestures like doubletap, where you need to know if the
|
|
* previous gesture was a tap
|
|
*
|
|
* options that have been set by the instance can be received by calling inst.options
|
|
*
|
|
* You can trigger a gesture event by calling inst.trigger("mygesture", event).
|
|
* The first param is the name of your gesture, the second the event argument
|
|
*
|
|
*
|
|
* Register gestures
|
|
* --------------------
|
|
* When an gesture is added to the ionic.Gestures.gestures object, it is auto registered
|
|
* at the setup of the first ionic.Gestures instance. You can also call ionic.Gestures.detectionic.register
|
|
* manually and pass your gesture object as a param
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* Hold
|
|
* Touch stays at the same place for x time
|
|
* @events hold
|
|
*/
|
|
ionic.Gestures.gestures.Hold = {
|
|
name: 'hold',
|
|
index: 10,
|
|
defaults: {
|
|
hold_timeout : 500,
|
|
hold_threshold : 1
|
|
},
|
|
timer: null,
|
|
handler: function holdGesture(ev, inst) {
|
|
switch(ev.eventType) {
|
|
case ionic.Gestures.EVENT_START:
|
|
// clear any running timers
|
|
clearTimeout(this.timer);
|
|
|
|
// set the gesture so we can check in the timeout if it still is
|
|
ionic.Gestures.detection.current.name = this.name;
|
|
|
|
// set timer and if after the timeout it still is hold,
|
|
// we trigger the hold event
|
|
this.timer = setTimeout(function() {
|
|
if(ionic.Gestures.detection.current.name == 'hold') {
|
|
inst.trigger('hold', ev);
|
|
}
|
|
}, inst.options.hold_timeout);
|
|
break;
|
|
|
|
// when you move or end we clear the timer
|
|
case ionic.Gestures.EVENT_MOVE:
|
|
if(ev.distance > inst.options.hold_threshold) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
break;
|
|
|
|
case ionic.Gestures.EVENT_END:
|
|
clearTimeout(this.timer);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Tap/DoubleTap
|
|
* Quick touch at a place or double at the same place
|
|
* @events tap, doubletap
|
|
*/
|
|
ionic.Gestures.gestures.Tap = {
|
|
name: 'tap',
|
|
index: 100,
|
|
defaults: {
|
|
tap_max_touchtime : 250,
|
|
tap_max_distance : 10,
|
|
tap_always : true,
|
|
doubletap_distance : 20,
|
|
doubletap_interval : 300
|
|
},
|
|
handler: function tapGesture(ev, inst) {
|
|
if(ev.eventType == ionic.Gestures.EVENT_END) {
|
|
// previous gesture, for the double tap since these are two different gesture detections
|
|
var prev = ionic.Gestures.detection.previous,
|
|
did_doubletap = false;
|
|
|
|
// when the touchtime is higher then the max touch time
|
|
// or when the moving distance is too much
|
|
if(ev.deltaTime > inst.options.tap_max_touchtime ||
|
|
ev.distance > inst.options.tap_max_distance) {
|
|
return;
|
|
}
|
|
|
|
// check if double tap
|
|
if(prev && prev.name == 'tap' &&
|
|
(ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
|
|
ev.distance < inst.options.doubletap_distance) {
|
|
inst.trigger('doubletap', ev);
|
|
did_doubletap = true;
|
|
}
|
|
|
|
// do a single tap
|
|
if(!did_doubletap || inst.options.tap_always) {
|
|
ionic.Gestures.detection.current.name = 'tap';
|
|
inst.trigger(ionic.Gestures.detection.current.name, ev);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Swipe
|
|
* triggers swipe events when the end velocity is above the threshold
|
|
* @events swipe, swipeleft, swiperight, swipeup, swipedown
|
|
*/
|
|
ionic.Gestures.gestures.Swipe = {
|
|
name: 'swipe',
|
|
index: 40,
|
|
defaults: {
|
|
// set 0 for unlimited, but this can conflict with transform
|
|
swipe_max_touches : 1,
|
|
swipe_velocity : 0.7
|
|
},
|
|
handler: function swipeGesture(ev, inst) {
|
|
if(ev.eventType == ionic.Gestures.EVENT_END) {
|
|
// max touches
|
|
if(inst.options.swipe_max_touches > 0 &&
|
|
ev.touches.length > inst.options.swipe_max_touches) {
|
|
return;
|
|
}
|
|
|
|
// when the distance we moved is too small we skip this gesture
|
|
// or we can be already in dragging
|
|
if(ev.velocityX > inst.options.swipe_velocity ||
|
|
ev.velocityY > inst.options.swipe_velocity) {
|
|
// trigger swipe events
|
|
inst.trigger(this.name, ev);
|
|
inst.trigger(this.name + ev.direction, ev);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Drag
|
|
* Move with x fingers (default 1) around on the page. Blocking the scrolling when
|
|
* moving left and right is a good practice. When all the drag events are blocking
|
|
* you disable scrolling on that area.
|
|
* @events drag, drapleft, dragright, dragup, dragdown
|
|
*/
|
|
ionic.Gestures.gestures.Drag = {
|
|
name: 'drag',
|
|
index: 50,
|
|
defaults: {
|
|
drag_min_distance : 10,
|
|
// Set correct_for_drag_min_distance to true to make the starting point of the drag
|
|
// be calculated from where the drag was triggered, not from where the touch started.
|
|
// Useful to avoid a jerk-starting drag, which can make fine-adjustments
|
|
// through dragging difficult, and be visually unappealing.
|
|
correct_for_drag_min_distance : true,
|
|
// set 0 for unlimited, but this can conflict with transform
|
|
drag_max_touches : 1,
|
|
// 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 : 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,
|
|
// drag lock only kicks in when distance > drag_lock_min_distance
|
|
// This way, locking occurs only when the distance has become large enough to reliably determine the direction
|
|
drag_lock_min_distance : 25
|
|
},
|
|
triggered: false,
|
|
handler: function dragGesture(ev, inst) {
|
|
// current gesture isnt drag, but dragged is true
|
|
// this means an other gesture is busy. now call dragend
|
|
if(ionic.Gestures.detection.current.name != this.name && this.triggered) {
|
|
inst.trigger(this.name +'end', ev);
|
|
this.triggered = false;
|
|
return;
|
|
}
|
|
|
|
// max touches
|
|
if(inst.options.drag_max_touches > 0 &&
|
|
ev.touches.length > inst.options.drag_max_touches) {
|
|
return;
|
|
}
|
|
|
|
switch(ev.eventType) {
|
|
case ionic.Gestures.EVENT_START:
|
|
this.triggered = false;
|
|
break;
|
|
|
|
case ionic.Gestures.EVENT_MOVE:
|
|
// when the distance we moved is too small we skip this gesture
|
|
// or we can be already in dragging
|
|
if(ev.distance < inst.options.drag_min_distance &&
|
|
ionic.Gestures.detection.current.name != this.name) {
|
|
return;
|
|
}
|
|
|
|
// we are dragging!
|
|
if(ionic.Gestures.detection.current.name != this.name) {
|
|
ionic.Gestures.detection.current.name = this.name;
|
|
if (inst.options.correct_for_drag_min_distance) {
|
|
// When a drag is triggered, set the event center to drag_min_distance pixels from the original event center.
|
|
// Without this correction, the dragged distance would jumpstart at drag_min_distance pixels instead of at 0.
|
|
// It might be useful to save the original start point somewhere
|
|
var factor = Math.abs(inst.options.drag_min_distance/ev.distance);
|
|
ionic.Gestures.detection.current.startEvent.center.pageX += ev.deltaX * factor;
|
|
ionic.Gestures.detection.current.startEvent.center.pageY += ev.deltaY * factor;
|
|
|
|
// recalculate event data using new start point
|
|
ev = ionic.Gestures.detection.extendEventData(ev);
|
|
}
|
|
}
|
|
|
|
// lock drag to axis?
|
|
if(ionic.Gestures.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
|
|
ev.drag_locked_to_axis = true;
|
|
}
|
|
var last_direction = ionic.Gestures.detection.current.lastEvent.direction;
|
|
if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
|
|
// keep direction on the axis that the drag gesture started on
|
|
if(ionic.Gestures.utils.isVertical(last_direction)) {
|
|
ev.direction = (ev.deltaY < 0) ? ionic.Gestures.DIRECTION_UP : ionic.Gestures.DIRECTION_DOWN;
|
|
}
|
|
else {
|
|
ev.direction = (ev.deltaX < 0) ? ionic.Gestures.DIRECTION_LEFT : ionic.Gestures.DIRECTION_RIGHT;
|
|
}
|
|
}
|
|
|
|
// first time, trigger dragstart event
|
|
if(!this.triggered) {
|
|
inst.trigger(this.name +'start', ev);
|
|
this.triggered = true;
|
|
}
|
|
|
|
// trigger normal event
|
|
inst.trigger(this.name, ev);
|
|
|
|
// direction event, like dragdown
|
|
inst.trigger(this.name + ev.direction, ev);
|
|
|
|
// block the browser events
|
|
if( (inst.options.drag_block_vertical && ionic.Gestures.utils.isVertical(ev.direction)) ||
|
|
(inst.options.drag_block_horizontal && !ionic.Gestures.utils.isVertical(ev.direction))) {
|
|
ev.preventDefault();
|
|
}
|
|
break;
|
|
|
|
case ionic.Gestures.EVENT_END:
|
|
// trigger dragend
|
|
if(this.triggered) {
|
|
inst.trigger(this.name +'end', ev);
|
|
}
|
|
|
|
this.triggered = false;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Transform
|
|
* User want to scale or rotate with 2 fingers
|
|
* @events transform, pinch, pinchin, pinchout, rotate
|
|
*/
|
|
ionic.Gestures.gestures.Transform = {
|
|
name: 'transform',
|
|
index: 45,
|
|
defaults: {
|
|
// factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
|
|
transform_min_scale : 0.01,
|
|
// rotation in degrees
|
|
transform_min_rotation : 1,
|
|
// prevent default browser behavior when two touches are on the screen
|
|
// but it makes the element a blocking element
|
|
// when you are using the transform gesture, it is a good practice to set this true
|
|
transform_always_block : false
|
|
},
|
|
triggered: false,
|
|
handler: function transformGesture(ev, inst) {
|
|
// current gesture isnt drag, but dragged is true
|
|
// this means an other gesture is busy. now call dragend
|
|
if(ionic.Gestures.detection.current.name != this.name && this.triggered) {
|
|
inst.trigger(this.name +'end', ev);
|
|
this.triggered = false;
|
|
return;
|
|
}
|
|
|
|
// atleast multitouch
|
|
if(ev.touches.length < 2) {
|
|
return;
|
|
}
|
|
|
|
// prevent default when two fingers are on the screen
|
|
if(inst.options.transform_always_block) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
switch(ev.eventType) {
|
|
case ionic.Gestures.EVENT_START:
|
|
this.triggered = false;
|
|
break;
|
|
|
|
case ionic.Gestures.EVENT_MOVE:
|
|
var scale_threshold = Math.abs(1-ev.scale);
|
|
var rotation_threshold = Math.abs(ev.rotation);
|
|
|
|
// when the distance we moved is too small we skip this gesture
|
|
// or we can be already in dragging
|
|
if(scale_threshold < inst.options.transform_min_scale &&
|
|
rotation_threshold < inst.options.transform_min_rotation) {
|
|
return;
|
|
}
|
|
|
|
// we are transforming!
|
|
ionic.Gestures.detection.current.name = this.name;
|
|
|
|
// first time, trigger dragstart event
|
|
if(!this.triggered) {
|
|
inst.trigger(this.name +'start', ev);
|
|
this.triggered = true;
|
|
}
|
|
|
|
inst.trigger(this.name, ev); // basic transform event
|
|
|
|
// trigger rotate event
|
|
if(rotation_threshold > inst.options.transform_min_rotation) {
|
|
inst.trigger('rotate', ev);
|
|
}
|
|
|
|
// trigger pinch event
|
|
if(scale_threshold > inst.options.transform_min_scale) {
|
|
inst.trigger('pinch', ev);
|
|
inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
|
|
}
|
|
break;
|
|
|
|
case ionic.Gestures.EVENT_END:
|
|
// trigger dragend
|
|
if(this.triggered) {
|
|
inst.trigger(this.name +'end', ev);
|
|
}
|
|
|
|
this.triggered = false;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Touch
|
|
* Called as first, tells the user has touched the screen
|
|
* @events touch
|
|
*/
|
|
ionic.Gestures.gestures.Touch = {
|
|
name: 'touch',
|
|
index: -Infinity,
|
|
defaults: {
|
|
// call preventDefault at touchstart, and makes the element blocking by
|
|
// disabling the scrolling of the page, but it improves gestures like
|
|
// transforming and dragging.
|
|
// be careful with using this, it can be very annoying for users to be stuck
|
|
// on the page
|
|
prevent_default: false,
|
|
|
|
// disable mouse events, so only touch (or pen!) input triggers events
|
|
prevent_mouseevents: false
|
|
},
|
|
handler: function touchGesture(ev, inst) {
|
|
if(inst.options.prevent_mouseevents && ev.pointerType == ionic.Gestures.POINTER_MOUSE) {
|
|
ev.stopDetect();
|
|
return;
|
|
}
|
|
|
|
if(inst.options.prevent_default) {
|
|
ev.preventDefault();
|
|
}
|
|
|
|
if(ev.eventType == ionic.Gestures.EVENT_START) {
|
|
inst.trigger(this.name, ev);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Release
|
|
* Called as last, tells the user has released the screen
|
|
* @events release
|
|
*/
|
|
ionic.Gestures.gestures.Release = {
|
|
name: 'release',
|
|
index: Infinity,
|
|
handler: function releaseGesture(ev, inst) {
|
|
if(ev.eventType == ionic.Gestures.EVENT_END) {
|
|
inst.trigger(this.name, ev);
|
|
}
|
|
}
|
|
};
|
|
})(window.ionic);
|
|
;
|
|
(function(ionic) {
|
|
|
|
ionic.Platform = {
|
|
detect: function() {
|
|
var platforms = [];
|
|
|
|
this._checkPlatforms(platforms);
|
|
|
|
for(var i = 0; i < platforms.length; i++) {
|
|
document.body.classList.add('platform-' + platforms[i]);
|
|
}
|
|
|
|
},
|
|
_checkPlatforms: function(platforms) {
|
|
if(this.isCordova()) {
|
|
platforms.push('cordova');
|
|
}
|
|
if(this.isIOS7()) {
|
|
platforms.push('ios7');
|
|
}
|
|
},
|
|
|
|
// Check if we are running in Cordova, which will have
|
|
// window.device available.
|
|
isCordova: function() {
|
|
return (window.cordova || window.PhoneGap || window.phonegap);
|
|
//&& /^file:\/{3}[^\/]/i.test(window.location.href)
|
|
//&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
|
|
},
|
|
isIOS7: function() {
|
|
if(!window.device) {
|
|
return false;
|
|
}
|
|
return parseFloat(window.device.version) >= 7.0;
|
|
}
|
|
}
|
|
|
|
ionic.Platform.detect();
|
|
})(window.ionic);
|
|
;
|
|
(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) {
|
|
// if the source event wasn't from a touch event then don't use this polyfill
|
|
if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
|
|
|
|
var
|
|
e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js
|
|
ele = e.target;
|
|
|
|
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);
|
|
;
|
|
(function(ionic) {
|
|
|
|
ionic.Utils = {
|
|
/**
|
|
* extend method,
|
|
* also used for cloning when dest is an empty object
|
|
* @param {Object} dest
|
|
* @param {Object} src
|
|
* @parm {Boolean} merge do a merge
|
|
* @returns {Object} dest
|
|
*/
|
|
extend: function extend(dest, src, merge) {
|
|
for (var key in src) {
|
|
if(dest[key] !== undefined && merge) {
|
|
continue;
|
|
}
|
|
dest[key] = src[key];
|
|
}
|
|
return dest;
|
|
},
|
|
}
|
|
})(window.ionic);
|
|
;
|
|
(function(ionic) {
|
|
/**
|
|
* An ActionSheet is the slide up menu popularized on iOS.
|
|
*
|
|
* You see it all over iOS apps, where it offers a set of options
|
|
* triggered after an action.
|
|
*/
|
|
ionic.views.ActionSheet = function(opts) {
|
|
this.el = opts.el;
|
|
};
|
|
|
|
ionic.views.ActionSheet.prototype = {
|
|
show: function() {
|
|
// Force a reflow so the animation will actually run
|
|
this.el.offsetWidth;
|
|
|
|
this.el.classList.add('active');
|
|
},
|
|
hide: function() {
|
|
// Force a reflow so the animation will actually run
|
|
this.el.offsetWidth;
|
|
this.el.classList.remove('active');
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
|
|
(function(ionic) {
|
|
|
|
ionic.views.HeaderBar = function(opts) {
|
|
this.el = opts.el;
|
|
|
|
this._titleEl = this.el.querySelector('.title');
|
|
};
|
|
|
|
ionic.views.HeaderBar.prototype = {
|
|
resizeTitle: function() {
|
|
var e, j, i,
|
|
title,
|
|
titleWidth,
|
|
children = this.el.children;
|
|
|
|
for(i = 0, j = children.length; i < j; i++) {
|
|
e = children[i];
|
|
if(/h\d/.test(e.nodeName.toLowerCase())) {
|
|
title = e;
|
|
}
|
|
}
|
|
|
|
titleWidth = title.offsetWidth;
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
(function(ionic) {
|
|
|
|
/**
|
|
* The ListView handles a list of items. It will process drag animations, edit mode,
|
|
* and other operations that are common on mobile lists or table views.
|
|
*/
|
|
ionic.views.List = function(opts) {
|
|
var _this = this;
|
|
|
|
this.el = opts.el;
|
|
|
|
// The amount of dragging required to start sliding the element over (in pixels)
|
|
this.dragThresholdX = opts.dragThresholdX || 10;
|
|
|
|
// Start the drag states
|
|
this._initDrag();
|
|
|
|
// Listen for drag and release events
|
|
window.ionic.onGesture('drag', function(e) {
|
|
_this._handleDrag(e);
|
|
}, this.el);
|
|
window.ionic.onGesture('release', function(e) {
|
|
_this._handleEndDrag(e);
|
|
}, this.el);
|
|
};
|
|
|
|
ionic.views.List.prototype = {
|
|
_initDrag: function() {
|
|
this._isDragging = false;
|
|
this._currentDrag = null;
|
|
},
|
|
_startDrag: function(e) {
|
|
this._isDragging = false;
|
|
|
|
// Grab the content item
|
|
if(e.target.classList.contains('list-item')) {
|
|
content = e.target.querySelector('.list-item-content');
|
|
} else if(e.target.classList.contains('list-item-content')) {
|
|
content = e.target;
|
|
}
|
|
|
|
// If we don't have a content area as one of our children (or ourselves), skip
|
|
if(!content) {
|
|
return;
|
|
}
|
|
|
|
// Make sure we aren't animating as we slide
|
|
content.classList.remove('list-item-sliding');
|
|
|
|
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
|
|
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
|
|
|
|
// Grab the buttons
|
|
buttons = content.parentNode.querySelector('.list-item-buttons');
|
|
if(!buttons) {
|
|
return;
|
|
}
|
|
|
|
buttonsWidth = buttons.offsetWidth;
|
|
|
|
this._currentDrag = {
|
|
buttonsWidth: buttonsWidth,
|
|
content: content,
|
|
startOffsetX: offsetX
|
|
};
|
|
},
|
|
_handleEndDrag: function(e) {
|
|
var _this = this;
|
|
|
|
if(!this._currentDrag) {
|
|
this._initDrag();
|
|
return;
|
|
}
|
|
|
|
// If we are currently dragging, we want to snap back into place
|
|
|
|
// The final resting point X will be the width of the exposed buttons
|
|
var restingPoint = -this._currentDrag.buttonsWidth;
|
|
|
|
// Check if the drag didn't clear the buttons mid-point
|
|
// and we aren't moving fast enough to swipe open
|
|
if(e.gesture.deltaX > -(this._currentDrag.buttonsWidth/2)) {
|
|
|
|
// If we are going left but too slow, or going right, go back to resting
|
|
if(e.gesture.direction == "left" && Math.abs(e.gesture.velocityX) < 0.3) {
|
|
restingPoint = 0;
|
|
} else if(e.gesture.direction == "right") {
|
|
restingPoint = 0;
|
|
}
|
|
|
|
}
|
|
|
|
var content = this._currentDrag.content;
|
|
|
|
var onRestingAnimationEnd = function(e) {
|
|
if(e.propertyName == '-webkit-transform') {
|
|
content.classList.remove('list-item-sliding');
|
|
}
|
|
e.target.removeEventListener('webkitTransitionEnd', onRestingAnimationEnd);
|
|
}
|
|
|
|
window.requestAnimationFrame(function() {
|
|
var currentX = parseFloat(_this._currentDrag.content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
|
|
if(currentX !== restingPoint) {
|
|
_this._currentDrag.content.classList.add('list-item-sliding');
|
|
_this._currentDrag.content.addEventListener('webkitTransitionEnd', onRestingAnimationEnd);
|
|
}
|
|
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + restingPoint + 'px, 0, 0)';
|
|
_this._initDrag();
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Process the drag event to move the item to the left or right.
|
|
*/
|
|
_handleDrag: function(e) {
|
|
var _this = this, content, buttons;
|
|
|
|
window.requestAnimationFrame(function() {
|
|
|
|
if(!_this._currentDrag) {
|
|
_this._startDrag(e);
|
|
}
|
|
|
|
// Check if we should start dragging. Check if we've dragged past the threshold,
|
|
// or we are starting from the open state.
|
|
if(!_this._isDragging &&
|
|
((Math.abs(e.gesture.deltaX) > _this.dragThresholdX) ||
|
|
(Math.abs(_this._currentDrag.startOffsetX) > 0)))
|
|
{
|
|
_this._isDragging = true;
|
|
}
|
|
|
|
if(_this._isDragging) {
|
|
|
|
// Grab the new X point, capping it at zero
|
|
var newX = Math.min(0, _this._currentDrag.startOffsetX + e.gesture.deltaX);
|
|
|
|
// If the new X position is past the buttons, we need to slow down the drag (rubber band style)
|
|
if(newX < -buttonsWidth) {
|
|
// Calculate the new X position, capped at the top of the buttons
|
|
newX = Math.min(-buttonsWidth, -buttonsWidth + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
|
|
}
|
|
|
|
console.log(newX);
|
|
|
|
_this._currentDrag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
_handleSwipeLeft: function(e) {
|
|
|
|
window.requestAnimationFrame(function() {
|
|
var item = e.target,
|
|
cl = item.classList,
|
|
content, buttons, buttonsWidth;
|
|
|
|
|
|
if(!content) {
|
|
return;
|
|
}
|
|
|
|
// Grab the buttons
|
|
buttons = content.parentNode.querySelector('.list-item-buttons');
|
|
if(buttons) {
|
|
buttonsWidth = buttons.offsetWidth;
|
|
|
|
// Slide the content over left by the button width
|
|
content.style.left = -buttonsWidth + 'px';
|
|
}
|
|
});
|
|
},
|
|
_handleSwipeRight: function(e) {
|
|
|
|
window.requestAnimationFrame(function() {
|
|
var item = e.target,
|
|
cl = item.classList,
|
|
content;
|
|
|
|
if(cl.contains('list-item')) {
|
|
content = item.querySelector('.list-item-content');
|
|
} else if(cl.contains('list-item-content')) {
|
|
content = item;
|
|
}
|
|
|
|
// This item didn't have content
|
|
if(!content) {
|
|
return;
|
|
}
|
|
|
|
content.style.left = 0;
|
|
});
|
|
},
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
(function(ionic) {
|
|
ionic.views.Modal = function(opts) {
|
|
this.el = opts.el;
|
|
};
|
|
|
|
ionic.views.Modal.prototype = {
|
|
show: function() {
|
|
this.el.classList.add('active');
|
|
},
|
|
hide: function() {
|
|
this.el.classList.remove('active');
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
|
|
(function(ionic) {
|
|
|
|
ionic.views.NavBar = function(opts) {
|
|
this.el = opts.el;
|
|
|
|
this._titleEl = this.el.querySelector('.title');
|
|
|
|
if(opts.hidden) {
|
|
this.hide();
|
|
}
|
|
};
|
|
|
|
ionic.views.NavBar.prototype = {
|
|
hide: function() {
|
|
this.el.classList.add('hidden');
|
|
},
|
|
show: function() {
|
|
this.el.classList.remove('hidden');
|
|
},
|
|
shouldGoBack: function() {},
|
|
|
|
setTitle: function(title) {
|
|
if(!this._titleEl) {
|
|
return;
|
|
}
|
|
this._titleEl.innerHTML = title;
|
|
},
|
|
|
|
showBackButton: function(shouldShow) {
|
|
var _this = this;
|
|
|
|
if(!this._currentBackButton) {
|
|
var back = document.createElement('a');
|
|
back.className = 'button back';
|
|
back.innerHTML = 'Back';
|
|
|
|
this._currentBackButton = back;
|
|
this._currentBackButton.onclick = function(event) {
|
|
_this.shouldGoBack && _this.shouldGoBack();
|
|
}
|
|
}
|
|
|
|
if(shouldShow && !this._currentBackButton.parentNode) {
|
|
// Prepend the back button
|
|
this.el.insertBefore(this._currentBackButton, this.el.firstChild);
|
|
} else if(!shouldShow && this._currentBackButton.parentNode) {
|
|
// Remove the back button if it's there
|
|
this._currentBackButton.parentNode.removeChild(this._currentBackButton);
|
|
}
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
|
|
(function(ionic) {
|
|
|
|
ionic.views.SideMenu = function(opts) {
|
|
this.el = opts.el;
|
|
this.width = opts.width;
|
|
this.isEnabled = opts.isEnabled || true;
|
|
};
|
|
|
|
ionic.views.SideMenu.prototype = {
|
|
getFullWidth: function() {
|
|
return this.width;
|
|
},
|
|
setIsEnabled: function(isEnabled) {
|
|
this.isEnabled = isEnabled;
|
|
},
|
|
bringUp: function() {
|
|
this.el.style.zIndex = 0;
|
|
},
|
|
pushDown: function() {
|
|
this.el.style.zIndex = -1;
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
(function(ionic) {
|
|
|
|
ionic.views.TabBarItem = function(el) {
|
|
this.el = el;
|
|
|
|
this._buildItem();
|
|
};
|
|
ionic.views.TabBarItem.prototype = {
|
|
// Factory for creating an item from a given javascript object
|
|
create: function(itemData) {
|
|
var item = document.createElement('a');
|
|
item.className = 'tab-item';
|
|
|
|
// If there is an icon, add the icon element
|
|
if(itemData.icon) {
|
|
var icon = document.createElement('i');
|
|
icon.className = itemData.icon;
|
|
item.appendChild(icon);
|
|
}
|
|
item.appendChild(document.createTextNode(itemData.title));
|
|
|
|
return new ionic.views.TabBarItem(item);
|
|
},
|
|
|
|
|
|
_buildItem: function() {
|
|
var _this = this, child, children = Array.prototype.slice.call(this.el.children);
|
|
|
|
for(var i = 0, j = children.length; i < j; i++) {
|
|
child = children[i];
|
|
|
|
// Test if this is a "i" tag with icon in the class name
|
|
// TODO: This heuristic might not be sufficient
|
|
if(child.tagName.toLowerCase() == 'i' && /icon/.test(child.className)) {
|
|
this.icon = child.className;
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
// Set the title to the text content of the tab.
|
|
this.title = this.el.innerText.trim();
|
|
|
|
this._tapHandler = function(e) {
|
|
_this.onTap && _this.onTap(e);
|
|
};
|
|
|
|
ionic.on('tap', this._tapHandler, this.el);
|
|
},
|
|
onTap: function(e) {
|
|
console.log('On tap');
|
|
},
|
|
|
|
// Remove the event listeners from this object
|
|
destroy: function() {
|
|
ionic.off('tap', this._tapHandler, this.el);
|
|
},
|
|
|
|
getIcon: function() {
|
|
return this.icon;
|
|
},
|
|
|
|
getTitle: function() {
|
|
return this.title;
|
|
},
|
|
|
|
setSelected: function(isSelected) {
|
|
this.isSelected = isSelected;
|
|
if(isSelected) {
|
|
this.el.classList.add('active');
|
|
} else {
|
|
this.el.classList.remove('active');
|
|
}
|
|
}
|
|
};
|
|
|
|
ionic.views.TabBar = function(opts) {
|
|
this.el = opts.el;
|
|
|
|
this.items = [];
|
|
|
|
this._buildItems();
|
|
};
|
|
|
|
ionic.views.TabBar.prototype = {
|
|
// get all the items for the TabBar
|
|
getItems: function() {
|
|
return this.items;
|
|
},
|
|
|
|
// Add an item to the tab bar
|
|
addItem: function(item) {
|
|
// Create a new TabItem
|
|
var tabItem = ionic.views.TabBarItem.prototype.create(item);
|
|
|
|
this.appendItemElement(tabItem);
|
|
|
|
this.items.push(tabItem);
|
|
this._bindEventsOnItem(tabItem);
|
|
},
|
|
|
|
appendItemElement: function(item) {
|
|
if(!this.el) {
|
|
return;
|
|
}
|
|
this.el.appendChild(item.el);
|
|
},
|
|
|
|
// Remove an item from the tab bar
|
|
removeItem: function(index) {
|
|
var item = this.items[index];
|
|
if(!item) {
|
|
return;
|
|
}
|
|
item.onTap = undefined;
|
|
item.destroy();
|
|
},
|
|
|
|
_bindEventsOnItem: function(item) {
|
|
var _this = this;
|
|
|
|
if(!this._itemTapHandler) {
|
|
this._itemTapHandler = function(e) {
|
|
//_this.selectItem(this);
|
|
_this.trySelectItem(this);
|
|
};
|
|
}
|
|
item.onTap = this._itemTapHandler;
|
|
},
|
|
|
|
// Get the currently selected item
|
|
getSelectedItem: function() {
|
|
return this.selectedItem;
|
|
},
|
|
|
|
// Set the currently selected item by index
|
|
setSelectedItem: function(index) {
|
|
this.selectedItem = this.items[index];
|
|
|
|
// Deselect all
|
|
for(var i = 0, j = this.items.length; i < j; i += 1) {
|
|
this.items[i].setSelected(false);
|
|
}
|
|
|
|
// Select the new item
|
|
if(this.selectedItem) {
|
|
this.selectedItem.setSelected(true);
|
|
//this.onTabSelected && this.onTabSelected(this.selectedItem, index);
|
|
}
|
|
},
|
|
|
|
// Select the given item assuming we can find it in our
|
|
// item list.
|
|
selectItem: function(item) {
|
|
for(var i = 0, j = this.items.length; i < j; i += 1) {
|
|
if(this.items[i] == item) {
|
|
this.setSelectedItem(i);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
// Try to select a given item. This triggers an event such
|
|
// that the view controller managing this tab bar can decide
|
|
// whether to select the item or cancel it.
|
|
trySelectItem: function(item) {
|
|
for(var i = 0, j = this.items.length; i < j; i += 1) {
|
|
if(this.items[i] == item) {
|
|
this.tryTabSelect && this.tryTabSelect(i);
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
|
|
// Build the initial items list from the given DOM node.
|
|
_buildItems: function() {
|
|
|
|
var item, items = Array.prototype.slice.call(this.el.children);
|
|
|
|
for(var i = 0, j = items.length; i < j; i += 1) {
|
|
item = new ionic.views.TabBarItem(items[i]);
|
|
this.items[i] = item;
|
|
this._bindEventsOnItem(item);
|
|
}
|
|
|
|
if(this.items.length > 0) {
|
|
this.selectedItem = this.items[0];
|
|
}
|
|
|
|
},
|
|
|
|
// Destroy this tab bar
|
|
destroy: function() {
|
|
for(var i = 0, j = this.items.length; i < j; i += 1) {
|
|
this.items[i].destroy();
|
|
}
|
|
this.items.length = 0;
|
|
}
|
|
};
|
|
|
|
})(window.ionic);
|
|
;
|
|
|
|
(function(ionic) {
|
|
|
|
ionic.views.Toggle = function(opts) {
|
|
this.el = opts.el;
|
|
this.checkbox = opts.checkbox;
|
|
this.track = opts.track;
|
|
this.handle = opts.handle;
|
|
this.openPercent = -1;
|
|
|
|
// remember that this element, and all its children are apart of a component
|
|
// and assign the component instance to each element so the lookups
|
|
// only has to go through this process just once
|
|
this.el.isComponent = true;
|
|
this.track.component = this;
|
|
this.track.isComponent = true;
|
|
this.handle.component = this;
|
|
this.handle.isComponent = true;
|
|
};
|
|
|
|
ionic.views.Toggle.prototype = {
|
|
|
|
tap: function(e) {
|
|
this.val( !this.checkbox.checked );
|
|
},
|
|
|
|
drag: function(e) {
|
|
var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
|
|
var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
|
|
|
|
if(e.pageX >= slidePageRight - 4) {
|
|
this.val(true);
|
|
} else if(e.pageX <= slidePageLeft) {
|
|
this.val(false);
|
|
} else {
|
|
this.setOpenPercent( Math.round( (1 - ((slidePageRight - e.pageX) / (slidePageRight - slidePageLeft) )) * 100) );
|
|
}
|
|
},
|
|
|
|
setOpenPercent: function(openPercent) {
|
|
// only make a change if the new open percent has changed
|
|
if(this.openPercent < 0 || (openPercent < (this.openPercent - 3) || openPercent > (this.openPercent + 3) ) ) {
|
|
this.openPercent = openPercent;
|
|
|
|
if(openPercent === 0) {
|
|
this.val(false);
|
|
} else if(openPercent === 100) {
|
|
this.val(true);
|
|
} else {
|
|
var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
|
|
openPixel = (openPixel < 1 ? 0 : openPixel);
|
|
this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
|
|
}
|
|
}
|
|
},
|
|
|
|
release: function(e) {
|
|
this.val( this.openPercent >= 50 );
|
|
},
|
|
|
|
val: function(value) {
|
|
if(value === true || value === false) {
|
|
if(this.handle.style.webkitTransform !== "") {
|
|
this.handle.style.webkitTransform = "";
|
|
}
|
|
this.checkbox.checked = value;
|
|
this.openPercent = (value ? 100 : 0);
|
|
}
|
|
return this.checkbox.checked;
|
|
}
|
|
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
(function(ionic) {
|
|
|
|
/**
|
|
* The NavController makes it easy to have a stack
|
|
* of views or screens that can be pushed and popped
|
|
* for a dynamic navigation flow. This API is modelled
|
|
* off of the UINavigationController in iOS.
|
|
*
|
|
* The NavController can drive a nav bar to show a back button
|
|
* if the stack can be poppped to go back to the last view, and
|
|
* it will handle updating the title of the nav bar and processing animations.
|
|
*/
|
|
ionic.controllers.NavController = function(opts) {
|
|
var _this = this;
|
|
|
|
this.navBar = opts.navBar;
|
|
this.content = opts.content;
|
|
this.controllers = opts.controllers || [];
|
|
|
|
this._updateNavBar();
|
|
|
|
// TODO: Is this the best way?
|
|
this.navBar.shouldGoBack = function() {
|
|
_this.pop();
|
|
}
|
|
};
|
|
|
|
ionic.controllers.NavController.prototype = {
|
|
/**
|
|
* @return {array} the array of controllers on the stack.
|
|
*/
|
|
getControllers: function() {
|
|
return this.controllers;
|
|
},
|
|
|
|
/**
|
|
* @return {object} the controller at the top of the stack.
|
|
*/
|
|
getTopController: function() {
|
|
return this.controllers[this.controllers.length-1];
|
|
},
|
|
|
|
/**
|
|
* Push a new controller onto the navigation stack. The new controller
|
|
* will automatically become the new visible view.
|
|
*
|
|
* @param {object} controller the controller to push on the stack.
|
|
*/
|
|
push: function(controller) {
|
|
var last = this.controllers[this.controllers.length - 1];
|
|
|
|
this.controllers.push(controller);
|
|
|
|
// Indicate we are switching controllers
|
|
var shouldSwitch = this.switchingController && this.switchingController(controller) || true;
|
|
|
|
// Return if navigation cancelled
|
|
if(shouldSwitch === false)
|
|
return;
|
|
|
|
// Actually switch the active controllers
|
|
|
|
// Remove the old one
|
|
//last && last.detach();
|
|
if(last) {
|
|
last.isVisible = false;
|
|
last.visibilityChanged && last.visibilityChanged();
|
|
}
|
|
|
|
// Grab the top controller on the stack
|
|
var next = this.controllers[this.controllers.length - 1];
|
|
|
|
// TODO: No DOM stuff here
|
|
//this.content.el.appendChild(next.el);
|
|
next.isVisible = true;
|
|
next.visibilityChanged && next.visibilityChanged();
|
|
|
|
this._updateNavBar();
|
|
|
|
return controller;
|
|
},
|
|
|
|
/**
|
|
* Pop the top controller off the stack, and show the last one. This is the
|
|
* "back" operation.
|
|
*
|
|
* @return {object} the last popped controller
|
|
*/
|
|
pop: function() {
|
|
var next, last;
|
|
|
|
// Make sure we keep one on the stack at all times
|
|
if(this.controllers.length < 2) {
|
|
return;
|
|
}
|
|
|
|
// Grab the controller behind the top one on the stack
|
|
last = this.controllers.pop();
|
|
if(last) {
|
|
last.isVisible = false;
|
|
last.visibilityChanged && last.visibilityChanged();
|
|
}
|
|
|
|
// Remove the old one
|
|
//last && last.detach();
|
|
|
|
next = this.controllers[this.controllers.length - 1];
|
|
|
|
// TODO: No DOM stuff here
|
|
//this.content.el.appendChild(next.el);
|
|
next.isVisible = true;
|
|
next.visibilityChanged && next.visibilityChanged();
|
|
|
|
// Switch to it (TODO: Animate or such things here)
|
|
|
|
this._updateNavBar();
|
|
|
|
return last;
|
|
},
|
|
|
|
/**
|
|
* Show the NavBar (if any)
|
|
*/
|
|
showNavBar: function() {
|
|
if(this.navBar) {
|
|
this.navBar.show();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Hide the NavBar (if any)
|
|
*/
|
|
hideNavBar: function() {
|
|
if(this.navBar) {
|
|
this.navBar.hide();
|
|
}
|
|
},
|
|
|
|
// Update the nav bar after a push or pop
|
|
_updateNavBar: function() {
|
|
if(!this.getTopController() || !this.navBar) {
|
|
return;
|
|
}
|
|
|
|
this.navBar.setTitle(this.getTopController().title);
|
|
|
|
if(this.controllers.length > 1) {
|
|
this.navBar.showBackButton(true);
|
|
} else {
|
|
this.navBar.showBackButton(false);
|
|
}
|
|
}
|
|
};
|
|
})(window.ionic);
|
|
;
|
|
/**
|
|
* Adapted from Backbone.js
|
|
*/
|
|
(function(ionic) {
|
|
var optionalParam = /\((.*?)\)/g;
|
|
var namedParam = /(\(\?)?:\w+/g;
|
|
var splatParam = /\*\w+/g;
|
|
var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;
|
|
|
|
// Cached regex for stripping a leading hash/slash and trailing space.
|
|
var routeStripper = /^[#\/]|\s+$/g;
|
|
|
|
// Cached regex for stripping leading and trailing slashes.
|
|
var rootStripper = /^\/+|\/+$/g;
|
|
|
|
// Cached regex for removing a trailing slash.
|
|
var trailingSlash = /\/$/;
|
|
|
|
RouteViewController = function(options) {
|
|
this.options = options;
|
|
|
|
this.root = this.options.root || '/';
|
|
this.root = ('/' + this.root + '/').replace(rootStripper, '/');
|
|
|
|
this.handlers = [];
|
|
|
|
this._bindEvents();
|
|
|
|
this.location = window.location;
|
|
this.history = window.history;
|
|
};
|
|
|
|
RouteViewController.prototype = {
|
|
when: function(route, callback) {
|
|
var _this = this;
|
|
|
|
route = this._routeToRegExp(route);
|
|
|
|
this.handlers.unshift({
|
|
route: route,
|
|
callback: function(fragment) {
|
|
var args = _this._extractParameters(route, fragment);
|
|
callback && callback.apply(_this, args);
|
|
}
|
|
});
|
|
},
|
|
|
|
// Convert a route string into a regular expression, suitable for matching
|
|
// against the current location hash.
|
|
_routeToRegExp: function(route) {
|
|
route = route.replace(escapeRegExp, '\\$&')
|
|
.replace(optionalParam, '(?:$1)?')
|
|
.replace(namedParam, function(match, optional){
|
|
return optional ? match : '([^\/]+)';
|
|
})
|
|
.replace(splatParam, '(.*?)');
|
|
return new RegExp('^' + route + '$');
|
|
},
|
|
|
|
// Given a route, and a URL fragment that it matches, return the array of
|
|
// extracted decoded parameters. Empty or unmatched parameters will be
|
|
// treated as `null` to normalize cross-browser behavior.
|
|
_extractParameters: function(route, fragment) {
|
|
var params = route.exec(fragment).slice(1);
|
|
var extracted = [];
|
|
for(var i = 0; i < params.length; i++) {
|
|
if(param) {
|
|
extracted.push(decodeURIComponent(param));
|
|
}
|
|
}
|
|
},
|
|
|
|
_bindEvents: function() {
|
|
var _this = this;
|
|
|
|
window.addEventListener('popstate', function(event) {
|
|
_this.checkUrl(event);
|
|
});
|
|
},
|
|
checkUrl: function(e) {
|
|
var current = this.getFragment();
|
|
if (current === this.fragment) return false;
|
|
this.loadUrl() || this.loadUrl(this.getHash());
|
|
},
|
|
getFragment: function(fragment, forcePushState) {
|
|
if (fragment == null) {
|
|
fragment = this.location.pathname;
|
|
var root = this.root.replace(this.trailingSlash, '');
|
|
if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
|
|
}
|
|
return fragment.replace(routeStripper, '');
|
|
},
|
|
getHash: function(window) {
|
|
var match = (window || this).location.href.match(/#(.*)$/);
|
|
return match ? match[1] : '';
|
|
},
|
|
|
|
// Attempt to load the current URL fragment. If a route succeeds with a
|
|
// match, returns `true`. If no defined routes matches the fragment,
|
|
// returns `false`.
|
|
loadUrl: function(fragmentOverride) {
|
|
var fragment = this.fragment = this.getFragment(fragmentOverride);
|
|
var matched = false;
|
|
for(var i = 0; i < this.handlers.length; i++) {
|
|
var h = this.handlers[i];
|
|
if (h.route.test(fragment)) {
|
|
h.callback(fragment);
|
|
matched = true;
|
|
}
|
|
}
|
|
return matched;
|
|
},
|
|
};
|
|
})(window.ionic);
|
|
;
|
|
|
|
(function(ionic) {
|
|
/**
|
|
* The SideMenuController is a controller with a left and/or right menu that
|
|
* can be slid out and toggled. Seen on many an app.
|
|
*
|
|
* The right or left menu can be disabled or not used at all, if desired.
|
|
*/
|
|
ionic.controllers.SideMenuController = function(options) {
|
|
var self = this;
|
|
|
|
this.left = options.left;
|
|
this.right = options.right;
|
|
this.content = options.content;
|
|
this.dragThresholdX = options.dragThresholdX || 10;
|
|
|
|
this._rightShowing = false;
|
|
this._leftShowing = false;
|
|
this._isDragging = false;
|
|
|
|
if(this.content) {
|
|
this.content.onDrag = function(e) {
|
|
self._handleDrag(e);
|
|
};
|
|
|
|
this.content.endDrag = function(e) {
|
|
self._endDrag(e);
|
|
};
|
|
}
|
|
};
|
|
|
|
ionic.controllers.SideMenuController.prototype = {
|
|
/**
|
|
* Set the content view controller if not passed in the constructor options.
|
|
*
|
|
* @param {object} content
|
|
*/
|
|
setContent: function(content) {
|
|
var self = this;
|
|
|
|
this.content = content;
|
|
|
|
this.content.onDrag = function(e) {
|
|
self._handleDrag(e);
|
|
};
|
|
|
|
this.content.endDrag = function(e) {
|
|
self._endDrag(e);
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Toggle the left menu to open 100%
|
|
*/
|
|
toggleLeft: function() {
|
|
var openAmount = this.getOpenAmount();
|
|
if(openAmount > 0) {
|
|
this.openPercentage(0);
|
|
} else {
|
|
this.openPercentage(100);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Toggle the right menu to open 100%
|
|
*/
|
|
toggleRight: function() {
|
|
var openAmount = this.getOpenAmount();
|
|
if(openAmount < 0) {
|
|
this.openPercentage(0);
|
|
} else {
|
|
this.openPercentage(-100);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Close all menus.
|
|
*/
|
|
close: function() {
|
|
this.openPercentage(0);
|
|
},
|
|
|
|
/**
|
|
* @return {float} The amount the side menu is open, either positive or negative for left (positive), or right (negative)
|
|
*/
|
|
getOpenAmount: function() {
|
|
return this.content.getTranslateX() || 0;
|
|
},
|
|
|
|
/**
|
|
* @return {float} The ratio of open amount over menu width. For example, a
|
|
* menu of width 100 open 50 pixels would be open 50% or a ratio of 0.5. Value is negative
|
|
* for right menu.
|
|
*/
|
|
getOpenRatio: function() {
|
|
var amount = this.getOpenAmount();
|
|
if(amount >= 0) {
|
|
return amount / this.left.width;
|
|
}
|
|
return amount / this.right.width;
|
|
},
|
|
|
|
/**
|
|
* @return {float} The percentage of open amount over menu width. For example, a
|
|
* menu of width 100 open 50 pixels would be open 50%. Value is negative
|
|
* for right menu.
|
|
*/
|
|
getOpenPercentage: function() {
|
|
return this.getOpenRatio() * 100;
|
|
},
|
|
|
|
/**
|
|
* Open the menu with a given percentage amount.
|
|
* @param {float} percentage The percentage (positive or negative for left/right) to open the menu.
|
|
*/
|
|
openPercentage: function(percentage) {
|
|
var p = percentage / 100;
|
|
var maxLeft = this.left.width;
|
|
var maxRight = this.right.width;
|
|
if(percentage >= 0) {
|
|
this.openAmount(maxLeft * p);
|
|
} else {
|
|
this.openAmount(maxRight * p);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Open the menu the given pixel amount.
|
|
* @param {float} amount the pixel amount to open the menu. Positive value for left menu,
|
|
* negative value for right menu (only one menu will be visible at a time).
|
|
*/
|
|
openAmount: function(amount) {
|
|
var maxLeft = this.left.width;
|
|
var maxRight = this.right.width;
|
|
|
|
// Check if we can move to that side, depending if the left/right panel is enabled
|
|
if((!this.left.isEnabled && amount > 0) || (!this.right.isEnabled && amount < 0)) {
|
|
return;
|
|
}
|
|
|
|
if((this._leftShowing && amount > maxLeft) || (this._rightShowing && amount < -maxRight)) {
|
|
return;
|
|
}
|
|
|
|
this.content.setTranslateX(amount);
|
|
|
|
if(amount >= 0) {
|
|
this._leftShowing = true;
|
|
this._rightShowing = false;
|
|
|
|
// Push the z-index of the right menu down
|
|
this.right.pushDown();
|
|
// Bring the z-index of the left menu up
|
|
this.left.bringUp();
|
|
} else {
|
|
this._rightShowing = true;
|
|
this._leftShowing = false;
|
|
|
|
// Bring the z-index of the right menu up
|
|
this.right.bringUp();
|
|
// Push the z-index of the left menu down
|
|
this.left.pushDown();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Given an event object, find the final resting position of this side
|
|
* menu. For example, if the user "throws" the content to the right and
|
|
* releases the touch, the left menu should snap open (animated, of course).
|
|
*
|
|
* @param {Event} e the gesture event to use for snapping
|
|
*/
|
|
snapToRest: function(e) {
|
|
// We want to animate at the end of this
|
|
this.content.enableAnimation();
|
|
this._isDragging = false;
|
|
|
|
// Check how much the panel is open after the drag, and
|
|
// what the drag velocity is
|
|
var ratio = this.getOpenRatio();
|
|
|
|
if(ratio == 0)
|
|
return;
|
|
|
|
var velocityThreshold = 0.3;
|
|
var velocityX = e.gesture.velocityX
|
|
var direction = e.gesture.direction;
|
|
|
|
// Less than half, going left
|
|
//if(ratio > 0 && ratio < 0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
|
//this.openPercentage(0);
|
|
//}
|
|
|
|
// Going right, less than half, too slow (snap back)
|
|
if(ratio > 0 && ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
|
|
this.openPercentage(0);
|
|
}
|
|
|
|
// Going left, more than half, too slow (snap back)
|
|
else if(ratio > 0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
|
this.openPercentage(100);
|
|
}
|
|
|
|
// Going left, less than half, too slow (snap back)
|
|
else if(ratio < 0 && ratio > -0.5 && direction == 'left' && velocityX < velocityThreshold) {
|
|
this.openPercentage(0);
|
|
}
|
|
|
|
// Going right, more than half, too slow (snap back)
|
|
else if(ratio < 0.5 && direction == 'right' && velocityX < velocityThreshold) {
|
|
this.openPercentage(-100);
|
|
}
|
|
|
|
// Going right, more than half, or quickly (snap open)
|
|
else if(direction == 'right' && ratio >= 0 && (ratio >= 0.5 || velocityX > velocityThreshold)) {
|
|
this.openPercentage(100);
|
|
}
|
|
|
|
// Going left, more than half, or quickly (span open)
|
|
else if(direction == 'left' && ratio <= 0 && (ratio <= -0.5 || velocityX > velocityThreshold)) {
|
|
this.openPercentage(-100);
|
|
}
|
|
|
|
// Snap back for safety
|
|
else {
|
|
this.openPercentage(0);
|
|
}
|
|
},
|
|
|
|
// End a drag with the given event
|
|
_endDrag: function(e) {
|
|
this.snapToRest(e);
|
|
this._startX = null;
|
|
this._lastX = null;
|
|
this._offsetX = null;
|
|
},
|
|
|
|
// Handle a drag event
|
|
_handleDrag: function(e) {
|
|
// If we don't have start coords, grab and store them
|
|
if(!this._startX) {
|
|
this._startX = e.gesture.touches[0].pageX;
|
|
this._lastX = this._startX;
|
|
} else {
|
|
// Grab the current tap coords
|
|
this._lastX = e.gesture.touches[0].pageX;
|
|
}
|
|
|
|
// Calculate difference from the tap points
|
|
if(!this._isDragging && Math.abs(this._lastX - this._startX) > this.dragThresholdX) {
|
|
// if the difference is greater than threshold, start dragging using the current
|
|
// point as the starting point
|
|
this._startX = this._lastX
|
|
|
|
this._isDragging = true;
|
|
// Initialize dragging
|
|
this.content.disableAnimation();
|
|
this._offsetX = this.getOpenAmount();
|
|
}
|
|
|
|
if(this._isDragging) {
|
|
this.openAmount(this._offsetX + (this._lastX - this._startX));
|
|
}
|
|
}
|
|
};
|
|
|
|
})(ionic);
|
|
;
|
|
(function(ionic) {
|
|
|
|
ionic.controllers.TabBarController = function(options) {
|
|
this.tabBar = options.tabBar;
|
|
|
|
this._bindEvents();
|
|
|
|
this.controllers = [];
|
|
|
|
var controllers = options.controllers || [];
|
|
|
|
for(var i = 0; i < controllers.length; i++) {
|
|
this.addController(controllers[i]);
|
|
}
|
|
|
|
// Bind or set our tabWillChange callback
|
|
this.controllerWillChange = options.controllerWillChange || function(controller) {};
|
|
this.controllerChanged = options.controllerChanged || function(controller) {};
|
|
|
|
this.setSelectedController(0);
|
|
};
|
|
|
|
ionic.controllers.TabBarController.prototype = {
|
|
// Start listening for events on our tab bar
|
|
_bindEvents: function() {
|
|
var _this = this;
|
|
|
|
this.tabBar.tryTabSelect = function(index) {
|
|
_this.setSelectedController(index);
|
|
};
|
|
},
|
|
|
|
|
|
selectController: function(index) {
|
|
var shouldChange = true;
|
|
|
|
// Check if we should switch to this tab. This lets the app
|
|
// cancel tab switches if the context isn't right, for example.
|
|
if(this.controllerWillChange) {
|
|
if(this.controllerWillChange(this.controllers[index], index) === false) {
|
|
shouldChange = false;
|
|
}
|
|
}
|
|
|
|
if(shouldChange) {
|
|
this.setSelectedController(index);
|
|
this.controllerChanged && this.controllerChanged(this.selectedController, this.selectedIndex);
|
|
}
|
|
},
|
|
|
|
// Force the selection of a controller at the given index
|
|
setSelectedController: function(index) {
|
|
if(index >= this.controllers.length) {
|
|
return;
|
|
}
|
|
this.selectedController = this.controllers[index];
|
|
this.selectedIndex = index;
|
|
|
|
this._showController(index);
|
|
this.tabBar.setSelectedItem(index);
|
|
},
|
|
|
|
_showController: function(index) {
|
|
var c;
|
|
|
|
for(var i = 0, j = this.controllers.length; i < j; i ++) {
|
|
c = this.controllers[i];
|
|
//c.detach && c.detach();
|
|
c.isVisible = false;
|
|
c.visibilityChanged && c.visibilityChanged();
|
|
}
|
|
|
|
c = this.controllers[index];
|
|
//c.attach && c.attach();
|
|
c.isVisible = true;
|
|
c.visibilityChanged && c.visibilityChanged();
|
|
},
|
|
|
|
_clearSelected: function() {
|
|
this.selectedController = null;
|
|
this.selectedIndex = -1;
|
|
},
|
|
|
|
// Return the tab at the given index
|
|
getController: function(index) {
|
|
return this.controllers[index];
|
|
},
|
|
|
|
// Return the current tab list
|
|
getControllers: function() {
|
|
return this.controllers;
|
|
},
|
|
|
|
// Get the currently selected tab
|
|
getSelectedController: function() {
|
|
return this.selectedController;
|
|
},
|
|
|
|
// Add a tab
|
|
addController: function(controller) {
|
|
this.controllers.push(controller);
|
|
|
|
this.tabBar.addItem({
|
|
title: controller.title,
|
|
icon: controller.icon
|
|
});
|
|
|
|
// If we don't have a selected controller yet, select the first one.
|
|
if(!this.selectedController) {
|
|
this.setSelectedController(0);
|
|
}
|
|
},
|
|
|
|
// Set the tabs and select the first
|
|
setControllers: function(controllers) {
|
|
this.controllers = controllers;
|
|
this._clearSelected();
|
|
this.selectController(0);
|
|
},
|
|
}
|
|
|
|
})(window.ionic);
|
|
;
|
|
(function(ionic) {
|
|
ionic.ViewController = function(options) {
|
|
this.init();
|
|
};
|
|
|
|
ionic.ViewController.prototype = {
|
|
// Initialize this view controller
|
|
init: function() {
|
|
},
|
|
// Destroy this view controller, including all child views
|
|
destroy: function() {
|
|
}
|
|
};
|
|
})(window.ionic);
|