@endorphinjs/template-runtime - npm Package Compare versions

Comparing version 0.4.3 to 0.4.4

dist/animation.d.ts

@@ -5,3 +5,3 @@ export declare type EasingFunction = (t: number, b: number, c: number, d: number) => number;
 export declare type TweenFactory = (elem: HTMLElement, options?: TweenOptions) => TweenOptions;
-declare type Callback = () => void;
+declare type Callback = (cancel?: boolean) => void;
 export interface TweenOptions {
@@ -42,2 +42,3 @@ /** Animation duration, ms */
 export declare function composeTween(tween1?: TweenOptions, tween2?: TweenOptions): TweenOptions;
+export declare function stopAnimation(elem: HTMLElement, cancel?: boolean): void;
 export {};

dist/runtime.cjs.js

@@ -205,2 +205,11 @@ 'use strict';
 }
+function safeCall(fn, arg1, arg2) {
+    try {
+        return fn && fn(arg1, arg2);
+    }
+    catch (err) {
+        // tslint:disable-next-line:no-console
+        console.error(err);
+    }
+}
 function captureError(host, fn, arg1, arg2) {
@@ -1712,2 +1721,4 @@ try {
 };
+// If `true` then no animations will be invoked
+let blocked = false;
 /**
@@ -1717,6 +1728,3 @@ * Starts animation on given element
 function animate(elem, animation, callback) {
-    // Stop previous animation, if any
-    stopAnimation(elem);
-    if (isAttached(elem) && animation) {
-        // We should run animation only if element is attached to DOM
+    if (!blocked && animation) {
         if (typeof animation === 'function') {
@@ -1730,2 +1738,4 @@ tweenAnimate(elem, animation, callback);
     else if (callback) {
+        // Stop previous animation, if any
+        stopAnimation(elem, true);
         callback();
@@ -1738,8 +1748,10 @@ }
 function cssAnimate(elem, animation, callback) {
+    // Stop previous animation, if any
+    stopAnimation(elem, true);
     const prevAnimation = elem.style.animation;
-    elem[animatingKey] = () => {
+    elem[animatingKey] = (cancel) => {
         elem.removeEventListener('animationend', handler);
         elem.removeEventListener('animationcancel', handler);
         elem.style.animation = prevAnimation;
-        callback && callback();
+        !cancel && finalizeAnimation(callback);
     };
@@ -1755,2 +1767,5 @@ const handler = (evt) => evt.target === elem && stopAnimation(elem);
 function tweenAnimate(elem, animation, callback) {
+    // Stop previous animation, if any
+    const prevAnim = findTween(elem);
+    stopAnimation(elem, true);
     let options = animation(elem);
@@ -1763,3 +1778,6 @@ if (options) {
         const now = performance.now();
-        const start = now + options.delay;
+        const offset = prevAnim
+            ? 1 - (now - prevAnim.start) / (prevAnim.end - prevAnim.start)
+            : 0;
+        const start = now + options.delay - (offset * options.duration);
         const anim = {
@@ -1773,6 +1791,6 @@ elem,
         pool.push(anim);
-        elem[animatingKey] = () => {
+        elem[animatingKey] = (cancel) => {
             pool.splice(pool.indexOf(anim), 1);
             options.complete && options.complete(elem, options);
-            callback && callback();
+            !cancel && finalizeAnimation(callback);
         };
@@ -1826,2 +1844,13 @@ if (pool.length === 1) {
 }
+/**
+ * Finalizes current animation: invokes given callback and blocks all nested
+ * animations
+ */
+function finalizeAnimation(callback) {
+    if (callback) {
+        blocked = true;
+        safeCall(callback);
+        blocked = false;
+    }
+}
 function tweenLoop(now) {
@@ -1848,10 +1877,21 @@ for (let i = pool.length - 1, anim; i >= 0; i--) {
 }
-function stopAnimation(elem) {
-    const callback = elem[animatingKey];
+function stopAnimation(elem, cancel) {
+    const callback = elem && elem[animatingKey];
     if (callback) {
         elem[animatingKey] = null;
-        callback();
+        callback(cancel);
     }
 }
 /**
+ * Finds existing tween animation for given element, if any
+ */
+function findTween(elem) {
+    for (let i = 0; i < pool.length; i++) {
+        if (pool[i].elem === elem) {
+            return pool[i];
+        }
+    }
+    return null;
+}
+/**
  * Concatenates two strings with optional separator
@@ -1865,9 +1905,2 @@ * @param {string} name
 }
-/**
- * Check if given DOM element is still attached to document
- */
-function isAttached(elem) {
-    const root = elem.ownerDocument && elem.ownerDocument.documentElement;
-    return root ? root.contains(elem) : false;
-}
 
@@ -2018,2 +2051,3 @@ /**
 exports.setVar = setVar;
+exports.stopAnimation = stopAnimation;
 exports.subscribeStore = subscribeStore;
@@ -2020,0 +2054,0 @@ exports.text = text;

dist/runtime.es.js

@@ -201,2 +201,11 @@ /**
 }
+function safeCall(fn, arg1, arg2) {
+    try {
+        return fn && fn(arg1, arg2);
+    }
+    catch (err) {
+        // tslint:disable-next-line:no-console
+        console.error(err);
+    }
+}
 function captureError(host, fn, arg1, arg2) {
@@ -1708,2 +1717,4 @@ try {
 };
+// If `true` then no animations will be invoked
+let blocked = false;
 /**
@@ -1713,6 +1724,3 @@ * Starts animation on given element
 function animate(elem, animation, callback) {
-    // Stop previous animation, if any
-    stopAnimation(elem);
-    if (isAttached(elem) && animation) {
-        // We should run animation only if element is attached to DOM
+    if (!blocked && animation) {
         if (typeof animation === 'function') {
@@ -1726,2 +1734,4 @@ tweenAnimate(elem, animation, callback);
     else if (callback) {
+        // Stop previous animation, if any
+        stopAnimation(elem, true);
         callback();
@@ -1734,8 +1744,10 @@ }
 function cssAnimate(elem, animation, callback) {
+    // Stop previous animation, if any
+    stopAnimation(elem, true);
     const prevAnimation = elem.style.animation;
-    elem[animatingKey] = () => {
+    elem[animatingKey] = (cancel) => {
         elem.removeEventListener('animationend', handler);
         elem.removeEventListener('animationcancel', handler);
         elem.style.animation = prevAnimation;
-        callback && callback();
+        !cancel && finalizeAnimation(callback);
     };
@@ -1751,2 +1763,5 @@ const handler = (evt) => evt.target === elem && stopAnimation(elem);
 function tweenAnimate(elem, animation, callback) {
+    // Stop previous animation, if any
+    const prevAnim = findTween(elem);
+    stopAnimation(elem, true);
     let options = animation(elem);
@@ -1759,3 +1774,6 @@ if (options) {
         const now = performance.now();
-        const start = now + options.delay;
+        const offset = prevAnim
+            ? 1 - (now - prevAnim.start) / (prevAnim.end - prevAnim.start)
+            : 0;
+        const start = now + options.delay - (offset * options.duration);
         const anim = {
@@ -1769,6 +1787,6 @@ elem,
         pool.push(anim);
-        elem[animatingKey] = () => {
+        elem[animatingKey] = (cancel) => {
             pool.splice(pool.indexOf(anim), 1);
             options.complete && options.complete(elem, options);
-            callback && callback();
+            !cancel && finalizeAnimation(callback);
         };
@@ -1822,2 +1840,13 @@ if (pool.length === 1) {
 }
+/**
+ * Finalizes current animation: invokes given callback and blocks all nested
+ * animations
+ */
+function finalizeAnimation(callback) {
+    if (callback) {
+        blocked = true;
+        safeCall(callback);
+        blocked = false;
+    }
+}
 function tweenLoop(now) {
@@ -1844,10 +1873,21 @@ for (let i = pool.length - 1, anim; i >= 0; i--) {
 }
-function stopAnimation(elem) {
-    const callback = elem[animatingKey];
+function stopAnimation(elem, cancel) {
+    const callback = elem && elem[animatingKey];
     if (callback) {
         elem[animatingKey] = null;
-        callback();
+        callback(cancel);
     }
 }
 /**
+ * Finds existing tween animation for given element, if any
+ */
+function findTween(elem) {
+    for (let i = 0; i < pool.length; i++) {
+        if (pool[i].elem === elem) {
+            return pool[i];
+        }
+    }
+    return null;
+}
+/**
  * Concatenates two strings with optional separator
@@ -1861,9 +1901,2 @@ * @param {string} name
 }
-/**
- * Check if given DOM element is still attached to document
- */
-function isAttached(elem) {
-    const root = elem.ownerDocument && elem.ownerDocument.documentElement;
-    return root ? root.contains(elem) : false;
-}
 
@@ -1955,3 +1988,3 @@ /**
 export default endorphin;
-export { Store, addClass, addEvent, addStaticEvent, animate, assign, call, composeTween, createAnimation, createComponent, createInjector, createScope, createSlot, cssAnimate, disposeBlock, domInsert, domRemove, elem, elemNS, elemNSWithText, elemWithText, emptyBlockContent, enterScope, exitScope, filter, finalizeAttributes, finalizeEvents, finalizeRefs, find, get, getProp, getScope, getSlotContext, getState, getVar, injectBlock, insert, isolateElement, mountBlock, mountComponent, mountInnerHTML, mountIterator, mountKeyIterator, mountPartial, mountSlot, move, normalizeClassName, notifySlotUpdate, prepareScope, removeStaticEvent, renderComponent, safeEventListener, scheduleRender, setAttribute, setAttributeNS, setRef, setScope, setStaticRef, setVar, subscribeStore, text, tweenAnimate, unmountBlock, unmountComponent, unmountInnerHTML, unmountIterator, unmountKeyIterator, unmountPartial, unmountSlot, updateAttribute, updateBlock, updateComponent, updateDefaultSlot, updateIncomingSlot, updateInnerHTML, updateIterator, updateKeyIterator, updatePartial, updateProps, updateText };
+export { Store, addClass, addEvent, addStaticEvent, animate, assign, call, composeTween, createAnimation, createComponent, createInjector, createScope, createSlot, cssAnimate, disposeBlock, domInsert, domRemove, elem, elemNS, elemNSWithText, elemWithText, emptyBlockContent, enterScope, exitScope, filter, finalizeAttributes, finalizeEvents, finalizeRefs, find, get, getProp, getScope, getSlotContext, getState, getVar, injectBlock, insert, isolateElement, mountBlock, mountComponent, mountInnerHTML, mountIterator, mountKeyIterator, mountPartial, mountSlot, move, normalizeClassName, notifySlotUpdate, prepareScope, removeStaticEvent, renderComponent, safeEventListener, scheduleRender, setAttribute, setAttributeNS, setRef, setScope, setStaticRef, setVar, stopAnimation, subscribeStore, text, tweenAnimate, unmountBlock, unmountComponent, unmountInnerHTML, unmountIterator, unmountKeyIterator, unmountPartial, unmountSlot, updateAttribute, updateBlock, updateComponent, updateDefaultSlot, updateIncomingSlot, updateInnerHTML, updateIterator, updateKeyIterator, updatePartial, updateProps, updateText };
 //# sourceMappingURL=runtime.es.js.map

package.json

 {
   "name": "@endorphinjs/template-runtime",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "EndorphinJS template runtime, embedded with template bundles",
@@ -12,2 +12,3 @@ "main": "./dist/runtime.cjs.js",
     "build": "rollup -c && npm run types",
+    "watch": "rollup -wc",
     "types": "tsc -p ./tsconfig.declaration.json",
@@ -26,3 +27,3 @@ "clean": "rm -rf ./dist",
   "devDependencies": {
-    "@endorphinjs/template-compiler": "^0.4.3",
+    "@endorphinjs/template-compiler": "^0.4.4",
     "@types/mocha": "^5.2.6",
@@ -33,5 +34,5 @@ "@types/node": "^11.13.10",
     "rollup-plugin-typescript": "^1.0.1",
-    "ts-node": "^8.1.0",
-    "tslint": "^5.16.0",
-    "typescript": "^3.4.5"
+    "ts-node": "^8.3.0",
+    "tslint": "^5.17.0",
+    "typescript": "^3.5.2"
   },
@@ -54,3 +55,3 @@ "directories": {
   },
-  "gitHead": "e3a1e0ae0c38559e4f96c76c54a752339324a3fe"
+  "gitHead": "cb34340cbd109e562b20567589b550a5d079c0d9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

413998

increased by1.24%

Lines of code

4850

increased by1.42%

No dependency changes