From 6501fdbfff2e65213edfaf31979243e7b1780e9a Mon Sep 17 00:00:00 2001 From: Rob Eisenberg Date: Tue, 22 Mar 2016 21:15:06 -0400 Subject: [PATCH] chore(all): prepare release 1.0.0-beta.1.2.0 --- bower.json | 2 +- dist/amd/aurelia-animator-css.d.ts | 12 +- dist/amd/aurelia-animator-css.js | 98 +-- dist/aurelia-animator-css.d.ts | 12 +- dist/aurelia-animator-css.js | 25 +- dist/commonjs/aurelia-animator-css.d.ts | 12 +- dist/commonjs/aurelia-animator-css.js | 96 +-- .../{es6 => es2015}/aurelia-animator-css.d.ts | 12 +- dist/es2015/aurelia-animator-css.js | 443 +++++++++++++ dist/es6/aurelia-animator-css.js | 591 ------------------ dist/system/aurelia-animator-css.d.ts | 12 +- dist/system/aurelia-animator-css.js | 111 ++-- doc/CHANGELOG.md | 8 + package.json | 2 +- 14 files changed, 680 insertions(+), 756 deletions(-) rename dist/{es6 => es2015}/aurelia-animator-css.d.ts (93%) create mode 100644 dist/es2015/aurelia-animator-css.js delete mode 100644 dist/es6/aurelia-animator-css.js diff --git a/bower.json b/bower.json index 58c9f3f..0e222fd 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "aurelia-animator-css", - "version": "1.0.0-beta.1.1.2", + "version": "1.0.0-beta.1.2.0", "description": "An implementation of the abstract Animator interface from templating which enables css-based animations.", "keywords": [ "aurelia", diff --git a/dist/amd/aurelia-animator-css.d.ts b/dist/amd/aurelia-animator-css.d.ts index a9966df..4ca32e5 100644 --- a/dist/amd/aurelia-animator-css.d.ts +++ b/dist/amd/aurelia-animator-css.d.ts @@ -1,11 +1,19 @@ declare module 'aurelia-animator-css' { - import { animationEvent, TemplatingEngine } from 'aurelia-templating'; - import { DOM } from 'aurelia-pal'; + import { + animationEvent, + TemplatingEngine + } from 'aurelia-templating'; + import { + DOM + } from 'aurelia-pal'; export interface CssAnimation { className: string; element: HTMLElement; } + /** + * An implementation of the Animator using CSS3-Animations. + */ /** * An implementation of the Animator using CSS3-Animations. */ diff --git a/dist/amd/aurelia-animator-css.js b/dist/amd/aurelia-animator-css.js index 34aac56..3199bfd 100644 --- a/dist/amd/aurelia-animator-css.js +++ b/dist/amd/aurelia-animator-css.js @@ -1,12 +1,19 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aureliaTemplating, _aureliaPal) { 'use strict'; - exports.__esModule = true; + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.CssAnimator = undefined; exports.configure = configure; - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } - var CssAnimator = (function () { + var CssAnimator = exports.CssAnimator = function () { function CssAnimator() { _classCallCheck(this, CssAnimator); @@ -27,8 +34,8 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); - var prop = undefined; - var delay = undefined; + var prop = void 0; + var delay = void 0; if (styl.getPropertyValue('animation-delay')) { prop = 'animation-delay'; @@ -48,7 +55,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur CssAnimator.prototype._getElementAnimationNames = function _getElementAnimationNames(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); - var prefix = undefined; + var prefix = void 0; if (styl.getPropertyValue('animation-name')) { prefix = ''; @@ -79,7 +86,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur } return false; - })['catch'](function () { + }).catch(function () { _this._triggerDOMEvent(_aureliaTemplating.animationEvent.animateTimeout, element); }); }; @@ -105,23 +112,26 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur var keyframesRuleType = window.CSSRule.KEYFRAMES_RULE || window.CSSRule.MOZ_KEYFRAMES_RULE || window.CSSRule.WEBKIT_KEYFRAMES_RULE; var styleSheets = document.styleSheets; - for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; - if (!cssRules) { - continue; - } + try { + for (var i = 0; i < styleSheets.length; ++i) { + var cssRules = styleSheets[i].cssRules; - for (var j = 0; j < cssRules.length; ++j) { - var cssRule = cssRules[j]; + if (!cssRules) { + continue; + } - if (cssRule.type === keyframesRuleType) { - if (newAnimationNames.indexOf(cssRule.name) !== -1) { - return true; + for (var j = 0; j < cssRules.length; ++j) { + var cssRule = cssRules[j]; + + if (cssRule.type === keyframesRuleType) { + if (newAnimationNames.indexOf(cssRule.name) !== -1) { + return true; + } } } } - } + } catch (e) {} return false; }; @@ -168,9 +178,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.add('au-enter'); var prevAnimationNames = _this4._getElementAnimationNames(element); - var animStart = undefined; + var _animStart = void 0; var animHasStarted = false; - _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart = function animStart(evAnimStart) { animHasStarted = true; _this4.isAnimating = true; @@ -178,11 +188,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart); }, false); - var animEnd = undefined; - _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd = void 0; + _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -192,7 +202,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove('au-enter-active'); classList.remove('au-enter'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd); if (_this4.useAnimationDoneClasses && _this4.animationEnteredClass !== undefined && _this4.animationEnteredClass !== null) { classList.add(_this4.animationEnteredClass); @@ -250,9 +260,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.add('au-leave'); var prevAnimationNames = _this5._getElementAnimationNames(element); - var animStart = undefined; + var _animStart2 = void 0; var animHasStarted = false; - _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2 = function animStart(evAnimStart) { animHasStarted = true; _this5.isAnimating = true; @@ -260,11 +270,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart2); }, false); - var animEnd = undefined; - _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd2 = void 0; + _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -274,7 +284,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove('au-leave-active'); classList.remove('au-leave'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd2); if (_this5.useAnimationDoneClasses && _this5.animationLeftClass !== undefined && _this5.animationLeftClass !== null) { classList.add(_this5.animationLeftClass); @@ -336,9 +346,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove(className); var prevAnimationNames = _this6._getElementAnimationNames(element); - var animStart = undefined; + var _animStart3 = void 0; var animHasStarted = false; - _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3 = function animStart(evAnimStart) { animHasStarted = true; _this6.isAnimating = true; @@ -348,11 +358,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart3); }, false); - var animEnd = undefined; - _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd3 = void 0; + _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -361,7 +371,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove(className + '-remove'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd3); _this6.isAnimating = false; @@ -400,9 +410,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur _this7._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassBegin, element); } - var animStart = undefined; + var _animStart4 = void 0; var animHasStarted = false; - _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4 = function animStart(evAnimStart) { animHasStarted = true; _this7.isAnimating = true; @@ -412,11 +422,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart4); }, false); - var animEnd = undefined; - _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd4 = void 0; + _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -427,7 +437,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove(className + '-add'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd4); _this7.isAnimating = false; @@ -457,9 +467,7 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur }; return CssAnimator; - })(); - - exports.CssAnimator = CssAnimator; + }(); function configure(config, callback) { var animator = config.container.get(CssAnimator); diff --git a/dist/aurelia-animator-css.d.ts b/dist/aurelia-animator-css.d.ts index a9966df..4ca32e5 100644 --- a/dist/aurelia-animator-css.d.ts +++ b/dist/aurelia-animator-css.d.ts @@ -1,11 +1,19 @@ declare module 'aurelia-animator-css' { - import { animationEvent, TemplatingEngine } from 'aurelia-templating'; - import { DOM } from 'aurelia-pal'; + import { + animationEvent, + TemplatingEngine + } from 'aurelia-templating'; + import { + DOM + } from 'aurelia-pal'; export interface CssAnimation { className: string; element: HTMLElement; } + /** + * An implementation of the Animator using CSS3-Animations. + */ /** * An implementation of the Animator using CSS3-Animations. */ diff --git a/dist/aurelia-animator-css.js b/dist/aurelia-animator-css.js index 79ef3d5..76fcd0c 100644 --- a/dist/aurelia-animator-css.js +++ b/dist/aurelia-animator-css.js @@ -150,22 +150,27 @@ export class CssAnimator { // loop through the stylesheets searching for the keyframes. no cache is // used in case of dynamic changes to the stylesheets. let styleSheets = document.styleSheets; - for (let i = 0; i < styleSheets.length; ++i) { - let cssRules = styleSheets[i].cssRules; - if (!cssRules) { - continue; - } + try { + for (let i = 0; i < styleSheets.length; ++i) { + let cssRules = styleSheets[i].cssRules; + + if (!cssRules) { + continue; + } - for (let j = 0; j < cssRules.length; ++j) { - let cssRule = cssRules[j]; + for (let j = 0; j < cssRules.length; ++j) { + let cssRule = cssRules[j]; - if (cssRule.type === keyframesRuleType) { - if (newAnimationNames.indexOf(cssRule.name) !== -1) { - return true; + if (cssRule.type === keyframesRuleType) { + if (newAnimationNames.indexOf(cssRule.name) !== -1) { + return true; + } } } } + } catch (e) { + //do nothing } return false; diff --git a/dist/commonjs/aurelia-animator-css.d.ts b/dist/commonjs/aurelia-animator-css.d.ts index a9966df..4ca32e5 100644 --- a/dist/commonjs/aurelia-animator-css.d.ts +++ b/dist/commonjs/aurelia-animator-css.d.ts @@ -1,11 +1,19 @@ declare module 'aurelia-animator-css' { - import { animationEvent, TemplatingEngine } from 'aurelia-templating'; - import { DOM } from 'aurelia-pal'; + import { + animationEvent, + TemplatingEngine + } from 'aurelia-templating'; + import { + DOM + } from 'aurelia-pal'; export interface CssAnimation { className: string; element: HTMLElement; } + /** + * An implementation of the Animator using CSS3-Animations. + */ /** * An implementation of the Animator using CSS3-Animations. */ diff --git a/dist/commonjs/aurelia-animator-css.js b/dist/commonjs/aurelia-animator-css.js index 90b903b..6fa1c7f 100644 --- a/dist/commonjs/aurelia-animator-css.js +++ b/dist/commonjs/aurelia-animator-css.js @@ -1,15 +1,18 @@ 'use strict'; -exports.__esModule = true; +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.CssAnimator = undefined; exports.configure = configure; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } - var _aureliaTemplating = require('aurelia-templating'); var _aureliaPal = require('aurelia-pal'); -var CssAnimator = (function () { +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var CssAnimator = exports.CssAnimator = function () { function CssAnimator() { _classCallCheck(this, CssAnimator); @@ -30,8 +33,8 @@ var CssAnimator = (function () { CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); - var prop = undefined; - var delay = undefined; + var prop = void 0; + var delay = void 0; if (styl.getPropertyValue('animation-delay')) { prop = 'animation-delay'; @@ -51,7 +54,7 @@ var CssAnimator = (function () { CssAnimator.prototype._getElementAnimationNames = function _getElementAnimationNames(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); - var prefix = undefined; + var prefix = void 0; if (styl.getPropertyValue('animation-name')) { prefix = ''; @@ -82,7 +85,7 @@ var CssAnimator = (function () { } return false; - })['catch'](function () { + }).catch(function () { _this._triggerDOMEvent(_aureliaTemplating.animationEvent.animateTimeout, element); }); }; @@ -108,23 +111,26 @@ var CssAnimator = (function () { var keyframesRuleType = window.CSSRule.KEYFRAMES_RULE || window.CSSRule.MOZ_KEYFRAMES_RULE || window.CSSRule.WEBKIT_KEYFRAMES_RULE; var styleSheets = document.styleSheets; - for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; - if (!cssRules) { - continue; - } + try { + for (var i = 0; i < styleSheets.length; ++i) { + var cssRules = styleSheets[i].cssRules; - for (var j = 0; j < cssRules.length; ++j) { - var cssRule = cssRules[j]; + if (!cssRules) { + continue; + } - if (cssRule.type === keyframesRuleType) { - if (newAnimationNames.indexOf(cssRule.name) !== -1) { - return true; + for (var j = 0; j < cssRules.length; ++j) { + var cssRule = cssRules[j]; + + if (cssRule.type === keyframesRuleType) { + if (newAnimationNames.indexOf(cssRule.name) !== -1) { + return true; + } } } } - } + } catch (e) {} return false; }; @@ -171,9 +177,9 @@ var CssAnimator = (function () { classList.add('au-enter'); var prevAnimationNames = _this4._getElementAnimationNames(element); - var animStart = undefined; + var _animStart = void 0; var animHasStarted = false; - _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart = function animStart(evAnimStart) { animHasStarted = true; _this4.isAnimating = true; @@ -181,11 +187,11 @@ var CssAnimator = (function () { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart); }, false); - var animEnd = undefined; - _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd = void 0; + _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -195,7 +201,7 @@ var CssAnimator = (function () { classList.remove('au-enter-active'); classList.remove('au-enter'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd); if (_this4.useAnimationDoneClasses && _this4.animationEnteredClass !== undefined && _this4.animationEnteredClass !== null) { classList.add(_this4.animationEnteredClass); @@ -253,9 +259,9 @@ var CssAnimator = (function () { classList.add('au-leave'); var prevAnimationNames = _this5._getElementAnimationNames(element); - var animStart = undefined; + var _animStart2 = void 0; var animHasStarted = false; - _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2 = function animStart(evAnimStart) { animHasStarted = true; _this5.isAnimating = true; @@ -263,11 +269,11 @@ var CssAnimator = (function () { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart2); }, false); - var animEnd = undefined; - _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd2 = void 0; + _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -277,7 +283,7 @@ var CssAnimator = (function () { classList.remove('au-leave-active'); classList.remove('au-leave'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd2); if (_this5.useAnimationDoneClasses && _this5.animationLeftClass !== undefined && _this5.animationLeftClass !== null) { classList.add(_this5.animationLeftClass); @@ -339,9 +345,9 @@ var CssAnimator = (function () { classList.remove(className); var prevAnimationNames = _this6._getElementAnimationNames(element); - var animStart = undefined; + var _animStart3 = void 0; var animHasStarted = false; - _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3 = function animStart(evAnimStart) { animHasStarted = true; _this6.isAnimating = true; @@ -351,11 +357,11 @@ var CssAnimator = (function () { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart3); }, false); - var animEnd = undefined; - _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd3 = void 0; + _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -364,7 +370,7 @@ var CssAnimator = (function () { classList.remove(className + '-remove'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd3); _this6.isAnimating = false; @@ -403,9 +409,9 @@ var CssAnimator = (function () { _this7._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassBegin, element); } - var animStart = undefined; + var _animStart4 = void 0; var animHasStarted = false; - _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4 = function animStart(evAnimStart) { animHasStarted = true; _this7.isAnimating = true; @@ -415,11 +421,11 @@ var CssAnimator = (function () { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart4); }, false); - var animEnd = undefined; - _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd4 = void 0; + _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -430,7 +436,7 @@ var CssAnimator = (function () { classList.remove(className + '-add'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd4); _this7.isAnimating = false; @@ -460,9 +466,7 @@ var CssAnimator = (function () { }; return CssAnimator; -})(); - -exports.CssAnimator = CssAnimator; +}(); function configure(config, callback) { var animator = config.container.get(CssAnimator); diff --git a/dist/es6/aurelia-animator-css.d.ts b/dist/es2015/aurelia-animator-css.d.ts similarity index 93% rename from dist/es6/aurelia-animator-css.d.ts rename to dist/es2015/aurelia-animator-css.d.ts index a9966df..4ca32e5 100644 --- a/dist/es6/aurelia-animator-css.d.ts +++ b/dist/es2015/aurelia-animator-css.d.ts @@ -1,11 +1,19 @@ declare module 'aurelia-animator-css' { - import { animationEvent, TemplatingEngine } from 'aurelia-templating'; - import { DOM } from 'aurelia-pal'; + import { + animationEvent, + TemplatingEngine + } from 'aurelia-templating'; + import { + DOM + } from 'aurelia-pal'; export interface CssAnimation { className: string; element: HTMLElement; } + /** + * An implementation of the Animator using CSS3-Animations. + */ /** * An implementation of the Animator using CSS3-Animations. */ diff --git a/dist/es2015/aurelia-animator-css.js b/dist/es2015/aurelia-animator-css.js new file mode 100644 index 0000000..f16aa2b --- /dev/null +++ b/dist/es2015/aurelia-animator-css.js @@ -0,0 +1,443 @@ +import { animationEvent, TemplatingEngine } from 'aurelia-templating'; +import { DOM } from 'aurelia-pal'; + +export let CssAnimator = class CssAnimator { + constructor() { + this.useAnimationDoneClasses = false; + this.animationEnteredClass = 'au-entered'; + this.animationLeftClass = 'au-left'; + this.isAnimating = false; + + this.verifyKeyframesExist = true; + } + + _addMultipleEventListener(el, s, fn) { + let evts = s.split(' '); + for (let i = 0, ii = evts.length; i < ii; ++i) { + el.addEventListener(evts[i], fn, false); + } + } + + _getElementAnimationDelay(element) { + let styl = DOM.getComputedStyle(element); + let prop; + let delay; + + if (styl.getPropertyValue('animation-delay')) { + prop = 'animation-delay'; + } else if (styl.getPropertyValue('-webkit-animation-delay')) { + prop = '-webkit-animation-delay'; + } else if (styl.getPropertyValue('-moz-animation-delay')) { + prop = '-moz-animation-delay'; + } else { + return 0; + } + + delay = styl.getPropertyValue(prop); + delay = Number(delay.replace(/[^\d\.]/g, '')); + + return delay * 1000; + } + + _getElementAnimationNames(element) { + let styl = DOM.getComputedStyle(element); + let prefix; + + if (styl.getPropertyValue('animation-name')) { + prefix = ''; + } else if (styl.getPropertyValue('-webkit-animation-name')) { + prefix = '-webkit-'; + } else if (styl.getPropertyValue('-moz-animation-name')) { + prefix = '-moz-'; + } else { + return []; + } + + let animationNames = styl.getPropertyValue(prefix + 'animation-name'); + return animationNames ? animationNames.split(' ') : []; + } + + _performSingleAnimate(element, className) { + this._triggerDOMEvent(animationEvent.animateBegin, element); + + return this.addClass(element, className, true).then(result => { + this._triggerDOMEvent(animationEvent.animateActive, element); + + if (result !== false) { + return this.removeClass(element, className, true).then(() => { + this._triggerDOMEvent(animationEvent.animateDone, element); + }); + } + + return false; + }).catch(() => { + this._triggerDOMEvent(animationEvent.animateTimeout, element); + }); + } + + _triggerDOMEvent(eventType, element) { + let evt = DOM.createCustomEvent(eventType, { bubbles: true, cancelable: true, detail: element }); + DOM.dispatchEvent(evt); + } + + _animationChangeWithValidKeyframe(animationNames, prevAnimationNames) { + let newAnimationNames = animationNames.filter(name => prevAnimationNames.indexOf(name) === -1); + + if (newAnimationNames.length === 0) { + return false; + } + + if (!this.verifyKeyframesExist) { + return true; + } + + const keyframesRuleType = window.CSSRule.KEYFRAMES_RULE || window.CSSRule.MOZ_KEYFRAMES_RULE || window.CSSRule.WEBKIT_KEYFRAMES_RULE; + + let styleSheets = document.styleSheets; + + try { + for (let i = 0; i < styleSheets.length; ++i) { + let cssRules = styleSheets[i].cssRules; + + if (!cssRules) { + continue; + } + + for (let j = 0; j < cssRules.length; ++j) { + let cssRule = cssRules[j]; + + if (cssRule.type === keyframesRuleType) { + if (newAnimationNames.indexOf(cssRule.name) !== -1) { + return true; + } + } + } + } + } catch (e) {} + + return false; + } + + animate(element, className) { + if (Array.isArray(element)) { + return Promise.all(element.map(el => { + return this._performSingleAnimate(el, className); + })); + } + + return this._performSingleAnimate(element, className); + } + + runSequence(animations) { + this._triggerDOMEvent(animationEvent.sequenceBegin, null); + + return animations.reduce((p, anim) => { + return p.then(() => { + return this.animate(anim.element, anim.className); + }); + }, Promise.resolve(true)).then(() => { + this._triggerDOMEvent(animationEvent.sequenceDone, null); + }); + } + + enter(element) { + return new Promise((resolve, reject) => { + let classList = element.classList; + + this._triggerDOMEvent(animationEvent.enterBegin, element); + + if (this.useAnimationDoneClasses) { + classList.remove(this.animationEnteredClass); + classList.remove(this.animationLeftClass); + } + + classList.add('au-enter'); + let prevAnimationNames = this._getElementAnimationNames(element); + + let animStart; + let animHasStarted = false; + this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = evAnimStart => { + animHasStarted = true; + this.isAnimating = true; + + this._triggerDOMEvent(animationEvent.enterActive, element); + + evAnimStart.stopPropagation(); + + evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + }, false); + + let animEnd; + this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = evAnimEnd => { + if (!animHasStarted) { + return; + } + + evAnimEnd.stopPropagation(); + + classList.remove('au-enter-active'); + classList.remove('au-enter'); + + evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + + if (this.useAnimationDoneClasses && this.animationEnteredClass !== undefined && this.animationEnteredClass !== null) { + classList.add(this.animationEnteredClass); + } + + this.isAnimating = false; + this._triggerDOMEvent(animationEvent.enterDone, element); + + resolve(true); + }, false); + + let parent = element.parentElement; + let delay = 0; + + let cleanupAnimation = () => { + let animationNames = this._getElementAnimationNames(element); + if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { + classList.remove('au-enter-active'); + classList.remove('au-enter'); + this._triggerDOMEvent(animationEvent.enterTimeout, element); + resolve(false); + } + }; + + if (parent !== null && parent !== undefined && (parent.classList.contains('au-stagger') || parent.classList.contains('au-stagger-enter'))) { + let elemPos = Array.prototype.indexOf.call(parent.children, element); + delay = this._getElementAnimationDelay(parent) * elemPos; + + this._triggerDOMEvent(animationEvent.staggerNext, element); + + setTimeout(() => { + classList.add('au-enter-active'); + cleanupAnimation(); + }, delay); + } else { + classList.add('au-enter-active'); + cleanupAnimation(); + } + }); + } + + leave(element) { + return new Promise((resolve, reject) => { + let classList = element.classList; + + this._triggerDOMEvent(animationEvent.leaveBegin, element); + + if (this.useAnimationDoneClasses) { + classList.remove(this.animationEnteredClass); + classList.remove(this.animationLeftClass); + } + + classList.add('au-leave'); + let prevAnimationNames = this._getElementAnimationNames(element); + + let animStart; + let animHasStarted = false; + this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = evAnimStart => { + animHasStarted = true; + this.isAnimating = true; + + this._triggerDOMEvent(animationEvent.leaveActive, element); + + evAnimStart.stopPropagation(); + + evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + }, false); + + let animEnd; + this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = evAnimEnd => { + if (!animHasStarted) { + return; + } + + evAnimEnd.stopPropagation(); + + classList.remove('au-leave-active'); + classList.remove('au-leave'); + + evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + + if (this.useAnimationDoneClasses && this.animationLeftClass !== undefined && this.animationLeftClass !== null) { + classList.add(this.animationLeftClass); + } + + this.isAnimating = false; + this._triggerDOMEvent(animationEvent.leaveDone, element); + + resolve(true); + }, false); + + let parent = element.parentElement; + let delay = 0; + + let cleanupAnimation = () => { + let animationNames = this._getElementAnimationNames(element); + if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { + classList.remove('au-leave-active'); + classList.remove('au-leave'); + this._triggerDOMEvent(animationEvent.leaveTimeout, element); + resolve(false); + } + }; + + if (parent !== null && parent !== undefined && (parent.classList.contains('au-stagger') || parent.classList.contains('au-stagger-leave'))) { + let elemPos = Array.prototype.indexOf.call(parent.children, element); + delay = this._getElementAnimationDelay(parent) * elemPos; + + this._triggerDOMEvent(animationEvent.staggerNext, element); + + setTimeout(() => { + classList.add('au-leave-active'); + cleanupAnimation(); + }, delay); + } else { + classList.add('au-leave-active'); + cleanupAnimation(); + } + }); + } + + removeClass(element, className, suppressEvents = false) { + return new Promise((resolve, reject) => { + let classList = element.classList; + + if (!classList.contains(className) && !classList.contains(className + '-add')) { + resolve(false); + return; + } + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.removeClassBegin, element); + } + + classList.remove(className); + let prevAnimationNames = this._getElementAnimationNames(element); + + let animStart; + let animHasStarted = false; + this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = evAnimStart => { + animHasStarted = true; + this.isAnimating = true; + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.removeClassActive, element); + } + + evAnimStart.stopPropagation(); + + evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + }, false); + + let animEnd; + this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = evAnimEnd => { + if (!animHasStarted) { + return; + } + + evAnimEnd.stopPropagation(); + + classList.remove(className + '-remove'); + + evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + + this.isAnimating = false; + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.removeClassDone, element); + } + + resolve(true); + }, false); + + classList.add(className + '-remove'); + + let animationNames = this._getElementAnimationNames(element); + if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { + classList.remove(className + '-remove'); + classList.remove(className); + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.removeClassTimeout, element); + } + + resolve(false); + } + }); + } + + addClass(element, className, suppressEvents = false) { + return new Promise((resolve, reject) => { + let classList = element.classList; + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.addClassBegin, element); + } + + let animStart; + let animHasStarted = false; + this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = evAnimStart => { + animHasStarted = true; + this.isAnimating = true; + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.addClassActive, element); + } + + evAnimStart.stopPropagation(); + + evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + }, false); + + let animEnd; + this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = evAnimEnd => { + if (!animHasStarted) { + return; + } + + evAnimEnd.stopPropagation(); + + classList.add(className); + + classList.remove(className + '-add'); + + evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + + this.isAnimating = false; + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.addClassDone, element); + } + + resolve(true); + }, false); + + let prevAnimationNames = this._getElementAnimationNames(element); + + classList.add(className + '-add'); + + let animationNames = this._getElementAnimationNames(element); + if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { + classList.remove(className + '-add'); + classList.add(className); + + if (suppressEvents !== true) { + this._triggerDOMEvent(animationEvent.addClassTimeout, element); + } + + resolve(false); + } + }); + } + +}; + +export function configure(config, callback) { + let animator = config.container.get(CssAnimator); + config.container.get(TemplatingEngine).configureAnimator(animator); + if (typeof callback === 'function') { + callback(animator); + } +} \ No newline at end of file diff --git a/dist/es6/aurelia-animator-css.js b/dist/es6/aurelia-animator-css.js deleted file mode 100644 index 79ef3d5..0000000 --- a/dist/es6/aurelia-animator-css.js +++ /dev/null @@ -1,591 +0,0 @@ -import {animationEvent,TemplatingEngine} from 'aurelia-templating'; -import {DOM} from 'aurelia-pal'; - -interface CssAnimation { - className: string; - element: HTMLElement; -} - -/** - * An implementation of the Animator using CSS3-Animations. - */ -export class CssAnimator { - /** - * Creates an instance of CssAnimator. - */ - constructor() { - this.useAnimationDoneClasses = false; - this.animationEnteredClass = 'au-entered'; - this.animationLeftClass = 'au-left'; - this.isAnimating = false; - // toggle this on to save performance at the cost of animations referring - // to missing keyframes breaking detection of termination - this.verifyKeyframesExist = true; - } - - /** - * Add multiple listeners at once to the given element - * - * @param el the element to attach listeners to - * @param s collection of events to bind listeners to - * @param fn callback that gets executed - */ - _addMultipleEventListener(el: HTMLElement, s: string, fn: Function) : void { - let evts = s.split(' '); - for (let i = 0, ii = evts.length; i < ii; ++i) { - el.addEventListener(evts[i], fn, false); - } - } - - /** - * Vendor-prefix save method to get the animation-delay - * - * @param element the element to inspect - * @returns animation-delay in seconds - */ - _getElementAnimationDelay(element: HTMLElement): number { - let styl = DOM.getComputedStyle(element); - let prop; - let delay; - - if (styl.getPropertyValue('animation-delay')) { - prop = 'animation-delay'; - } else if (styl.getPropertyValue('-webkit-animation-delay')) { - prop = '-webkit-animation-delay'; - } else if (styl.getPropertyValue('-moz-animation-delay')) { - prop = '-moz-animation-delay'; - } else { - return 0; - } - - delay = styl.getPropertyValue(prop); - delay = Number(delay.replace(/[^\d\.]/g, '')); - - return (delay * 1000); - } - - /** - * Vendor-prefix safe method to get the animation names - * - * @param element the element to inspect - * @returns array of animation names - */ - _getElementAnimationNames(element: HTMLElement): Array { - let styl = DOM.getComputedStyle(element); - let prefix; - - if (styl.getPropertyValue('animation-name')) { - prefix = ''; - } else if (styl.getPropertyValue('-webkit-animation-name')) { - prefix = '-webkit-'; - } else if (styl.getPropertyValue('-moz-animation-name')) { - prefix = '-moz-'; - } else { - return []; - } - - let animationNames = styl.getPropertyValue(prefix + 'animation-name'); - return animationNames ? animationNames.split(' ') : []; - } - - /** - * Run an animation for the given element with the specified className - * - * @param element the element to be animated - * @param className the class to be added and removed - * @returns {Promise} - */ - _performSingleAnimate(element: HTMLElement, className: string): Promise { - this._triggerDOMEvent(animationEvent.animateBegin, element); - - return this.addClass(element, className, true) - .then((result) => { - this._triggerDOMEvent(animationEvent.animateActive, element); - - if (result !== false) { - return this.removeClass(element, className, true) - .then(() => { - this._triggerDOMEvent(animationEvent.animateDone, element); - }); - } - - return false; - }) - .catch(() => { - this._triggerDOMEvent(animationEvent.animateTimeout, element); - }); - } - - /** - * Triggers a DOM-Event with the given type as name and adds the provided element as detail - * @param eventType the event type - * @param element the element to be dispatched as event detail - */ - _triggerDOMEvent(eventType: string, element: HTMLElement): void { - let evt = DOM.createCustomEvent(eventType, {bubbles: true, cancelable: true, detail: element}); - DOM.dispatchEvent(evt); - } - - /** - * Returns true if there is a new animation with valid keyframes - * @param animationNames the current animation style. - * @param prevAnimationNames the previous animation style - * @private - */ - _animationChangeWithValidKeyframe(animationNames: Array, prevAnimationNames: Array): bool { - let newAnimationNames = animationNames.filter(name => prevAnimationNames.indexOf(name) === -1); - - if (newAnimationNames.length === 0) { - return false; - } - - if (! this.verifyKeyframesExist) { - return true; - } - - const keyframesRuleType = window.CSSRule.KEYFRAMES_RULE || - window.CSSRule.MOZ_KEYFRAMES_RULE || - window.CSSRule.WEBKIT_KEYFRAMES_RULE; - - // loop through the stylesheets searching for the keyframes. no cache is - // used in case of dynamic changes to the stylesheets. - let styleSheets = document.styleSheets; - for (let i = 0; i < styleSheets.length; ++i) { - let cssRules = styleSheets[i].cssRules; - - if (!cssRules) { - continue; - } - - for (let j = 0; j < cssRules.length; ++j) { - let cssRule = cssRules[j]; - - if (cssRule.type === keyframesRuleType) { - if (newAnimationNames.indexOf(cssRule.name) !== -1) { - return true; - } - } - } - } - - return false; - } - - /* Public API Begin */ - /** - * Execute a single animation. - * @param element Element to animate - * @param className Properties to animate or name of the effect to use. For css animators this represents the className to be added and removed right after the animation is done. - * @param options options for the animation (duration, easing, ...) - * @returns Resolved when the animation is done - */ - animate(element: HTMLElement | Array, className: string): Promise { - if (Array.isArray(element)) { - return Promise.all(element.map( (el) => { - return this._performSingleAnimate(el, className); - })); - } - - return this._performSingleAnimate(element, className); - } - - /** - * Run a sequence of animations one after the other. - * @param sequence An array of effectNames or classNames - * @returns Resolved when all animations are done - */ - runSequence(animations: Array): Promise { - this._triggerDOMEvent(animationEvent.sequenceBegin, null); - - return animations.reduce((p, anim) => { - return p.then(() => { return this.animate(anim.element, anim.className); }); - }, Promise.resolve(true) ).then(() => { - this._triggerDOMEvent(animationEvent.sequenceDone, null); - }); - } - - /** - * Execute an 'enter' animation on an element - * @param element Element to animate - * @returns Resolved when the animation is done - */ - enter(element: HTMLElement): Promise { - return new Promise((resolve, reject) => { - let classList = element.classList; - - this._triggerDOMEvent(animationEvent.enterBegin, element); - - // Step 1.2: remove done classes - if (this.useAnimationDoneClasses) { - classList.remove(this.animationEnteredClass); - classList.remove(this.animationLeftClass); - } - - // Step 2: Add animation preparation class - classList.add('au-enter'); - let prevAnimationNames = this._getElementAnimationNames(element); - - // Step 3: setup event to check whether animations started - let animStart; - let animHasStarted = false; - this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => { - animHasStarted = true; - this.isAnimating = true; - - this._triggerDOMEvent(animationEvent.enterActive, element); - - // Stop event propagation, bubbling will otherwise prevent parent animation - evAnimStart.stopPropagation(); - - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); - }, false); - - // Step 3.1: Wait for animation to finish - let animEnd; - this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => { - if (! animHasStarted) { - return; - } - - // Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation - evAnimEnd.stopPropagation(); - - // Step 3.1.1: remove animation classes - classList.remove('au-enter-active'); - classList.remove('au-enter'); - - // Step 3.1.2 remove animationend listener - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); - - // Step 3.1.3 in case animation done animations are active, add the defined entered class to the element - if (this.useAnimationDoneClasses && - this.animationEnteredClass !== undefined && - this.animationEnteredClass !== null) { - classList.add(this.animationEnteredClass); - } - - this.isAnimating = false; - this._triggerDOMEvent(animationEvent.enterDone, element); - - resolve(true); - }, false); - - // Step 4: check if parent element is defined to stagger animations otherwise trigger active immediately - let parent = element.parentElement; - let delay = 0; - - let cleanupAnimation = () => { - // Step 5: if no animations scheduled cleanup animation classes - let animationNames = this._getElementAnimationNames(element); - if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { - classList.remove('au-enter-active'); - classList.remove('au-enter'); - this._triggerDOMEvent(animationEvent.enterTimeout, element); - resolve(false); - } - }; - - if (parent !== null && - parent !== undefined && - ( - parent.classList.contains('au-stagger') || - parent.classList.contains('au-stagger-enter') - )) { - let elemPos = Array.prototype.indexOf.call(parent.children, element); - delay = this._getElementAnimationDelay(parent) * elemPos; - - this._triggerDOMEvent(animationEvent.staggerNext, element); - - setTimeout(() => { - classList.add('au-enter-active'); - cleanupAnimation(); - }, delay); - } else { - classList.add('au-enter-active'); - cleanupAnimation(); - } - }); - } - - /** - * Execute a 'leave' animation on an element - * @param element Element to animate - * @returns Resolved when the animation is done - */ - leave(element: HTMLElement): Promise { - return new Promise((resolve, reject) => { - let classList = element.classList; - - this._triggerDOMEvent(animationEvent.leaveBegin, element); - - // Step 1.1: remove done classes - if (this.useAnimationDoneClasses) { - classList.remove(this.animationEnteredClass); - classList.remove(this.animationLeftClass); - } - - // Step 2: Add animation preparation class - classList.add('au-leave'); - let prevAnimationNames = this._getElementAnimationNames(element); - - // Step 3: setup event to check whether animations started - let animStart; - let animHasStarted = false; - this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => { - animHasStarted = true; - this.isAnimating = true; - - this._triggerDOMEvent(animationEvent.leaveActive, element); - - // Stop event propagation, bubbling will otherwise prevent parent animation - evAnimStart.stopPropagation(); - - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); - }, false); - - // Step 3.1: Wait for animation to finish - let animEnd; - this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => { - if (! animHasStarted) { - return; - } - - // Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation - evAnimEnd.stopPropagation(); - - // Step 3.1.1: remove animation classes - classList.remove('au-leave-active'); - classList.remove('au-leave'); - - // Step 3.1.2 remove animationend listener - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); - - // Step 3.1.3 in case animation done animations are active, add the defined left class to the element - if (this.useAnimationDoneClasses && - this.animationLeftClass !== undefined && - this.animationLeftClass !== null) { - classList.add(this.animationLeftClass); - } - - this.isAnimating = false; - this._triggerDOMEvent(animationEvent.leaveDone, element); - - resolve(true); - }, false); - - - // Step 4: check if parent element is defined to stagger animations otherwise trigger leave immediately - let parent = element.parentElement; - let delay = 0; - - let cleanupAnimation = () => { - // Step 5: if no animations scheduled cleanup animation classes - let animationNames = this._getElementAnimationNames(element); - if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { - classList.remove('au-leave-active'); - classList.remove('au-leave'); - this._triggerDOMEvent(animationEvent.leaveTimeout, element); - resolve(false); - } - }; - - if (parent !== null && - parent !== undefined && - ( - parent.classList.contains('au-stagger') || - parent.classList.contains('au-stagger-leave') - )) { - let elemPos = Array.prototype.indexOf.call(parent.children, element); - delay = this._getElementAnimationDelay(parent) * elemPos; - - this._triggerDOMEvent(animationEvent.staggerNext, element); - - setTimeout(() => { - classList.add('au-leave-active'); - cleanupAnimation(); - }, delay); - } else { - classList.add('au-leave-active'); - cleanupAnimation(); - } - }); - } - - /** - * Add a class to an element to trigger an animation. - * @param element Element to animate - * @param className Properties to animate or name of the effect to use - * @param suppressEvents Indicates whether or not to suppress animation events. - * @returns Resolved when the animation is done - */ - removeClass(element: HTMLElement, className: string, suppressEvents: boolean = false): Promise { - return new Promise( (resolve, reject) => { - let classList = element.classList; - - if (!classList.contains(className) && !classList.contains(className + '-add')) { - resolve(false); - return; - } - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.removeClassBegin, element); - } - - // Step 2: Remove final className, so animation can start - classList.remove(className); - let prevAnimationNames = this._getElementAnimationNames(element); - - // Step 3: setup event to check whether animations started - let animStart; - let animHasStarted = false; - this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => { - animHasStarted = true; - this.isAnimating = true; - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.removeClassActive, element); - } - - // Stop event propagation, bubbling will otherwise prevent parent animation - evAnimStart.stopPropagation(); - - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); - }, false); - - // Step 3.1: Wait for animation to finish - let animEnd; - this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => { - if (! animHasStarted) { - return; - } - - // Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation - evAnimEnd.stopPropagation(); - - // Step 3.1.1 Remove -remove suffixed class - classList.remove(className + '-remove'); - - // Step 3.1.2 remove animationend listener - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); - - this.isAnimating = false; - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.removeClassDone, element); - } - - resolve(true); - }, false); - - - // Step 4: Add given className + -remove suffix to kick off animation - classList.add(className + '-remove'); - - // Step 5: if no animations happened cleanup animation classes and remove final class - let animationNames = this._getElementAnimationNames(element); - if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { - classList.remove(className + '-remove'); - classList.remove(className); - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.removeClassTimeout, element); - } - - resolve(false); - } - }); - } - - /** - * Add a class to an element to trigger an animation. - * @param element Element to animate - * @param className Properties to animate or name of the effect to use - * @param suppressEvents Indicates whether or not to suppress animation events. - * @returns Resolved when the animation is done - */ - addClass(element: HTMLElement, className: string, suppressEvents: boolean = false): Promise { - return new Promise((resolve, reject) => { - let classList = element.classList; - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.addClassBegin, element); - } - - // Step 2: setup event to check whether animations started - let animStart; - let animHasStarted = false; - this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = (evAnimStart) => { - animHasStarted = true; - this.isAnimating = true; - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.addClassActive, element); - } - - // Stop event propagation, bubbling will otherwise prevent parent animation - evAnimStart.stopPropagation(); - - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); - }, false); - - // Step 2.1: Wait for animation to finish - let animEnd; - this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => { - if (! animHasStarted) { - return; - } - - // Step 2.1.0: Stop event propagation, bubbling will otherwise prevent parent animation - evAnimEnd.stopPropagation(); - - // Step 2.1.1: Add final className - classList.add(className); - - // Step 2.1.2 Remove -add suffixed class - classList.remove(className + '-add'); - - // Step 2.1.3 remove animationend listener - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); - - this.isAnimating = false; - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.addClassDone, element); - } - - resolve(true); - }, false); - - let prevAnimationNames = this._getElementAnimationNames(element); - - // Step 3: Add given className + -add suffix to kick off animation - classList.add(className + '-add'); - - // Step 4: if no animations happened cleanup animation classes and add final class - let animationNames = this._getElementAnimationNames(element); - if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { - classList.remove(className + '-add'); - classList.add(className); - - if (suppressEvents !== true) { - this._triggerDOMEvent(animationEvent.addClassTimeout, element); - } - - resolve(false); - } - }); - } - - /* Public API End */ -} - -/** - * Configuires the CssAnimator as the default animator for Aurelia. - * @param config The FrameworkConfiguration instance. - * @param callback A configuration callback provided by the plugin consumer. - */ -export function configure(config: Object, callback?:(animator:CssAnimator) => void): void { - let animator = config.container.get(CssAnimator); - config.container.get(TemplatingEngine).configureAnimator(animator); - if (typeof callback === 'function') { callback(animator); } -} diff --git a/dist/system/aurelia-animator-css.d.ts b/dist/system/aurelia-animator-css.d.ts index a9966df..4ca32e5 100644 --- a/dist/system/aurelia-animator-css.d.ts +++ b/dist/system/aurelia-animator-css.d.ts @@ -1,11 +1,19 @@ declare module 'aurelia-animator-css' { - import { animationEvent, TemplatingEngine } from 'aurelia-templating'; - import { DOM } from 'aurelia-pal'; + import { + animationEvent, + TemplatingEngine + } from 'aurelia-templating'; + import { + DOM + } from 'aurelia-pal'; export interface CssAnimation { className: string; element: HTMLElement; } + /** + * An implementation of the Animator using CSS3-Animations. + */ /** * An implementation of the Animator using CSS3-Animations. */ diff --git a/dist/system/aurelia-animator-css.js b/dist/system/aurelia-animator-css.js index 59aae4b..d1b09c4 100644 --- a/dist/system/aurelia-animator-css.js +++ b/dist/system/aurelia-animator-css.js @@ -1,17 +1,11 @@ -System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { - 'use strict'; +'use strict'; +System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _context) { var animationEvent, TemplatingEngine, DOM, CssAnimator; - _export('configure', configure); - - function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } - - function configure(config, callback) { - var animator = config.container.get(CssAnimator); - config.container.get(TemplatingEngine).configureAnimator(animator); - if (typeof callback === 'function') { - callback(animator); + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); } } @@ -23,7 +17,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { DOM = _aureliaPal.DOM; }], execute: function () { - CssAnimator = (function () { + _export('CssAnimator', CssAnimator = function () { function CssAnimator() { _classCallCheck(this, CssAnimator); @@ -44,8 +38,8 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = DOM.getComputedStyle(element); - var prop = undefined; - var delay = undefined; + var prop = void 0; + var delay = void 0; if (styl.getPropertyValue('animation-delay')) { prop = 'animation-delay'; @@ -65,7 +59,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { CssAnimator.prototype._getElementAnimationNames = function _getElementAnimationNames(element) { var styl = DOM.getComputedStyle(element); - var prefix = undefined; + var prefix = void 0; if (styl.getPropertyValue('animation-name')) { prefix = ''; @@ -96,7 +90,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { } return false; - })['catch'](function () { + }).catch(function () { _this._triggerDOMEvent(animationEvent.animateTimeout, element); }); }; @@ -122,23 +116,26 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { var keyframesRuleType = window.CSSRule.KEYFRAMES_RULE || window.CSSRule.MOZ_KEYFRAMES_RULE || window.CSSRule.WEBKIT_KEYFRAMES_RULE; var styleSheets = document.styleSheets; - for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; - if (!cssRules) { - continue; - } + try { + for (var i = 0; i < styleSheets.length; ++i) { + var cssRules = styleSheets[i].cssRules; + + if (!cssRules) { + continue; + } - for (var j = 0; j < cssRules.length; ++j) { - var cssRule = cssRules[j]; + for (var j = 0; j < cssRules.length; ++j) { + var cssRule = cssRules[j]; - if (cssRule.type === keyframesRuleType) { - if (newAnimationNames.indexOf(cssRule.name) !== -1) { - return true; + if (cssRule.type === keyframesRuleType) { + if (newAnimationNames.indexOf(cssRule.name) !== -1) { + return true; + } } } } - } + } catch (e) {} return false; }; @@ -185,9 +182,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.add('au-enter'); var prevAnimationNames = _this4._getElementAnimationNames(element); - var animStart = undefined; + var _animStart = void 0; var animHasStarted = false; - _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this4._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart = function animStart(evAnimStart) { animHasStarted = true; _this4.isAnimating = true; @@ -195,11 +192,11 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart); }, false); - var animEnd = undefined; - _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd = void 0; + _this4._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -209,7 +206,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.remove('au-enter-active'); classList.remove('au-enter'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd); if (_this4.useAnimationDoneClasses && _this4.animationEnteredClass !== undefined && _this4.animationEnteredClass !== null) { classList.add(_this4.animationEnteredClass); @@ -267,9 +264,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.add('au-leave'); var prevAnimationNames = _this5._getElementAnimationNames(element); - var animStart = undefined; + var _animStart2 = void 0; var animHasStarted = false; - _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this5._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2 = function animStart(evAnimStart) { animHasStarted = true; _this5.isAnimating = true; @@ -277,11 +274,11 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart2); }, false); - var animEnd = undefined; - _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd2 = void 0; + _this5._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -291,7 +288,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.remove('au-leave-active'); classList.remove('au-leave'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd2); if (_this5.useAnimationDoneClasses && _this5.animationLeftClass !== undefined && _this5.animationLeftClass !== null) { classList.add(_this5.animationLeftClass); @@ -353,9 +350,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.remove(className); var prevAnimationNames = _this6._getElementAnimationNames(element); - var animStart = undefined; + var _animStart3 = void 0; var animHasStarted = false; - _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3 = function animStart(evAnimStart) { animHasStarted = true; _this6.isAnimating = true; @@ -365,11 +362,11 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart3); }, false); - var animEnd = undefined; - _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd3 = void 0; + _this6._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -378,7 +375,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.remove(className + '-remove'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd3); _this6.isAnimating = false; @@ -417,9 +414,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { _this7._triggerDOMEvent(animationEvent.addClassBegin, element); } - var animStart = undefined; + var _animStart4 = void 0; var animHasStarted = false; - _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) { + _this7._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4 = function animStart(evAnimStart) { animHasStarted = true; _this7.isAnimating = true; @@ -429,11 +426,11 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { evAnimStart.stopPropagation(); - evAnimStart.target.removeEventListener(evAnimStart.type, animStart); + evAnimStart.target.removeEventListener(evAnimStart.type, _animStart4); }, false); - var animEnd = undefined; - _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = function (evAnimEnd) { + var _animEnd4 = void 0; + _this7._addMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4 = function animEnd(evAnimEnd) { if (!animHasStarted) { return; } @@ -444,7 +441,7 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { classList.remove(className + '-add'); - evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd); + evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd4); _this7.isAnimating = false; @@ -474,9 +471,19 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export) { }; return CssAnimator; - })(); + }()); _export('CssAnimator', CssAnimator); + + function configure(config, callback) { + var animator = config.container.get(CssAnimator); + config.container.get(TemplatingEngine).configureAnimator(animator); + if (typeof callback === 'function') { + callback(animator); + } + } + + _export('configure', configure); } }; }); \ No newline at end of file diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md index 8e5f959..0c83c00 100644 --- a/doc/CHANGELOG.md +++ b/doc/CHANGELOG.md @@ -1,3 +1,11 @@ +### 1.0.0-beta.1.2.0 (2016-03-22) + + +#### Bug Fixes + +* **cssRules:** add try catch ([d66df21c](https://github.com/aurelia/animator-css/commit/d66df21c84a889d6867a20fad9639920109b5af6)) + + ### 1.0.0-beta.1.1.2 (2016-03-01) diff --git a/package.json b/package.json index 9f821f5..18d0d3d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aurelia-animator-css", - "version": "1.0.0-beta.1.1.2", + "version": "1.0.0-beta.1.2.0", "description": "An implementation of the abstract Animator interface from templating which enables css-based animations.", "keywords": [ "aurelia",