mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
475 lines
13 KiB
TypeScript
475 lines
13 KiB
TypeScript
/*!
|
|
* Stickyfill -- `position: sticky` polyfill
|
|
* v. 1.1.3 | https://github.com/wilddeer/stickyfill
|
|
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
|
*
|
|
* MIT License
|
|
*/
|
|
|
|
export function StickyPoly(target) {
|
|
var watchArray = [],
|
|
scroll,
|
|
initialized = false,
|
|
html = document.documentElement,
|
|
noop = function() {},
|
|
checkTimer,
|
|
|
|
//visibility API strings
|
|
hiddenPropertyName = 'hidden',
|
|
visibilityChangeEventName = 'visibilitychange';
|
|
|
|
//fallback to prefixed names in old webkit browsers
|
|
if (document.webkitHidden !== undefined) {
|
|
hiddenPropertyName = 'webkitHidden';
|
|
visibilityChangeEventName = 'webkitvisibilitychange';
|
|
}
|
|
|
|
//test getComputedStyle
|
|
if (!window.getComputedStyle) {
|
|
seppuku();
|
|
}
|
|
|
|
//test for native support
|
|
var prefixes = ['', '-webkit-', '-moz-', '-ms-'],
|
|
block = document.createElement('div');
|
|
|
|
for (var i = prefixes.length - 1; i >= 0; i--) {
|
|
try {
|
|
block.style.position = prefixes[i] + 'sticky';
|
|
}
|
|
catch(e) {}
|
|
if (block.style.position != '') {
|
|
seppuku();
|
|
}
|
|
}
|
|
|
|
updateScrollPos();
|
|
|
|
//commit seppuku!
|
|
function seppuku() {
|
|
init = add = rebuild = pause = stop = kill = noop;
|
|
}
|
|
|
|
function mergeObjects(targetObj, sourceObject) {
|
|
for (var key in sourceObject) {
|
|
if (sourceObject.hasOwnProperty(key)) {
|
|
targetObj[key] = sourceObject[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
function parseNumeric(val) {
|
|
return parseFloat(val) || 0;
|
|
}
|
|
|
|
function updateScrollPos() {
|
|
scroll = {
|
|
top: target.scrollTop,
|
|
left: target.scrollLeft};
|
|
}
|
|
|
|
function onScroll() {
|
|
/*
|
|
console.log(scroll.top);
|
|
if (target.scrollLeft != scroll.left) {
|
|
updateScrollPos();
|
|
rebuild();
|
|
return;
|
|
}
|
|
|
|
if (target.scrollTop != scroll.top) {
|
|
updateScrollPos();
|
|
recalcAllPos();
|
|
}
|
|
*/
|
|
updateScrollPos();
|
|
recalcAllPos();
|
|
}
|
|
|
|
//fixes flickering
|
|
function onWheel(event) {
|
|
setTimeout(function() {
|
|
if (target.scrollTop != scroll.top) {
|
|
scroll.top = target.scrollTop;
|
|
recalcAllPos();
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
function recalcAllPos() {
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
recalcElementPos(watchArray[i]);
|
|
}
|
|
}
|
|
|
|
function recalcElementPos(el) {
|
|
if (!el.inited) return;
|
|
|
|
var currentMode = (scroll.top <= el.limit.start? 0: scroll.top >= el.limit.end? 2: 1);
|
|
|
|
if (el.mode != currentMode) {
|
|
switchElementMode(el, currentMode);
|
|
}
|
|
}
|
|
|
|
//checks whether stickies start or stop positions have changed
|
|
function fastCheck() {
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
if (!watchArray[i].inited) continue;
|
|
|
|
var deltaTop = Math.abs(getDocOffsetTop(watchArray[i].clone) - watchArray[i].docOffsetTop),
|
|
deltaHeight = Math.abs(watchArray[i].parent.node.offsetHeight - watchArray[i].parent.height);
|
|
|
|
if (deltaTop >= 2 || deltaHeight >= 2) return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function initElement(el) {
|
|
if (isNaN(parseFloat(el.computed.top)) || el.isCell || el.computed.display == 'none') return;
|
|
|
|
el.inited = true;
|
|
|
|
if (!el.clone) clone(el);
|
|
if (el.parent.computed.position != 'absolute' &&
|
|
el.parent.computed.position != 'relative') el.parent.node.style.position = 'relative';
|
|
|
|
recalcElementPos(el);
|
|
|
|
el.parent.height = el.parent.node.offsetHeight;
|
|
el.docOffsetTop = getDocOffsetTop(el.clone);
|
|
}
|
|
|
|
function deinitElement(el) {
|
|
var deinitParent = true;
|
|
|
|
el.clone && killClone(el);
|
|
mergeObjects(el.node.style, el.css);
|
|
|
|
//check whether element's parent is used by other stickies
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
if (watchArray[i].node !== el.node && watchArray[i].parent.node === el.parent.node) {
|
|
deinitParent = false;
|
|
break;
|
|
}
|
|
};
|
|
|
|
if (deinitParent) el.parent.node.style.position = el.parent.css.position;
|
|
el.mode = -1;
|
|
}
|
|
|
|
function initAll() {
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
initElement(watchArray[i]);
|
|
}
|
|
}
|
|
|
|
function deinitAll() {
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
deinitElement(watchArray[i]);
|
|
}
|
|
}
|
|
|
|
function switchElementMode(el, mode) {
|
|
var nodeStyle = el.node.style;
|
|
|
|
switch (mode) {
|
|
case 0:
|
|
nodeStyle.position = 'absolute';
|
|
nodeStyle.left = el.offset.left + 'px';
|
|
nodeStyle.right = el.offset.right + 'px';
|
|
nodeStyle.top = el.offset.top + 'px';
|
|
nodeStyle.bottom = 'auto';
|
|
nodeStyle.width = 'auto';
|
|
nodeStyle.marginLeft = 0;
|
|
nodeStyle.marginRight = 0;
|
|
nodeStyle.marginTop = 0;
|
|
break;
|
|
|
|
case 1:
|
|
nodeStyle.position = 'fixed';
|
|
nodeStyle.left = el.box.left + 'px';
|
|
nodeStyle.right = el.box.right + 'px';
|
|
nodeStyle.top = el.css.top;
|
|
nodeStyle.bottom = 'auto';
|
|
nodeStyle.width = 'auto';
|
|
nodeStyle.marginLeft = 0;
|
|
nodeStyle.marginRight = 0;
|
|
nodeStyle.marginTop = 0;
|
|
break;
|
|
|
|
case 2:
|
|
nodeStyle.position = 'absolute';
|
|
nodeStyle.left = el.offset.left + 'px';
|
|
nodeStyle.right = el.offset.right + 'px';
|
|
nodeStyle.top = 'auto';
|
|
nodeStyle.bottom = 0;
|
|
nodeStyle.width = 'auto';
|
|
nodeStyle.marginLeft = 0;
|
|
nodeStyle.marginRight = 0;
|
|
break;
|
|
}
|
|
|
|
el.mode = mode;
|
|
}
|
|
|
|
function clone(el) {
|
|
el.clone = document.createElement('div');
|
|
|
|
var refElement = el.node.nextSibling || el.node,
|
|
cloneStyle = el.clone.style;
|
|
|
|
cloneStyle.height = el.height + 'px';
|
|
cloneStyle.width = el.width + 'px';
|
|
cloneStyle.marginTop = el.computed.marginTop;
|
|
cloneStyle.marginBottom = el.computed.marginBottom;
|
|
cloneStyle.marginLeft = el.computed.marginLeft;
|
|
cloneStyle.marginRight = el.computed.marginRight;
|
|
cloneStyle.padding = cloneStyle.border = cloneStyle.borderSpacing = 0;
|
|
cloneStyle.fontSize = '1em';
|
|
cloneStyle.position = 'static';
|
|
cloneStyle.cssFloat = el.computed.cssFloat;
|
|
|
|
el.node.parentNode.insertBefore(el.clone, refElement);
|
|
}
|
|
|
|
function killClone(el) {
|
|
el.clone.parentNode.removeChild(el.clone);
|
|
el.clone = undefined;
|
|
}
|
|
|
|
function getElementParams(node) {
|
|
var computedStyle = getComputedStyle(node),
|
|
parentNode = node.parentNode,
|
|
parentComputedStyle = getComputedStyle(parentNode),
|
|
cachedPosition = node.style.position;
|
|
|
|
node.style.position = 'relative';
|
|
|
|
var computed = {
|
|
top: computedStyle.top,
|
|
marginTop: computedStyle.marginTop,
|
|
marginBottom: computedStyle.marginBottom,
|
|
marginLeft: computedStyle.marginLeft,
|
|
marginRight: computedStyle.marginRight,
|
|
cssFloat: computedStyle.cssFloat,
|
|
display: computedStyle.display
|
|
},
|
|
numeric = {
|
|
top: parseNumeric(computedStyle.top),
|
|
marginBottom: parseNumeric(computedStyle.marginBottom),
|
|
paddingLeft: parseNumeric(computedStyle.paddingLeft),
|
|
paddingRight: parseNumeric(computedStyle.paddingRight),
|
|
borderLeftWidth: parseNumeric(computedStyle.borderLeftWidth),
|
|
borderRightWidth: parseNumeric(computedStyle.borderRightWidth)
|
|
};
|
|
|
|
node.style.position = cachedPosition;
|
|
|
|
var css = {
|
|
position: node.style.position,
|
|
top: node.style.top,
|
|
bottom: node.style.bottom,
|
|
left: node.style.left,
|
|
right: node.style.right,
|
|
width: node.style.width,
|
|
marginTop: node.style.marginTop,
|
|
marginLeft: node.style.marginLeft,
|
|
marginRight: node.style.marginRight
|
|
},
|
|
nodeOffset = getElementOffset(node),
|
|
parentOffset = getElementOffset(parentNode),
|
|
|
|
parent = {
|
|
node: parentNode,
|
|
css: {
|
|
position: parentNode.style.position
|
|
},
|
|
computed: {
|
|
position: parentComputedStyle.position
|
|
},
|
|
numeric: {
|
|
borderLeftWidth: parseNumeric(parentComputedStyle.borderLeftWidth),
|
|
borderRightWidth: parseNumeric(parentComputedStyle.borderRightWidth),
|
|
borderTopWidth: parseNumeric(parentComputedStyle.borderTopWidth),
|
|
borderBottomWidth: parseNumeric(parentComputedStyle.borderBottomWidth)
|
|
}
|
|
},
|
|
|
|
el = {
|
|
node: node,
|
|
box: {
|
|
left: nodeOffset.win.left,
|
|
right: html.clientWidth - nodeOffset.win.right
|
|
},
|
|
offset: {
|
|
top: nodeOffset.win.top - parentOffset.win.top - parent.numeric.borderTopWidth,
|
|
left: nodeOffset.win.left - parentOffset.win.left - parent.numeric.borderLeftWidth,
|
|
right: -nodeOffset.win.right + parentOffset.win.right - parent.numeric.borderRightWidth
|
|
},
|
|
css: css,
|
|
isCell: computedStyle.display == 'table-cell',
|
|
computed: computed,
|
|
numeric: numeric,
|
|
width: nodeOffset.win.right - nodeOffset.win.left,
|
|
height: nodeOffset.win.bottom - nodeOffset.win.top,
|
|
mode: -1,
|
|
inited: false,
|
|
parent: parent,
|
|
limit: {
|
|
start: nodeOffset.doc.top - numeric.top,
|
|
end: parentOffset.doc.top + parentNode.offsetHeight - parent.numeric.borderBottomWidth -
|
|
node.offsetHeight - numeric.top - numeric.marginBottom
|
|
}
|
|
};
|
|
|
|
return el;
|
|
}
|
|
|
|
function getDocOffsetTop(node) {
|
|
var docOffsetTop = 0;
|
|
|
|
while (node) {
|
|
docOffsetTop += node.offsetTop;
|
|
node = node.offsetParent;
|
|
}
|
|
|
|
return docOffsetTop;
|
|
}
|
|
|
|
function getElementOffset(node) {
|
|
var box = node.getBoundingClientRect();
|
|
|
|
return {
|
|
doc: {
|
|
top: box.top + target.scrollTop,
|
|
left: box.left + target.scrollLeft},
|
|
win: box
|
|
};
|
|
}
|
|
|
|
function startFastCheckTimer() {
|
|
checkTimer = setInterval(function() {
|
|
!fastCheck() && rebuild();
|
|
}, 500);
|
|
}
|
|
|
|
function stopFastCheckTimer() {
|
|
clearInterval(checkTimer);
|
|
}
|
|
|
|
function handlePageVisibilityChange() {
|
|
if (!initialized) return;
|
|
|
|
if (document[hiddenPropertyName]) {
|
|
stopFastCheckTimer();
|
|
}
|
|
else {
|
|
startFastCheckTimer();
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
if (initialized) return;
|
|
|
|
// Store the left/top scroll positions
|
|
updateScrollPos();
|
|
|
|
// Initialize all elements added
|
|
initAll();
|
|
|
|
target.addEventListener('scroll', onScroll);
|
|
target.addEventListener('wheel', onWheel);
|
|
|
|
//watch for width changes
|
|
target.addEventListener('resize', rebuild);
|
|
target.addEventListener('orientationchange', rebuild);
|
|
|
|
//watch for page visibility
|
|
document.addEventListener(visibilityChangeEventName, handlePageVisibilityChange);
|
|
|
|
// Start a timer to respond to changes in the layout/size
|
|
startFastCheckTimer();
|
|
|
|
initialized = true;
|
|
}
|
|
|
|
function rebuild() {
|
|
if (!initialized) return;
|
|
|
|
deinitAll();
|
|
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
watchArray[i] = getElementParams(watchArray[i].node);
|
|
}
|
|
|
|
initAll();
|
|
}
|
|
|
|
function pause() {
|
|
target.removeEventListener('scroll', onScroll);
|
|
target.removeEventListener('wheel', onWheel);
|
|
target.removeEventListener('resize', rebuild);
|
|
target.removeEventListener('orientationchange', rebuild);
|
|
document.removeEventListener(visibilityChangeEventName, handlePageVisibilityChange);
|
|
|
|
stopFastCheckTimer();
|
|
|
|
initialized = false;
|
|
}
|
|
|
|
function stop() {
|
|
pause();
|
|
deinitAll();
|
|
}
|
|
|
|
function kill() {
|
|
stop();
|
|
|
|
//empty the array without loosing the references,
|
|
//the most performant method according to http://jsperf.com/empty-javascript-array
|
|
while (watchArray.length) {
|
|
watchArray.pop();
|
|
}
|
|
}
|
|
|
|
function add(node) {
|
|
//check if Stickyfill is already applied to the node
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
if (watchArray[i].node === node) return;
|
|
};
|
|
|
|
var el = getElementParams(node);
|
|
|
|
watchArray.push(el);
|
|
|
|
if (!initialized) {
|
|
init();
|
|
}
|
|
else {
|
|
initElement(el);
|
|
}
|
|
}
|
|
|
|
function remove(node) {
|
|
for (var i = watchArray.length - 1; i >= 0; i--) {
|
|
if (watchArray[i].node === node) {
|
|
deinitElement(watchArray[i]);
|
|
watchArray.splice(i, 1);
|
|
}
|
|
};
|
|
}
|
|
|
|
//expose Stickyfill
|
|
return {
|
|
stickies: watchArray,
|
|
add: add,
|
|
remove: remove,
|
|
init: init,
|
|
rebuild: rebuild,
|
|
pause: pause,
|
|
stop: stop,
|
|
kill: kill
|
|
};
|
|
}
|