1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | (function( window, angular, undefined ){
|
---|
8 | "use strict";
|
---|
9 |
|
---|
10 | /**
|
---|
11 | * @ngdoc module
|
---|
12 | * @name material.components.sticky
|
---|
13 | * @description
|
---|
14 | * Sticky effects for md.
|
---|
15 | */
|
---|
16 | MdSticky['$inject'] = ["$mdConstant", "$$rAF", "$mdUtil", "$compile"];
|
---|
17 | angular
|
---|
18 | .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 the capability to make elements sticky, even when the browser
|
---|
31 | * does not support `position: sticky`.
|
---|
32 | *
|
---|
33 | * Whenever the current browser supports stickiness natively, the `$mdSticky` service will leverage
|
---|
34 | * the native browser's sticky functionality.
|
---|
35 | *
|
---|
36 | * By default the `$mdSticky` service compiles the cloned element, when not specified through the
|
---|
37 | * `stickyClone` parameter, in the same scope as the actual element lives.
|
---|
38 | *
|
---|
39 | * @usage
|
---|
40 | * <hljs lang="js">
|
---|
41 | * angular.module('myModule')
|
---|
42 | * .directive('stickyText', function($mdSticky) {
|
---|
43 | * return {
|
---|
44 | * restrict: 'E',
|
---|
45 | * template: '<span>Sticky Text</span>',
|
---|
46 | * link: function(scope, element) {
|
---|
47 | * $mdSticky(scope, element);
|
---|
48 | * }
|
---|
49 | * };
|
---|
50 | * });
|
---|
51 | * </hljs>
|
---|
52 | *
|
---|
53 | * <h3>Notes</h3>
|
---|
54 | * When using an element which contains a compiled directive that changes the DOM structure
|
---|
55 | * during compilation, you should compile the clone yourself.
|
---|
56 | *
|
---|
57 | * An example of this usage can be found below:
|
---|
58 | * <hljs lang="js">
|
---|
59 | * angular.module('myModule')
|
---|
60 | * .directive('stickySelect', function($mdSticky, $compile) {
|
---|
61 | * var SELECT_TEMPLATE =
|
---|
62 | * '<md-select ng-model="selected">' +
|
---|
63 | * ' <md-option>Option 1</md-option>' +
|
---|
64 | * '</md-select>';
|
---|
65 | *
|
---|
66 | * return {
|
---|
67 | * restrict: 'E',
|
---|
68 | * replace: true,
|
---|
69 | * template: SELECT_TEMPLATE,
|
---|
70 | * link: function(scope, element) {
|
---|
71 | * $mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
|
---|
72 | * }
|
---|
73 | * };
|
---|
74 | * });
|
---|
75 | * </hljs>
|
---|
76 | *
|
---|
77 | * @returns {function(IScope, JQLite, ITemplateLinkingFunction=): void} `$mdSticky` returns a
|
---|
78 | * function that takes three arguments:
|
---|
79 | * - `scope`: the scope to use when compiling the clone and listening for the `$destroy` event,
|
---|
80 | * which triggers removal of the clone
|
---|
81 | * - `element`: the element that will be 'sticky'
|
---|
82 | * - `stickyClone`: An optional clone of the element (returned from AngularJS'
|
---|
83 | * [$compile service](https://docs.angularjs.org/api/ng/service/$compile#usage)),
|
---|
84 | * that will be shown when the user starts scrolling past the original element. If not
|
---|
85 | * provided, the result of `element.clone()` will be used and compiled in the given scope.
|
---|
86 | */
|
---|
87 | function MdSticky($mdConstant, $$rAF, $mdUtil, $compile) {
|
---|
88 |
|
---|
89 | var browserStickySupport = $mdUtil.checkStickySupport();
|
---|
90 |
|
---|
91 | /**
|
---|
92 | * Registers an element as sticky, used internally by directives to register themselves.
|
---|
93 | */
|
---|
94 | return function registerStickyElement(scope, element, stickyClone) {
|
---|
95 | var contentCtrl = element.controller('mdContent');
|
---|
96 | if (!contentCtrl) return;
|
---|
97 |
|
---|
98 | if (browserStickySupport) {
|
---|
99 | element.css({
|
---|
100 | position: browserStickySupport,
|
---|
101 | top: 0,
|
---|
102 | 'z-index': 2
|
---|
103 | });
|
---|
104 | } else {
|
---|
105 | var $$sticky = contentCtrl.$element.data('$$sticky');
|
---|
106 | if (!$$sticky) {
|
---|
107 | $$sticky = setupSticky(contentCtrl);
|
---|
108 | contentCtrl.$element.data('$$sticky', $$sticky);
|
---|
109 | }
|
---|
110 |
|
---|
111 | // Compile our cloned element, when cloned in this service, into the given scope.
|
---|
112 | var cloneElement = stickyClone || $compile(element.clone())(scope);
|
---|
113 |
|
---|
114 | var deregister = $$sticky.add(element, cloneElement);
|
---|
115 | scope.$on('$destroy', deregister);
|
---|
116 | }
|
---|
117 | };
|
---|
118 |
|
---|
119 | function setupSticky(contentCtrl) {
|
---|
120 | var contentEl = contentCtrl.$element;
|
---|
121 |
|
---|
122 | // Refresh elements is very expensive, so we use the debounced
|
---|
123 | // version when possible.
|
---|
124 | var debouncedRefreshElements = $$rAF.throttle(refreshElements);
|
---|
125 |
|
---|
126 | // setupAugmentedScrollEvents gives us `$scrollstart` and `$scroll`,
|
---|
127 | // more reliable than `scroll` on android.
|
---|
128 | setupAugmentedScrollEvents(contentEl);
|
---|
129 | contentEl.on('$scrollstart', debouncedRefreshElements);
|
---|
130 | contentEl.on('$scroll', onScroll);
|
---|
131 |
|
---|
132 | var self;
|
---|
133 | return self = {
|
---|
134 | prev: null,
|
---|
135 | current: null, // the currently stickied item
|
---|
136 | next: null,
|
---|
137 | items: [],
|
---|
138 | add: add,
|
---|
139 | refreshElements: refreshElements
|
---|
140 | };
|
---|
141 |
|
---|
142 | /***************
|
---|
143 | * Public
|
---|
144 | ***************/
|
---|
145 | // Add an element and its sticky clone to this content's sticky collection
|
---|
146 | function add(element, stickyClone) {
|
---|
147 | stickyClone.addClass('md-sticky-clone');
|
---|
148 |
|
---|
149 | var item = {
|
---|
150 | element: element,
|
---|
151 | clone: stickyClone
|
---|
152 | };
|
---|
153 | self.items.push(item);
|
---|
154 |
|
---|
155 | $mdUtil.nextTick(function() {
|
---|
156 | contentEl.prepend(item.clone);
|
---|
157 | });
|
---|
158 |
|
---|
159 | debouncedRefreshElements();
|
---|
160 |
|
---|
161 | return function remove() {
|
---|
162 | self.items.forEach(function(item, index) {
|
---|
163 | if (item.element[0] === element[0]) {
|
---|
164 | self.items.splice(index, 1);
|
---|
165 | item.clone.remove();
|
---|
166 | }
|
---|
167 | });
|
---|
168 | debouncedRefreshElements();
|
---|
169 | };
|
---|
170 | }
|
---|
171 |
|
---|
172 | function refreshElements() {
|
---|
173 | // Sort our collection of elements by their current position in the DOM.
|
---|
174 | // We need to do this because our elements' order of being added may not
|
---|
175 | // be the same as their order of display.
|
---|
176 | self.items.forEach(refreshPosition);
|
---|
177 | self.items = self.items.sort(function(a, b) {
|
---|
178 | return a.top < b.top ? -1 : 1;
|
---|
179 | });
|
---|
180 |
|
---|
181 | // Find which item in the list should be active,
|
---|
182 | // based upon the content's current scroll position
|
---|
183 | var item;
|
---|
184 | var currentScrollTop = contentEl.prop('scrollTop');
|
---|
185 | for (var i = self.items.length - 1; i >= 0; i--) {
|
---|
186 | if (currentScrollTop > self.items[i].top) {
|
---|
187 | item = self.items[i];
|
---|
188 | break;
|
---|
189 | }
|
---|
190 | }
|
---|
191 | setCurrentItem(item);
|
---|
192 | }
|
---|
193 |
|
---|
194 | /***************
|
---|
195 | * Private
|
---|
196 | ***************/
|
---|
197 |
|
---|
198 | // Find the `top` of an item relative to the content element,
|
---|
199 | // and also the height.
|
---|
200 | function refreshPosition(item) {
|
---|
201 | // Find the top of an item by adding to the offsetHeight until we reach the
|
---|
202 | // content element.
|
---|
203 | var current = item.element[0];
|
---|
204 | item.top = 0;
|
---|
205 | item.left = 0;
|
---|
206 | item.right = 0;
|
---|
207 | while (current && current !== contentEl[0]) {
|
---|
208 | item.top += current.offsetTop;
|
---|
209 | item.left += current.offsetLeft;
|
---|
210 | if (current.offsetParent) {
|
---|
211 | // Compute offsetRight
|
---|
212 | item.right += current.offsetParent.offsetWidth - current.offsetWidth - current.offsetLeft;
|
---|
213 | }
|
---|
214 | current = current.offsetParent;
|
---|
215 | }
|
---|
216 | item.height = item.element.prop('offsetHeight');
|
---|
217 |
|
---|
218 | var defaultVal = $mdUtil.floatingScrollbars() ? '0' : undefined;
|
---|
219 | $mdUtil.bidi(item.clone, 'margin-left', item.left, defaultVal);
|
---|
220 | $mdUtil.bidi(item.clone, 'margin-right', defaultVal, item.right);
|
---|
221 | }
|
---|
222 |
|
---|
223 | // As we scroll, push in and select the correct sticky element.
|
---|
224 | function onScroll() {
|
---|
225 | var scrollTop = contentEl.prop('scrollTop');
|
---|
226 | var isScrollingDown = scrollTop > (onScroll.prevScrollTop || 0);
|
---|
227 |
|
---|
228 | // Store the previous scroll so we know which direction we are scrolling
|
---|
229 | onScroll.prevScrollTop = scrollTop;
|
---|
230 |
|
---|
231 | //
|
---|
232 | // AT TOP (not scrolling)
|
---|
233 | //
|
---|
234 | if (scrollTop === 0) {
|
---|
235 | // If we're at the top, just clear the current item and return
|
---|
236 | setCurrentItem(null);
|
---|
237 | return;
|
---|
238 | }
|
---|
239 |
|
---|
240 | //
|
---|
241 | // SCROLLING DOWN (going towards the next item)
|
---|
242 | //
|
---|
243 | if (isScrollingDown) {
|
---|
244 |
|
---|
245 | // If we've scrolled down past the next item's position, sticky it and return
|
---|
246 | if (self.next && self.next.top <= scrollTop) {
|
---|
247 | setCurrentItem(self.next);
|
---|
248 | return;
|
---|
249 | }
|
---|
250 |
|
---|
251 | // If the next item is close to the current one, push the current one up out of the way
|
---|
252 | if (self.current && self.next && self.next.top - scrollTop <= self.next.height) {
|
---|
253 | translate(self.current, scrollTop + (self.next.top - self.next.height - scrollTop));
|
---|
254 | return;
|
---|
255 | }
|
---|
256 | }
|
---|
257 |
|
---|
258 | //
|
---|
259 | // SCROLLING UP (not at the top & not scrolling down; must be scrolling up)
|
---|
260 | //
|
---|
261 | if (!isScrollingDown) {
|
---|
262 |
|
---|
263 | // If we've scrolled up past the previous item's position, sticky it and return
|
---|
264 | if (self.current && self.prev && scrollTop < self.current.top) {
|
---|
265 | setCurrentItem(self.prev);
|
---|
266 | return;
|
---|
267 | }
|
---|
268 |
|
---|
269 | // If the next item is close to the current one, pull the current one down into view
|
---|
270 | if (self.next && self.current && (scrollTop >= (self.next.top - self.current.height))) {
|
---|
271 | translate(self.current, scrollTop + (self.next.top - scrollTop - self.current.height));
|
---|
272 | return;
|
---|
273 | }
|
---|
274 | }
|
---|
275 |
|
---|
276 | //
|
---|
277 | // Otherwise, just move the current item to the proper place (scrolling up or down)
|
---|
278 | //
|
---|
279 | if (self.current) {
|
---|
280 | translate(self.current, scrollTop);
|
---|
281 | }
|
---|
282 | }
|
---|
283 |
|
---|
284 | function setCurrentItem(item) {
|
---|
285 | if (self.current === item) return;
|
---|
286 | // Deactivate currently active item
|
---|
287 | if (self.current) {
|
---|
288 | translate(self.current, null);
|
---|
289 | setStickyState(self.current, null);
|
---|
290 | }
|
---|
291 |
|
---|
292 | // Activate new item if given
|
---|
293 | if (item) {
|
---|
294 | setStickyState(item, 'active');
|
---|
295 | }
|
---|
296 |
|
---|
297 | self.current = item;
|
---|
298 | var index = self.items.indexOf(item);
|
---|
299 | // If index === -1, index + 1 = 0. It works out.
|
---|
300 | self.next = self.items[index + 1];
|
---|
301 | self.prev = self.items[index - 1];
|
---|
302 | setStickyState(self.next, 'next');
|
---|
303 | setStickyState(self.prev, 'prev');
|
---|
304 | }
|
---|
305 |
|
---|
306 | function setStickyState(item, state) {
|
---|
307 | if (!item || item.state === state) return;
|
---|
308 | if (item.state) {
|
---|
309 | item.clone.attr('sticky-prev-state', item.state);
|
---|
310 | item.element.attr('sticky-prev-state', item.state);
|
---|
311 | }
|
---|
312 | item.clone.attr('sticky-state', state);
|
---|
313 | item.element.attr('sticky-state', state);
|
---|
314 | item.state = state;
|
---|
315 | }
|
---|
316 |
|
---|
317 | function translate(item, amount) {
|
---|
318 | if (!item) return;
|
---|
319 | if (amount === null || amount === undefined) {
|
---|
320 | if (item.translateY) {
|
---|
321 | item.translateY = null;
|
---|
322 | item.clone.css($mdConstant.CSS.TRANSFORM, '');
|
---|
323 | }
|
---|
324 | } else {
|
---|
325 | item.translateY = amount;
|
---|
326 |
|
---|
327 | $mdUtil.bidi(item.clone, $mdConstant.CSS.TRANSFORM,
|
---|
328 | 'translate3d(' + item.left + 'px,' + amount + 'px,0)',
|
---|
329 | 'translateY(' + amount + 'px)'
|
---|
330 | );
|
---|
331 | }
|
---|
332 | }
|
---|
333 | }
|
---|
334 |
|
---|
335 |
|
---|
336 | // Android 4.4 don't accurately give scroll events.
|
---|
337 | // To fix this problem, we setup a fake scroll event. We say:
|
---|
338 | // > If a scroll or touchmove event has happened in the last DELAY milliseconds,
|
---|
339 | // then send a `$scroll` event every animationFrame.
|
---|
340 | // Additionally, we add $scrollstart and $scrollend events.
|
---|
341 | function setupAugmentedScrollEvents(element) {
|
---|
342 | var SCROLL_END_DELAY = 200;
|
---|
343 | var isScrolling;
|
---|
344 | var lastScrollTime;
|
---|
345 | element.on('scroll touchmove', function() {
|
---|
346 | if (!isScrolling) {
|
---|
347 | isScrolling = true;
|
---|
348 | $$rAF.throttle(loopScrollEvent);
|
---|
349 | element.triggerHandler('$scrollstart');
|
---|
350 | }
|
---|
351 | element.triggerHandler('$scroll');
|
---|
352 | lastScrollTime = +$mdUtil.now();
|
---|
353 | });
|
---|
354 |
|
---|
355 | function loopScrollEvent() {
|
---|
356 | if (+$mdUtil.now() - lastScrollTime > SCROLL_END_DELAY) {
|
---|
357 | isScrolling = false;
|
---|
358 | element.triggerHandler('$scrollend');
|
---|
359 | } else {
|
---|
360 | element.triggerHandler('$scroll');
|
---|
361 | $$rAF.throttle(loopScrollEvent);
|
---|
362 | }
|
---|
363 | }
|
---|
364 | }
|
---|
365 |
|
---|
366 | }
|
---|
367 |
|
---|
368 | })(window, window.angular); |
---|