Neues Initialrelease mit IonicMaterial

This commit is contained in:
Carsten Hilmer
2016-08-22 12:55:52 +02:00
parent 30a5df79aa
commit 45e482b14d
1249 changed files with 305225 additions and 68794 deletions

View File

@@ -0,0 +1,8 @@
{
"name": "angular-material-sticky",
"version": "0.10.0",
"dependencies": {
"angular-material-core": "0.10.0",
"angular-material-content": "0.10.0"
}
}

View File

@@ -0,0 +1,21 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
/* mixin definition ; sets LTR and RTL within the same style call */
.md-sticky-clone {
z-index: 2;
top: 0;
left: 0;
right: 0;
position: absolute !important;
-webkit-transform: translate3d(-9999px, -9999px, 0);
transform: translate3d(-9999px, -9999px, 0); }
.md-sticky-clone[sticky-state="active"] {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.md-sticky-clone[sticky-state="active"]:not(.md-sticky-no-effect) .md-subheader-inner {
-webkit-animation: subheaderStickyHoverIn 0.3s ease-out both;
animation: subheaderStickyHoverIn 0.3s ease-out both; }

View File

@@ -0,0 +1,315 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
(function( window, angular, undefined ){
"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.throttle(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;
var stickyBaseoffset = contentEl.prop('offsetTop');
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');
stickyClone.css('top', stickyBaseoffset + 'px');
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');
if ($mdUtil.floatingScrollbars()) {
item.clone.css('margin-right', '0');
}
}
// 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"];
})(window, window.angular);

View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/.md-sticky-clone{z-index:2;top:0;left:0;right:0;position:absolute!important;-webkit-transform:translate3d(-9999px,-9999px,0);transform:translate3d(-9999px,-9999px,0)}.md-sticky-clone[sticky-state=active]{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.md-sticky-clone[sticky-state=active]:not(.md-sticky-no-effect) .md-subheader-inner{-webkit-animation:subheaderStickyHoverIn .3s ease-out both;animation:subheaderStickyHoverIn .3s ease-out both}

View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
!function(t,e,n){"use strict";function r(t,r,o,l,c){function s(t){function e(t,e){e.addClass("md-sticky-clone"),e.css("top",$+"px");var n={element:t,clone:e};return v.items.push(n),m.parent().prepend(n.clone),d(),function(){v.items.forEach(function(e,n){e.element[0]===t[0]&&(v.items.splice(n,1),e.clone.remove())}),d()}}function o(){v.items.forEach(s),v.items=v.items.sort(function(t,e){return t.top<e.top?-1:1});for(var t,e=m.prop("scrollTop"),n=v.items.length-1;n>=0;n--)if(e>v.items[n].top){t=v.items[n];break}u(t)}function s(t){var e=t.element[0];for(t.top=0,t.left=0;e&&e!==m[0];)t.top+=e.offsetTop,t.left+=e.offsetLeft,e=e.offsetParent;t.height=t.element.prop("offsetHeight"),t.clone.css("margin-left",t.left+"px"),c.floatingScrollbars()&&t.clone.css("margin-right","0")}function i(){var t=m.prop("scrollTop"),e=t>(i.prevScrollTop||0);i.prevScrollTop=t,0===t?u(null):e&&v.next?v.next.top-t<=0?u(v.next):v.current&&(v.next.top-t<=v.next.height?f(v.current,v.next.top-v.next.height-t):f(v.current,null)):!e&&v.current&&(t<v.current.top&&u(v.prev),v.current&&v.next&&(t>=v.next.top-v.current.height?f(v.current,v.next.top-t-v.current.height):f(v.current,null)))}function u(t){if(v.current!==t){v.current&&(f(v.current,null),p(v.current,null)),t&&p(t,"active"),v.current=t;var e=v.items.indexOf(t);v.next=v.items[e+1],v.prev=v.items[e-1],p(v.next,"next"),p(v.prev,"prev")}}function p(t,e){t&&t.state!==e&&(t.state&&(t.clone.attr("sticky-prev-state",t.state),t.element.attr("sticky-prev-state",t.state)),t.clone.attr("sticky-state",e),t.element.attr("sticky-state",e),t.state=e)}function f(t,e){t&&(null===e||e===n?t.translateY&&(t.translateY=null,t.clone.css(r.CSS.TRANSFORM,"")):(t.translateY=e,t.clone.css(r.CSS.TRANSFORM,"translate3d("+t.left+"px,"+e+"px,0)")))}var m=t.$element,d=l.throttle(o);a(m),m.on("$scrollstart",d),m.on("$scroll",i);var v,$=m.prop("offsetTop");return v={prev:null,current:null,next:null,items:[],add:e,refreshElements:o}}function i(n){var r,o=e.element("<div>");t[0].body.appendChild(o[0]);for(var l=["sticky","-webkit-sticky"],c=0;c<l.length;++c)if(o.css({position:l[c],top:0,"z-index":2}),o.css("position")==l[c]){r=l[c];break}return o.remove(),r}function a(t){function e(){+c.now()-r>o?(n=!1,t.triggerHandler("$scrollend")):(t.triggerHandler("$scroll"),l(e))}var n,r,o=200;t.on("scroll touchmove",function(){n||(n=!0,l(e),t.triggerHandler("$scrollstart")),t.triggerHandler("$scroll"),r=+c.now()})}var u=i();return function(t,e,n){var r=e.controller("mdContent");if(r)if(u)e.css({position:u,top:0,"z-index":2});else{var o=r.$element.data("$$sticky");o||(o=s(r),r.$element.data("$$sticky",o));var l=o.add(e,n||e.clone());t.$on("$destroy",l)}}}e.module("material.components.sticky",["material.core","material.components.content"]).factory("$mdSticky",r),r.$inject=["$document","$mdConstant","$compile","$$rAF","$mdUtil"]}(window,window.angular);