fix(sticky): sticky headers. Fixes #383

ionic/components/app/structure.scss

@@ -185,3 +185,9 @@ ion-toolbar[position=bottom] {
   bottom: 0;
   z-index: $z-index-toolbar;
 }
+
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}

ionic/components/content/content.ts

@@ -6,7 +6,10 @@ import {Keyboard} from '../../util/keyboard';
 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';
 
+console.log(StickyPoly);
 
 /**
  * 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.
@@ -35,7 +38,7 @@ export class Content extends Ion {
    * @param {ElementRef} elementRef  A reference to the component's DOM element.
    * @param {Config} config  The config object to change content's default settings.
    */
-  constructor(elementRef: ElementRef, config: Config, keyboard: Keyboard, @Optional() viewCtrl: ViewController) {
+  constructor(elementRef: ElementRef, config: Config, keyboard: Keyboard, @Optional() viewCtrl: ViewController, private featureDetect: FeatureDetect) {
     super(elementRef, config);
     this.scrollPadding = 0;
     this.keyboard = keyboard;
@@ -46,6 +49,10 @@ export class Content extends Ion {
     }
   }
 
+  getStickyPolyfill() {
+    return this._sticky;
+  }
+
   /**
    * TODO
    * @private
@@ -53,6 +60,14 @@ export class Content extends Ion {
   onInit() {
     super.onInit();
     this.scrollElement = this.getNativeElement().children[0];
+
+    setTimeout(() => {
+      if(!this.featureDetect.has('sticky')) {
+        console.log('Enabling sticky polyfill');
+        this._sticky = StickyPoly(this.scrollElement);
+        //this._sticky.init();
+      }
+    })
   }
 
   /**

ionic/components/content/sticky-poly.ts

@@ -0,0 +1,474 @@
+/*!
+ * 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
+  };
+}

ionic/components/content/sticky.ts

@@ -0,0 +1,33 @@
+import {Content} from './content';
+
+export class StickyPolyfill {
+  constructor(private content: Content) {
+    this._els = [];
+  }
+
+  init() {
+    let handleScroll = (event) => {
+      let t = event.target;
+      let top = t.scrollTop;
+      console.log(top);
+
+    }
+
+    this._scrollListener = this.content.addScrollEventListener(handleScroll);
+  }
+  onDestroy() {
+    if(this._scrollListener) {
+      // Remove the old listener
+      this._scrollListener();
+    }
+  }
+  add(element: Element) {
+    this._els.push(this.initElement(element))
+  }
+
+  remove(element: Element) {
+  }
+
+  initElement(element) {
+  }
+}

ionic/components/item/item-group.ts

@@ -2,7 +2,6 @@ import {Directive, ElementRef, Host, Optional} from 'angular2/angular2';
 import {Content} from '../content/content';
 import {throttle} from '../../util/util';
 import {position, offset, CSS, raf} from '../../util/dom';
-import {FeatureDetect} from '../../util/feature-detect';
 import {Config} from '../../config/config';
 
 /**
@@ -39,125 +38,13 @@ export class ItemGroupTitle {
    * TODO
    * @param {ElementRef} elementRef  TODO
    */
-  constructor(elementRef: ElementRef, config: Config, content: Content, featureDetect: FeatureDetect) {
+  constructor(private elementRef: ElementRef, config: Config, private content: Content) {
+    // make sure the sticky class gets set on the title
     this.isSticky = true;
-    this.content = content;
-    this.ele = elementRef.nativeElement;
-    this.parent = this.ele.parentNode;
-    this.isCssValid = true;//featureDetect.has('positionsticky')
   }
-
   onInit() {
-    if (!this.content || this.isCssValid) { return; }
+    setTimeout(() => {
-
+      this.content.getStickyPolyfill().add(this.elementRef.nativeElement);
-    this.scrollContent = this.content.elementRef.nativeElement.children[0];
+    })
-
-    this.scrollMin = 0;
-    this.scrollMax = 0;
-    this.scrollTransition = 0;
-    this.isSticking = false;
-
-    this.scrollContent.addEventListener('scroll', event => this.scrollEvent(event));
-
-    this.calculateScrollLimits = scrollTop => {
-      var containerPosition = position(this.parent);
-      var elementOffset = offset(this.ele);
-
-      var containerTop = containerPosition.top;
-      var containerHeight = containerPosition.height;
-
-      var affixHeight = elementOffset.height;
-
-      this.scrollMin = containerTop;
-      this.scrollMax = this.scrollMin + containerHeight;
-      this.scrollTransition = this.scrollMax - affixHeight;
-    };
-
-    // throttled version of the same calculation
-    let CALCULATION_THROTTLE_MS = 500;
-    this.throttledCalculateScrollLimits = throttle(
-      this.calculateScrollLimits,
-      CALCULATION_THROTTLE_MS,
-      {trailing: false}
-    );
-  }
-
-  applyTransform(element, transformString) {
-   // do not apply the transformation if it is already applied
-   if (element.style[CSS.transform] == transformString) {
-   }
-   else {
-     element.style[CSS.transform] = transformString;
-   }
-  }
-
-  translateUp(element, dy, executeImmediately) {
-    var translateDyPixelsUp = dy == 0 ? 'translate3d(0px, 0px, 0px)' : 'translate3d(0px, -' + dy + 'px, 0px)';
-    // if immediate execution is requested, then just execute immediately
-    // if not, execute in the animation frame.
-    if (executeImmediately) {
-      this.applyTransform(element, translateDyPixelsUp);
-    }
-    else {
-      raf( a => this.applyTransform(element, translateDyPixelsUp) );
-    }
-  }
-
-  createAffixClone() {
-    var clone = this.ele.cloneNode(true);
-    clone.style.position = 'absolute';
-    clone.style.top = 0;
-    clone.style.left = 0;
-    clone.style.right = 0;
-
-    this.scrollContent.parentNode.appendChild(clone);
-    return clone;
-  }
-
-  scrollEvent(event) {
-    var scrollTop = event.target.scrollTop;
-
-    // when scroll to top, we should always execute the immediate calculation.
-    // this is because of some weird problem which is hard to describe.
-    // if you want to experiment, always use the throttled one and just click on the page
-    // you will see all affix elements stacked on top
-    if (scrollTop == 0) {
-      this.calculateScrollLimits(scrollTop);
-    }
-    else {
-      this.throttledCalculateScrollLimits(scrollTop);
-    }
-
-    // when we scrolled to the container, create the clone of element and place it on top
-    if (scrollTop >= this.scrollMin && scrollTop <= this.scrollMax) {
-      // we need to track if we created the clone just now
-      // that is important since normally we apply the transforms in the animation frame
-      // but, we need to apply the transform immediately when we add the element for the first time. otherwise it is too late!
-      var cloneCreatedJustNow = false;
-
-      if (!this.affixClone) {
-        this.affixClone = this.createAffixClone();
-        cloneCreatedJustNow = true;
-        this.isSticking = true;
-      }
-
-      // if we're reaching towards the end of the container, apply some nice translation to move up/down the clone
-      // but if we're reached already to the container and we're far away than the end, move clone to top
-      if (scrollTop > this.scrollTransition) {
-        this.translateUp(this.affixClone, Math.floor(scrollTop - this.scrollTransition), cloneCreatedJustNow);
-      } else {
-        this.translateUp(this.affixClone, 0, cloneCreatedJustNow);
-      }
-    } else {
-      this.removeAffixClone();
-      this.isSticking = false;
-    }
-  }
-
-  removeAffixClone() {
-    if (this.affixClone) {
-      this.scrollContent.parentNode.removeChild(this.affixClone);
-      this.affixClone = null;
-    }
   }
 }

ionic/util/feature-detect.ts

@@ -21,7 +21,7 @@ export class FeatureDetect {
 let featureDetects = {};
 
 
-FeatureDetect.add('positionsticky', function(window, document) {
+FeatureDetect.add('sticky', function(window, document) {
   // css position sticky
   let ele = document.createElement('div');
   ele.style.cssText = 'position:-webkit-sticky;position:sticky';

scripts/e2e/e2e.template.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <title>Ionic E2E</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <link href="../../../css/ionic.css" rel="stylesheet">