formatting, structuring, plugin system

.editorconfig

@@ -2,7 +2,10 @@
 indent_style = space
 indent_size = 4
 trim_trailing_whitespace = true
+spaces_around_operators = true
 insert_final_newline = true
+quote_type = single
+indent_brace_style = K&R
 
 [*.md]
 trim_trailing_whitespace = true

package.json

@@ -22,7 +22,7 @@
     "karma-spec-reporter": "0.0.31",
     "karma-typescript": "^3.0.4",
     "mocha": "^3.4.2",
-    "prettier": "^1.4.4",
+    "prettier": "^1.5.2",
     "rollup": "^0.42.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-typescript": "^0.8.1",
@@ -52,7 +52,7 @@
     "compress": "npm run compress:umd",
     "compress:umd": "uglifyjs --c --lift-vars --m --screw-ie8 --o dist/just-animate-core.min.js dist/just-animate-core.js",
     "clean": "node_modules/.bin/del-cli -f dist lib lib.es2015 types",
-    "format": "tsfmt -r src/**/*.ts",
+    "format": "prettier --single-quote --no-semi --list-different --write \"src/**/*.ts\"",
     "preversion": "npm run rebuild",
     "postversion": "git push --follow-tags && npm publish",
     "rebuild": "npm run clean && npm run build && npm run compress",

src/core/animator.ts

@@ -1,64 +0,0 @@
-import * as types from '../types';
-import { RUNNING, CANCEL, PAUSE, FINISH, SEEK, UPDATE, inRange, minMax, _, lazy } from '../utils';
-
-const framePadding = 0
-
-export interface IAnimationController {
-    (type: string, time: number, playbackRate: number): void
-}
-
-export function createWebAnimation({ keyframes, from, to, target }: types.Effect): IAnimationController {
-    const getAnimator = lazy(() => {
-        const a = (target as any).animate(keyframes, {
-            duration: to - from,
-            fill: 'both'
-        })
-        a.pause()
-        return a
-    })
-
-    return (type: string, time: number, playbackRate: number) => {
-        const animator = getAnimator();
-
-        if (animator.playbackRate !== playbackRate) {
-            // set playbackRate direction/speed            
-            animator.playbackRate = playbackRate
-        }
-
-        if (type === CANCEL) {
-            animator.cancel()
-            return
-        }
-        if (type === FINISH) {
-            // without pause() WAAPI appears to play the animation again on seek
-            animator.finish()
-            animator.pause()
-            return
-        }
-
-        if (type === PAUSE) {
-            animator.pause()
-        }
-
-        const isForwards = (playbackRate || 0) >= 0
-        const duration = to - from
-        const currentTime = (time !== _ ? time : isForwards ? 0 : duration) - from
-        if (type === PAUSE || type === SEEK) {
-            // sync if paused or seeking         
-            animator.currentTime = minMax(currentTime, 0, duration)
-        }
-
-        if (type === UPDATE && animator.playState !== RUNNING) {
-            const sign = isForwards ? 1 : -1
-            const isActive = inRange(currentTime + (framePadding * sign), 0, duration)
-
-            if (isActive) {
-                // sync time
-                animator.currentTime = minMax(currentTime, 0, duration)
-
-                // start if ticking and animator is not running
-                animator.play()
-            }
-        }
-    }
-}

src/core/effects.ts

@@ -0,0 +1,125 @@
+import * as types from '../types'
+import { isFunction, convertToMs, isDefined, indexOf } from '../utils'
+import { resolve } from '../transformers'
+import { getPlugins } from './plugins'
+
+export function toEffects(
+  targets: types.TargetConfiguration[]
+): types.Effect[] {
+  const result: types.Effect[] = []
+
+  for (var i = 0, ilen = targets.length; i < ilen; i++) {
+    const targetConfig = targets[i]
+    const { from, to, duration, keyframes, target } = targetConfig
+
+    // construct property animation options
+    var effects: types.PropertyEffects = {}
+    for (var j = 0, jlen = keyframes.length; j < jlen; j++) {
+      const p = keyframes[j]
+      const propName = p.prop
+      const offset = (p.time - from) / (duration || 1)
+      const value = isFunction(p.value)
+        ? (p.value as Function)(target, p.index)
+        : p.value as string | number
+
+      // get or create property
+      const effect = effects[propName] || (effects[propName] = [])
+      effect.push({ offset, value })
+    }
+
+    // process handlers
+    var plugins = getPlugins()
+    for (var q = 0, qlen = plugins.length; q < qlen; q++) {
+      var plugin = plugins[q]
+      if (plugin.transform) {
+        plugin.transform(targetConfig, effects)
+      }
+    }
+
+    for (var propName in effects) {
+      var effect = effects[propName]
+      if (!effect) {
+        continue
+      }
+
+      // remap the keyframes field to remove multiple values
+      var effect2 = {
+        target,
+        from,
+        to,
+        keyframes: effect.map(({ offset, value }) => ({
+          offset,
+          [propName]: value
+        }))
+      }
+
+      // add to list of Effects
+      result.push(effect2)
+    }
+  }
+  return result
+}
+
+export function addKeyframes(
+  target: types.TargetConfiguration,
+  index: number,
+  options: types.AnimationOptions
+) {
+  const { css } = options
+  const staggerMs = convertToMs(
+    resolve(options.stagger, target, index, true) || 0
+  ) as number
+  const delayMs = convertToMs(
+    resolve(options.delay, target, index) || 0
+  ) as number
+  const endDelayMs = convertToMs(
+    resolve(options.endDelay, target, index) || 0
+  ) as number
+
+  // todo: incorporate WAAPI delay/endDelay
+  const from = staggerMs + delayMs + options.from
+  const to = staggerMs + delayMs + options.to + endDelayMs
+  const duration = to - from
+
+  for (var i = 0, ilen = css.length; i < ilen; i++) {
+    var keyframe = css[i]
+    var time = Math.floor(duration * keyframe.offset + from)
+    addKeyframe(target, time, index, keyframe)
+  }
+}
+
+function addKeyframe(
+  target: types.TargetConfiguration,
+  time: number,
+  index: number,
+  keyframe: types.KeyframeOptions
+) {
+  var { keyframes } = target
+  for (var name in keyframe) {
+    if (name === 'offset') {
+      continue
+    }
+
+    var value = keyframe[name] as string | number
+    if (!isDefined(value)) {
+      continue
+    }
+
+    var indexOfFrame = indexOf(
+      keyframes,
+      k => k.prop === name && k.time === time
+    )
+    if (indexOfFrame !== -1) {
+      keyframes[indexOfFrame].value = value
+      continue
+    }
+
+    keyframes.push({
+      index,
+      prop: name,
+      time,
+      order: 0, // fixme
+      value
+    })
+  }
+}

src/core/index.ts

@@ -1,5 +1,5 @@
-export * from './animator'
-export * from './keyframes'
+export * from './effects'
+export * from './plugins'
 export * from './split-text'
 export * from './timeline'
 export * from './timeloop'

src/core/plugins.ts

@@ -0,0 +1,6 @@
+import * as types from '../types'
+
+const plugins: types.Plugin[] = []
+
+export const getPlugins = () => plugins
+export const addPlugin = (plugin: types.Plugin) => plugins.push(plugin)