Skip to content

Commit

Permalink
chore(all): prepare release 1.0.4
Browse files Browse the repository at this point in the history
  • Loading branch information
EisenbergEffect committed Oct 23, 2017
1 parent 17d4996 commit 5d66a74
Show file tree
Hide file tree
Showing 9 changed files with 160 additions and 26 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "aurelia-animator-css",
"version": "1.0.3",
"version": "1.0.4",
"description": "An implementation of the abstract Animator interface from templating which enables css-based animations.",
"keywords": [
"aurelia",
Expand Down
20 changes: 20 additions & 0 deletions dist/amd/aurelia-animator-css.js
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur
_this5._triggerDOMEvent(_aureliaTemplating.animationEvent.removeClassBegin, element);
}

if (classList.contains(className + '-add')) {
classList.remove(className + '-add');
classList.add(className);
}

classList.remove(className);
var prevAnimationNames = _this5._getElementAnimationNames(element);

Expand Down Expand Up @@ -319,8 +324,14 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur
return;
}

if (!element.classList.contains(className + '-remove')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.remove(className);

classList.remove(className + '-remove');

evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd2);
Expand Down Expand Up @@ -365,6 +376,11 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur
_this6._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassBegin, element);
}

if (classList.contains(className + '-remove')) {
classList.remove(className + '-remove');
classList.remove(className);
}

var _animStart3 = void 0;
var animHasStarted = false;
_this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3 = function animStart(evAnimStart) {
Expand Down Expand Up @@ -392,6 +408,10 @@ define(['exports', 'aurelia-templating', 'aurelia-pal'], function (exports, _aur
return;
}

if (!element.classList.contains(className + '-add')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.add(className);
Expand Down
74 changes: 50 additions & 24 deletions dist/aurelia-animator-css.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class CssAnimator {
* @param s collection of events to bind listeners to
* @param fn callback that gets executed
*/
_addMultipleEventListener(el: Element, s: string, fn: Function) : void {
_addMultipleEventListener(el: Element, 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);
Expand All @@ -44,7 +44,7 @@ export class CssAnimator {
* @param s collection of events to remove
* @param fn callback to remove
*/
_removeMultipleEventListener(el: Element, s: string, fn: Function) : void {
_removeMultipleEventListener(el: Element, 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);
Expand Down Expand Up @@ -136,7 +136,7 @@ export class CssAnimator {
* @param element the element to be dispatched as event detail
*/
_triggerDOMEvent(eventType: string, element: Element): void {
let evt = DOM.createCustomEvent(eventType, {bubbles: true, cancelable: true, detail: element});
let evt = DOM.createCustomEvent(eventType, { bubbles: true, cancelable: true, detail: element });
DOM.dispatchEvent(evt);
}

Expand All @@ -153,13 +153,13 @@ export class CssAnimator {
return false;
}

if (! this.verifyKeyframesExist) {
if (!this.verifyKeyframesExist) {
return true;
}

const keyframesRuleType = window.CSSRule.KEYFRAMES_RULE ||
window.CSSRule.MOZ_KEYFRAMES_RULE ||
window.CSSRule.WEBKIT_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.
Expand Down Expand Up @@ -206,7 +206,7 @@ export class CssAnimator {
*/
animate(element: Element | Array<Element>, className: string): Promise<boolean> {
if (Array.isArray(element)) {
return Promise.all(element.map( (el) => {
return Promise.all(element.map((el) => {
return this._performSingleAnimate(el, className);
}));
}
Expand All @@ -224,7 +224,7 @@ export class CssAnimator {

return animations.reduce((p, anim) => {
return p.then(() => { return this.animate(anim.element, anim.className); });
}, Promise.resolve(true) ).then(() => {
}, Promise.resolve(true)).then(() => {
this._triggerDOMEvent(animationEvent.sequenceDone, null);
});
}
Expand Down Expand Up @@ -294,8 +294,8 @@ export class CssAnimator {

// Step 3.1.3 in case animation done animations are active, add the defined done class to the element
if (this.useAnimationDoneClasses &&
doneClass !== undefined &&
doneClass !== null) {
doneClass !== undefined &&
doneClass !== null) {
classList.add(doneClass);
}

Expand All @@ -312,7 +312,7 @@ export class CssAnimator {
const cleanupAnimation = () => {
// Step 5: if no animations scheduled cleanup animation classes
const animationNames = this._getElementAnimationNames(element);
if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
classList.remove(auClassActive);
classList.remove(auClass);

Expand All @@ -326,7 +326,7 @@ export class CssAnimator {
};

if (parent !== null && parent !== undefined &&
(parent.classList.contains('au-stagger') || parent.classList.contains('au-stagger-' + direction))) {
(parent.classList.contains('au-stagger') || parent.classList.contains('au-stagger-' + direction))) {
const offset = +(parent.getAttribute(attrib) || 0);
parent.setAttribute(attrib, offset + 1);
const delay = this._getElementAnimationDelay(parent) * offset;
Expand Down Expand Up @@ -369,9 +369,10 @@ export class CssAnimator {
* @returns Resolved when the animation is done
*/
removeClass(element: Element, className: string, suppressEvents: boolean = false): Promise<boolean> {
return new Promise( (resolve, reject) => {
return new Promise((resolve, reject) => {
let classList = element.classList;

// if neither the class exists on the element, nor is not currently being added, resolve immediately.
if (!classList.contains(className) && !classList.contains(className + '-add')) {
resolve(false);
return;
Expand All @@ -381,6 +382,12 @@ export class CssAnimator {
this._triggerDOMEvent(animationEvent.removeClassBegin, element);
}

// Step 1: If the 'addClass' animation is in progress, finish it prematurely.
if (classList.contains(className + '-add')) {
classList.remove(className + '-add');
classList.add(className);
}

// Step 2: Remove final className, so animation can start
classList.remove(className);
let prevAnimationNames = this._getElementAnimationNames(element);
Expand Down Expand Up @@ -408,20 +415,28 @@ export class CssAnimator {
// Step 3.1: Wait for animation to finish
let animEnd;
this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => {
if (! animHasStarted) {
if (!animHasStarted) {
return;
}
if (evAnimEnd.target !== element) {
return;
}

// Step 3.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
// Step 3.1.0: Do nothing if a new addClass animation has started and ended the removeClass animation prematurely
if (!element.classList.contains(className + '-remove')) {
resolve(true);
}

// Step 3.1.1: Stop event propagation, bubbling will otherwise prevent parent animation
evAnimEnd.stopPropagation();

// Step 3.1.1 Remove -remove suffixed class
// Step 3.1.2: Remove the class
classList.remove(className);

// Step 3.1.3: Remove -remove suffixed class
classList.remove(className + '-remove');

// Step 3.1.2 remove animationend listener
// Step 3.1.4: remove animationend listener
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

this.isAnimating = false;
Expand All @@ -439,7 +454,7 @@ export class CssAnimator {

// Step 5: if no animations happened cleanup animation classes and remove final class
let animationNames = this._getElementAnimationNames(element);
if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
classList.remove(className + '-remove');
classList.remove(className);

Expand Down Expand Up @@ -470,6 +485,12 @@ export class CssAnimator {
this._triggerDOMEvent(animationEvent.addClassBegin, element);
}

// Step 1: If the 'removeClass' animation is in progress, finish it prematurely.
if (classList.contains(className + '-remove')) {
classList.remove(className + '-remove');
classList.remove(className);
}

// Step 2: setup event to check whether animations started
let animStart;
let animHasStarted = false;
Expand All @@ -493,23 +514,28 @@ export class CssAnimator {
// Step 2.1: Wait for animation to finish
let animEnd;
this._addMultipleEventListener(element, 'webkitAnimationEnd animationend', animEnd = (evAnimEnd) => {
if (! animHasStarted) {
if (!animHasStarted) {
return;
}
if (evAnimEnd.target !== element) {
return;
}

// Step 2.1.0: Stop event propagation, bubbling will otherwise prevent parent animation
// Step 2.1.0: Do nothing if a new removeClass animation has started and ended the addClass animation prematurely
if (!element.classList.contains(className + '-add')) {
resolve(true);
}

// Step 2.1.1: Stop event propagation, bubbling will otherwise prevent parent animation
evAnimEnd.stopPropagation();

// Step 2.1.1: Add final className
// Step 2.1.2: Add final className
classList.add(className);

// Step 2.1.2 Remove -add suffixed class
// Step 2.1.3: Remove -add suffixed class
classList.remove(className + '-add');

// Step 2.1.3 remove animationend listener
// Step 2.1.4: remove animationend listener
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

this.isAnimating = false;
Expand All @@ -528,7 +554,7 @@ export class CssAnimator {

// Step 4: if no animations happened cleanup animation classes and add final class
let animationNames = this._getElementAnimationNames(element);
if (! this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
if (!this._animationChangeWithValidKeyframe(animationNames, prevAnimationNames)) {
classList.remove(className + '-add');
classList.add(className);

Expand Down
20 changes: 20 additions & 0 deletions dist/commonjs/aurelia-animator-css.js
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,11 @@ var CssAnimator = exports.CssAnimator = function () {
_this5._triggerDOMEvent(_aureliaTemplating.animationEvent.removeClassBegin, element);
}

if (classList.contains(className + '-add')) {
classList.remove(className + '-add');
classList.add(className);
}

classList.remove(className);
var prevAnimationNames = _this5._getElementAnimationNames(element);

Expand Down Expand Up @@ -322,8 +327,14 @@ var CssAnimator = exports.CssAnimator = function () {
return;
}

if (!element.classList.contains(className + '-remove')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.remove(className);

classList.remove(className + '-remove');

evAnimEnd.target.removeEventListener(evAnimEnd.type, _animEnd2);
Expand Down Expand Up @@ -368,6 +379,11 @@ var CssAnimator = exports.CssAnimator = function () {
_this6._triggerDOMEvent(_aureliaTemplating.animationEvent.addClassBegin, element);
}

if (classList.contains(className + '-remove')) {
classList.remove(className + '-remove');
classList.remove(className);
}

var _animStart3 = void 0;
var animHasStarted = false;
_this6._addMultipleEventListener(element, 'webkitAnimationStart animationstart', _animStart3 = function animStart(evAnimStart) {
Expand Down Expand Up @@ -395,6 +411,10 @@ var CssAnimator = exports.CssAnimator = function () {
return;
}

if (!element.classList.contains(className + '-add')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.add(className);
Expand Down
20 changes: 20 additions & 0 deletions dist/es2015/aurelia-animator-css.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,11 @@ export let CssAnimator = class CssAnimator {
this._triggerDOMEvent(animationEvent.removeClassBegin, element);
}

if (classList.contains(className + '-add')) {
classList.remove(className + '-add');
classList.add(className);
}

classList.remove(className);
let prevAnimationNames = this._getElementAnimationNames(element);

Expand Down Expand Up @@ -295,8 +300,14 @@ export let CssAnimator = class CssAnimator {
return;
}

if (!element.classList.contains(className + '-remove')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.remove(className);

classList.remove(className + '-remove');

evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);
Expand Down Expand Up @@ -337,6 +348,11 @@ export let CssAnimator = class CssAnimator {
this._triggerDOMEvent(animationEvent.addClassBegin, element);
}

if (classList.contains(className + '-remove')) {
classList.remove(className + '-remove');
classList.remove(className);
}

let animStart;
let animHasStarted = false;
this._addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = evAnimStart => {
Expand Down Expand Up @@ -364,6 +380,10 @@ export let CssAnimator = class CssAnimator {
return;
}

if (!element.classList.contains(className + '-add')) {
resolve(true);
}

evAnimEnd.stopPropagation();

classList.add(className);
Expand Down
Loading

0 comments on commit 5d66a74

Please sign in to comment.