feat(all): incorporate pal

Author: EisenbergEffect

config.js

@@ -15,6 +15,8 @@ System.config({
 
   map: {
     "aurelia-metadata": "github:aurelia/[email protected]",
+    "aurelia-pal": "github:aurelia/[email protected]",
+    "aurelia-pal-browser": "github:aurelia/[email protected]",
     "aurelia-templating": "github:aurelia/[email protected]",
     "babel": "npm:[email protected]",
     "babel-runtime": "npm:[email protected]",
@@ -39,6 +41,9 @@ System.config({
     "github:aurelia/[email protected]": {
       "core-js": "npm:[email protected]"
     },
+    "github:aurelia/[email protected]": {
+      "aurelia-pal": "github:aurelia/[email protected]"
+    },
     "github:aurelia/[email protected]": {
       "aurelia-binding": "github:aurelia/[email protected]",
       "aurelia-dependency-injection": "github:aurelia/[email protected]",

package.json

@@ -27,9 +27,11 @@
     },
     "dependencies": {
       "aurelia-metadata": "github:aurelia/metadata@^0.8.0",
+      "aurelia-pal": "github:aurelia/pal@^0.1.10",
       "aurelia-templating": "github:aurelia/templating@^0.15.0"
     },
     "devDependencies": {
+      "aurelia-pal-browser": "github:aurelia/pal-browser@^0.1.13",
       "babel": "npm:babel-core@^5.1.13",
       "babel-runtime": "npm:babel-runtime@^5.1.13",
       "core-js": "npm:core-js@^0.9.4"

src/animator.js

@@ -1,4 +1,5 @@
 import {animationEvent} from 'aurelia-templating';
+import {DOM} from 'aurelia-pal';
 
 interface CssAnimation {
   className: string;
@@ -65,7 +66,7 @@ export class CssAnimator {
    * @returns animation-delay in seconds
    */
   _getElementAnimationDelay(element: HTMLElement): number {
-    let styl = window.getComputedStyle(element);
+    let styl = DOM.getComputedStyle(element);
     let prop;
     let delay;
 
@@ -119,8 +120,8 @@ export class CssAnimator {
    * @param element   the element to be dispatched as event detail
    */
   _triggerDOMEvent(eventType: string, element: HTMLElement): void {
-    let evt = new window.CustomEvent(eventType, {bubbles: true, cancelable: true, detail: element});
-    document.dispatchEvent(evt);
+    let evt = DOM.createCustomEvent(eventType, {bubbles: true, cancelable: true, detail: element});
+    DOM.dispatchEvent(evt);
   }
 
   /* Public API Begin */

test/animate.spec.js

@@ -1,10 +1,12 @@
 import {CssAnimator} from '../src/animator';
 import {animationEvent} from 'aurelia-templating';
+import {initialize} from 'aurelia-pal-browser';
 
 jasmine.getFixtures().fixturesPath = 'base/test/fixtures/';
 
 describe('animator-css', () => {
   var sut;
+  beforeAll(() => initialize());
   beforeEach(() => {
     sut = new CssAnimator();
   });

test/animator.spec.js

@@ -1,11 +1,13 @@
 import {configure} from '../src/index';
 import {CssAnimator} from '../src/animator';
 import {animationEvent} from 'aurelia-templating';
+import {initialize} from 'aurelia-pal-browser';
 
 jasmine.getFixtures().fixturesPath = 'base/test/fixtures/';
 
 describe('animator-css', () => {
   var sut;
+  beforeAll(() => initialize());
   beforeEach( () => {
     sut = new CssAnimator();
   });

test/run-sequence.spec.js

@@ -1,10 +1,13 @@
 import {CssAnimator} from '../src/animator';
 import {animationEvent} from 'aurelia-templating';
+import {initialize} from 'aurelia-pal-browser';
 
 jasmine.getFixtures().fixturesPath = 'base/test/fixtures/';
 
 describe('animator-css', () => {
   var sut;
+
+  beforeAll(() => initialize());
   beforeEach(() => {
     sut = new CssAnimator();
   });