Skip to content

Commit

Permalink
feat(events): trigger animation events
Browse files Browse the repository at this point in the history 
the animator will trigger the predefined animation events from the templating repo.

Fixes issue #13
  • Loading branch information
@zewa666
zewa666 committed Jun 11, 2015
1 parent 1fc8fa2 commit affc371
Show file tree
Hide file tree
Showing 10 changed files with 398 additions and 24 deletions.
46 changes: 43 additions & 3 deletions dist/amd/animator.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
define(['exports'], function (exports) {
define(['exports', 'aurelia-templating/animation-event'], function (exports, _aureliaTemplatingAnimationEvent) {
'use strict';

exports.__esModule = true;
var _classCallCheck = function (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'); } }
exports.__esModule = true;

var CssAnimator = (function () {
function CssAnimator() {
Expand Down Expand Up @@ -72,6 +72,9 @@ define(['exports'], function (exports) {
var animId = element.toString() + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.enterBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

if (_this.useAnimationDoneClasses) {
classList.remove(_this.animationEnteredClass);
classList.remove(_this.animationLeftClass);
Expand All @@ -83,6 +86,9 @@ define(['exports'], function (exports) {
_this.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this.isAnimating = true;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.enterActive, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

evAnimStart.stopPropagation();

_this.addAnimationToStack(animId);
Expand All @@ -103,6 +109,8 @@ define(['exports'], function (exports) {
}

_this.isAnimating = false;
var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.enterDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -116,6 +124,9 @@ define(['exports'], function (exports) {
var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
delay = _this.getElementAnimationDelay(parent) * elemPos;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.staggerNext, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

setTimeout(function () {
classList.add('au-enter-active');
}, delay);
Expand All @@ -128,6 +139,8 @@ define(['exports'], function (exports) {
classList.remove('au-enter-active');
classList.remove('au-enter');

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.enterTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this.getElementAnimationDelay(element) + _this.animationTimeout + delay);
Expand All @@ -141,6 +154,9 @@ define(['exports'], function (exports) {
var animId = element.toString() + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.leaveBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

if (_this2.useAnimationDoneClasses) {
classList.remove(_this2.animationEnteredClass);
classList.remove(_this2.animationLeftClass);
Expand All @@ -152,6 +168,9 @@ define(['exports'], function (exports) {
_this2.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this2.isAnimating = true;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.leaveActive, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

evAnimStart.stopPropagation();

_this2.addAnimationToStack(animId);
Expand All @@ -172,6 +191,8 @@ define(['exports'], function (exports) {
}

_this2.isAnimating = false;
var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.leaveDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -185,6 +206,9 @@ define(['exports'], function (exports) {
var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
delay = _this2.getElementAnimationDelay(parent) * elemPos;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.staggerNext, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

setTimeout(function () {
classList.add('au-leave-active');
}, delay);
Expand All @@ -197,6 +221,8 @@ define(['exports'], function (exports) {
classList.remove('au-leave-active');
classList.remove('au-leave');

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.leaveTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this2.getElementAnimationDelay(element) + _this2.animationTimeout + delay);
Expand All @@ -214,6 +240,9 @@ define(['exports'], function (exports) {
return;
}

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.removeClassBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

var animId = element.toString() + className + Math.random();

classList.remove(className);
Expand All @@ -237,6 +266,8 @@ define(['exports'], function (exports) {
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

_this3.isAnimating = false;
var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.removeClassDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -250,6 +281,8 @@ define(['exports'], function (exports) {
classList.remove(className + '-remove');
classList.remove(className);

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.removeClassTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this3.getElementAnimationDelay(element) + _this3.animationTimeout);
Expand All @@ -263,6 +296,9 @@ define(['exports'], function (exports) {
var animId = element.toString() + className + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.addClassBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

var animStart;
_this4.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this4.isAnimating = true;
Expand All @@ -284,6 +320,8 @@ define(['exports'], function (exports) {
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

_this4.isAnimating = false;
var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.addClassDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -297,6 +335,8 @@ define(['exports'], function (exports) {
classList.remove(className + '-add');
classList.add(className);

var evt = new window.CustomEvent(_aureliaTemplatingAnimationEvent.animationEvent.addClassTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this4.getElementAnimationDelay(element) + _this4.animationTimeout);
Expand Down
44 changes: 43 additions & 1 deletion dist/commonjs/animator.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
'use strict';

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };

exports.__esModule = true;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _animationEvent = require('aurelia-templating/animation-event');

var CssAnimator = (function () {
function CssAnimator() {
Expand Down Expand Up @@ -71,6 +73,9 @@ var CssAnimator = (function () {
var animId = element.toString() + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_animationEvent.animationEvent.enterBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

if (_this.useAnimationDoneClasses) {
classList.remove(_this.animationEnteredClass);
classList.remove(_this.animationLeftClass);
Expand All @@ -82,6 +87,9 @@ var CssAnimator = (function () {
_this.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this.isAnimating = true;

var evt = new window.CustomEvent(_animationEvent.animationEvent.enterActive, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

evAnimStart.stopPropagation();

_this.addAnimationToStack(animId);
Expand All @@ -102,6 +110,8 @@ var CssAnimator = (function () {
}

_this.isAnimating = false;
var evt = new window.CustomEvent(_animationEvent.animationEvent.enterDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -115,6 +125,9 @@ var CssAnimator = (function () {
var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
delay = _this.getElementAnimationDelay(parent) * elemPos;

var evt = new window.CustomEvent(_animationEvent.animationEvent.staggerNext, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

setTimeout(function () {
classList.add('au-enter-active');
}, delay);
Expand All @@ -127,6 +140,8 @@ var CssAnimator = (function () {
classList.remove('au-enter-active');
classList.remove('au-enter');

var evt = new window.CustomEvent(_animationEvent.animationEvent.enterTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this.getElementAnimationDelay(element) + _this.animationTimeout + delay);
Expand All @@ -140,6 +155,9 @@ var CssAnimator = (function () {
var animId = element.toString() + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_animationEvent.animationEvent.leaveBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

if (_this2.useAnimationDoneClasses) {
classList.remove(_this2.animationEnteredClass);
classList.remove(_this2.animationLeftClass);
Expand All @@ -151,6 +169,9 @@ var CssAnimator = (function () {
_this2.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this2.isAnimating = true;

var evt = new window.CustomEvent(_animationEvent.animationEvent.leaveActive, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

evAnimStart.stopPropagation();

_this2.addAnimationToStack(animId);
Expand All @@ -171,6 +192,8 @@ var CssAnimator = (function () {
}

_this2.isAnimating = false;
var evt = new window.CustomEvent(_animationEvent.animationEvent.leaveDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -184,6 +207,9 @@ var CssAnimator = (function () {
var elemPos = Array.prototype.indexOf.call(parent.childNodes, element);
delay = _this2.getElementAnimationDelay(parent) * elemPos;

var evt = new window.CustomEvent(_animationEvent.animationEvent.staggerNext, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

setTimeout(function () {
classList.add('au-leave-active');
}, delay);
Expand All @@ -196,6 +222,8 @@ var CssAnimator = (function () {
classList.remove('au-leave-active');
classList.remove('au-leave');

var evt = new window.CustomEvent(_animationEvent.animationEvent.leaveTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this2.getElementAnimationDelay(element) + _this2.animationTimeout + delay);
Expand All @@ -213,6 +241,9 @@ var CssAnimator = (function () {
return;
}

var evt = new window.CustomEvent(_animationEvent.animationEvent.removeClassBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

var animId = element.toString() + className + Math.random();

classList.remove(className);
Expand All @@ -236,6 +267,8 @@ var CssAnimator = (function () {
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

_this3.isAnimating = false;
var evt = new window.CustomEvent(_animationEvent.animationEvent.removeClassDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -249,6 +282,8 @@ var CssAnimator = (function () {
classList.remove(className + '-remove');
classList.remove(className);

var evt = new window.CustomEvent(_animationEvent.animationEvent.removeClassTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this3.getElementAnimationDelay(element) + _this3.animationTimeout);
Expand All @@ -262,6 +297,9 @@ var CssAnimator = (function () {
var animId = element.toString() + className + Math.random(),
classList = element.classList;

var evt = new window.CustomEvent(_animationEvent.animationEvent.addClassBegin, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);

var animStart;
_this4.addMultipleEventListener(element, 'webkitAnimationStart animationstart', animStart = function (evAnimStart) {
_this4.isAnimating = true;
Expand All @@ -283,6 +321,8 @@ var CssAnimator = (function () {
evAnimEnd.target.removeEventListener(evAnimEnd.type, animEnd);

_this4.isAnimating = false;
var evt = new window.CustomEvent(_animationEvent.animationEvent.addClassDone, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(true);
}, false);

Expand All @@ -296,6 +336,8 @@ var CssAnimator = (function () {
classList.remove(className + '-add');
classList.add(className);

var evt = new window.CustomEvent(_animationEvent.animationEvent.addClassTimeout, { bubbles: true, cancelable: true, detail: element });
document.dispatchEvent(evt);
resolve(false);
}
}, _this4.getElementAnimationDelay(element) + _this4.animationTimeout);
Expand Down
10 changes: 5 additions & 5 deletions dist/commonjs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
exports.__esModule = true;
exports.configure = configure;

var _aureliaTemplating = require('aurelia-templating');
var _Animator = require('aurelia-templating');

var _animator = require('./animator');
var _CssAnimator = require('./animator');

exports.CssAnimator = _animator.CssAnimator;
exports.CssAnimator = _CssAnimator.CssAnimator;

function configure(aurelia, cb) {
var animator = aurelia.container.get(_animator.CssAnimator);
_aureliaTemplating.Animator.configureDefault(aurelia.container, animator);
var animator = aurelia.container.get(_CssAnimator.CssAnimator);
_Animator.Animator.configureDefault(aurelia.container, animator);
if (cb !== undefined && typeof cb === 'function') {
cb(animator);
}
Expand Down
Loading

0 comments on commit affc371

Please sign in to comment.