diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 800b7958ea..c2097dabc3 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -7,7 +7,6 @@ import {ViewController} from '../nav/view-controller'; import {Animation} from '../../animations/animation'; import {ScrollTo} from '../../animations/scroll-to'; import {FeatureDetect} from '../../util/feature-detect'; -import {StickyPoly} from './sticky-poly'; /** * The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser. @@ -37,7 +36,7 @@ export class Content extends Ion { * @param {Config} config The config object to change content's default settings. */ constructor(elementRef: ElementRef, config: Config, keyboard: Keyboard, - @Optional() viewCtrl: ViewController, private featureDetect: FeatureDetect, + @Optional() viewCtrl: ViewController) { private _zone: NgZone) { super(elementRef, config); this.scrollPadding = 0; @@ -49,10 +48,6 @@ export class Content extends Ion { } } - getStickyPolyfill() { - return this._sticky; - } - /** * TODO * @private @@ -60,14 +55,6 @@ export class Content extends Ion { onInit() { super.onInit(); this.scrollElement = this.getNativeElement().children[0]; - - if(!this.featureDetect.has('sticky')) { - this._zone.runOutsideAngular(() => { - setTimeout(() => { - this._sticky = StickyPoly(this.scrollElement); - }); - }); - } } /** diff --git a/ionic/components/content/sticky-poly.ts b/ionic/components/content/sticky-poly.ts deleted file mode 100644 index 77de72a50c..0000000000 --- a/ionic/components/content/sticky-poly.ts +++ /dev/null @@ -1,474 +0,0 @@ -/*! - * 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 - }; -} diff --git a/ionic/components/item/item-group.ts b/ionic/components/item/item-group.ts index 16e04d4800..0981cb15c4 100644 --- a/ionic/components/item/item-group.ts +++ b/ionic/components/item/item-group.ts @@ -47,13 +47,4 @@ export class ItemGroupTitle { // make sure the sticky class gets set on the title this.isSticky = true; } - onInit() { - this.zone.runOutsideAngular(() => { - setTimeout(() => { - if(this.content.getStickyPolyfill()) { - this.content.getStickyPolyfill().add(this.elementRef.nativeElement); - } - }); - }); - } }