309 lines
9.2 KiB
JavaScript
309 lines
9.2 KiB
JavaScript
/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v0.7.0-rc3
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
/*
|
|
* @ngdoc module
|
|
* @name material.components.sticky
|
|
* @description
|
|
*
|
|
* Sticky effects for md
|
|
*/
|
|
|
|
angular.module('material.components.sticky', [
|
|
'material.core',
|
|
'material.components.content'
|
|
])
|
|
.factory('$mdSticky', MdSticky);
|
|
|
|
/*
|
|
* @ngdoc service
|
|
* @name $mdSticky
|
|
* @module material.components.sticky
|
|
*
|
|
* @description
|
|
* The `$mdSticky`service provides a mixin to make elements sticky.
|
|
*
|
|
* @returns A `$mdSticky` function that takes three arguments:
|
|
* - `scope`
|
|
* - `element`: The element that will be 'sticky'
|
|
* - `elementClone`: A clone of the element, that will be shown
|
|
* when the user starts scrolling past the original element.
|
|
* If not provided, it will use the result of `element.clone()`.
|
|
*/
|
|
|
|
function MdSticky($document, $mdConstant, $compile, $$rAF, $mdUtil) {
|
|
|
|
var browserStickySupport = checkStickySupport();
|
|
|
|
/**
|
|
* Registers an element as sticky, used internally by directives to register themselves
|
|
*/
|
|
return function registerStickyElement(scope, element, stickyClone) {
|
|
var contentCtrl = element.controller('mdContent');
|
|
if (!contentCtrl) return;
|
|
|
|
if (browserStickySupport) {
|
|
element.css({
|
|
position: browserStickySupport,
|
|
top: 0,
|
|
'z-index': 2
|
|
});
|
|
} else {
|
|
var $$sticky = contentCtrl.$element.data('$$sticky');
|
|
if (!$$sticky) {
|
|
$$sticky = setupSticky(contentCtrl);
|
|
contentCtrl.$element.data('$$sticky', $$sticky);
|
|
}
|
|
|
|
var deregister = $$sticky.add(element, stickyClone || element.clone());
|
|
scope.$on('$destroy', deregister);
|
|
}
|
|
};
|
|
|
|
function setupSticky(contentCtrl) {
|
|
var contentEl = contentCtrl.$element;
|
|
|
|
// Refresh elements is very expensive, so we use the debounced
|
|
// version when possible.
|
|
var debouncedRefreshElements = $$rAF.debounce(refreshElements);
|
|
|
|
// setupAugmentedScrollEvents gives us `$scrollstart` and `$scroll`,
|
|
// more reliable than `scroll` on android.
|
|
setupAugmentedScrollEvents(contentEl);
|
|
contentEl.on('$scrollstart', debouncedRefreshElements);
|
|
contentEl.on('$scroll', onScroll);
|
|
|
|
var self;
|
|
return self = {
|
|
prev: null,
|
|
current: null, //the currently stickied item
|
|
next: null,
|
|
items: [],
|
|
add: add,
|
|
refreshElements: refreshElements
|
|
};
|
|
|
|
/***************
|
|
* Public
|
|
***************/
|
|
// Add an element and its sticky clone to this content's sticky collection
|
|
function add(element, stickyClone) {
|
|
stickyClone.addClass('md-sticky-clone');
|
|
|
|
var item = {
|
|
element: element,
|
|
clone: stickyClone
|
|
};
|
|
self.items.push(item);
|
|
|
|
contentEl.parent().prepend(item.clone);
|
|
|
|
debouncedRefreshElements();
|
|
|
|
return function remove() {
|
|
self.items.forEach(function(item, index) {
|
|
if (item.element[0] === element[0]) {
|
|
self.items.splice(index, 1);
|
|
item.clone.remove();
|
|
}
|
|
});
|
|
debouncedRefreshElements();
|
|
};
|
|
}
|
|
|
|
function refreshElements() {
|
|
// Sort our collection of elements by their current position in the DOM.
|
|
// We need to do this because our elements' order of being added may not
|
|
// be the same as their order of display.
|
|
self.items.forEach(refreshPosition);
|
|
self.items = self.items.sort(function(a, b) {
|
|
return a.top < b.top ? -1 : 1;
|
|
});
|
|
|
|
// Find which item in the list should be active,
|
|
// based upon the content's current scroll position
|
|
var item;
|
|
var currentScrollTop = contentEl.prop('scrollTop');
|
|
for (var i = self.items.length - 1; i >= 0; i--) {
|
|
if (currentScrollTop > self.items[i].top) {
|
|
item = self.items[i];
|
|
break;
|
|
}
|
|
}
|
|
setCurrentItem(item);
|
|
}
|
|
|
|
|
|
/***************
|
|
* Private
|
|
***************/
|
|
|
|
// Find the `top` of an item relative to the content element,
|
|
// and also the height.
|
|
function refreshPosition(item) {
|
|
// Find the top of an item by adding to the offsetHeight until we reach the
|
|
// content element.
|
|
var current = item.element[0];
|
|
item.top = 0;
|
|
item.left = 0;
|
|
while (current && current !== contentEl[0]) {
|
|
item.top += current.offsetTop;
|
|
item.left += current.offsetLeft;
|
|
current = current.offsetParent;
|
|
}
|
|
item.height = item.element.prop('offsetHeight');
|
|
item.clone.css('margin-left', item.left + 'px');
|
|
}
|
|
|
|
|
|
// As we scroll, push in and select the correct sticky element.
|
|
function onScroll() {
|
|
var scrollTop = contentEl.prop('scrollTop');
|
|
var isScrollingDown = scrollTop > (onScroll.prevScrollTop || 0);
|
|
onScroll.prevScrollTop = scrollTop;
|
|
|
|
// At the top?
|
|
if (scrollTop === 0) {
|
|
setCurrentItem(null);
|
|
|
|
// Going to next item?
|
|
} else if (isScrollingDown && self.next) {
|
|
if (self.next.top - scrollTop <= 0) {
|
|
// Sticky the next item if we've scrolled past its position.
|
|
setCurrentItem(self.next);
|
|
} else if (self.current) {
|
|
// Push the current item up when we're almost at the next item.
|
|
if (self.next.top - scrollTop <= self.next.height) {
|
|
translate(self.current, self.next.top - self.next.height - scrollTop);
|
|
} else {
|
|
translate(self.current, null);
|
|
}
|
|
}
|
|
|
|
// Scrolling up with a current sticky item?
|
|
} else if (!isScrollingDown && self.current) {
|
|
if (scrollTop < self.current.top) {
|
|
// Sticky the previous item if we've scrolled up past
|
|
// the original position of the currently stickied item.
|
|
setCurrentItem(self.prev);
|
|
}
|
|
// Scrolling up, and just bumping into the item above (just set to current)?
|
|
// If we have a next item bumping into the current item, translate
|
|
// the current item up from the top as it scrolls into view.
|
|
if (self.current && self.next) {
|
|
if (scrollTop >= self.next.top - self.current.height) {
|
|
translate(self.current, self.next.top - scrollTop - self.current.height);
|
|
} else {
|
|
translate(self.current, null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function setCurrentItem(item) {
|
|
if (self.current === item) return;
|
|
// Deactivate currently active item
|
|
if (self.current) {
|
|
translate(self.current, null);
|
|
setStickyState(self.current, null);
|
|
}
|
|
|
|
// Activate new item if given
|
|
if (item) {
|
|
setStickyState(item, 'active');
|
|
}
|
|
|
|
self.current = item;
|
|
var index = self.items.indexOf(item);
|
|
// If index === -1, index + 1 = 0. It works out.
|
|
self.next = self.items[index + 1];
|
|
self.prev = self.items[index - 1];
|
|
setStickyState(self.next, 'next');
|
|
setStickyState(self.prev, 'prev');
|
|
}
|
|
|
|
function setStickyState(item, state) {
|
|
if (!item || item.state === state) return;
|
|
if (item.state) {
|
|
item.clone.attr('sticky-prev-state', item.state);
|
|
item.element.attr('sticky-prev-state', item.state);
|
|
}
|
|
item.clone.attr('sticky-state', state);
|
|
item.element.attr('sticky-state', state);
|
|
item.state = state;
|
|
}
|
|
|
|
function translate(item, amount) {
|
|
if (!item) return;
|
|
if (amount === null || amount === undefined) {
|
|
if (item.translateY) {
|
|
item.translateY = null;
|
|
item.clone.css($mdConstant.CSS.TRANSFORM, '');
|
|
}
|
|
} else {
|
|
item.translateY = amount;
|
|
item.clone.css(
|
|
$mdConstant.CSS.TRANSFORM,
|
|
'translate3d(' + item.left + 'px,' + amount + 'px,0)'
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to check for browser sticky support
|
|
function checkStickySupport($el) {
|
|
var stickyProp;
|
|
var testEl = angular.element('<div>');
|
|
$document[0].body.appendChild(testEl[0]);
|
|
|
|
var stickyProps = ['sticky', '-webkit-sticky'];
|
|
for (var i = 0; i < stickyProps.length; ++i) {
|
|
testEl.css({position: stickyProps[i], top: 0, 'z-index': 2});
|
|
if (testEl.css('position') == stickyProps[i]) {
|
|
stickyProp = stickyProps[i];
|
|
break;
|
|
}
|
|
}
|
|
testEl.remove();
|
|
return stickyProp;
|
|
}
|
|
|
|
// Android 4.4 don't accurately give scroll events.
|
|
// To fix this problem, we setup a fake scroll event. We say:
|
|
// > If a scroll or touchmove event has happened in the last DELAY milliseconds,
|
|
// then send a `$scroll` event every animationFrame.
|
|
// Additionally, we add $scrollstart and $scrollend events.
|
|
function setupAugmentedScrollEvents(element) {
|
|
var SCROLL_END_DELAY = 200;
|
|
var isScrolling;
|
|
var lastScrollTime;
|
|
element.on('scroll touchmove', function() {
|
|
if (!isScrolling) {
|
|
isScrolling = true;
|
|
$$rAF(loopScrollEvent);
|
|
element.triggerHandler('$scrollstart');
|
|
}
|
|
element.triggerHandler('$scroll');
|
|
lastScrollTime = +$mdUtil.now();
|
|
});
|
|
|
|
function loopScrollEvent() {
|
|
if (+$mdUtil.now() - lastScrollTime > SCROLL_END_DELAY) {
|
|
isScrolling = false;
|
|
element.triggerHandler('$scrollend');
|
|
} else {
|
|
element.triggerHandler('$scroll');
|
|
$$rAF(loopScrollEvent);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
MdSticky.$inject = ["$document", "$mdConstant", "$compile", "$$rAF", "$mdUtil"];
|
|
})();
|