diff --git a/bower.json b/bower.json index e217e3e..12b575f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "aurelia-animator-css", - "version": "1.0.0", + "version": "1.0.1", "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.js b/dist/amd/aurelia-animator-css.js index 1fe1fff..2875987 100644 --- a/dist/amd/aurelia-animator-css.js +++ b/dist/amd/aurelia-animator-css.js @@ -28,6 +28,13 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur } }; + CssAnimator.prototype._removeMultipleEventListener = function _removeMultipleEventListener(el, s, fn) { + var evts = s.split(' '); + for (var i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + }; + CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); var prop = void 0; @@ -111,7 +118,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur try { for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; + var cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) {} if (!cssRules) { continue; @@ -218,6 +229,10 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur if (!_this4._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + _this4._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd); + _this4._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart); + _this4._triggerDOMEvent(_aureliaTemplating.animationEvent.enterTimeout, element); resolve(false); } @@ -300,6 +315,10 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur if (!_this5._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + _this5._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2); + _this5._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2); + _this5._triggerDOMEvent(_aureliaTemplating.animationEvent.leaveTimeout, element); resolve(false); } @@ -385,6 +404,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove(className + '-remove'); classList.remove(className); + _this6._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3); + _this6._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3); + if (suppressEvents !== true) { _this6._triggerDOMEvent(_aureliaTemplating.animationEvent.removeClassTimeout, element); } @@ -453,6 +475,9 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur classList.remove(className + '-add'); classList.add(className); + _this7._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4); + _this7._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4); + if (suppressEvents !== true) { _this7._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassTimeout, element); } diff --git a/dist/aurelia-animator-css.js b/dist/aurelia-animator-css.js index 76fcd0c..d8f0419 100644 --- a/dist/aurelia-animator-css.js +++ b/dist/aurelia-animator-css.js @@ -37,6 +37,20 @@ export class CssAnimator { } } + /** + * Remove multiple listeners at once from the given element + * + * @param el the element + * @param s collection of events to remove + * @param fn callback to remove + */ + _removeMultipleEventListener(el: HTMLElement, s: string, fn: Function) : void { + let evts = s.split(' '); + for (let i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + } + /** * Vendor-prefix save method to get the animation-delay * @@ -153,7 +167,13 @@ export class CssAnimator { try { for (let i = 0; i < styleSheets.length; ++i) { - let cssRules = styleSheets[i].cssRules; + let cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) { + // do nothing + } if (!cssRules) { continue; @@ -285,6 +305,10 @@ export class CssAnimator { if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + this._triggerDOMEvent(animationEvent.enterTimeout, element); resolve(false); } @@ -389,6 +413,10 @@ export class CssAnimator { if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + this._triggerDOMEvent(animationEvent.leaveTimeout, element); resolve(false); } @@ -492,6 +520,9 @@ export class CssAnimator { classList.remove(className + '-remove'); classList.remove(className); + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + if (suppressEvents !== true) { this._triggerDOMEvent(animationEvent.removeClassTimeout, element); } @@ -572,6 +603,9 @@ export class CssAnimator { classList.remove(className + '-add'); classList.add(className); + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + if (suppressEvents !== true) { this._triggerDOMEvent(animationEvent.addClassTimeout, element); } diff --git a/dist/commonjs/aurelia-animator-css.js b/dist/commonjs/aurelia-animator-css.js index c26533d..72d5cfd 100644 --- a/dist/commonjs/aurelia-animator-css.js +++ b/dist/commonjs/aurelia-animator-css.js @@ -31,6 +31,13 @@ var CssAnimator = exports.CssAnimator = function () { } }; + CssAnimator.prototype._removeMultipleEventListener = function _removeMultipleEventListener(el, s, fn) { + var evts = s.split(' '); + for (var i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + }; + CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = _aureliaPal.DOM.getComputedStyle(element); var prop = void 0; @@ -114,7 +121,11 @@ var CssAnimator = exports.CssAnimator = function () { try { for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; + var cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) {} if (!cssRules) { continue; @@ -221,6 +232,10 @@ var CssAnimator = exports.CssAnimator = function () { if (!_this4._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + _this4._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd); + _this4._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart); + _this4._triggerDOMEvent(_aureliaTemplating.animationEvent.enterTimeout, element); resolve(false); } @@ -303,6 +318,10 @@ var CssAnimator = exports.CssAnimator = function () { if (!_this5._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + _this5._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2); + _this5._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2); + _this5._triggerDOMEvent(_aureliaTemplating.animationEvent.leaveTimeout, element); resolve(false); } @@ -388,6 +407,9 @@ var CssAnimator = exports.CssAnimator = function () { classList.remove(className + '-remove'); classList.remove(className); + _this6._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3); + _this6._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3); + if (suppressEvents !== true) { _this6._triggerDOMEvent(_aureliaTemplating.animationEvent.removeClassTimeout, element); } @@ -456,6 +478,9 @@ var CssAnimator = exports.CssAnimator = function () { classList.remove(className + '-add'); classList.add(className); + _this7._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4); + _this7._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4); + if (suppressEvents !== true) { _this7._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassTimeout, element); } diff --git a/dist/es2015/aurelia-animator-css.js b/dist/es2015/aurelia-animator-css.js index f16aa2b..b051fe5 100644 --- a/dist/es2015/aurelia-animator-css.js +++ b/dist/es2015/aurelia-animator-css.js @@ -18,6 +18,13 @@ export let CssAnimator = class CssAnimator { } } + _removeMultipleEventListener(el, s, fn) { + let evts = s.split(' '); + for (let i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + } + _getElementAnimationDelay(element) { let styl = DOM.getComputedStyle(element); let prop; @@ -97,7 +104,11 @@ export let CssAnimator = class CssAnimator { try { for (let i = 0; i < styleSheets.length; ++i) { - let cssRules = styleSheets[i].cssRules; + let cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) {} if (!cssRules) { continue; @@ -198,6 +209,10 @@ export let CssAnimator = class CssAnimator { if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + this._triggerDOMEvent(animationEvent.enterTimeout, element); resolve(false); } @@ -278,6 +293,10 @@ export let CssAnimator = class CssAnimator { if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + this._triggerDOMEvent(animationEvent.leaveTimeout, element); resolve(false); } @@ -359,6 +378,9 @@ export let CssAnimator = class CssAnimator { classList.remove(className + '-remove'); classList.remove(className); + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + if (suppressEvents !== true) { this._triggerDOMEvent(animationEvent.removeClassTimeout, element); } @@ -423,6 +445,9 @@ export let CssAnimator = class CssAnimator { classList.remove(className + '-add'); classList.add(className); + this._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd); + this._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart); + if (suppressEvents !== true) { this._triggerDOMEvent(animationEvent.addClassTimeout, element); } diff --git a/dist/native-modules/aurelia-animator-css.js b/dist/native-modules/aurelia-animator-css.js index 0dc49c2..90cddd8 100644 --- a/dist/native-modules/aurelia-animator-css.js +++ b/dist/native-modules/aurelia-animator-css.js @@ -22,6 +22,13 @@ export var CssAnimator = function () { } }; + CssAnimator.prototype._removeMultipleEventListener = function _removeMultipleEventListener(el, s, fn) { + var evts = s.split(' '); + for (var i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + }; + CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = DOM.getComputedStyle(element); var prop = void 0; @@ -105,7 +112,11 @@ export var CssAnimator = function () { try { for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; + var cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) {} if (!cssRules) { continue; @@ -212,6 +223,10 @@ export var CssAnimator = function () { if (!_this4._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + _this4._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd); + _this4._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart); + _this4._triggerDOMEvent(animationEvent.enterTimeout, element); resolve(false); } @@ -294,6 +309,10 @@ export var CssAnimator = function () { if (!_this5._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + _this5._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2); + _this5._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2); + _this5._triggerDOMEvent(animationEvent.leaveTimeout, element); resolve(false); } @@ -379,6 +398,9 @@ export var CssAnimator = function () { classList.remove(className + '-remove'); classList.remove(className); + _this6._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3); + _this6._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3); + if (suppressEvents !== true) { _this6._triggerDOMEvent(animationEvent.removeClassTimeout, element); } @@ -447,6 +469,9 @@ export var CssAnimator = function () { classList.remove(className + '-add'); classList.add(className); + _this7._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4); + _this7._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4); + if (suppressEvents !== true) { _this7._triggerDOMEvent(animationEvent.addClassTimeout, element); } diff --git a/dist/system/aurelia-animator-css.js b/dist/system/aurelia-animator-css.js index 0b7b291..2708774 100644 --- a/dist/system/aurelia-animator-css.js +++ b/dist/system/aurelia-animator-css.js @@ -44,6 +44,13 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte } }; + CssAnimator.prototype._removeMultipleEventListener = function _removeMultipleEventListener(el, s, fn) { + var evts = s.split(' '); + for (var i = 0, ii = evts.length; i < ii; ++i) { + el.removeEventListener(evts[i], fn, false); + } + }; + CssAnimator.prototype._getElementAnimationDelay = function _getElementAnimationDelay(element) { var styl = DOM.getComputedStyle(element); var prop = void 0; @@ -127,7 +134,11 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte try { for (var i = 0; i < styleSheets.length; ++i) { - var cssRules = styleSheets[i].cssRules; + var cssRules = null; + + try { + cssRules = styleSheets[i].cssRules; + } catch (e) {} if (!cssRules) { continue; @@ -234,6 +245,10 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte if (!_this4._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-enter-active'); classList.remove('au-enter'); + + _this4._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd); + _this4._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart); + _this4._triggerDOMEvent(animationEvent.enterTimeout, element); resolve(false); } @@ -316,6 +331,10 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte if (!_this5._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) { classList.remove('au-leave-active'); classList.remove('au-leave'); + + _this5._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd2); + _this5._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart2); + _this5._triggerDOMEvent(animationEvent.leaveTimeout, element); resolve(false); } @@ -401,6 +420,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte classList.remove(className + '-remove'); classList.remove(className); + _this6._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd3); + _this6._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3); + if (suppressEvents !== true) { _this6._triggerDOMEvent(animationEvent.removeClassTimeout, element); } @@ -469,6 +491,9 @@ System.register(['aurelia-templating', 'aurelia-pal'], function (_export, _conte classList.remove(className + '-add'); classList.add(className); + _this7._removeMultipleEventListener(element, 'webkitAnimationEnd animationend', _animEnd4); + _this7._removeMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart4); + if (suppressEvents !== true) { _this7._triggerDOMEvent(animationEvent.addClassTimeout, element); } diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md index 07b7bad..198982c 100644 --- a/doc/CHANGELOG.md +++ b/doc/CHANGELOG.md @@ -1,3 +1,14 @@ + +## [1.0.1](https://github.com/aurelia/animator-css/compare/1.0.0...v1.0.1) (2016-09-05) + + +### Bug Fixes + +* **CssAnimator:** clear event handlers when there's no animation ([7683336](https://github.com/aurelia/animator-css/commit/7683336)), closes [#47](https://github.com/aurelia/animator-css/issues/47) +* **cssRules:** add additional try/catch ([4e21ea8](https://github.com/aurelia/animator-css/commit/4e21ea8)), closes [#40](https://github.com/aurelia/animator-css/issues/40) + + + # [1.0.0](https://github.com/aurelia/animator-css/compare/1.0.0-rc.1.0.0...v1.0.0) (2016-07-27) diff --git a/package.json b/package.json index efbfd50..62fe7ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aurelia-animator-css", - "version": "1.0.0", + "version": "1.0.1", "description": "An implementation of the abstract Animator interface from templating which enables css-based animations.", "keywords": [ "aurelia",