node-marquee - npm Package Compare versions

Comparing version 2.0.3 to 2.0.7

dist/cdn/index.js

@@ -11,2 +11,2 @@ /*
 */
-!function(e){var n={};function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:i})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(t.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(i,r,function(n){return e[n]}.bind(null,r));return i},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/",t(t.s=0)}([function(e,n,t){"use strict";function i(e){return e instanceof HTMLElement||e instanceof Element}function r(e,n){if(e instanceof Window)return e;if(i(e))return e;if(void 0!==n){const t=r(n);if(t)return t.querySelector(e)}return document.querySelector(e)}t.r(n),window.nodeMarquee=function(e={}){const n="node-marquee",t=r((e=Object.assign({selector:".node-marquee",speed:1,autoplay:!0,pauseOnHover:!1,applyOuterStyles:!0},e)).selector);if(!i(t))return!1;t.classList.add(n);let o=t.innerHTML,s=0,u=[],l=0,c=!1,d=!1;const a=b.bind(this),f=function(){e.pauseOnHover&&O()}.bind(this),p=function(){e.pauseOnHover&&L()}.bind(this);b();let y=!1;function b(){v(),s=0,u=[],t.innerHTML="",e.applyOuterStyles&&(t.style.position="relative",t.style.width="100%",t.style.overflow="hidden",t.style.whiteSpace="nowrap");let n=m().clientWidth;n<=0&&(n=window.innerWidth),n<t.clientWidth&&(s=Math.ceil(1.5*t.clientWidth/n)),s<4&&(s=4);for(let e=0;e<s-1;e++)m(!0,!0);w(),function(){const e={childList:!0};d=new MutationObserver(e=>{for(const n of e)"childList"===n.type&&(o=t.innerHTML,b())}),d.observe(t,e)}()}function m(e=!1,n=!1){const i=document.createElement("div");return i.classList.add("node-marquee__el"),i.innerHTML=n?"&nbsp;"+o:o,e&&(i.style.position="absolute",i.style.top="0",i.style.left="0"),i.style.display="inline-block",t.appendChild(i),u.push(i),i}function v(){d&&d.disconnect()}function h(){w(),c&&(y=window.requestAnimationFrame(h.bind(this)))}function w(n=e.speed){l+=n;let t=!1,i=0;for(let e=0;e<s;e++){const n=u[e],r=i-l;i+=n.clientWidth,n.style.transform=`translate(${r}px, 0)`,r<-1*n.clientWidth&&(t=n)}t&&(u.push(u.splice(u.indexOf(t),1)[0]),l-=t.clientWidth)}function L(){y||(c=!0,y=window.requestAnimationFrame(h.bind(this)))}function O(){c=!1,y&&(window.cancelAnimationFrame(y),y=!1)}return e.autoplay&&L(),window.addEventListener("resize",a,!1),t.addEventListener("mouseenter",f,!1),t.addEventListener("mouseleave",p,!1),{play:L.bind(this),pause:O.bind(this),isPlaying:()=>c,render:w.bind(this),recreate:b.bind(this),destroy:function(){O(),v(),window.removeEventListener("resize",a,!1),t.removeEventListener("mouseenter",f,!1),t.removeEventListener("mouseleave",p,!1),t.innerHTML=o}.bind(this)}}}]);
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=0)}([function(e,t,n){"use strict";function i(e){return e instanceof HTMLElement||e instanceof Element}function o(e,t){if(e instanceof Window)return e;if(i(e))return e;if(void 0!==t){const n=o(t);if(n)return n.querySelector(e)}return document.querySelector(e)}n.r(t);const r=[];function s(e,t,n,i){if(void 0!==i){const o={passive:!1,once:!1};i.once&&(o.once=!0),i.passive&&(o.passive=!0),e.addEventListener(t,n,o)}else e.addEventListener(t,n);const o=`${Math.random()}-${+new Date}`;return r.push({id:o,el:e,target:t,callback:n}),{id:o,remove:l.bind(this,o)}}function l(e){const t=[];for(let n=0,i=r.length;n<i;n++){const i=r[n];i.id===e?i.el.removeEventListener(i.target,i.callback):t.push(i)}}window.nodeMarquee=function(e={}){const t="node-marquee";let n=!1;const r=o((e=Object.assign({selector:".node-marquee",speed:1,autoplay:!0,pauseOnHover:!1,applyOuterStyles:!0,optimizeCalculation:!1},e)).selector);if(!i(r))return!1;r.classList.add(t);let l=r.innerHTML,c=0,u=[],a=[],d=0,f=!1,p=!1;v();let m=!1;e.autoplay&&S();const h=s(window,"resize",v.bind(this)),y=s(r,"mouseenter",function(){e.pauseOnHover&&W()}.bind(this)),b=s(r,"mouseleave",function(){e.pauseOnHover&&S()}.bind(this));function v(){O(),c=0,u=[],a=[],r.innerHTML="",e.applyOuterStyles&&(r.style.position="relative",r.style.width="100%",r.style.overflow="hidden",r.style.whiteSpace="nowrap");let t=w().clientWidth;t<=0&&(t=window.innerWidth),t<r.clientWidth&&(c=Math.ceil(1.5*r.clientWidth/t)),c<4&&(c=4);for(let e=0;e<c-1;e++)w(!0,!0);g(),L(),function(){const e={childList:!0};p=new MutationObserver(e=>{for(const t of e)"childList"===t.type&&(l=r.innerHTML,v())}),p.observe(r,e)}(),e.optimizeCalculation&&setTimeout(()=>{g()},500)}function w(e=!1,t=!1){const n=document.createElement("div");return n.classList.add("node-marquee__el"),n.innerHTML=t?"&nbsp;"+l:l,e&&(n.style.position="absolute",n.style.top="0",n.style.left="0"),n.style.display="inline-block",r.appendChild(n),u.push(n),n}function O(){p&&p.disconnect()}function M(){L(),f&&(m=window.requestAnimationFrame(M.bind(this)))}function L(t=e.speed){d+=t;let n=!1,i=0,o=0;for(let t=0;t<c;t++){const r=u[t];e.optimizeCalculation||(a[t]=r.clientWidth);const s=a[t],l=o-d;o+=s,r.style.transform=`matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${l}, 0, 0,1)`,l<-1*s&&(n=r,i=t)}n&&(u.push(u.splice(u.indexOf(n),1)[0]),d-=e.optimizeCalculation?a[i]:n.clientWidth,e.optimizeCalculation&&g())}function g(){if(!n)for(let e=0;e<c;e++){let t=u[e].clientWidth;t=u[e].clientWidth,t<=0&&(t=window.innerWidth),a[e]=t}}function S(){m||(f=!0,m=window.requestAnimationFrame(M.bind(this)))}function W(){f=!1,m&&(window.cancelAnimationFrame(m),m=!1)}return{play:S.bind(this),pause:W.bind(this),isPlaying:()=>f,render:L.bind(this),recreate:v.bind(this),updateSizes:g.bind(this),destroy:function(){n=!0,W(),O(),h.remove(),y.remove(),b.remove(),r.innerHTML=l}.bind(this)}}}]);

dist/cjs/index.js

@@ -10,2 +10,3 @@ "use strict";
     var className = 'node-marquee';
+    var destroyed = false;
     // default properties
@@ -18,2 +19,3 @@ var DEFAULT_PROP = {
         applyOuterStyles: true,
+        optimizeCalculation: false,
     };
@@ -35,2 +37,3 @@ // extend properties
     var elements = [];
+    var elementsWidth = [];
     // vars
@@ -43,5 +46,2 @@ var translateX = 0;
     var observer = false;
-    var RESIZE_LISTENER_FUNCTION = createMarquee.bind(this);
-    var MOUSE_ENTER_LISTENER_FUNCTION = onMouseEnter.bind(this);
-    var MOUSE_LEAVE_LISTENER_FUNCTION = onMouseLeave.bind(this);
     // create the marquee element
@@ -55,5 +55,5 @@ createMarquee();
     // set events
-    window.addEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+    var RESIZE_LISTENER = vevet_dom_1.addEventListener(window, 'resize', createMarquee.bind(this));
+    var MOUSEENTER_LISTENER = vevet_dom_1.addEventListener(OUTER, 'mouseenter', onMouseEnter.bind(this));
+    var MOUSELEAVE_LISTENER = vevet_dom_1.addEventListener(OUTER, 'mouseleave', onMouseLeave.bind(this));
     // Create the marquee element
@@ -66,2 +66,3 @@ function createMarquee() {
         elements = [];
+        elementsWidth = [];
         OUTER.innerHTML = '';
@@ -77,10 +78,10 @@ // apply styles to the outer
         var firstEl = createElement();
+        var firstElWidth = firstEl.clientWidth;
+        if (firstElWidth <= 0) {
+            firstElWidth = window.innerWidth;
+        }
         // calculate how much elements we need to create in addition to the first one
-        var width = firstEl.clientWidth;
-        if (width <= 0) {
-            width = window.innerWidth;
+        if (firstElWidth < OUTER.clientWidth) {
+            quantity = Math.ceil(OUTER.clientWidth * 1.5 / firstElWidth);
         }
-        if (width < OUTER.clientWidth) {
-            quantity = Math.ceil(OUTER.clientWidth * 1.5 / width);
-        }
         if (quantity < MIN_AMOUNT) {
@@ -93,2 +94,4 @@ quantity = MIN_AMOUNT;
         }
+        // update sizes of the elements
+        updateSizes();
         // render
@@ -98,2 +101,8 @@ renderElements();
         observeMutations();
+        // and to be sure, update sizes once more
+        if (prop.optimizeCalculation) {
+            setTimeout(function () {
+                updateSizes();
+            }, 500);
+        }
     }
@@ -174,10 +183,20 @@ function createElement(absolutePosition, appendWhitespace) {
         var moveToEnd = false;
+        var moveToEndIndex = 0;
         var w = 0;
+        // render elements
         for (var i = 0; i < quantity; i++) {
             var el = elements[i];
-            var t = w - translateX;
-            w += el.clientWidth;
-            el.style.transform = "translate(" + t + "px, 0)";
-            if (t < el.clientWidth * -1) {
+            // get width of the current element
+            if (!prop.optimizeCalculation) {
+                elementsWidth[i] = el.clientWidth;
+            }
+            var elWidth = elementsWidth[i];
+            // calulate transforms
+            var x = w - translateX;
+            w += elWidth;
+            // apply transforms
+            el.style.transform = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, " + x + ", 0, 0,1)";
+            if (x < elWidth * -1) {
                 moveToEnd = el;
+                moveToEndIndex = i;
             }
@@ -187,5 +206,22 @@ }
             elements.push(elements.splice(elements.indexOf(moveToEnd), 1)[0]);
-            translateX -= moveToEnd.clientWidth;
+            translateX -= prop.optimizeCalculation ? elementsWidth[moveToEndIndex] : moveToEnd.clientWidth;
+            if (prop.optimizeCalculation) {
+                updateSizes();
+            }
         }
     }
+    // Update elements' width
+    function updateSizes() {
+        if (destroyed) {
+            return;
+        }
+        for (var i = 0; i < quantity; i++) {
+            var width = elements[i].clientWidth;
+            width = elements[i].clientWidth;
+            if (width <= 0) {
+                width = window.innerWidth;
+            }
+            elementsWidth[i] = width;
+        }
+    }
     // Start the animation frame
@@ -208,7 +244,8 @@ function play() {
     function destroy() {
+        destroyed = true;
         pause();
         disconnectMutationsObserver();
-        window.removeEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+        RESIZE_LISTENER.remove();
+        MOUSEENTER_LISTENER.remove();
+        MOUSELEAVE_LISTENER.remove();
         OUTER.innerHTML = text;
@@ -222,2 +259,3 @@ }
         recreate: createMarquee.bind(this),
+        updateSizes: updateSizes.bind(this),
         destroy: destroy.bind(this),
@@ -224,0 +262,0 @@ };

dist/es/index.js

@@ -1,2 +0,2 @@
-import { selectOne, isElement } from 'vevet-dom';
+import { selectOne, isElement, addEventListener } from 'vevet-dom';
 /**
@@ -7,2 +7,3 @@ * Custom Marquee
     const className = 'node-marquee';
+    let destroyed = false;
     // default properties
@@ -15,2 +16,3 @@ const DEFAULT_PROP = {
         applyOuterStyles: true,
+        optimizeCalculation: false,
     };
@@ -32,2 +34,3 @@ // extend properties
     let elements = [];
+    let elementsWidth = [];
     // vars
@@ -40,5 +43,2 @@ let translateX = 0;
     let observer = false;
-    const RESIZE_LISTENER_FUNCTION = createMarquee.bind(this);
-    const MOUSE_ENTER_LISTENER_FUNCTION = onMouseEnter.bind(this);
-    const MOUSE_LEAVE_LISTENER_FUNCTION = onMouseLeave.bind(this);
     // create the marquee element
@@ -52,5 +52,5 @@ createMarquee();
     // set events
-    window.addEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+    const RESIZE_LISTENER = addEventListener(window, 'resize', createMarquee.bind(this));
+    const MOUSEENTER_LISTENER = addEventListener(OUTER, 'mouseenter', onMouseEnter.bind(this));
+    const MOUSELEAVE_LISTENER = addEventListener(OUTER, 'mouseleave', onMouseLeave.bind(this));
     // Create the marquee element
@@ -63,2 +63,3 @@ function createMarquee() {
         elements = [];
+        elementsWidth = [];
         OUTER.innerHTML = '';
@@ -74,10 +75,10 @@ // apply styles to the outer
         const firstEl = createElement();
+        let firstElWidth = firstEl.clientWidth;
+        if (firstElWidth <= 0) {
+            firstElWidth = window.innerWidth;
+        }
         // calculate how much elements we need to create in addition to the first one
-        let width = firstEl.clientWidth;
-        if (width <= 0) {
-            width = window.innerWidth;
+        if (firstElWidth < OUTER.clientWidth) {
+            quantity = Math.ceil(OUTER.clientWidth * 1.5 / firstElWidth);
         }
-        if (width < OUTER.clientWidth) {
-            quantity = Math.ceil(OUTER.clientWidth * 1.5 / width);
-        }
         if (quantity < MIN_AMOUNT) {
@@ -90,2 +91,4 @@ quantity = MIN_AMOUNT;
         }
+        // update sizes of the elements
+        updateSizes();
         // render
@@ -95,2 +98,8 @@ renderElements();
         observeMutations();
+        // and to be sure, update sizes once more
+        if (prop.optimizeCalculation) {
+            setTimeout(() => {
+                updateSizes();
+            }, 500);
+        }
     }
@@ -167,10 +176,20 @@ function createElement(absolutePosition = false, appendWhitespace = false) {
         let moveToEnd = false;
+        let moveToEndIndex = 0;
         let w = 0;
+        // render elements
         for (let i = 0; i < quantity; i++) {
             const el = elements[i];
-            const t = w - translateX;
-            w += el.clientWidth;
-            el.style.transform = `translate(${t}px, 0)`;
-            if (t < el.clientWidth * -1) {
+            // get width of the current element
+            if (!prop.optimizeCalculation) {
+                elementsWidth[i] = el.clientWidth;
+            }
+            const elWidth = elementsWidth[i];
+            // calulate transforms
+            const x = w - translateX;
+            w += elWidth;
+            // apply transforms
+            el.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, 0, 0,1)`;
+            if (x < elWidth * -1) {
                 moveToEnd = el;
+                moveToEndIndex = i;
             }
@@ -180,5 +199,22 @@ }
             elements.push(elements.splice(elements.indexOf(moveToEnd), 1)[0]);
-            translateX -= moveToEnd.clientWidth;
+            translateX -= prop.optimizeCalculation ? elementsWidth[moveToEndIndex] : moveToEnd.clientWidth;
+            if (prop.optimizeCalculation) {
+                updateSizes();
+            }
         }
     }
+    // Update elements' width
+    function updateSizes() {
+        if (destroyed) {
+            return;
+        }
+        for (let i = 0; i < quantity; i++) {
+            let width = elements[i].clientWidth;
+            width = elements[i].clientWidth;
+            if (width <= 0) {
+                width = window.innerWidth;
+            }
+            elementsWidth[i] = width;
+        }
+    }
     // Start the animation frame
@@ -201,7 +237,8 @@ function play() {
     function destroy() {
+        destroyed = true;
         pause();
         disconnectMutationsObserver();
-        window.removeEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+        RESIZE_LISTENER.remove();
+        MOUSEENTER_LISTENER.remove();
+        MOUSELEAVE_LISTENER.remove();
         OUTER.innerHTML = text;
@@ -215,4 +252,5 @@ }
         recreate: createMarquee.bind(this),
+        updateSizes: updateSizes.bind(this),
         destroy: destroy.bind(this),
     };
 }

dist/types/types.d.ts

@@ -27,2 +27,13 @@ export interface NodeMarqueeProp {
     applyOuterStyles?: boolean;
+    /**
+     * By default, the script copies the text and moves it. To calculate the transformations,
+     * it needs to know the width of each element.
+     * This very width is calculated with each animation frame
+     * and in some cases may influence performance.
+     * If you want to avoid this, set the property as "true", and it won't recalculate
+     * styles with each frame, though when changing styles of the marquee (f.e., font-size),
+     * the marquee must be manually recreated.
+     * @default false
+     */
+    optimizeCalculation?: boolean;
 }
@@ -51,2 +62,6 @@ export interface NodeMarquee {
     /**
+     * Update sizes of the marquee (manually)
+     */
+    updateSizes: () => void;
+    /**
      * Destroy the marquee
@@ -53,0 +68,0 @@ */

docs/assets/js/search.json

@@ -1,1 +0,1 @@
-{"kinds":{"1":"Module","64":"Function","256":"Interface","1024":"Property","65536":"Type literal"},"rows":[{"id":0,"kind":1,"name":"\"types\"","url":"modules/_types_.html","classes":"tsd-kind-module"},{"id":1,"kind":256,"name":"NodeMarqueeProp","url":"interfaces/_types_.nodemarqueeprop.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"\"types\""},{"id":2,"kind":1024,"name":"selector","url":"interfaces/_types_.nodemarqueeprop.html#selector","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":3,"kind":1024,"name":"speed","url":"interfaces/_types_.nodemarqueeprop.html#speed","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":4,"kind":1024,"name":"autoplay","url":"interfaces/_types_.nodemarqueeprop.html#autoplay","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":5,"kind":1024,"name":"pauseOnHover","url":"interfaces/_types_.nodemarqueeprop.html#pauseonhover","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":6,"kind":1024,"name":"applyOuterStyles","url":"interfaces/_types_.nodemarqueeprop.html#applyouterstyles","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":7,"kind":256,"name":"NodeMarquee","url":"interfaces/_types_.nodemarquee.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"\"types\""},{"id":8,"kind":1024,"name":"play","url":"interfaces/_types_.nodemarquee.html#play","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":9,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#play.__type-3","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.play"},{"id":10,"kind":1024,"name":"pause","url":"interfaces/_types_.nodemarquee.html#pause","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":11,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#pause.__type-2","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.pause"},{"id":12,"kind":1024,"name":"isPlaying","url":"interfaces/_types_.nodemarquee.html#isplaying","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":13,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#isplaying.__type-1","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.isPlaying"},{"id":14,"kind":1024,"name":"render","url":"interfaces/_types_.nodemarquee.html#render","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":15,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#render.__type-5","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.render"},{"id":16,"kind":1024,"name":"recreate","url":"interfaces/_types_.nodemarquee.html#recreate","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":17,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#recreate.__type-4","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.recreate"},{"id":18,"kind":1024,"name":"destroy","url":"interfaces/_types_.nodemarquee.html#destroy","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":19,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#destroy.__type","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.destroy"},{"id":20,"kind":1,"name":"\"index\"","url":"modules/_index_.html","classes":"tsd-kind-module"},{"id":21,"kind":64,"name":"nodeMarquee","url":"modules/_index_.html#nodemarquee","classes":"tsd-kind-function tsd-parent-kind-module","parent":"\"index\""}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,18.827]],["parent/0",[]],["name/1",[1,27.3]],["parent/1",[0,1.809]],["name/2",[2,27.3]],["parent/2",[3,1.375]],["name/3",[4,27.3]],["parent/3",[3,1.375]],["name/4",[5,27.3]],["parent/4",[3,1.375]],["name/5",[6,27.3]],["parent/5",[3,1.375]],["name/6",[7,27.3]],["parent/6",[3,1.375]],["name/7",[8,22.192]],["parent/7",[0,1.809]],["name/8",[9,27.3]],["parent/8",[10,1.214]],["name/9",[11,12.637]],["parent/9",[12,2.623]],["name/10",[13,27.3]],["parent/10",[10,1.214]],["name/11",[11,12.637]],["parent/11",[14,2.623]],["name/12",[15,27.3]],["parent/12",[10,1.214]],["name/13",[11,12.637]],["parent/13",[16,2.623]],["name/14",[17,27.3]],["parent/14",[10,1.214]],["name/15",[11,12.637]],["parent/15",[18,2.623]],["name/16",[19,27.3]],["parent/16",[10,1.214]],["name/17",[11,12.637]],["parent/17",[20,2.623]],["name/18",[21,27.3]],["parent/18",[10,1.214]],["name/19",[11,12.637]],["parent/19",[22,2.623]],["name/20",[23,22.192]],["parent/20",[]],["name/21",[8,22.192]],["parent/21",[23,2.132]]],"invertedIndex":[["__type",{"_index":11,"name":{"9":{},"11":{},"13":{},"15":{},"17":{},"19":{}},"parent":{}}],["applyouterstyles",{"_index":7,"name":{"6":{}},"parent":{}}],["autoplay",{"_index":5,"name":{"4":{}},"parent":{}}],["destroy",{"_index":21,"name":{"18":{}},"parent":{}}],["index",{"_index":23,"name":{"20":{}},"parent":{"21":{}}}],["isplaying",{"_index":15,"name":{"12":{}},"parent":{}}],["nodemarquee",{"_index":8,"name":{"7":{},"21":{}},"parent":{}}],["nodemarqueeprop",{"_index":1,"name":{"1":{}},"parent":{}}],["pause",{"_index":13,"name":{"10":{}},"parent":{}}],["pauseonhover",{"_index":6,"name":{"5":{}},"parent":{}}],["play",{"_index":9,"name":{"8":{}},"parent":{}}],["recreate",{"_index":19,"name":{"16":{}},"parent":{}}],["render",{"_index":17,"name":{"14":{}},"parent":{}}],["selector",{"_index":2,"name":{"2":{}},"parent":{}}],["speed",{"_index":4,"name":{"3":{}},"parent":{}}],["types",{"_index":0,"name":{"0":{}},"parent":{"1":{},"7":{}}}],["types\".nodemarquee",{"_index":10,"name":{},"parent":{"8":{},"10":{},"12":{},"14":{},"16":{},"18":{}}}],["types\".nodemarquee.destroy",{"_index":22,"name":{},"parent":{"19":{}}}],["types\".nodemarquee.isplaying",{"_index":16,"name":{},"parent":{"13":{}}}],["types\".nodemarquee.pause",{"_index":14,"name":{},"parent":{"11":{}}}],["types\".nodemarquee.play",{"_index":12,"name":{},"parent":{"9":{}}}],["types\".nodemarquee.recreate",{"_index":20,"name":{},"parent":{"17":{}}}],["types\".nodemarquee.render",{"_index":18,"name":{},"parent":{"15":{}}}],["types\".nodemarqueeprop",{"_index":3,"name":{},"parent":{"2":{},"3":{},"4":{},"5":{},"6":{}}}]],"pipeline":[]}}
+{"kinds":{"1":"Module","64":"Function","256":"Interface","1024":"Property","65536":"Type literal"},"rows":[{"id":0,"kind":1,"name":"\"types\"","url":"modules/_types_.html","classes":"tsd-kind-module"},{"id":1,"kind":256,"name":"NodeMarqueeProp","url":"interfaces/_types_.nodemarqueeprop.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"\"types\""},{"id":2,"kind":1024,"name":"selector","url":"interfaces/_types_.nodemarqueeprop.html#selector","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":3,"kind":1024,"name":"speed","url":"interfaces/_types_.nodemarqueeprop.html#speed","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":4,"kind":1024,"name":"autoplay","url":"interfaces/_types_.nodemarqueeprop.html#autoplay","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":5,"kind":1024,"name":"pauseOnHover","url":"interfaces/_types_.nodemarqueeprop.html#pauseonhover","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":6,"kind":1024,"name":"applyOuterStyles","url":"interfaces/_types_.nodemarqueeprop.html#applyouterstyles","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":7,"kind":1024,"name":"optimizeCalculation","url":"interfaces/_types_.nodemarqueeprop.html#optimizecalculation","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarqueeProp"},{"id":8,"kind":256,"name":"NodeMarquee","url":"interfaces/_types_.nodemarquee.html","classes":"tsd-kind-interface tsd-parent-kind-module","parent":"\"types\""},{"id":9,"kind":1024,"name":"play","url":"interfaces/_types_.nodemarquee.html#play","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":10,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#play.__type-3","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.play"},{"id":11,"kind":1024,"name":"pause","url":"interfaces/_types_.nodemarquee.html#pause","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":12,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#pause.__type-2","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.pause"},{"id":13,"kind":1024,"name":"isPlaying","url":"interfaces/_types_.nodemarquee.html#isplaying","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":14,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#isplaying.__type-1","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.isPlaying"},{"id":15,"kind":1024,"name":"render","url":"interfaces/_types_.nodemarquee.html#render","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":16,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#render.__type-5","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.render"},{"id":17,"kind":1024,"name":"recreate","url":"interfaces/_types_.nodemarquee.html#recreate","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":18,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#recreate.__type-4","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.recreate"},{"id":19,"kind":1024,"name":"updateSizes","url":"interfaces/_types_.nodemarquee.html#updatesizes","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":20,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#updatesizes.__type-6","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.updateSizes"},{"id":21,"kind":1024,"name":"destroy","url":"interfaces/_types_.nodemarquee.html#destroy","classes":"tsd-kind-property tsd-parent-kind-interface","parent":"\"types\".NodeMarquee"},{"id":22,"kind":65536,"name":"__type","url":"interfaces/_types_.nodemarquee.html#destroy.__type","classes":"tsd-kind-type-literal tsd-parent-kind-property","parent":"\"types\".NodeMarquee.destroy"},{"id":23,"kind":1,"name":"\"index\"","url":"modules/_index_.html","classes":"tsd-kind-module"},{"id":24,"kind":64,"name":"nodeMarquee","url":"modules/_index_.html#nodemarquee","classes":"tsd-kind-function tsd-parent-kind-module","parent":"\"index\""}],"index":{"version":"2.3.9","fields":["name","parent"],"fieldVectors":[["name/0",[0,20.053]],["parent/0",[]],["name/1",[1,28.526]],["parent/1",[0,1.936]],["name/2",[2,28.526]],["parent/2",[3,1.339]],["name/3",[4,28.526]],["parent/3",[3,1.339]],["name/4",[5,28.526]],["parent/4",[3,1.339]],["name/5",[6,28.526]],["parent/5",[3,1.339]],["name/6",[7,28.526]],["parent/6",[3,1.339]],["name/7",[8,28.526]],["parent/7",[3,1.339]],["name/8",[9,23.418]],["parent/8",[0,1.936]],["name/9",[10,28.526]],["parent/9",[11,1.2]],["name/10",[12,12.432]],["parent/10",[13,2.755]],["name/11",[14,28.526]],["parent/11",[11,1.2]],["name/12",[12,12.432]],["parent/12",[15,2.755]],["name/13",[16,28.526]],["parent/13",[11,1.2]],["name/14",[12,12.432]],["parent/14",[17,2.755]],["name/15",[18,28.526]],["parent/15",[11,1.2]],["name/16",[12,12.432]],["parent/16",[19,2.755]],["name/17",[20,28.526]],["parent/17",[11,1.2]],["name/18",[12,12.432]],["parent/18",[21,2.755]],["name/19",[22,28.526]],["parent/19",[11,1.2]],["name/20",[12,12.432]],["parent/20",[23,2.755]],["name/21",[24,28.526]],["parent/21",[11,1.2]],["name/22",[12,12.432]],["parent/22",[25,2.755]],["name/23",[26,23.418]],["parent/23",[]],["name/24",[9,23.418]],["parent/24",[26,2.261]]],"invertedIndex":[["__type",{"_index":12,"name":{"10":{},"12":{},"14":{},"16":{},"18":{},"20":{},"22":{}},"parent":{}}],["applyouterstyles",{"_index":7,"name":{"6":{}},"parent":{}}],["autoplay",{"_index":5,"name":{"4":{}},"parent":{}}],["destroy",{"_index":24,"name":{"21":{}},"parent":{}}],["index",{"_index":26,"name":{"23":{}},"parent":{"24":{}}}],["isplaying",{"_index":16,"name":{"13":{}},"parent":{}}],["nodemarquee",{"_index":9,"name":{"8":{},"24":{}},"parent":{}}],["nodemarqueeprop",{"_index":1,"name":{"1":{}},"parent":{}}],["optimizecalculation",{"_index":8,"name":{"7":{}},"parent":{}}],["pause",{"_index":14,"name":{"11":{}},"parent":{}}],["pauseonhover",{"_index":6,"name":{"5":{}},"parent":{}}],["play",{"_index":10,"name":{"9":{}},"parent":{}}],["recreate",{"_index":20,"name":{"17":{}},"parent":{}}],["render",{"_index":18,"name":{"15":{}},"parent":{}}],["selector",{"_index":2,"name":{"2":{}},"parent":{}}],["speed",{"_index":4,"name":{"3":{}},"parent":{}}],["types",{"_index":0,"name":{"0":{}},"parent":{"1":{},"8":{}}}],["types\".nodemarquee",{"_index":11,"name":{},"parent":{"9":{},"11":{},"13":{},"15":{},"17":{},"19":{},"21":{}}}],["types\".nodemarquee.destroy",{"_index":25,"name":{},"parent":{"22":{}}}],["types\".nodemarquee.isplaying",{"_index":17,"name":{},"parent":{"14":{}}}],["types\".nodemarquee.pause",{"_index":15,"name":{},"parent":{"12":{}}}],["types\".nodemarquee.play",{"_index":13,"name":{},"parent":{"10":{}}}],["types\".nodemarquee.recreate",{"_index":21,"name":{},"parent":{"18":{}}}],["types\".nodemarquee.render",{"_index":19,"name":{},"parent":{"16":{}}}],["types\".nodemarquee.updatesizes",{"_index":23,"name":{},"parent":{"20":{}}}],["types\".nodemarqueeprop",{"_index":3,"name":{},"parent":{"2":{},"3":{},"4":{},"5":{},"6":{},"7":{}}}],["updatesizes",{"_index":22,"name":{"19":{}},"parent":{}}]],"pipeline":[]}}

package.json

 {
   "name": "node-marquee",
-  "version": "2.0.3",
+  "version": "2.0.7",
   "description": "Custom Marquee element",
@@ -8,3 +8,3 @@ "scripts": {
     "prepare": "npm version patch && npm run prepare:all && npm run docs && npm run demo-build",
-    "docs": "typedoc --out docs ./src/ts --theme default --hideGenerator",
+    "docs": "typedoc --out docs ./src/ts --excludeNotExported --plugin typedoc-plugin-nojekyll",
     "prepare:all": "npm run prepare:es && npm run prepare:cjs && npm run prepare:cdn",
@@ -64,2 +64,3 @@ "prepare:es": "tsc ./src/ts/index.ts --allowJs true --outDir ./dist/es --target es6 --moduleResolution node --declaration true --declarationDir ./dist/types --declarationMap true",
     "typedoc": "^0.18.0",
+    "typedoc-plugin-nojekyll": "^1.0.1",
     "typescript": "^4.0.2",
@@ -73,4 +74,4 @@ "webpack": "^4.44.1",
   "dependencies": {
-    "vevet-dom": "0.0.4"
+    "vevet-dom": "0.0.15"
   }
 }

src/ts/index.ts

@@ -1,2 +0,2 @@
-import { selectOne, isElement } from 'vevet-dom';
+import { selectOne, isElement, addEventListener } from 'vevet-dom';
 import { NodeMarqueeProp, NodeMarquee } from './types';
@@ -19,2 +19,3 @@
     const className = 'node-marquee';
+    let destroyed = false;
 
@@ -28,2 +29,3 @@ // default properties
         applyOuterStyles: true,
+        optimizeCalculation: false,
     };
@@ -52,2 +54,3 @@ // extend properties
     let elements: HTMLElement[] = [];
+    let elementsWidth: number[] = [];
 
@@ -63,5 +66,2 @@ // vars
     let observer: false | MutationObserver = false;
-    const RESIZE_LISTENER_FUNCTION = createMarquee.bind(this);
-    const MOUSE_ENTER_LISTENER_FUNCTION = onMouseEnter.bind(this);
-    const MOUSE_LEAVE_LISTENER_FUNCTION = onMouseLeave.bind(this);
 
@@ -82,5 +82,5 @@
     // set events
-    window.addEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-    OUTER.addEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+    const RESIZE_LISTENER = addEventListener(window, 'resize', createMarquee.bind(this));
+    const MOUSEENTER_LISTENER = addEventListener(OUTER, 'mouseenter', onMouseEnter.bind(this));
+    const MOUSELEAVE_LISTENER = addEventListener(OUTER, 'mouseleave', onMouseLeave.bind(this));
 
@@ -98,2 +98,3 @@
         elements = [];
+        elementsWidth = [];
         OUTER.innerHTML = '';
@@ -111,11 +112,10 @@
         const firstEl = createElement();
-
+        let firstElWidth = firstEl.clientWidth;
+        if (firstElWidth <= 0) {
+            firstElWidth = window.innerWidth;
+        }
         // calculate how much elements we need to create in addition to the first one
-        let width = firstEl.clientWidth;
-        if (width <= 0) {
-            width = window.innerWidth;
+        if (firstElWidth < OUTER.clientWidth) {
+            quantity = Math.ceil(OUTER.clientWidth * 1.5 / firstElWidth);
         }
-        if (width < OUTER.clientWidth) {
-            quantity = Math.ceil(OUTER.clientWidth * 1.5 / width);
-        }
         if (quantity < MIN_AMOUNT) {
@@ -129,2 +129,5 @@ quantity = MIN_AMOUNT;
 
+        // update sizes of the elements
+        updateSizes();
+
         // render
@@ -136,2 +139,9 @@ renderElements();
 
+        // and to be sure, update sizes once more
+        if (prop.optimizeCalculation) {
+            setTimeout(() => {
+                updateSizes();
+            }, 500);
+        }
+
     }
@@ -241,4 +251,6 @@
         let moveToEnd: (HTMLElement | false) = false;
+        let moveToEndIndex = 0;
 
         let w = 0;
+        // render elements
         for (let i = 0; i < quantity; i++) {
@@ -248,8 +260,17 @@
 
-            const t = w - translateX;
-            w += el.clientWidth;
+            // get width of the current element
+            if (!prop.optimizeCalculation) {
+                elementsWidth[i] = el.clientWidth;
+            }
+            const elWidth = elementsWidth[i];
 
-            el.style.transform = `translate(${t}px, 0)`;
-            if (t < el.clientWidth * -1) {
+            // calulate transforms
+            const x = w - translateX;
+            w += elWidth;
+
+            // apply transforms
+            el.style.transform = `matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ${x}, 0, 0,1)`;
+            if (x < elWidth * -1) {
                 moveToEnd = el;
+                moveToEndIndex = i;
             }
@@ -261,3 +282,6 @@
             elements.push(elements.splice(elements.indexOf(moveToEnd), 1)[0]);
-            translateX -= moveToEnd.clientWidth;
+            translateX -= prop.optimizeCalculation ? elementsWidth[moveToEndIndex] : moveToEnd.clientWidth;
+            if (prop.optimizeCalculation) {
+                updateSizes();
+            }
         }
@@ -267,4 +291,22 @@
 
+    // Update elements' width
+    function updateSizes () {
 
+        if (destroyed) {
+            return;
+        }
 
+        for (let i = 0; i < quantity; i++) {
+            let width = elements[i].clientWidth;
+            width = elements[i].clientWidth;
+            if (width <= 0) {
+                width = window.innerWidth;
+            }
+            elementsWidth[i] = width;
+        }
+
+    }
+
+
+
     // Start the animation frame
@@ -292,8 +334,10 @@ function play () {
 
+        destroyed = true;
+
         pause();
         disconnectMutationsObserver();
 
-        window.removeEventListener('resize', RESIZE_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseenter', MOUSE_ENTER_LISTENER_FUNCTION, false);
-        OUTER.removeEventListener('mouseleave', MOUSE_LEAVE_LISTENER_FUNCTION, false);
+        RESIZE_LISTENER.remove();
+        MOUSEENTER_LISTENER.remove();
+        MOUSELEAVE_LISTENER.remove();
 
@@ -312,2 +356,3 @@ OUTER.innerHTML = text;
         recreate: createMarquee.bind(this),
+        updateSizes: updateSizes.bind(this),
         destroy: destroy.bind(this),
@@ -314,0 +359,0 @@ };

src/ts/types.ts

@@ -27,2 +27,13 @@ export interface NodeMarqueeProp {
     applyOuterStyles?: boolean;
+    /**
+     * By default, the script copies the text and moves it. To calculate the transformations,
+     * it needs to know the width of each element.
+     * This very width is calculated with each animation frame
+     * and in some cases may influence performance.
+     * If you want to avoid this, set the property as "true", and it won't recalculate
+     * styles with each frame, though when changing styles of the marquee (f.e., font-size),
+     * the marquee must be manually recreated.
+     * @default false
+     */
+    optimizeCalculation?: boolean;
 }
@@ -54,2 +65,6 @@
     /**
+     * Update sizes of the marquee (manually)
+     */
+    updateSizes: () => void;
+    /**
      * Destroy the marquee
@@ -56,0 +71,0 @@ */

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

256178

increased by4.18%

Number of package files

29

increased by3.57%

Lines of code

3426

increased by4.39%

Worsened metrics

Dev dependency count

37

increased by2.78%

Dependency changes

• + Addedvevet-dom@0.0.15(transitive)

• - Removednormalize-scss@7.0.1(transitive)

• - Removedvevet-dom@0.0.4(transitive)

• Updatedvevet-dom@0.0.15