dom-flip - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/dom-flip.d.ts

@@ -30,11 +30,2 @@ /**
     /**
-     * The class name to apply when the elements are moving. This
-     * only need be changed in case of conflicts.
-     *
-     * Defaults to `transitioning`.
-     *
-     * @type String
-     */
-    className: string;
-    /**
      * The CSS animation delay in milliseconds.
@@ -64,2 +55,11 @@ *
     /**
+     * The class name to apply when the elements are moving. This
+     * only need be changed in case of conflicts.
+     *
+     * Defaults to `transitioning`.
+     *
+     * @type String
+     */
+    transitionClassName: string;
+    /**
      * Whether a dom change event handler is enqueued for the current animation frame.
@@ -66,0 +66,0 @@ */

dist/dom-flip.js

@@ -54,11 +54,2 @@ /**
         /**
-         * The class name to apply when the elements are moving. This
-         * only need be changed in case of conflicts.
-         *
-         * Defaults to `transitioning`.
-         *
-         * @type String
-         */
-        this.className = 'transitioning';
-        /**
          * The CSS animation delay in milliseconds.
@@ -88,2 +79,11 @@ *
         /**
+         * The class name to apply when the elements are moving. This
+         * only need be changed in case of conflicts.
+         *
+         * Defaults to `transitioning`.
+         *
+         * @type String
+         */
+        this.transitionClassName = 'transitioning';
+        /**
          * Whether a dom change event handler is enqueued for the current animation frame.
@@ -102,8 +102,8 @@ */
         return [
-            'active',
-            'attr-name',
-            'class-name',
-            'delay-ms',
-            'duration-ms',
-            'easing',
+            "active" /* Active */,
+            "attr-name" /* AttrName */,
+            "delay-ms" /* DelayMs */,
+            "duration-ms" /* DurationMs */,
+            "easing" /* Easing */,
+            "transition-class-name" /* TransitionClassName */,
         ];
@@ -118,26 +118,26 @@ }
         switch (name) {
-            case 'active':
+            case "active" /* Active */:
                 this.active = !!newValue;
                 this._updateListeners();
                 break;
-            case 'attr-name':
+            case "attr-name" /* AttrName */:
                 this.attrName = newValue;
                 this._updateListeners();
                 break;
-            case 'class-name':
-                this.className = newValue;
-                this._render();
-                break;
-            case 'delay-ms':
+            case "delay-ms" /* DelayMs */:
                 this.delayMs = Number(newValue);
                 this._render();
                 break;
-            case 'duration-ms':
+            case "duration-ms" /* DurationMs */:
                 this.durationMs = Number(newValue);
                 this._render();
                 break;
-            case 'easing':
+            case "easing" /* Easing */:
                 this.easing = newValue;
                 this._render();
                 break;
+            case "transition-class-name" /* TransitionClassName */:
+                this.transitionClassName = newValue;
+                this._render();
+                break;
         }
@@ -165,10 +165,10 @@ }
             }
-            el.classList.remove(this.className);
+            el.classList.remove(this.transitionClassName);
             el.style.opacity = String(old.opacity);
             el.style.transform = generateTransformString(dL, dT, old.scaleX, old.scaleY);
             requestAnimationFrame(() => {
-                el.classList.add(this.className);
+                el.classList.add(this.transitionClassName);
                 el.style.opacity = String(n.opacity);
                 el.style.transform = generateTransformString(0, 0, n.scaleX, n.scaleY);
-                setTimeout(() => el.classList.remove(this.className), this.durationMs);
+                setTimeout(() => el.classList.remove(this.transitionClassName), this.durationMs);
             });
@@ -261,3 +261,3 @@ }
             <style>
-                ::slotted(.${this.className}) {
+                ::slotted(.${this.transitionClassName}) {
                     transition: transform ${this.durationMs}ms ${this.easing} ${this.delayMs}ms,
@@ -264,0 +264,0 @@ opacity ${this.durationMs}ms ${this.easing} ${this.delayMs}ms;

dom-flip.ts

@@ -18,2 +18,14 @@ /**
 /**
+ * All used attribute names.
+ */
+const enum AttributeNames {
+    Active = 'active',
+    AttrName = 'attr-name',
+    DelayMs = 'delay-ms',
+    DurationMs = 'duration-ms',
+    Easing = 'easing',
+    TransitionClassName = 'transition-class-name',
+}
+
+/**
  * The regex used to parse the transform matrix string.
@@ -57,8 +69,8 @@ */
         return [
-            'active',
-            'attr-name',
-            'class-name',
-            'delay-ms',
-            'duration-ms',
-            'easing',
+            AttributeNames.Active,
+            AttributeNames.AttrName,
+            AttributeNames.DelayMs,
+            AttributeNames.DurationMs,
+            AttributeNames.Easing,
+            AttributeNames.TransitionClassName,
         ];
@@ -88,12 +100,2 @@ }
     /**
-     * The class name to apply when the elements are moving. This
-     * only need be changed in case of conflicts.
-     *
-     * Defaults to `transitioning`.
-     *
-     * @type String
-     */
-    className: string = 'transitioning';
-
-    /**
      * The CSS animation delay in milliseconds.
@@ -126,2 +128,12 @@ *
     /**
+     * The class name to apply when the elements are moving. This
+     * only need be changed in case of conflicts.
+     *
+     * Defaults to `transitioning`.
+     *
+     * @type String
+     */
+    transitionClassName: string = 'transitioning';
+
+    /**
      * Whether a dom change event handler is enqueued for the current animation frame.
@@ -168,26 +180,26 @@ */
         switch (name) {
-            case 'active':
+            case AttributeNames.Active:
                 this.active = !!newValue;
                 this._updateListeners();
                 break;
-            case 'attr-name':
+            case AttributeNames.AttrName:
                 this.attrName = newValue;
                 this._updateListeners();
                 break;
-            case 'class-name':
-                this.className = newValue;
-                this._render();
-                break;
-            case 'delay-ms':
+            case AttributeNames.DelayMs:
                 this.delayMs = Number(newValue);
                 this._render();
                 break;
-            case 'duration-ms':
+            case AttributeNames.DurationMs:
                 this.durationMs = Number(newValue);
                 this._render();
                 break;
-            case 'easing':
+            case AttributeNames.Easing:
                 this.easing = newValue;
                 this._render();
                 break;
+            case AttributeNames.TransitionClassName:
+                this.transitionClassName = newValue;
+                this._render();
+                break;
         }
@@ -220,3 +232,3 @@ }
 
-            el.classList.remove(this.className);
+            el.classList.remove(this.transitionClassName);
 
@@ -227,3 +239,3 @@ el.style.opacity = String(old.opacity);
             requestAnimationFrame(() => {
-                el.classList.add(this.className);
+                el.classList.add(this.transitionClassName);
 
@@ -234,3 +246,3 @@ el.style.opacity = String(n.opacity);
                 setTimeout(
-                    () => el.classList.remove(this.className),
+                    () => el.classList.remove(this.transitionClassName),
                     this.durationMs,
@@ -342,3 +354,3 @@ );
             <style>
-                ::slotted(.${this.className}) {
+                ::slotted(.${this.transitionClassName}) {
                     transition: transform ${this.durationMs}ms ${this.easing} ${this.delayMs}ms,
@@ -345,0 +357,0 @@ opacity ${this.durationMs}ms ${this.easing} ${this.delayMs}ms;

package.json

 {
   "name": "dom-flip",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "FLIP move for web components",
@@ -5,0 +5,0 @@ "main": "dist/dom-flip.js",

README.md

 # \<dom-flip\>
+
+[![Greenkeeper badge](https://badges.greenkeeper.io/Festify/dom-flip.svg)](https://greenkeeper.io/)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Festify/dom-flip)
@@ -14,3 +16,3 @@
 
-To be able to correlate changes in the model to changes to the DOM, this element requires that you give every element a unique ID. This can be either an attribute, or a property.
+To be able to correlate changes in the model to changes to the DOM, this element requires that you give every element a unique ID. This must be an attribute on the element itself.
 
@@ -17,0 +19,0 @@ ```html

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

42408

increased by1.84%

Lines of code

749

increased by1.49%

Number of lines in readme file

30

increased by7.14%

No dependency changes