mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
e75e20dc9d
Addresses #1100. Fixes race conditions where $animate.{removeClass,hideClass} are called simultaneously, in addition fixes any blinking that coulld be caused by showing an element just attached to the dom.
261 lines
8.0 KiB
JavaScript
261 lines
8.0 KiB
JavaScript
(function(window, document, ionic) {
|
|
|
|
var readyCallbacks = [];
|
|
var isDomReady = false;
|
|
|
|
function domReady() {
|
|
isDomReady = true;
|
|
for(var x=0; x<readyCallbacks.length; x++) {
|
|
ionic.requestAnimationFrame(readyCallbacks[x]);
|
|
}
|
|
readyCallbacks = [];
|
|
document.removeEventListener('DOMContentLoaded', domReady);
|
|
}
|
|
document.addEventListener('DOMContentLoaded', domReady);
|
|
|
|
// From the man himself, Mr. Paul Irish.
|
|
// The requestAnimationFrame polyfill
|
|
// Put it on window just to preserve its context
|
|
// without having to use .call
|
|
window._rAF = (function(){
|
|
return window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
function( callback ){
|
|
window.setTimeout(callback, 16);
|
|
};
|
|
})();
|
|
|
|
/**
|
|
* @ngdoc utility
|
|
* @name ionic.DomUtil
|
|
* @module ionic
|
|
*/
|
|
ionic.DomUtil = {
|
|
//Call with proper context
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#requestAnimationFrame
|
|
* @alias ionic.requestAnimationFrame
|
|
* @description Calls [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame), or a polyfill if not available.
|
|
* @param {function} callback The function to call when the next frame
|
|
* happens.
|
|
*/
|
|
requestAnimationFrame: function(cb) {
|
|
window._rAF(cb);
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#animationFrameThrottle
|
|
* @alias ionic.animationFrameThrottle
|
|
* @description
|
|
* When given a callback, if that callback is called 100 times between
|
|
* animation frames, adding Throttle will make it only run the last of
|
|
* the 100 calls.
|
|
*
|
|
* @param {function} callback a function which will be throttled to
|
|
* requestAnimationFrame
|
|
* @returns {function} A function which will then call the passed in callback.
|
|
* The passed in callback will receive the context the returned function is
|
|
* called with.
|
|
*/
|
|
animationFrameThrottle: function(cb) {
|
|
var args, isQueued, context;
|
|
return function() {
|
|
args = arguments;
|
|
context = this;
|
|
if (!isQueued) {
|
|
isQueued = true;
|
|
ionic.requestAnimationFrame(function() {
|
|
cb.apply(context, args);
|
|
isQueued = false;
|
|
});
|
|
}
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#getPositionInParent
|
|
* @description
|
|
* Find an element's scroll offset within its container.
|
|
* @param {DOMElement} element The element to find the offset of.
|
|
* @returns {object} A position object with the following properties:
|
|
* - `{number}` `left` The left offset of the element.
|
|
* - `{number}` `top` The top offset of the element.
|
|
*/
|
|
getPositionInParent: function(el) {
|
|
return {
|
|
left: el.offsetLeft,
|
|
top: el.offsetTop
|
|
};
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#ready
|
|
* @description
|
|
* Call a function when the DOM is ready, or if it is already ready
|
|
* call the function immediately.
|
|
* @param {function} callback The function to be called.
|
|
*/
|
|
ready: function(cb) {
|
|
if(isDomReady || document.readyState === "complete") {
|
|
ionic.requestAnimationFrame(cb);
|
|
} else {
|
|
readyCallbacks.push(cb);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#getTextBounds
|
|
* @description
|
|
* Get a rect representing the bounds of the given textNode.
|
|
* @param {DOMElement} textNode The textNode to find the bounds of.
|
|
* @returns {object} An object representing the bounds of the node. Properties:
|
|
* - `{number}` `left` The left positton of the textNode.
|
|
* - `{number}` `right` The right positton of the textNode.
|
|
* - `{number}` `top` The top positton of the textNode.
|
|
* - `{number}` `bottom` The bottom position of the textNode.
|
|
* - `{number}` `width` The width of the textNode.
|
|
* - `{number}` `height` The height of the textNode.
|
|
*/
|
|
getTextBounds: function(textNode) {
|
|
if(document.createRange) {
|
|
var range = document.createRange();
|
|
range.selectNodeContents(textNode);
|
|
if(range.getBoundingClientRect) {
|
|
var rect = range.getBoundingClientRect();
|
|
if(rect) {
|
|
var sx = window.scrollX;
|
|
var sy = window.scrollY;
|
|
|
|
return {
|
|
top: rect.top + sy,
|
|
left: rect.left + sx,
|
|
right: rect.left + sx + rect.width,
|
|
bottom: rect.top + sy + rect.height,
|
|
width: rect.width,
|
|
height: rect.height
|
|
};
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#getChildIndex
|
|
* @description
|
|
* Get the first index of a child node within the given element of the
|
|
* specified type.
|
|
* @param {DOMElement} element The element to find the index of.
|
|
* @param {string} type The nodeName to match children of element against.
|
|
* @returns {number} The index, or -1, of a child with nodeName matching type.
|
|
*/
|
|
getChildIndex: function(element, type) {
|
|
if(type) {
|
|
var ch = element.parentNode.children;
|
|
var c;
|
|
for(var i = 0, k = 0, j = ch.length; i < j; i++) {
|
|
c = ch[i];
|
|
if(c.nodeName && c.nodeName.toLowerCase() == type) {
|
|
if(c == element) {
|
|
return k;
|
|
}
|
|
k++;
|
|
}
|
|
}
|
|
}
|
|
return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
swapNodes: function(src, dest) {
|
|
dest.parentNode.insertBefore(src, dest);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
centerElementByMargin: function(el) {
|
|
el.style.marginLeft = (-el.offsetWidth) / 2 + 'px';
|
|
el.style.marginTop = (-el.offsetHeight) / 2 + 'px';
|
|
},
|
|
//Center twice, after raf, to fix a bug with ios and showing elements
|
|
//that have just been attached to the DOM.
|
|
centerElementByMarginTwice: function(el) {
|
|
ionic.requestAnimationFrame(function() {
|
|
ionic.DomUtil.centerElementByMargin(el);
|
|
ionic.requestAnimationFrame(function() {
|
|
ionic.DomUtil.centerElementByMargin(el);
|
|
});
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#getParentWithClass
|
|
* @param {DOMElement} element
|
|
* @param {string} className
|
|
* @returns {DOMElement} The closest parent of element matching the
|
|
* className, or null.
|
|
*/
|
|
getParentWithClass: function(e, className, depth) {
|
|
depth = depth || 10;
|
|
while(e.parentNode && depth--) {
|
|
if(e.parentNode.classList && e.parentNode.classList.contains(className)) {
|
|
return e.parentNode;
|
|
}
|
|
e = e.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#getParentWithClass
|
|
* @param {DOMElement} element
|
|
* @param {string} className
|
|
* @returns {DOMElement} The closest parent or self matching the
|
|
* className, or null.
|
|
*/
|
|
getParentOrSelfWithClass: function(e, className, depth) {
|
|
depth = depth || 10;
|
|
while(e && depth--) {
|
|
if(e.classList && e.classList.contains(className)) {
|
|
return e;
|
|
}
|
|
e = e.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* @ngdoc method
|
|
* @name ionic.DomUtil#rectContains
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} x1
|
|
* @param {number} y1
|
|
* @param {number} x2
|
|
* @param {number} y2
|
|
* @returns {boolean} Whether {x,y} fits within the rectangle defined by
|
|
* {x1,y1,x2,y2}.
|
|
*/
|
|
rectContains: function(x, y, x1, y1, x2, y2) {
|
|
if(x < x1 || x > x2) return false;
|
|
if(y < y1 || y > y2) return false;
|
|
return true;
|
|
}
|
|
};
|
|
|
|
//Shortcuts
|
|
ionic.requestAnimationFrame = ionic.DomUtil.requestAnimationFrame;
|
|
ionic.animationFrameThrottle = ionic.DomUtil.animationFrameThrottle;
|
|
})(this, document, ionic);
|