flipping - npm Package Compare versions

Comparing version 2.0.0-1 to 2.0.0-2

dist/flipping.js

@@ -1,1 +0,15 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).Flipping={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var r in e=arguments[i])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function i(t,e){var i=t.getBoundingClientRect(),n=i.top,r=i.bottom,a=i.left,o=i.right,s=i.width,f=i.height,l=e?e.getBoundingClientRect():void 0;return{top:n-(l?l.top:0),bottom:r,left:a-(l?l.left:0),right:o,width:s,height:f,get transform(){return getComputedStyle(t).transform||void 0}}}function n(t){return{radius:getComputedStyle(t).borderRadius||0}}var r={x:0,y:0,top:0,bottom:0,left:0,right:0,width:0,height:0,widthRatio:1,heightRatio:1};function a(t,e){var i=e.left-t.left,n=e.top-t.top,r=e.width-t.width,a=e.height-t.height;return{x:i,y:n,top:n,bottom:e.bottom-t.bottom,left:i,right:e.right-t.right,width:r,height:a,widthRatio:e.width/t.width,heightRatio:e.height/t.height}}function o(t){return{x:-1*t.x,y:-1*t.y,top:-1*t.top,bottom:-1*t.bottom,left:-1*t.left,right:-1*t.right,width:-1*t.width,height:-1*t.height,widthRatio:1/t.widthRatio,heightRatio:1/t.heightRatio}}function s(t){if(!t)return!1;var e=i(t),n=e.width,r=e.height;return!(0===n&&0===r)}var f=function(){function t(i){void 0===i&&(i=t.defaultConfig),this.data={},this.listeners=new Map,this.globalListeners=new Set,this.config=e({},t.defaultConfig,i),i.style&&this.withStyle()}return t.create=function(i){return void 0===i&&(i=t.defaultConfig),new t(e({},t.defaultConfig,i))},t.prototype.onFlip=function(t){this.globalListeners.add(t)},t.prototype.findAncestor=function(e){for(var i=e.parentElement;i&&!i.hasAttribute(t.keyAttr);)i=i.parentElement;return i||void 0},t.prototype.set=function(e,i){if(this.data[e]=i,this.globalListeners.forEach(function(t){t(i)}),i.element?i.element.dataset.flip=i.state:i.previous&&i.previous.element&&(i.previous.element.dataset.flip=i.state),i.rect&&i.styles){var n=Math.abs(i.delta.left),r=Math.abs(i.delta.top),a="translate("+i.inverse.left+"px, "+i.inverse.top+"px)",o="scale("+i.inverse.widthRatio+", "+i.inverse.heightRatio+")",s=[a,o].join(" ");t.style(i,{x:i.rect.left,y:i.rect.top,dx:i.delta.left,dy:i.delta.top,ix:i.inverse.left,iy:i.inverse.top,ixy:a,iw:i.inverse.width,ih:i.inverse.height,"iw-ratio":i.inverse.widthRatio,"ih-ratio":i.inverse.heightRatio,"inverse-scale":o,inverse:s,"distance-x":n,"distance-y":r,distance:Math.hypot(n,r),"inverse-radius-x":"calc(("+i.styles.radius+" * "+i.delta.widthRatio+"))","inverse-radius-y":"calc(("+i.styles.radius+" * "+i.delta.heightRatio+"))","inverse-radius":"var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)"},{px:!0})}},t.style=function(i,n,r){var a=i.element;if(a){var o=e({px:!0},r);Object.keys(n).forEach(function(e){var i="--"+t.prefix+"-"+e,r=""+n[e];a.style.setProperty(i,r),o.px&&!isNaN(+i)&&a.style.setProperty(i+"-px",r+"px")})}},t.prototype.toElementMap=function(e){var i=this;e||(e=Array.from(document.querySelectorAll("["+t.keyAttr+"]")).filter(function(t){return s(t)}));var n={};return Array.isArray(e)||e instanceof NodeList?(e.forEach(function(t){var e="string"==typeof i.config.getKey?t.getAttribute(i.config.getKey):i.config.getKey(t);e&&(n[e]=t)}),n):e},t.prototype.read=function(t){var e=this,a=this.toElementMap(t);Object.keys(a).forEach(function(t){var o=a[t],s=e.data[t];o&&e.set(t,{key:t,element:o,state:"read",rect:i(o,e.findAncestor(o)),styles:n(o),delta:r,inverse:r,previous:s})})},t.prototype.flip=function(t){var f=this,l=this.toElementMap(t);new Set(Object.keys(this.data).concat(Object.keys(l))).forEach(function(t){var p,d=l[t],c=f.data[t],h=s(d);if(d&&h){if(!c&&d&&h)p={key:t,element:d,state:"enter",rect:i(d,f.findAncestor(d)),styles:n(d),delta:r,inverse:r,previous:void 0};else if(c&&d&&h){var u=c.rect?a(c.rect,i(d,f.findAncestor(d))):r;p={key:t,element:d,state:"exit"===c.state?h?"enter":"exit":h?"move":"exit",rect:i(d,f.findAncestor(d)),styles:n(d),delta:u,inverse:o(u),previous:c}}}else p={key:t,element:d,state:"exit",rect:void 0,styles:void 0,delta:r,inverse:r,previous:c};requestAnimationFrame(function(){f.set(t,e({},p,{state:"pre-"+p.state})),requestAnimationFrame(function(){f.set(t,p)})})})},t.prototype.wrap=function(t,e){var i=this;return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];i.read(e);var a=t.apply(null,n);return i.flip(e),a}},t.prototype.withStyle=function(){var e="\n      :root {\n        --flip-duration: .3s;\n        --flip-easing: ease;\n        --flip-transition: transform var(--flip-duration) var(--flip-easing);\n      }\n      ["+t.flipStateAttr+"] {\n        will-change: transform;\n      }\n      ["+t.flipStateAttr+'="read"] {\n        transition: none;\n      }\n      ['+t.flipStateAttr+'="pre-move"] {\n        transition: none;\n        transform: var(--flip-ixy);\n      }\n      ['+t.flipStateAttr+'="pre-move"][data-flip-properties*="scale"] {\n        transition: none;\n        transform: var(--flip-inverse);\n      }\n      ['+t.flipStateAttr+'="move"] {\n        transition: var(--flip-transition);\n        transform: none;\n      }\n\n      /* BG */\n      ['+t.flipStateAttr+"] > [data-flip-bg] {\n        transform-origin: 0 0;\n      }\n      ["+t.flipStateAttr+'="pre-move"] > [data-flip-bg] {\n        transition: none;\n        transform: var(--flip-inverse-scale);\n      }\n      ['+t.flipStateAttr+'="move"] > [data-flip-bg] {\n        transition: var(--flip-transition);\n        transform: none;\n      }\n    ',i=document.createElement("style");return i.innerHTML=e,document.head.appendChild(i),this},t.prototype.setState=function(e,i){void 0===i&&(i=document.body);var n=i.dataset.state,r=Array.from(i.querySelectorAll("["+t.keyAttr+"]")),a=r.filter(function(t){return!t.matches("[data-flip-inactive], [data-flip-inactive] *")&&s(t)});this.read(a),i.querySelectorAll("[data-flip-active], [data-flip-inactive]").forEach(function(t){t.removeAttribute("data-flip-active"),t.removeAttribute("data-flip-inactive")}),i.dataset.prevState=n,i.dataset.state=e,i.querySelectorAll('[data-flip-show~="'+e+'"], [data-flip-hide]:not([data-flip-hide~="'+e+'"])').forEach(function(t){t.setAttribute("data-flip-active","")}),i.querySelectorAll('[data-flip-hide~="'+e+'"], [data-flip-show]:not([data-flip-show~="'+e+'"])').forEach(function(t){t.setAttribute("data-flip-inactive","")});var o=r.filter(function(t){return!t.matches("[data-flip-inactive], [data-flip-inactive] *")});this.flip(o)},t.prefix="flip",t.keyAttr="data-flip-key",t.flipStateAttr="data-flip",t.defaultConfig={getKey:function(e){var i=e.getAttribute(t.keyAttr);if(!i)throw console.error("No flip key found for element:",e),new Error("Missing flip key for element");return i}},t}(),l=f.create;t.getRect=i,t.getStyles=n,t.getDelta=a,t.getInverse=o,t.isVisible=s,t.Flipping=f,t.create=l,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).Flipping={})}(this,(function(t){"use strict";
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */var e=function(){return(e=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t}).apply(this,arguments)};function i(t,e){var i=t.getBoundingClientRect(),r=i.top,n=i.bottom,o=i.left,a=i.right,s=i.width,l=i.height,f=e?e.getBoundingClientRect():void 0;return{top:r-(f?f.top:0),bottom:n,left:o-(f?f.left:0),right:a,width:s,height:l,get transform(){return getComputedStyle(t).transform||void 0}}}function r(t){return{radius:getComputedStyle(t).borderRadius||0}}var n={x:0,y:0,top:0,bottom:0,left:0,right:0,width:0,height:0,widthRatio:1,heightRatio:1};function o(t,e){var i=e.left-t.left,r=e.top-t.top,n=e.width-t.width,o=e.height-t.height;return{x:i,y:r,top:r,bottom:e.bottom-t.bottom,left:i,right:e.right-t.right,width:n,height:o,widthRatio:e.width/t.width,heightRatio:e.height/t.height}}function a(t){return{x:-1*t.x,y:-1*t.y,top:-1*t.top,bottom:-1*t.bottom,left:-1*t.left,right:-1*t.right,width:-1*t.width,height:-1*t.height,widthRatio:1/t.widthRatio,heightRatio:1/t.heightRatio}}function s(t){if(!t)return!1;var e=i(t),r=e.width,n=e.height;return!(0===r&&0===n)}var l=function(){function t(i){void 0===i&&(i=t.defaultConfig),this.data={},this.listeners=new Map,this.globalListeners=new Set,this.config=e(e({},t.defaultConfig),i)}return t.create=function(e){return void 0===e&&(e=t.defaultConfig),new t(e)},t.prototype.onFlip=function(t){this.globalListeners.add(t)},t.prototype.findAncestor=function(e){for(var i=e.parentElement;i&&!i.hasAttribute(t.keyAttr);)i=i.parentElement;return i||void 0},t.prototype.set=function(e,i){if(this.data[e]=i,this.globalListeners.forEach((function(t){t(i)})),i.element?i.element.dataset.flipState=i.state:i.previous&&i.previous.element&&(i.previous.element.dataset.flipState=i.state),i.rect&&i.styles){var r=Math.abs(i.delta.left),n=Math.abs(i.delta.top),o="translate("+i.inverse.left+"px, "+i.inverse.top+"px)",a="scale("+i.inverse.widthRatio+", "+i.inverse.heightRatio+")",s="translate("+(i.inverse.left+i.inverse.top)+"px, "+i.inverse.top+"px) rotate(-90deg) translateY("+i.delta.top+"px) rotate(90deg) "+a,l="translate("+(i.inverse.left+i.inverse.top)+"px, "+i.inverse.top+"px) rotate(0deg) translate("+(i.delta.left+i.delta.top)+"px, "+i.delta.top+"px) rotate(0deg) scale(1)";t.style(i,{x:i.rect.left,y:i.rect.top,dx:i.delta.left,dy:i.delta.top,ix:i.inverse.left,iy:i.inverse.top,"inverse-xy":o,iw:i.inverse.width,ih:i.inverse.height,"iw-ratio":i.inverse.widthRatio,"ih-ratio":i.inverse.heightRatio,"inverse-scale":a,"distance-x":r,"distance-y":n,distance:Math.hypot(r,n),"inverse-radius-x":"calc(("+i.styles.radius+" * "+i.delta.widthRatio+"))","inverse-radius-y":"calc(("+i.styles.radius+" * "+i.delta.heightRatio+"))","inverse-radius":"var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)",curve:s,fcurve:l},{px:!0})}},t.style=function(i,r,n){var o=i.element;if(o){var a=e({px:!0},n);Object.keys(r).forEach((function(e){var i="--"+t.prefix+"-"+e,n=""+r[e];o.style.setProperty(i,n),a.px&&!isNaN(+i)&&o.style.setProperty(i+"-px",n+"px")}))}},t.prototype.toElementMap=function(e){var i=this;e||(e=Array.from(document.querySelectorAll("["+t.keyAttr+"]")).filter((function(t){return s(t)})));var r={};return Array.isArray(e)?(e.forEach((function(t){var e="string"==typeof i.config.getKey?t.getAttribute(i.config.getKey):i.config.getKey(t);e&&(r[e]=t)})),r):e},t.prototype.read=function(t){var e=this,o=this.toElementMap(t);Object.keys(o).forEach((function(t){var a=o[t],s=e.data[t];a&&e.set(t,{key:t,element:a,state:"read",rect:i(a,e.findAncestor(a)),styles:r(a),delta:n,inverse:n,previous:s})}))},t.prototype.flip=function(t){var l=this,f=this.toElementMap(t);new Set(Object.keys(this.data).concat(Object.keys(f))).forEach((function(t){var p,d=f[t],h=l.data[t],c=s(d);if(d&&c){if(!h&&d&&c)p={key:t,element:d,state:"enter",rect:i(d,l.findAncestor(d)),styles:r(d),delta:n,inverse:n,previous:void 0};else if(h&&d&&c){var u=h.rect?o(h.rect,i(d,l.findAncestor(d))):n;p={key:t,element:d,state:"exit"===h.state?c?"enter":"exit":c?"move":"exit",rect:i(d,l.findAncestor(d)),styles:r(d),delta:u,inverse:a(u),previous:h}}}else p={key:t,element:d,state:"exit",rect:void 0,styles:void 0,delta:n,inverse:n,previous:h};requestAnimationFrame((function(){l.set(t,e(e({},p),{state:"pre-"+p.state})),requestAnimationFrame((function(){l.set(t,p)}))}))}))},t.prototype.wrap=function(t,e){var i=this;return function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];i.read(e);var o=t.apply(null,r);return i.flip(e),o}},t.prototype.applyDefaultStyles=function(){var t=document.createElement("style");t.innerHTML='\n      [data-flip-state] {\n        will-change: transform;\n      }\n      [data-flip-state="read"] {\n        transition: none;\n      }\n      [data-flip-state="pre-move"] {\n        transition: none;\n        transform: var(--flip-inverse-xy);\n        --clip-path: polygon(0% 0%, calc(var(--flip-iw-ratio) * 100%) 0, calc(var(--flip-iw-ratio) * 100%) calc(var(--flip-ih-ratio) * 100%), 0 calc(var(--flip-ih-ratio) * 100%));\n      }\n      [data-flip-state="move"] {\n        transition: all .6s ease;\n        transform: none;\n        --clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);\n      }\n    ',document.head.appendChild(t)},t.prefix="flip",t.keyAttr="data-flip-key",t.defaultConfig={getKey:function(e){var i=e.getAttribute(t.keyAttr);if(!i)throw console.error("No flip key found for element:",e),new Error("Missing flip key for element");return i}},t}(),f=l.create;t.Flipping=l,t.create=f,t.getDelta=o,t.getInverse=a,t.getRect=i,t.getStyles=r,t.isVisible=s,Object.defineProperty(t,"__esModule",{value:!0})}));

package.json

 {
   "name": "flipping",
-  "version": "2.0.0-1",
+  "version": "2.0.0-2",
   "description": "Flipping awesome animations.",
@@ -13,4 +13,3 @@ "main": "lib/index.js",
     "build:watch": "rollup -cw",
-    "examples": "concurrently \"npm run build:watch\" \"node-sass -w examples/scss -o examples/css\"",
-    "publish:next": "npm version prerelease && npm publish --tag next",
+    "examples": "node-sass -w examples/scss -o examples/css",
     "prepublish": "npm run build:prod"
@@ -34,23 +33,13 @@ },
   "devDependencies": {
-    "@types/jsdom": "^11.12.0",
-    "@types/mocha": "^5.2.6",
-    "@types/web-animations-js": "^2.2.8",
-    "chai": "^3.5.0",
-    "concurrently": "^4.1.0",
-    "jsdom": "^11.12.0",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^3.5.3",
-    "node-sass": "^4.11.0",
-    "prettier": "^1.16.4",
-    "rollup": "^0.68.2",
-    "rollup-plugin-filesize": "^5.0.1",
-    "rollup-plugin-replace": "^2.1.1",
-    "rollup-plugin-terser": "^3.0.0",
-    "rollup-plugin-typescript2": "^0.18.1",
-    "tslint": "^5.15.0",
-    "typescript": "^3.4.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0"
+    "@types/mocha": "^7.0.2",
+    "@types/node": "^14.0.14",
+    "rollup": "^2.18.1",
+    "rollup-plugin-cleanup": "^3.1.1",
+    "rollup-plugin-filesize": "^9.0.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "typescript": "^3.9.5"
   },
   "dependencies": {}
 }

rollup.config.js

@@ -5,2 +5,3 @@ import typescript from 'rollup-plugin-typescript2';
 import fileSize from 'rollup-plugin-filesize';
+import cleanup from 'rollup-plugin-cleanup';
 
@@ -12,3 +13,3 @@ const createConfig = ({ input, output }) => ({
     rollupReplace({
-      'process.env.NODE_ENV': JSON.stringify('production')
+      'process.env.NODE_ENV': JSON.stringify('production'),
     }),
@@ -19,20 +20,34 @@ typescript({
         compilerOptions: {
-          declaration: false
-        }
-      }
+          declaration: false,
+        },
+      },
     }),
     terser(),
-    fileSize()
-  ]
+    cleanup({
+      comments: 'none',
+    }),
+    fileSize(),
+  ],
 });
 
-export default [
-  createConfig({
-    input: 'src/index.ts',
-    output: {
-      file: 'dist/flipping.js',
-      format: 'umd',
-      name: 'Flipping'
-    }
-  })
-];
+export default {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/flipping.js',
+    format: 'umd',
+    name: 'Flipping',
+  },
+  plugins: [
+    typescript({
+      clean: true,
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: false,
+        },
+        external: ['tslib'],
+      },
+    }),
+    terser(),
+    fileSize(),
+  ],
+};

src/index.ts

@@ -135,5 +135,3 @@ interface StyleMap {
   getKey: ((element: HTMLElement) => string | null | undefined) | string;
-  style?: boolean;
 }
-
 export class Flipping {
@@ -146,3 +144,2 @@ public data: Record<string, FlipData | undefined> = {};
   public static keyAttr = 'data-flip-key';
-  public static flipStateAttr = 'data-flip';
 
@@ -164,4 +161,3 @@ public static defaultConfig = {
   public static create(config: FlippingConfig = Flipping.defaultConfig) {
-    const resolvedConfig = { ...Flipping.defaultConfig, ...config };
-    return new Flipping(resolvedConfig);
+    return new Flipping(config);
   }
@@ -174,6 +170,2 @@
     };
-
-    if (config.style) {
-      this.withStyle();
-    }
   }
@@ -203,5 +195,5 @@
     if (data.element) {
-      data.element.dataset.flip = data.state;
+      data.element.dataset.flipState = data.state;
     } else if (data.previous && data.previous.element) {
-      data.previous.element.dataset.flip = data.state;
+      data.previous.element.dataset.flipState = data.state;
     }
@@ -227,3 +219,2 @@ if (!data.rect || !data.styles) {
     })`;
-    const inverseTransform = [inverseXY, inverseScale].join(' ');
 
@@ -238,12 +229,12 @@ // const s = `translateY(${data.inverse.top *
 
-    // const a = `translate(${data.inverse.left + data.inverse.top}px, ${
-    //   data.inverse.top
-    // }px) rotate(-90deg) translateY(${
-    //   data.delta.top
-    // }px) rotate(90deg) ${inverseScale}`;
-    // const aa = `translate(${data.inverse.left + data.inverse.top}px, ${
-    //   data.inverse.top
-    // }px) rotate(0deg) translate(${data.delta.left + data.delta.top}px, ${
-    //   data.delta.top
-    // }px) rotate(0deg) scale(1)`;
+    const a = `translate(${data.inverse.left + data.inverse.top}px, ${
+      data.inverse.top
+    }px) rotate(-90deg) translateY(${
+      data.delta.top
+    }px) rotate(90deg) ${inverseScale}`;
+    const aa = `translate(${data.inverse.left + data.inverse.top}px, ${
+      data.inverse.top
+    }px) rotate(0deg) translate(${data.delta.left + data.delta.top}px, ${
+      data.delta.top
+    }px) rotate(0deg) scale(1)`;
 
@@ -262,3 +253,3 @@ Flipping.style(
         iy: data.inverse.top,
-        ixy: inverseXY,
+        'inverse-xy': inverseXY,
         // scale
@@ -270,4 +261,2 @@ iw: data.inverse.width,
         'inverse-scale': inverseScale,
-        // inverse combo
-        inverse: inverseTransform,
         // distance
@@ -284,6 +273,6 @@ 'distance-x': distX,
         }))`,
-        'inverse-radius': `var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)`
+        'inverse-radius': `var(--flip-inverse-radius-x) / var(--flip-inverse-radius-y)`,
         // curve
-        // curve: a,
-        // fcurve: aa
+        curve: a,
+        fcurve: aa
       },
@@ -319,7 +308,3 @@ { px: true }
   private toElementMap(
-    elements:
-      | HTMLElement[]
-      | NodeListOf<HTMLElement>
-      | FlipElementMap
-      | undefined
+    elements: HTMLElement[] | FlipElementMap | undefined
   ): FlipElementMap {
@@ -333,3 +318,3 @@ if (!elements) {
 
-    if (Array.isArray(elements) || elements instanceof NodeList) {
+    if (Array.isArray(elements)) {
       elements.forEach(element => {
@@ -354,5 +339,3 @@ const key =
 
-  public read(
-    elements?: HTMLElement[] | NodeListOf<HTMLElement> | FlipElementMap
-  ): void {
+  public read(elements?: HTMLElement[] | FlipElementMap): void {
     const elementMap = this.toElementMap(elements);
@@ -380,3 +363,3 @@ Object.keys(elementMap).forEach(key => {
 
-  public flip(elements?: HTMLElement[] | NodeListOf<HTMLElement>) {
+  public flip(elements?: HTMLElement[]) {
     const elementMap = this.toElementMap(elements);
@@ -466,59 +449,20 @@ const allKeys = new Set(
   }
-  public withStyle() {
-    // const styles = `
-    //   [data-flip] {
-    //     will-change: transform;
-    //   }
-    //   [data-flip="read"] {
-    //     transition: none;
-    //   }
-    //   [data-flip="pre-move"] {
-    //     transition: none;
-    //     transform: var(--flip-inverse-xy);
-    //     --clip-path: polygon(0% 0%, calc(var(--flip-iw-ratio) * 100%) 0, calc(var(--flip-iw-ratio) * 100%) calc(var(--flip-ih-ratio) * 100%), 0 calc(var(--flip-ih-ratio) * 100%));
-    //   }
-    //   [data-flip="move"] {
-    //     transition: all .6s ease;
-    //     transform: none;
-    //     --clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
-    //   }
-    // `;
-
+  public applyDefaultStyles() {
     const styles = `
-      :root {
-        --flip-duration: .3s;
-        --flip-easing: ease;
-        --flip-transition: transform var(--flip-duration) var(--flip-easing);
-      }
-      [${Flipping.flipStateAttr}] {
+      [data-flip-state] {
         will-change: transform;
       }
-      [${Flipping.flipStateAttr}="read"] {
+      [data-flip-state="read"] {
         transition: none;
       }
-      [${Flipping.flipStateAttr}="pre-move"] {
+      [data-flip-state="pre-move"] {
         transition: none;
-        transform: var(--flip-ixy);
+        transform: var(--flip-inverse-xy);
+        --clip-path: polygon(0% 0%, calc(var(--flip-iw-ratio) * 100%) 0, calc(var(--flip-iw-ratio) * 100%) calc(var(--flip-ih-ratio) * 100%), 0 calc(var(--flip-ih-ratio) * 100%));
       }
-      [${Flipping.flipStateAttr}="pre-move"][data-flip-properties*="scale"] {
-        transition: none;
-        transform: var(--flip-inverse);
-      }
-      [${Flipping.flipStateAttr}="move"] {
-        transition: var(--flip-transition);
+      [data-flip-state="move"] {
+        transition: all .6s ease;
         transform: none;
+        --clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 100%);
       }
-
-      /* BG */
-      [${Flipping.flipStateAttr}] > [data-flip-bg] {
-        transform-origin: 0 0;
-      }
-      [${Flipping.flipStateAttr}="pre-move"] > [data-flip-bg] {
-        transition: none;
-        transform: var(--flip-inverse-scale);
-      }
-      [${Flipping.flipStateAttr}="move"] > [data-flip-bg] {
-        transition: var(--flip-transition);
-        transform: none;
-      }
     `;
@@ -529,52 +473,5 @@
     document.head.appendChild(elStyle);
-
-    return this;
   }
-
-  public setState(state: string, element: HTMLElement = document.body): void {
-    const prevState = element.dataset.state;
-    const flipElements = Array.from(element.querySelectorAll(
-      `[${Flipping.keyAttr}]`
-    ) as NodeListOf<HTMLElement>);
-
-    const currentFlipElements = flipElements.filter(flipElement => {
-      return (
-        !flipElement.matches('[data-flip-inactive], [data-flip-inactive] *') &&
-        isVisible(flipElement)
-      );
-    });
-    this.read(currentFlipElements);
-    element
-      .querySelectorAll('[data-flip-active], [data-flip-inactive]')
-      .forEach(el => {
-        el.removeAttribute('data-flip-active');
-        el.removeAttribute('data-flip-inactive');
-      });
-    element.dataset.prevState = prevState;
-    element.dataset.state = state;
-    element
-      .querySelectorAll(
-        `[data-flip-show~="${state}"], [data-flip-hide]:not([data-flip-hide~="${state}"])`
-      )
-      .forEach(el => {
-        el.setAttribute('data-flip-active', '');
-      });
-    element
-      .querySelectorAll(
-        `[data-flip-hide~="${state}"], [data-flip-show]:not([data-flip-show~="${state}"])`
-      )
-      .forEach(el => {
-        el.setAttribute('data-flip-inactive', '');
-      });
-
-    const nextFlipElements = flipElements.filter(flipElement => {
-      return !flipElement.matches(
-        '[data-flip-inactive], [data-flip-inactive] *'
-      );
-    });
-
-    this.flip(nextFlipElements);
-  }
 }
 
 export const create = Flipping.create;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Dev dependency count

9

decreased by-52.63%

Worsened metrics

Total package byte prevSize

57768

decreased by-60.1%

Number of package files

17

decreased by-66%

Lines of code

1240

decreased by-67.62%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes