card3d - npm Package Compare versions

Comparing version 2.0.0 to 2.5.0

dist/card3d.js

@@ -1,62 +0,56 @@
-'use strict';
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.card3d = factory());
+})(this, (function () { 'use strict';
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+  const Card3dElements = [];
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  class Card3d {
+    constructor(element, conf) {
+      this.verify(element);
+      this.$e = element;
+      Card3dElements.push(element);
+      this.setConfiguration(conf);
+      this.start(false);
+    }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-var Card3dElements = [];
-
-var Card3d = /*#__PURE__*/function () {
-  function Card3d(element, conf) {
-    _classCallCheck(this, Card3d);
-
-    this.verify(element);
-    this.$e = element;
-    Card3dElements.push(element);
-    this.setConfiguration(conf);
-    this.start(false);
-  }
-
-  _createClass(Card3d, [{
-    key: "verify",
-    value: function verify(element) {
+    verify(element) {
       if (!element) throw "[CARD3D] You should give a dom element to the constructor !";
       if (element.length != undefined) throw "[CARD3D] 'element' should be one element !";
     }
-  }, {
-    key: "setConfiguration",
-    value: function setConfiguration() {
-      var conf = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      this.$e.setAttribute('data-card3d', '');
-      var keys = Object.keys(conf);
 
-      for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
-        var key = _keys[_i];
-        this.$e.setAttribute("data-card3d-".concat(key.toLowerCase()), conf[key].toString());
+    setConfiguration(conf = {}) {
+      this.$e.setAttribute("data-card3d", "");
+      const keys = Object.keys(conf);
+
+      for (const key of keys) {
+        this.$e.setAttribute(`data-card3d-${key.toLowerCase()}`, conf[key].toString());
       }
     }
-  }, {
-    key: "start",
-    value: function start() {
-      var _this = this;
 
-      var resetStop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var e = this.$e;
-      if (resetStop) e.removeAttribute('data-card3d-stop');
-      var focus = e;
-      var config = e.dataset;
-      var fullPage = config.card3dFullPageListening && JSON.parse(config.card3dFullPageListening);
+    start(resetStop = true) {
+      const e = this.$e;
+      if (resetStop) e.removeAttribute("data-card3d-stop");
+      let focus = e;
+      const config = e.dataset;
+      const fullPage = config.card3dFullPageListening && JSON.parse(config.card3dFullPageListening);
       if (fullPage) focus = document.body;
-      var perspective = config.card3dPerspective && parseFloat(config.card3dPerspective) ? parseFloat(config.card3dPerspective) : 500;
-      var startPositionX = config.card3dStartX && parseFloat(config.card3dStartX) ? parseFloat(config.card3dStartX) : 0;
-      var startPositionY = config.card3dStartY && parseFloat(config.card3dStartY) ? parseFloat(config.card3dStartY) : 0; //glare element
+      const perspective = config.card3dPerspective && parseFloat(config.card3dPerspective) ? parseFloat(config.card3dPerspective) : 500;
+      const startPositionX = config.card3dStartX && parseFloat(config.card3dStartX) ? parseFloat(config.card3dStartX) : 0;
+      const startPositionY = config.card3dStartY && parseFloat(config.card3dStartY) ? parseFloat(config.card3dStartY) : 0; //glare element
 
-      var glare = config.card3dGlare != null && config.card3dGlare != undefined;
-      var glareOpacity = glare && parseFloat(config.card3dGlare) ? parseFloat(config.card3dGlare) : 0.5;
-      var gl = document.createElement('span');
-      gl.style = "\n        will-change: transform;\n        position: absolute;\n        background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);\n        pointer-event: none; \n        transform-origin: 0% 0%;\n        transform: translate(-50%, -50%) rotate(180deg);\n        opacity: 0;\n        z-index: 999;\n        ";
+      const glare = config.card3dGlare != null && config.card3dGlare != undefined;
+      const glareOpacity = glare && parseFloat(config.card3dGlare) ? parseFloat(config.card3dGlare) : 0.5;
+      const gl = document.createElement("span");
+      gl.style = `
+        will-change: transform;
+        position: absolute;
+        background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+        pointer-event: none; 
+        transform-origin: 0% 0%;
+        transform: translate(-50%, -50%) rotate(180deg);
+        opacity: 0;
+        z-index: 999;
+        `;
       e.appendChild(gl);
@@ -66,16 +60,12 @@ this.$gl = gl;
 
-      this.$eventMoove = function (event) {
-        return _this.mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity);
-      };
+      this.$eventMoove = event => this.mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity);
 
-      this.$eventOut = function (event) {
-        return _this.mouseout(event, e, gl);
-      }; //event setup
+      this.$eventOut = event => this.mouseout(event, e, gl); //event setup
 
 
-      focus.addEventListener('mousemove', this.$eventMoove);
-      var reset = config.card3dReset && JSON.parse(config.card3dReset);
+      focus.addEventListener("mousemove", this.$eventMoove);
+      const reset = config.card3dReset && JSON.parse(config.card3dReset);
 
       if (reset || config.card3dReset == null || config.card3dReset == undefined) {
-        focus.addEventListener('mouseout', this.$eventOut);
+        focus.addEventListener("mouseout", this.$eventOut);
       }
@@ -85,9 +75,12 @@
       e.style.willChange = "transform";
-      e.style.transform = "\n        perspective(500px) \n        rotateX(".concat(startPositionY, "deg) \n        rotateY(").concat(startPositionX, "deg)\n        ");
+      e.style.transform = `
+        perspective(500px) 
+        rotateX(${startPositionY}deg) 
+        rotateY(${startPositionX}deg)
+        `;
     }
-  }, {
-    key: "mousemove",
-    value: function mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity) {
+
+    mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity) {
       //config
-      var stopC = config.card3dStop && JSON.parse(config.card3dStop);
+      const stopC = config.card3dStop && JSON.parse(config.card3dStop);
 
@@ -99,21 +92,21 @@ if (stopC || !e.isConnected || !focus.isConnected) {
 
-      var reverse = config.card3dReverse && JSON.parse(config.card3dReverse) ? 1 : -1;
-      var axis = config.card3dAxis ? config.card3dAxis : 'all';
-      var scale = config.card3dScale && parseFloat(config.card3dScale) ? parseFloat(config.card3dScale) : 1;
-      var delta = config.card3dDelta && parseFloat(config.card3dDelta) ? parseFloat(config.card3dDelta) : 10; //end
+      const reverse = config.card3dReverse && JSON.parse(config.card3dReverse) ? 1 : -1;
+      const axis = config.card3dAxis ? config.card3dAxis : "all";
+      const scale = config.card3dScale && parseFloat(config.card3dScale) ? parseFloat(config.card3dScale) : 1;
+      const delta = config.card3dDelta && parseFloat(config.card3dDelta) ? parseFloat(config.card3dDelta) : 10; //end
 
       e.style.transition = "";
-      var rect = e.getBoundingClientRect();
-      var middleWidth = rect.width / 2;
-      var middleHeight = rect.height / 2;
-      var middleX = rect.left + middleWidth;
-      var middleY = rect.top + middleHeight;
-      var x = (middleX - event.clientX) * -1;
-      var y = middleY - event.clientY;
-      var finalX = x / (focus != e ? window.innerWidth / 2 : rect.width / 2) * delta;
-      var finalY = y / (focus != e ? window.innerHeight / 2 : rect.height / 2) * delta;
+      const rect = e.getBoundingClientRect();
+      const middleWidth = rect.width / 2;
+      const middleHeight = rect.height / 2;
+      const middleX = rect.left + middleWidth;
+      const middleY = rect.top + middleHeight;
+      const x = (middleX - event.clientX) * -1;
+      const y = middleY - event.clientY;
+      let finalX = x / (focus != e ? window.innerWidth / 2 : rect.width / 2) * delta;
+      let finalY = y / (focus != e ? window.innerHeight / 2 : rect.height / 2) * delta;
 
-      if (axis.toLowerCase() == 'x') {
+      if (axis.toLowerCase() == "x") {
         finalY = 0;
-      } else if (axis.toLowerCase() == 'y') {
+      } else if (axis.toLowerCase() == "y") {
         finalX = 0;
@@ -124,4 +117,4 @@ } //glare
       if (glare) {
-        var angle = Math.atan2(event.clientX - middleX, -(event.clientY - middleY)) * (180 / Math.PI);
-        var glareSize = (rect.width > rect.height ? rect.width : rect.height) * 2;
+        const angle = Math.atan2(event.clientX - middleX, -(event.clientY - middleY)) * (180 / Math.PI);
+        const glareSize = (rect.width > rect.height ? rect.width : rect.height) * 2;
         gl.style.opacity = glareOpacity;
@@ -132,11 +125,15 @@ gl.style.left = "50%";
         gl.style.height = glareSize + "px";
-        gl.style.transform = "rotate(".concat(angle, "deg) translate(-50%, -50%)");
+        gl.style.transform = `rotate(${angle}deg) translate(-50%, -50%)`;
         gl.style.display = "block";
       }
 
-      e.style.transform = "\n        perspective(".concat(perspective, "px) \n        rotateX(").concat(finalY * reverse, "deg) \n        rotateY(").concat(finalX * reverse, "deg)\n        scale(").concat(scale, ")\n        ");
+      e.style.transform = `
+        perspective(${perspective}px) 
+        rotateX(${finalY * reverse}deg) 
+        rotateY(${finalX * reverse}deg)
+        scale(${scale})
+        `;
     }
-  }, {
-    key: "mouseout",
-    value: function mouseout(event, e, gl) {
+
+    mouseout(event, e, gl) {
       e.style.transition = "0.5s ease";
@@ -146,56 +143,57 @@ e.style.transform = "";
     }
-  }, {
-    key: "stop",
-    value: function stop() {
-      this.$e.setAttribute('data-card3d-stop', 'true');
-      this.$focus.removeEventListener('mousemove', this.$eventMoove);
-      this.$focus.removeEventListener('mouseout', this.$eventMoove);
+
+    stop() {
+      this.$e.setAttribute("data-card3d-stop", "true");
+      this.$focus.removeEventListener("mousemove", this.$eventMoove);
+      this.$focus.removeEventListener("mouseout", this.$eventMoove);
       this.$gl.remove();
       Card3dElements.splice(Card3dElements.indexOf(this.$e), 1);
     }
-  }]);
 
-  return Card3d;
-}(); //HANDLER ATTRIBUTE
+  } //HANDLER ATTRIBUTE
 
 
-function Card3dAttributesHandler() {
-  var elements = document.querySelectorAll('[data-card3d]');
-  elements.forEach(function (el) {
-    if (Card3dElements.indexOf(el) != -1 || !el.getAttribute) {
-      return;
+  function Card3dAttributesHandler() {
+    let elements = document.querySelectorAll("[data-card3d]");
+    elements.forEach(function (el) {
+      if (Card3dElements.indexOf(el) != -1 || !el.getAttribute) {
+        return;
+      }
+
+      try {
+        const stopC = el.dataset.card3dStop && JSON.parse(el.dataset.card3dStop);
+        if (stopC) return;
+        new Card3d(el);
+      } catch (e) {}
+    });
+  } //OBSERVER
+
+
+  function Card3dObserver() {
+    function getMutationObserver() {
+      return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
     }
 
-    try {
-      var stopC = el.dataset.card3dStop && JSON.parse(el.dataset.card3dStop);
-      if (stopC) return;
-      new Card3d(el);
-    } catch (e) {}
-  });
-} //OBSERVER
+    const MutationObserver = getMutationObserver();
+    const observerDOM = new MutationObserver(function (mutations) {
+      if (!mutations) return;
+      Card3dAttributesHandler();
+    });
+    observerDOM.observe(window.document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      removedNodes: true
+    });
+  } //DOM LOADED
 
 
-function Card3dObserver() {
-  function getMutationObserver() {
-    return window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
-  }
-
-  var MutationObserver = getMutationObserver();
-  var observerDOM = new MutationObserver(function (mutations) {
-    if (!mutations) return;
+  document.addEventListener("DOMContentLoaded", function () {
+    Card3dObserver();
     Card3dAttributesHandler();
   });
-  observerDOM.observe(window.document.documentElement, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    removedNodes: true
-  });
-} //DOM LOADED
 
+  return Card3d;
 
-document.addEventListener('DOMContentLoaded', function () {
-  Card3dObserver();
-  Card3dAttributesHandler();
-});
-if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) == "object") module.exports = Card3d;
+}));
+//# sourceMappingURL=card3d.js.map

package.json

 {
   "name": "card3d",
-  "version": "2.0.0",
+  "version": "2.5.0",
   "description": "Create 3d card like vanilla tilt js",
-  "main": "./src/card3d.js",
+  "main": "./dist/card3d.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "./node_modules/.bin/babel src --out-dir dist"
+    "build": "rollup -c"
   },
@@ -30,5 +30,6 @@ "repository": {
     "@babel/core": "^7.16.12",
-    "@babel/preset-env": "^7.16.11"
-  },
-  "dependencies": {}
+    "@babel/preset-env": "^7.16.11",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2"
+  }
 }

README.md

@@ -1,52 +0,5 @@
-# card3d
-Create beautilful 3d card like vanilla-tilt js
+# Card3d
 
-## Inspired
+Create beautilful 3d card like vanilla-tilt js (Inspired from vanilla tilt js just for fun but it work well)
 
-Inspired from vanilla tilt js just for fun
-
-## how to ?
-
-<img src="./assets/Animation.gif" alt="GIF ANIMATION"></img>
-
-## Update
-v2.0.0
-- Added observer
-
-## NPM
-```
-npm i card3d
-```
-```js
-//Node.js
-const Card3d = require("card3d");
-import Card3d from "card3d";
-
-//Vue.js example
-import "card3d";
-
-//should be a querySelector not querySelectorAll
-const card = new Card3d(document.querySelector('.card'), {
-    glare: 0.7,
-    //all attributes can ba placed as configuration (data-card3d-delta="0.8" -> delta: 0.8)
-});
-//equal to do <div class="card" data-card3d data-card3d-glare="0.7"></div>
-
-//methods
-card.stop();
-card.start();
-```
-
-## CDN
-```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/yoannchb-pro/Card3d/dist/card3d.min.js"></script>
-```
-
-## GITHUB
-```html
-<script type="text/javascript" src="./dist/card3d.js"></script>
-```
-
-## Documentation
-
-- [Documentation on the github page](https://yoannchb-pro.github.io/card3d/index.html)
+[See the documentation](https://yoannchb-pro.github.io/card3d/index.html)

src/card3d.js

@@ -1,51 +0,70 @@
-'use strict';
+"use strict";
 
 const Card3dElements = [];
 
-class Card3d{
-    constructor(element, conf){
-        this.verify(element);
+class Card3d {
+  constructor(element, conf) {
+    this.verify(element);
 
-        this.$e = element;
-        
-        Card3dElements.push(element);
-        this.setConfiguration(conf);
-        this.start(false);
-    }
+    this.$e = element;
 
-    verify(element){
-        if(!element) throw "[CARD3D] You should give a dom element to the constructor !";
-        if(element.length != undefined) throw "[CARD3D] 'element' should be one element !";
-    }
+    Card3dElements.push(element);
+    this.setConfiguration(conf);
+    this.start(false);
+  }
 
-    setConfiguration(conf = {}){
-        this.$e.setAttribute('data-card3d', '');
+  verify(element) {
+    if (!element)
+      throw "[CARD3D] You should give a dom element to the constructor !";
+    if (element.length != undefined)
+      throw "[CARD3D] 'element' should be one element !";
+  }
 
-        const keys = Object.keys(conf);
-        for(const key of keys){
-            this.$e.setAttribute(`data-card3d-${key.toLowerCase()}`, conf[key].toString());
-        }
+  setConfiguration(conf = {}) {
+    this.$e.setAttribute("data-card3d", "");
+
+    const keys = Object.keys(conf);
+    for (const key of keys) {
+      this.$e.setAttribute(
+        `data-card3d-${key.toLowerCase()}`,
+        conf[key].toString()
+      );
     }
+  }
 
-    start(resetStop = true){
-        const e = this.$e;
+  start(resetStop = true) {
+    const e = this.$e;
 
-        if(resetStop) e.removeAttribute('data-card3d-stop');
+    if (resetStop) e.removeAttribute("data-card3d-stop");
 
-        let focus = e;
-        const config = e.dataset;
+    let focus = e;
+    const config = e.dataset;
 
-        const fullPage = config.card3dFullPageListening && JSON.parse(config.card3dFullPageListening);
-        if(fullPage) focus = document.body;
+    const fullPage =
+      config.card3dFullPageListening &&
+      JSON.parse(config.card3dFullPageListening);
+    if (fullPage) focus = document.body;
 
-        const perspective = config.card3dPerspective && parseFloat(config.card3dPerspective) ? parseFloat(config.card3dPerspective) : 500;
+    const perspective =
+      config.card3dPerspective && parseFloat(config.card3dPerspective)
+        ? parseFloat(config.card3dPerspective)
+        : 500;
 
-        const startPositionX = config.card3dStartX && parseFloat(config.card3dStartX) ? parseFloat(config.card3dStartX) : 0;
-        const startPositionY = config.card3dStartY && parseFloat(config.card3dStartY) ? parseFloat(config.card3dStartY) : 0;
+    const startPositionX =
+      config.card3dStartX && parseFloat(config.card3dStartX)
+        ? parseFloat(config.card3dStartX)
+        : 0;
+    const startPositionY =
+      config.card3dStartY && parseFloat(config.card3dStartY)
+        ? parseFloat(config.card3dStartY)
+        : 0;
 
-        //glare element
-        const glare = config.card3dGlare != null && config.card3dGlare != undefined;
-        const glareOpacity = glare && parseFloat(config.card3dGlare) ? parseFloat(config.card3dGlare) : 0.5;
-        const gl = document.createElement('span');
-        gl.style = `
+    //glare element
+    const glare = config.card3dGlare != null && config.card3dGlare != undefined;
+    const glareOpacity =
+      glare && parseFloat(config.card3dGlare)
+        ? parseFloat(config.card3dGlare)
+        : 0.5;
+    const gl = document.createElement("span");
+    gl.style = `
         will-change: transform;
@@ -60,19 +79,33 @@ position: absolute;
         `;
-        e.appendChild(gl);
+    e.appendChild(gl);
 
-        this.$gl = gl;
-        this.$focus = focus;
-        this.$eventMoove = (event) => this.mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity);
-        this.$eventOut = (event) => this.mouseout(event, e, gl);
+    this.$gl = gl;
+    this.$focus = focus;
+    this.$eventMoove = (event) =>
+      this.mousemove(
+        event,
+        focus,
+        config,
+        e,
+        gl,
+        perspective,
+        glare,
+        glareOpacity
+      );
+    this.$eventOut = (event) => this.mouseout(event, e, gl);
 
-        //event setup
-        focus.addEventListener('mousemove', this.$eventMoove);
-        const reset = config.card3dReset && JSON.parse(config.card3dReset);
-        if(reset || config.card3dReset == null || config.card3dReset == undefined) {
-            focus.addEventListener('mouseout', this.$eventOut);
-        }
+    //event setup
+    focus.addEventListener("mousemove", this.$eventMoove);
+    const reset = config.card3dReset && JSON.parse(config.card3dReset);
+    if (
+      reset ||
+      config.card3dReset == null ||
+      config.card3dReset == undefined
+    ) {
+      focus.addEventListener("mouseout", this.$eventOut);
+    }
 
-        e.style.overflow = "hidden";
-        e.style.willChange = "transform";
-        e.style.transform = `
+    e.style.overflow = "hidden";
+    e.style.willChange = "transform";
+    e.style.transform = `
         perspective(500px) 
@@ -82,124 +115,136 @@ rotateX(${startPositionY}deg)
         `;
+  }
+
+  mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity) {
+    //config
+    const stopC = config.card3dStop && JSON.parse(config.card3dStop);
+
+    if (stopC || !e.isConnected || !focus.isConnected) {
+      this.stop();
+      return;
     }
 
-    mousemove(event, focus, config, e, gl, perspective, glare, glareOpacity){
-        //config
-        const stopC = config.card3dStop && JSON.parse(config.card3dStop);
-            
-        if(stopC || !e.isConnected || !focus.isConnected) {
-            this.stop();
-            return;
-        }
+    const reverse =
+      config.card3dReverse && JSON.parse(config.card3dReverse) ? 1 : -1;
+    const axis = config.card3dAxis ? config.card3dAxis : "all";
+    const scale =
+      config.card3dScale && parseFloat(config.card3dScale)
+        ? parseFloat(config.card3dScale)
+        : 1;
+    const delta =
+      config.card3dDelta && parseFloat(config.card3dDelta)
+        ? parseFloat(config.card3dDelta)
+        : 10;
+    //end
 
-        const reverse = config.card3dReverse && JSON.parse(config.card3dReverse) ? 1 : -1;
-        const axis = config.card3dAxis ? config.card3dAxis : 'all';
-        const scale = config.card3dScale && parseFloat(config.card3dScale) ? parseFloat(config.card3dScale) : 1;
-        const delta = config.card3dDelta && parseFloat(config.card3dDelta) ? parseFloat(config.card3dDelta) : 10;
-        //end
+    e.style.transition = "";
 
-        e.style.transition = "";
+    const rect = e.getBoundingClientRect();
 
-        const rect = e.getBoundingClientRect();
+    const middleWidth = rect.width / 2;
+    const middleHeight = rect.height / 2;
+    const middleX = rect.left + middleWidth;
+    const middleY = rect.top + middleHeight;
 
-        const middleWidth = rect.width / 2;
-        const middleHeight = rect.height / 2;
-        const middleX = rect.left + middleWidth;
-        const middleY = rect.top + middleHeight;
+    const x = (middleX - event.clientX) * -1;
+    const y = middleY - event.clientY;
 
-        const x = (middleX - event.clientX) * -1;
-        const y = middleY - event.clientY;
+    let finalX =
+      (x / (focus != e ? window.innerWidth / 2 : rect.width / 2)) * delta;
+    let finalY =
+      (y / (focus != e ? window.innerHeight / 2 : rect.height / 2)) * delta;
 
-        let finalX = (x/(focus != e ? window.innerWidth/2 : rect.width/2))*delta;
-        let finalY = (y/(focus != e ? window.innerHeight/2 : rect.height/2))*delta;
+    if (axis.toLowerCase() == "x") {
+      finalY = 0;
+    } else if (axis.toLowerCase() == "y") {
+      finalX = 0;
+    }
 
-        if(axis.toLowerCase() == 'x'){
-            finalY = 0;
-        } else if(axis.toLowerCase() == 'y'){
-            finalX = 0;
-        }
+    //glare
+    if (glare) {
+      const angle =
+        Math.atan2(event.clientX - middleX, -(event.clientY - middleY)) *
+        (180 / Math.PI);
+      const glareSize =
+        (rect.width > rect.height ? rect.width : rect.height) * 2;
+      gl.style.opacity = glareOpacity;
+      gl.style.left = "50%";
+      gl.style.top = "50%";
+      gl.style.width = glareSize + "px";
+      gl.style.height = glareSize + "px";
+      gl.style.transform = `rotate(${angle}deg) translate(-50%, -50%)`;
+      gl.style.display = "block";
+    }
 
-        //glare
-        if(glare){
-            const angle = Math.atan2(event.clientX - middleX, -(event.clientY - middleY)) * (180 / Math.PI);
-            const glareSize = (rect.width > rect.height ? rect.width : rect.height) * 2;
-            gl.style.opacity = glareOpacity;
-            gl.style.left = "50%";
-            gl.style.top = "50%";
-            gl.style.width = glareSize + "px";
-            gl.style.height = glareSize + "px";
-            gl.style.transform = `rotate(${angle}deg) translate(-50%, -50%)`;
-            gl.style.display = "block";
-        }
-
-        e.style.transform = `
+    e.style.transform = `
         perspective(${perspective}px) 
-        rotateX(${finalY*reverse}deg) 
-        rotateY(${finalX*reverse}deg)
+        rotateX(${finalY * reverse}deg) 
+        rotateY(${finalX * reverse}deg)
         scale(${scale})
         `;
-    }
+  }
 
-    mouseout(event, e, gl){
-        e.style.transition = "0.5s ease";
-        e.style.transform = "";
-        gl.style.opacity = "0";
-    }
+  mouseout(event, e, gl) {
+    e.style.transition = "0.5s ease";
+    e.style.transform = "";
+    gl.style.opacity = "0";
+  }
 
-    stop(){
-        this.$e.setAttribute('data-card3d-stop', 'true');
-        this.$focus.removeEventListener('mousemove', this.$eventMoove);
-        this.$focus.removeEventListener('mouseout', this.$eventMoove);
-        this.$gl.remove();
-        Card3dElements.splice(Card3dElements.indexOf(this.$e), 1);
-    }
+  stop() {
+    this.$e.setAttribute("data-card3d-stop", "true");
+    this.$focus.removeEventListener("mousemove", this.$eventMoove);
+    this.$focus.removeEventListener("mouseout", this.$eventMoove);
+    this.$gl.remove();
+    Card3dElements.splice(Card3dElements.indexOf(this.$e), 1);
+  }
 }
 
 //HANDLER ATTRIBUTE
-function Card3dAttributesHandler(){
-    let elements = document.querySelectorAll('[data-card3d]');
+function Card3dAttributesHandler() {
+  let elements = document.querySelectorAll("[data-card3d]");
 
-    elements.forEach(function(el){
-        if(Card3dElements.indexOf(el) != -1 || !el.getAttribute) {
-            return;
-        }
+  elements.forEach(function (el) {
+    if (Card3dElements.indexOf(el) != -1 || !el.getAttribute) {
+      return;
+    }
 
-        try{
-            const stopC = el.dataset.card3dStop && JSON.parse(el.dataset.card3dStop);
-            if(stopC) return;
-            new Card3d(el);
-        } catch(e) {}
-    });
+    try {
+      const stopC = el.dataset.card3dStop && JSON.parse(el.dataset.card3dStop);
+      if (stopC) return;
+      new Card3d(el);
+    } catch (e) {}
+  });
 }
 
 //OBSERVER
-function Card3dObserver(){
-    function getMutationObserver() {
-        return (
-          window.MutationObserver ||
-          window.WebKitMutationObserver ||
-          window.MozMutationObserver
-        );
-    }
+function Card3dObserver() {
+  function getMutationObserver() {
+    return (
+      window.MutationObserver ||
+      window.WebKitMutationObserver ||
+      window.MozMutationObserver
+    );
+  }
 
-    const MutationObserver = getMutationObserver();
+  const MutationObserver = getMutationObserver();
 
-    const observerDOM = new MutationObserver(function(mutations){
-        if (!mutations) return;
-        Card3dAttributesHandler();
-    });
+  const observerDOM = new MutationObserver(function (mutations) {
+    if (!mutations) return;
+    Card3dAttributesHandler();
+  });
 
-    observerDOM.observe(window.document.documentElement, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        removedNodes: true
-    });
+  observerDOM.observe(window.document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    removedNodes: true,
+  });
 }
 
 //DOM LOADED
-document.addEventListener('DOMContentLoaded', function(){
-    Card3dObserver();
-    Card3dAttributesHandler();
+document.addEventListener("DOMContentLoaded", function () {
+  Card3dObserver();
+  Card3dAttributesHandler();
 });
 
-if (typeof exports == "object") module.exports = Card3d;
+export default Card3d;

No alert changes

Improved metrics

Lines of code

503

10.07%

Worsened metrics

Total package byte prevSize

50861

-98.64%

Dev dependency count

5

66.67%

Number of lines in readme file

6

-88.46%

No dependency changes