ecomp-portal-FE/client/bower_components/angular-material/modules/closure/sticky/sticky.js

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 goog.provide('ng.material.components.sticky');
   8 goog.require('ng.material.components.content');
   9 goog.require('ng.material.core');
  10 /*
  11  * @ngdoc module
  12  * @name material.components.sticky
  13  * @description
  14  *
  15  * Sticky effects for md
  16  */
  17
  18 angular.module('material.components.sticky', [
  19   'material.core',
  20   'material.components.content'
  21 ])
  22   .factory('$mdSticky', MdSticky);
  23
  24 /*
  25  * @ngdoc service
  26  * @name $mdSticky
  27  * @module material.components.sticky
  28  *
  29  * @description
  30  * The `$mdSticky`service provides a mixin to make elements sticky.
  31  *
  32  * @returns A `$mdSticky` function that takes three arguments:
  33  *   - `scope`
  34  *   - `element`: The element that will be 'sticky'
  35  *   - `elementClone`: A clone of the element, that will be shown
  36  *     when the user starts scrolling past the original element.
  37  *     If not provided, it will use the result of `element.clone()`.
  38  */
  39
  40 function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
  41
  42   var browserStickySupport = checkStickySupport();
  43
  44   /**
  45    * Registers an element as sticky, used internally by directives to register themselves
  46    */
  47   return function registerStickyElement(scope, element, stickyClone) {
  48     var contentCtrl = element.controller('mdContent');
  49     if (!contentCtrl) return;
  50
  51     if (browserStickySupport) {
  52       element.css({
  53         position: browserStickySupport,
  54         top: 0,
  55         'z-index': 2
  56       });
  57     } else {
  58       var $$sticky = contentCtrl.$element.data('$$sticky');
  59       if (!$$sticky) {
  60         $$sticky = setupSticky(contentCtrl);
  61         contentCtrl.$element.data('$$sticky', $$sticky);
  62       }
  63
  64       var deregister = $$sticky.add(element, stickyClone || element.clone());
  65       scope.$on('$destroy', deregister);
  66     }
  67   };
  68
  69   function setupSticky(contentCtrl) {
  70     var contentEl = contentCtrl.$element;
  71
  72     // Refresh elements is very expensive, so we use the debounced
  73     // version when possible.
  74     var debouncedRefreshElements = $$rAF.throttle(refreshElements);
  75
  76     // setupAugmentedScrollEvents gives us `$scrollstart` and `$scroll`,
  77     // more reliable than `scroll` on android.
  78     setupAugmentedScrollEvents(contentEl);
  79     contentEl.on('$scrollstart', debouncedRefreshElements);
  80     contentEl.on('$scroll', onScroll);
  81
  82     var self;
  83     var stickyBaseoffset = contentEl.prop('offsetTop');
  84     return self = {
  85       prev: null,
  86       current: null, //the currently stickied item
  87       next: null,
  88       items: [],
  89       add: add,
  90       refreshElements: refreshElements
  91     };
  92
  93     /***************
  94      * Public
  95      ***************/
  96     // Add an element and its sticky clone to this content's sticky collection
  97     function add(element, stickyClone) {
  98       stickyClone.addClass('md-sticky-clone');
  99       stickyClone.css('top', stickyBaseoffset + 'px');
 100
 101       var item = {
 102         element: element,
 103         clone: stickyClone
 104       };
 105       self.items.push(item);
 106
 107       contentEl.parent().prepend(item.clone);
 108
 109       debouncedRefreshElements();
 110
 111       return function remove() {
 112         self.items.forEach(function(item, index) {
 113           if (item.element[0] === element[0]) {
 114             self.items.splice(index, 1);
 115             item.clone.remove();
 116           }
 117         });
 118         debouncedRefreshElements();
 119       };
 120     }
 121
 122     function refreshElements() {
 123       // Sort our collection of elements by their current position in the DOM.
 124       // We need to do this because our elements' order of being added may not
 125       // be the same as their order of display.
 126       self.items.forEach(refreshPosition);
 127       self.items = self.items.sort(function(a, b) {
 128         return a.top < b.top ? -1 : 1;
 129       });
 130
 131       // Find which item in the list should be active,
 132       // based upon the content's current scroll position
 133       var item;
 134       var currentScrollTop = contentEl.prop('scrollTop');
 135       for (var i = self.items.length - 1; i >= 0; i--) {
 136         if (currentScrollTop > self.items[i].top) {
 137           item = self.items[i];
 138           break;
 139         }
 140       }
 141       setCurrentItem(item);
 142     }
 143
 144
 145     /***************
 146      * Private
 147      ***************/
 148
 149     // Find the `top` of an item relative to the content element,
 150     // and also the height.
 151     function refreshPosition(item) {
 152       // Find the top of an item by adding to the offsetHeight until we reach the
 153       // content element.
 154       var current = item.element[0];
 155       item.top = 0;
 156       item.left = 0;
 157       while (current && current !== contentEl[0]) {
 158         item.top += current.offsetTop;
 159         item.left += current.offsetLeft;
 160         current = current.offsetParent;
 161       }
 162       item.height = item.element.prop('offsetHeight');
 163       item.clone.css('margin-left', item.left + 'px');
 164       if ($mdUtil.floatingScrollbars()) {
 165         item.clone.css('margin-right', '0');
 166       }
 167     }
 168
 169
 170     // As we scroll, push in and select the correct sticky element.
 171     function onScroll() {
 172       var scrollTop = contentEl.prop('scrollTop');
 173       var isScrollingDown = scrollTop > (onScroll.prevScrollTop || 0);
 174       onScroll.prevScrollTop = scrollTop;
 175
 176       // At the top?
 177       if (scrollTop === 0) {
 178         setCurrentItem(null);
 179
 180       // Going to next item?
 181       } else if (isScrollingDown && self.next) {
 182         if (self.next.top - scrollTop <= 0) {
 183           // Sticky the next item if we've scrolled past its position.
 184           setCurrentItem(self.next);
 185         } else if (self.current) {
 186           // Push the current item up when we're almost at the next item.
 187           if (self.next.top - scrollTop <= self.next.height) {
 188             translate(self.current, self.next.top - self.next.height - scrollTop);
 189           } else {
 190             translate(self.current, null);
 191           }
 192         }
 193
 194       // Scrolling up with a current sticky item?
 195       } else if (!isScrollingDown && self.current) {
 196         if (scrollTop < self.current.top) {
 197           // Sticky the previous item if we've scrolled up past
 198           // the original position of the currently stickied item.
 199           setCurrentItem(self.prev);
 200         }
 201         // Scrolling up, and just bumping into the item above (just set to current)?
 202         // If we have a next item bumping into the current item, translate
 203         // the current item up from the top as it scrolls into view.
 204         if (self.current && self.next) {
 205           if (scrollTop >= self.next.top - self.current.height) {
 206             translate(self.current, self.next.top - scrollTop - self.current.height);
 207           } else {
 208             translate(self.current, null);
 209           }
 210         }
 211       }
 212     }
 213
 214    function setCurrentItem(item) {
 215      if (self.current === item) return;
 216      // Deactivate currently active item
 217      if (self.current) {
 218        translate(self.current, null);
 219        setStickyState(self.current, null);
 220      }
 221
 222      // Activate new item if given
 223      if (item) {
 224        setStickyState(item, 'active');
 225      }
 226
 227      self.current = item;
 228      var index = self.items.indexOf(item);
 229      // If index === -1, index + 1 = 0. It works out.
 230      self.next = self.items[index + 1];
 231      self.prev = self.items[index - 1];
 232      setStickyState(self.next, 'next');
 233      setStickyState(self.prev, 'prev');
 234    }
 235
 236    function setStickyState(item, state) {
 237      if (!item || item.state === state) return;
 238      if (item.state) {
 239        item.clone.attr('sticky-prev-state', item.state);
 240        item.element.attr('sticky-prev-state', item.state);
 241      }
 242      item.clone.attr('sticky-state', state);
 243      item.element.attr('sticky-state', state);
 244      item.state = state;
 245    }
 246
 247    function translate(item, amount) {
 248      if (!item) return;
 249      if (amount === null || amount === undefined) {
 250        if (item.translateY) {
 251          item.translateY = null;
 252          item.clone.css($mdConstant.CSS.TRANSFORM, '');
 253        }
 254      } else {
 255        item.translateY = amount;
 256        item.clone.css(
 257          $mdConstant.CSS.TRANSFORM,
 258          'translate3d(' + item.left + 'px,' + amount + 'px,0)'
 259        );
 260      }
 261    }
 262   }
 263
 264   // Function to check for browser sticky support
 265   function checkStickySupport($el) {
 266     var stickyProp;
 267     var testEl = angular.element('<div>');
 268     $document[0].body.appendChild(testEl[0]);
 269
 270     var stickyProps = ['sticky', '-webkit-sticky'];
 271     for (var i = 0; i < stickyProps.length; ++i) {
 272       testEl.css({position: stickyProps[i], top: 0, 'z-index': 2});
 273       if (testEl.css('position') == stickyProps[i]) {
 274         stickyProp = stickyProps[i];
 275         break;
 276       }
 277     }
 278     testEl.remove();
 279     return stickyProp;
 280   }
 281
 282   // Android 4.4 don't accurately give scroll events.
 283   // To fix this problem, we setup a fake scroll event. We say:
 284   // > If a scroll or touchmove event has happened in the last DELAY milliseconds,
 285   //   then send a `$scroll` event every animationFrame.
 286   // Additionally, we add $scrollstart and $scrollend events.
 287   function setupAugmentedScrollEvents(element) {
 288     var SCROLL_END_DELAY = 200;
 289     var isScrolling;
 290     var lastScrollTime;
 291     element.on('scroll touchmove', function() {
 292       if (!isScrolling) {
 293         isScrolling = true;
 294         $$rAF(loopScrollEvent);
 295         element.triggerHandler('$scrollstart');
 296       }
 297       element.triggerHandler('$scroll');
 298       lastScrollTime = +$mdUtil.now();
 299     });
 300
 301     function loopScrollEvent() {
 302       if (+$mdUtil.now() - lastScrollTime > SCROLL_END_DELAY) {
 303         isScrolling = false;
 304         element.triggerHandler('$scrollend');
 305       } else {
 306         element.triggerHandler('$scroll');
 307         $$rAF(loopScrollEvent);
 308       }
 309     }
 310   }
 311
 312 }
 313 MdSticky.$inject = ["$document", "$mdConstant", "$compile", "$$rAF", "$mdUtil"];
 314
 315 ng.material.components.sticky = angular.module("material.components.sticky");