957 lines
37 KiB
JavaScript
957 lines
37 KiB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
|
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
module.exports = factory((function webpackLoadOptionalExternalModule() { try { return require("angular"); } catch(e) {} }()));
|
|
else if(typeof define === 'function' && define.amd)
|
|
define(["angular"], factory);
|
|
else if(typeof exports === 'object')
|
|
exports["ionicMaterial"] = factory((function webpackLoadOptionalExternalModule() { try { return require("angular"); } catch(e) {} }()));
|
|
else
|
|
root["ionicMaterial"] = factory(root["angular"]);
|
|
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
|
|
return /******/ (function(modules) { // webpackBootstrap
|
|
/******/ // The module cache
|
|
/******/ var installedModules = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/
|
|
/******/ // Check if module is in cache
|
|
/******/ if(installedModules[moduleId])
|
|
/******/ return installedModules[moduleId].exports;
|
|
/******/
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = installedModules[moduleId] = {
|
|
/******/ exports: {},
|
|
/******/ id: moduleId,
|
|
/******/ loaded: false
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Flag the module as loaded
|
|
/******/ module.loaded = true;
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = modules;
|
|
/******/
|
|
/******/ // expose the module cache
|
|
/******/ __webpack_require__.c = installedModules;
|
|
/******/
|
|
/******/ // __webpack_public_path__
|
|
/******/ __webpack_require__.p = "";
|
|
/******/
|
|
/******/ // Load entry module and return exports
|
|
/******/ return __webpack_require__(0);
|
|
/******/ })
|
|
/************************************************************************/
|
|
/******/ ([
|
|
/* 0 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
/**
|
|
* Ionic Material
|
|
* "Bundle Index" / "Entryfile"
|
|
* https://github.com/zachsoft/ionic-material
|
|
*
|
|
* Recommended: use a compiled version, especially in production!
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
module.exports = (function(){
|
|
|
|
var angular;
|
|
|
|
try {
|
|
angular = __webpack_require__(1);
|
|
} catch(err){ }
|
|
|
|
if(!angular || !angular.version){
|
|
/*global window: true*/
|
|
angular = window.angular;
|
|
/*global window: false*/
|
|
}
|
|
|
|
if(!angular || !angular.version){
|
|
throw new Error('ionic-material could not load angular module :(');
|
|
}
|
|
|
|
// set up angular module
|
|
var app = angular.module('ionic-material', ['ionic']);
|
|
|
|
// Import Dependencies
|
|
__webpack_require__(2)(app);
|
|
__webpack_require__(3)(app);
|
|
|
|
return 'ionic-material';
|
|
})();
|
|
|
|
|
|
/***/ },
|
|
/* 1 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
if(typeof __WEBPACK_EXTERNAL_MODULE_1__ === 'undefined') {var e = new Error("Cannot find module \"angular\""); e.code = 'MODULE_NOT_FOUND'; throw e;}
|
|
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
|
|
|
|
/***/ },
|
|
/* 2 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
'use strict';
|
|
|
|
/*!
|
|
* Fork by Zach Fitzgerald and other contributors of Ionic Material
|
|
*
|
|
* Waves v0.5.4
|
|
* http://fian.my.id/Waves
|
|
*
|
|
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
|
*
|
|
* Released under the MIT license
|
|
* https://github.com/fians/Waves/blob/master/LICENSE
|
|
*
|
|
*/
|
|
module.exports = function (angularApp) {
|
|
|
|
angularApp.factory('ionicMaterialInk', ink);
|
|
|
|
function ink (){
|
|
/*global document*/
|
|
var Ink = Ink || {};
|
|
|
|
// all DOM nodes
|
|
var $$;
|
|
|
|
// phantomJS throws an error when you try to use document.querySelectorAll.bind
|
|
if(document && document.querySelectorAll && document.querySelectorAll.bind){
|
|
try{
|
|
// all DOM nodes
|
|
$$ = document.querySelectorAll.bind(document);
|
|
|
|
} catch(e){}
|
|
} else if (window && window.angular && window.angular.element) {
|
|
// we can use angular.element instead
|
|
$$ = window.angular.element;
|
|
} else {
|
|
|
|
|
|
/**
|
|
* mout.js 0.11.0 bind and slice polyfills (substitutes?)
|
|
* TODO: pull out mout.js bind and slice molyfills and inject into material.ink
|
|
*/
|
|
|
|
/**
|
|
* Create slice of source array or array-like object
|
|
*/
|
|
var slicePolyfill = function moutslicePolyfill(arr, start, end){
|
|
var len = arr.length;
|
|
/*jshint eqnull:true */
|
|
if (start == null) {
|
|
start = 0;
|
|
} else if (start < 0) {
|
|
start = Math.max(len + start, 0);
|
|
} else {
|
|
start = Math.min(start, len);
|
|
}
|
|
|
|
|
|
if (end == null) {
|
|
|
|
end = len;
|
|
} else if (end < 0) {
|
|
end = Math.max(len + end, 0);
|
|
} else {
|
|
end = Math.min(end, len);
|
|
}
|
|
|
|
var result = [];
|
|
while (start < end) {
|
|
result.push(arr[start++]);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
* Return a function that will execute in the given context, optionally adding any additional supplied parameters to the beginning of the arguments collection.
|
|
* @param {Function} fn Function.
|
|
* @param {object} context Execution context.
|
|
* @param {rest} args Arguments (0...n arguments).
|
|
* @return {Function} Wrapped Function.
|
|
*/
|
|
var bindPolyfill = function moutBind(fn, context, args){
|
|
var argsArr = slicePolyfill(arguments, 2); //curried args
|
|
return function(){
|
|
return fn.apply(context, argsArr.concat(slicePolyfill(arguments)));
|
|
};
|
|
};
|
|
|
|
$$ = bindPolyfill(document.querySelectorAll, document);
|
|
/*jshint ignore:end */
|
|
}
|
|
|
|
if (!$$){
|
|
throw new Error('ionic material ink module could not create reference of DOM nodes');
|
|
}
|
|
|
|
// Find exact position of element
|
|
function isWindow(obj) {
|
|
return obj !== null && obj === obj.window;
|
|
}
|
|
|
|
function getWindow(elem) {
|
|
return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView;
|
|
}
|
|
|
|
function offset(elem) {
|
|
var docElem, win,
|
|
box = {
|
|
top: 0,
|
|
left: 0
|
|
},
|
|
doc = elem && elem.ownerDocument;
|
|
|
|
docElem = doc.documentElement;
|
|
|
|
if (typeof elem.getBoundingClientRect !== typeof undefined) {
|
|
box = elem.getBoundingClientRect();
|
|
}
|
|
win = getWindow(doc);
|
|
return {
|
|
top: box.top + win.pageYOffset - docElem.clientTop,
|
|
left: box.left + win.pageXOffset - docElem.clientLeft
|
|
};
|
|
}
|
|
|
|
function hexToRgb(hex) {
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result ? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16)
|
|
} : null;
|
|
}
|
|
|
|
function convertStyle(obj) {
|
|
var style = '';
|
|
|
|
for (var a in obj) {
|
|
if (obj.hasOwnProperty(a)) {
|
|
style += (a + ':' + obj[a] + ';');
|
|
}
|
|
}
|
|
|
|
return style;
|
|
}
|
|
|
|
var Effect = {
|
|
|
|
// Effect delay
|
|
duration: 500,
|
|
|
|
show: function(e) {
|
|
|
|
// Disable right click
|
|
if (e.button === 2) {
|
|
return false;
|
|
}
|
|
|
|
var el = this;
|
|
|
|
// Create ripple
|
|
var ripple = document.createElement('div');
|
|
var customColor = this.dataset.inkColor;
|
|
var customOpacity = this.dataset.inkOpacity;
|
|
var hasCustomRipple = customColor || customOpacity;
|
|
ripple.className = 'ink-ripple';
|
|
el.appendChild(ripple);
|
|
|
|
// Get click coordinate and element witdh
|
|
var pos = offset(el);
|
|
var relativeY = (e.pageY - pos.top);
|
|
var relativeX = (e.pageX - pos.left);
|
|
var scale = 'scale(' + ((el.clientWidth / 100) * 2.5) + ')';
|
|
|
|
// Support for touch devices
|
|
if ('touches' in e) {
|
|
relativeY = (e.touches[0].pageY - pos.top);
|
|
relativeX = (e.touches[0].pageX - pos.left);
|
|
}
|
|
|
|
// Attach data to element
|
|
ripple.setAttribute('data-hold', Date.now());
|
|
ripple.setAttribute('data-scale', scale);
|
|
ripple.setAttribute('data-x', relativeX);
|
|
ripple.setAttribute('data-y', relativeY);
|
|
|
|
// Set ripple position
|
|
var rippleStyle = {
|
|
'top': relativeY + 'px',
|
|
'left': relativeX + 'px'
|
|
};
|
|
|
|
ripple.className = ripple.className + ' ink-notransition';
|
|
|
|
if (hasCustomRipple) {
|
|
var colorRgb;
|
|
if (customColor) {
|
|
var fromHex = hexToRgb(customColor);
|
|
colorRgb = fromHex.r + ',' + fromHex.g + ',' + fromHex.b;
|
|
} else {
|
|
colorRgb = '0,0,0';
|
|
}
|
|
if (!customOpacity) {
|
|
customOpacity = 0.2;
|
|
}
|
|
var bg = 'rgba(' + colorRgb + ',' + customOpacity + ')';
|
|
rippleStyle['background-color'] = bg;
|
|
}
|
|
|
|
ripple.setAttribute('style', convertStyle(rippleStyle));
|
|
ripple.className = ripple.className.replace('ink-notransition', '');
|
|
|
|
// Scale the ripple
|
|
rippleStyle['-webkit-transform'] = scale;
|
|
rippleStyle['-moz-transform'] = scale;
|
|
rippleStyle['-ms-transform'] = scale;
|
|
rippleStyle['-o-transform'] = scale;
|
|
rippleStyle.transform = scale;
|
|
rippleStyle.opacity = '1';
|
|
|
|
rippleStyle['-webkit-transition-duration'] = Effect.duration + 'ms';
|
|
rippleStyle['-moz-transition-duration'] = Effect.duration + 'ms';
|
|
rippleStyle['-o-transition-duration'] = Effect.duration + 'ms';
|
|
rippleStyle['transition-duration'] = Effect.duration + 'ms';
|
|
|
|
ripple.setAttribute('style', convertStyle(rippleStyle));
|
|
},
|
|
|
|
hide: function() {
|
|
|
|
var el = this;
|
|
|
|
var width = el.clientWidth * 1.4;
|
|
|
|
// Get first ripple
|
|
var ripple = null;
|
|
|
|
var childrenLength = el.children.length;
|
|
|
|
for (var a = 0; a < childrenLength; a++) {
|
|
if (el.children[a].className.indexOf('ink-ripple') !== -1) {
|
|
ripple = el.children[a];
|
|
continue;
|
|
}
|
|
}
|
|
|
|
if (!ripple) {
|
|
return false;
|
|
}
|
|
|
|
var relativeX = ripple.getAttribute('data-x');
|
|
var relativeY = ripple.getAttribute('data-y');
|
|
var scale = ripple.getAttribute('data-scale');
|
|
|
|
// Get delay beetween mousedown and mouse leave
|
|
var diff = Date.now() - Number(ripple.getAttribute('data-hold'));
|
|
var delay = 500 - diff;
|
|
|
|
if (delay < 0) {
|
|
delay = 0;
|
|
}
|
|
|
|
// Fade out ripple after delay
|
|
setTimeout(function() {
|
|
|
|
var style = {
|
|
'top': relativeY + 'px',
|
|
'left': relativeX + 'px',
|
|
'opacity': '0',
|
|
|
|
// Duration
|
|
'-webkit-transition-duration': Effect.duration + 'ms',
|
|
'-moz-transition-duration': Effect.duration + 'ms',
|
|
'-o-transition-duration': Effect.duration + 'ms',
|
|
'transition-duration': Effect.duration + 'ms',
|
|
'-webkit-transform': scale,
|
|
'-moz-transform': scale,
|
|
'-ms-transform': scale,
|
|
'-o-transform': scale,
|
|
'transform': scale,
|
|
};
|
|
|
|
ripple.setAttribute('style', convertStyle(style));
|
|
|
|
setTimeout(function() {
|
|
try {
|
|
el.removeChild(ripple);
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
}, Effect.duration);
|
|
}, delay);
|
|
},
|
|
|
|
// Little hack to make <input> can perform ink effect
|
|
wrapInput: function(elements) {
|
|
|
|
for (var a = 0; a < elements.length; a++) {
|
|
|
|
var el = elements[a];
|
|
|
|
if (el.tagName.toLowerCase() === 'input') {
|
|
|
|
var parent = el.parentNode;
|
|
|
|
// If input already have parent just pass through
|
|
if (parent.tagName.toLowerCase() === 'i' &&
|
|
parent.className.indexOf('ink') !== -1 &&
|
|
parent.className.indexOf('tab-item') !== -1 &&
|
|
parent.className.indexOf('button-fab') !== -1 &&
|
|
parent.className.indexOf('button-raised') !== -1 &&
|
|
parent.className.indexOf('button-flat') !== -1 &&
|
|
parent.className.indexOf('button-clear') !== -1 &&
|
|
parent.className.indexOf('button') !== -1 &&
|
|
parent.className.indexOf('item') !== -1) {
|
|
return false;
|
|
}
|
|
|
|
// Put element class and style to the specified parent
|
|
var wrapper = document.createElement('i');
|
|
wrapper.className = el.className + ' ink-input-wrapper';
|
|
|
|
var elementStyle = el.getAttribute('style');
|
|
|
|
if (!elementStyle) {
|
|
elementStyle = '';
|
|
}
|
|
|
|
wrapper.setAttribute('style', elementStyle);
|
|
|
|
el.className = 'ink-button-input';
|
|
el.removeAttribute('style');
|
|
|
|
// Put element as child
|
|
parent.replaceChild(wrapper, el);
|
|
wrapper.appendChild(el);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
Ink.displayEffect = function(options) {
|
|
options = options || {};
|
|
|
|
if ('duration' in options) {
|
|
Effect.duration = options.duration;
|
|
}
|
|
|
|
//Wrap input inside <i> tag
|
|
var selectors = '.ink,.tab-item,.button-fab,.button-raised,.button-flat,.button-clear,a.item,.popup .button';
|
|
Effect.wrapInput($$(selectors));
|
|
|
|
Array.prototype.forEach.call($$(selectors), function(i) {
|
|
if ('ontouchstart' in window) {
|
|
i.addEventListener('touchstart', Effect.show, false);
|
|
i.addEventListener('touchend', Effect.hide, false);
|
|
i.addEventListener('touchcancel', Effect.hide, false);
|
|
} else {
|
|
i.addEventListener('mousedown', Effect.show, false);
|
|
i.addEventListener('mouseup', Effect.hide, false);
|
|
i.addEventListener('mouseleave', Effect.hide, false);
|
|
}
|
|
});
|
|
};
|
|
|
|
return Ink;
|
|
}
|
|
|
|
ink.inject = [];
|
|
};
|
|
|
|
|
|
/***/ },
|
|
/* 3 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
module.exports = function(angularApp) {
|
|
angularApp.factory('ionicMaterialMotion', Motion);
|
|
|
|
function Motion() {
|
|
/*global document, window*/
|
|
|
|
'use strict';
|
|
|
|
/*============================================================================*/
|
|
/* HELPERS (non-exports)
|
|
/=============================================================================*
|
|
/ Abstract common lookups and manipulations in case better alternatives
|
|
/ arise or future cross-platform differences warrant separate handling
|
|
/=============================================================================*/
|
|
|
|
function getViewportHeight() {
|
|
return window.innerHeight;
|
|
}
|
|
|
|
function getBoundingClientRect(domNode) {
|
|
return domNode.getBoundingClientRect;
|
|
}
|
|
|
|
function showNotAnimatedElements(elements, total) {
|
|
// Load the elements without effect
|
|
for (var i = 0; i < total; i++) {
|
|
var child = elements[i];
|
|
child.className += ' in';
|
|
child.className += ' done';
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*============================================================================*/
|
|
/* MOTION (EXPORT)
|
|
/=============================================================================*
|
|
/ Animation methods for the library
|
|
/=============================================================================*/
|
|
|
|
var motion = {
|
|
blinds: blinds,
|
|
fadeSlideIn: fadeSlideIn,
|
|
fadeSlideInRight: fadeSlideInRight,
|
|
panInLeft: panInLeft,
|
|
pushDown: pushDown,
|
|
ripple: ripple,
|
|
slideUp: slideUp
|
|
};
|
|
|
|
function blinds(options) {
|
|
|
|
// Declare our defaults
|
|
var defaults = {
|
|
finishDelayThrottle: 2,
|
|
finishSpeedPercent: 0.5,
|
|
leftOffsetPercentage: 0.8,
|
|
selector: '.animate-blinds .item',
|
|
startVelocity: 1100
|
|
};
|
|
|
|
// Apply defaults if properties are not passed
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
|
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
|
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
|
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
|
|
|
if (typeof options.selector == 'undefined') {
|
|
options.selector = defaults.selector;
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid blinds selector');
|
|
return false;
|
|
}
|
|
|
|
var animateBlindsDom = document.querySelectorAll(options.selector);
|
|
var elementsCount = animateBlindsDom.length;
|
|
var elementAnimationCount = 0;
|
|
|
|
// Count the elements within the starting viewport so we're not exacting
|
|
// more effort than required...
|
|
//
|
|
// We use css visiblity: hidden instead of display: none so the elements
|
|
// maintain their DOM flow
|
|
|
|
var viewportHeight = getViewportHeight();
|
|
for (var i = 0; i < elementsCount; i++) {
|
|
if (animateBlindsDom[i].offsetTop < viewportHeight) {
|
|
elementAnimationCount += 1;
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Sequentially animate with a delay based on proximity
|
|
var speed = options.startVelocity;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateBlindsDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delay = parseFloat(offset / speed).toFixed(2);
|
|
child.style.webkitTransitionDelay = delay + "s";
|
|
child.style.transitionDelay = delay + "s";
|
|
child.className += ' in';
|
|
}
|
|
|
|
// When we're done animating, switch the class to 'done'
|
|
setTimeout(function() {
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateBlindsDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delay = parseFloat(offset / speed / options.finishDelayThrottle).toFixed(2);
|
|
//child.querySelector('img').style.webkitTransitionDelay = delay + "s";
|
|
//child.querySelector('img').style.transitionDelay = delay + "s";
|
|
//child.querySelector('img').className += ' in';
|
|
animateBlindsDom[i].className += ' done';
|
|
}
|
|
|
|
}, speed * options.finishSpeedPercent);
|
|
|
|
// Load the elements without effect
|
|
showNotAnimatedElements(animateBlindsDom, elementsCount);
|
|
}
|
|
|
|
function fadeSlideIn(options) {
|
|
|
|
// Declare our defaults
|
|
var defaults = {
|
|
finishDelayThrottle: 2,
|
|
finishSpeedPercent: 0.72,
|
|
leftOffsetPercentage: 0.8,
|
|
selector: '.animate-fade-slide-in .item',
|
|
startVelocity: 1100
|
|
};
|
|
|
|
// Apply defaults if properties are not passed
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
|
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
|
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
|
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
|
|
|
if (typeof options.selector == 'undefined') {
|
|
options.selector = defaults.selector;
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid fadeSlideIn selector');
|
|
return false;
|
|
}
|
|
|
|
var animateFadeSlideInDom = document.querySelectorAll(options.selector);
|
|
var elementsCount = animateFadeSlideInDom.length;
|
|
var elementAnimationCount = 0;
|
|
|
|
// Count the elements within the starting viewport so we're not exacting
|
|
// more effort than required...
|
|
//
|
|
// We use css visiblity: hidden instead of display: none so the elements
|
|
// maintain their DOM flow
|
|
|
|
var viewportHeight = getViewportHeight();
|
|
for (var i = 0; i < elementsCount; i++) {
|
|
if (animateFadeSlideInDom[i].offsetTop < viewportHeight) {
|
|
elementAnimationCount += 1;
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Sequentially animate with a delay based on proximity
|
|
var speed = options.startVelocity;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateFadeSlideInDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delay = parseFloat(offset / speed).toFixed(2);
|
|
child.style.webkitTransitionDelay = delay + "s";
|
|
child.style.transitionDelay = delay + "s";
|
|
child.className += ' in';
|
|
}
|
|
|
|
// When we're done animating, switch the class to 'done'
|
|
setTimeout(function() {
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateFadeSlideInDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delayValue = offset / speed / options.finishDelayThrottle;
|
|
var delay = parseFloat(delayValue).toFixed(2);
|
|
}
|
|
animateFadeSlideInDom[0].className += ' done';
|
|
|
|
}, speed * options.finishSpeedPercent);
|
|
|
|
// Load the elements without effect
|
|
showNotAnimatedElements(animateFadeSlideInDom, elementsCount);
|
|
}
|
|
|
|
function fadeSlideInRight(options) {
|
|
|
|
// Declare our defaults
|
|
var defaults = {
|
|
finishDelayThrottle: 2,
|
|
finishSpeedPercent: 0.72,
|
|
leftOffsetPercentage: 0.8,
|
|
selector: '.animate-fade-slide-in-right .item',
|
|
startVelocity: 1100
|
|
};
|
|
|
|
// Apply defaults if properties are not passed
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
|
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
|
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
|
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
|
|
|
if (typeof options.selector == 'undefined') {
|
|
options.selector = defaults.selector;
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid fadeSlideInRight selector');
|
|
return false;
|
|
}
|
|
|
|
var animateSlideInRightDom = document.querySelectorAll(options.selector);
|
|
var elementsCount = animateSlideInRightDom.length;
|
|
var elementAnimationCount = 0;
|
|
|
|
// Count the elements within the starting viewport so we're not
|
|
// exacting more effort than required...
|
|
//
|
|
// We use css visiblity: hidden instead of display: none so the
|
|
// elements maintain their DOM flow
|
|
|
|
var viewportHeight = getViewportHeight();
|
|
for (var i = 0; i < elementsCount; i++) {
|
|
if (animateSlideInRightDom[i].offsetTop < viewportHeight) {
|
|
elementAnimationCount += 1;
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Sequentially animate with a delay based on proximity
|
|
var speed = options.startVelocity;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateSlideInRightDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delay = parseFloat(offset / speed).toFixed(2);
|
|
child.style.webkitTransitionDelay = delay + "s";
|
|
child.style.transitionDelay = delay + "s";
|
|
child.className += ' in';
|
|
}
|
|
|
|
// When we're done animating, switch the class to 'done'
|
|
setTimeout(function() {
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateSlideInRightDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delayValue = offset / speed / options.finishDelayThrottle;
|
|
var delay = parseFloat(delayValue).toFixed(2);
|
|
}
|
|
animateSlideInRightDom[0].className += ' done';
|
|
|
|
}, speed * options.finishSpeedPercent);
|
|
|
|
// Load the elements without effect
|
|
showNotAnimatedElements(animateSlideInRightDom, elementsCount);
|
|
|
|
}
|
|
|
|
function ripple(options) {
|
|
|
|
// Declare our defaults
|
|
var defaults = {
|
|
finishDelayThrottle: 2,
|
|
finishSpeedPercent: 0.72,
|
|
leftOffsetPercentage: 0.8,
|
|
selector: '.animate-ripple .item',
|
|
startVelocity: 1100
|
|
};
|
|
|
|
// Apply defaults if properties are not passed
|
|
if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
options.finishDelayThrottle = options.finishDelayThrottle || defaults.finishDelayThrottle;
|
|
options.finishSpeedPercent = options.finishSpeedPercent || defaults.finishSpeedPercent;
|
|
options.leftOffsetPercentage = options.leftOffsetPercentage || defaults.leftOffsetPercentage;
|
|
options.startVelocity = options.startVelocity || defaults.startVelocity;
|
|
|
|
if (typeof options.selector == 'undefined') {
|
|
options.selector = defaults.selector;
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid ripple selector');
|
|
return false;
|
|
}
|
|
|
|
var animateRippleDom = document.querySelectorAll(options.selector);
|
|
var elementsCount = animateRippleDom.length;
|
|
var elementAnimationCount = 0;
|
|
|
|
// Count the elements within the starting viewport so we're not
|
|
// exacting more effort than required...
|
|
//
|
|
// We use css visiblity: hidden instead of display: none so the
|
|
// elements maintain their DOM flow
|
|
|
|
var viewportHeight = getViewportHeight();
|
|
for (var i = 0; i < animateRippleDom.length; i++) {
|
|
if (animateRippleDom[i].offsetTop < viewportHeight) {
|
|
elementAnimationCount += 1;
|
|
continue;
|
|
}
|
|
break;
|
|
}
|
|
|
|
// Sequentially animate with a delay based on proximity
|
|
var speed = options.startVelocity;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateRippleDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delay = parseFloat(offset / speed).toFixed(2);
|
|
child.style.webkitTransitionDelay = delay + "s";
|
|
child.style.transitionDelay = delay + "s";
|
|
child.className += ' in';
|
|
}
|
|
|
|
// When we're done animating, switch the class to 'done'
|
|
setTimeout(function() {
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var child = animateRippleDom[i];
|
|
var childOffset = child.getBoundingClientRect();
|
|
var offset = childOffset.left * options.leftOffsetPercentage + childOffset.top;
|
|
var delayValue = offset / speed / options.finishDelayThrottle;
|
|
var delay = parseFloat(delayValue).toFixed(2);
|
|
}
|
|
animateRippleDom[0].className += ' done';
|
|
|
|
}, speed * options.finishSpeedPercent);
|
|
|
|
// Load the elements without effect
|
|
showNotAnimatedElements(animateRippleDom, elementsCount);
|
|
}
|
|
|
|
function panInLeft(options) {
|
|
|
|
// We have a single option, so it may be passed as a string or property
|
|
if (typeof options === 'string') {
|
|
options = {
|
|
selector: options
|
|
};
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid pushDown selector');
|
|
return false;
|
|
}
|
|
|
|
var animatePanInLeftDom = document.querySelectorAll(options.selector);
|
|
var elementAnimationCount = animatePanInLeftDom.length;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var element = animatePanInLeftDom[i];
|
|
var classNameToRemove = 'animate-pan-in-left';
|
|
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
|
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
|
}
|
|
}
|
|
|
|
function pushDown(options) {
|
|
|
|
// We have a single option, so it may be passed as a string or property
|
|
if (typeof options === 'string') {
|
|
options = {
|
|
selector: options
|
|
};
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid pushDown selector');
|
|
return false;
|
|
}
|
|
|
|
var animatePushDownDom = document.querySelectorAll(options.selector);
|
|
var elementAnimationCount = animatePushDownDom.length;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var element = animatePushDownDom[i];
|
|
var classNameToRemove = options.selector.split('.')[1];
|
|
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
|
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
|
}
|
|
}
|
|
|
|
function slideUp(options) {
|
|
|
|
// We have a single option, so it may be passed as a string or property
|
|
if (typeof options === 'string') {
|
|
options = {
|
|
selector: options
|
|
};
|
|
}
|
|
|
|
// Fail early & silently log
|
|
var isInvalidSelector = typeof options.selector === 'undefined' || options.selector === '';
|
|
|
|
if (isInvalidSelector) {
|
|
console.log('invalid pushDown selector');
|
|
return false;
|
|
}
|
|
|
|
var animateSlideUpDom = document.querySelectorAll(options.selector);
|
|
var elementAnimationCount = animateSlideUpDom.length;
|
|
for (var i = 0; i < elementAnimationCount; i++) {
|
|
var element = animateSlideUpDom[i];
|
|
var classNameToRemove = options.selector.split('.')[1];
|
|
var indexOfClassNameToRemove = element.className.lastIndexOf(classNameToRemove);
|
|
element.className = element.className.substr(0, indexOfClassNameToRemove);
|
|
}
|
|
}
|
|
|
|
/* Export object
|
|
/============================================================================*/
|
|
return motion;
|
|
}
|
|
|
|
Motion.$inject = [];
|
|
};
|
|
|
|
|
|
/***/ }
|
|
/******/ ])
|
|
});
|
|
;
|
|
//# sourceMappingURL=ionic.material.min.js.map
|