node-marquee - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

build/cdn/index.js

@@ -11,2 +11,2 @@ /*
 */
-(()=>{"use strict";function e(n,t){if(n instanceof Window)return n;if(function(e){return e instanceof HTMLElement||e instanceof Element}(n))return n;if(void 0!==t){const r=e(t);if(r)return r.querySelector(n)}return document.querySelector(n)}function n(e,n,t){const r=n.split(" ");for(let i=0;i<r.length;i++)void 0===t?e.classList.toggle(r[i]):t?e.classList.add(r[i]):e.classList.remove(r[i])}function t(e,t={}){const r=document.createElement(e);if(t.class&&function(e,t){if(e instanceof Element)n(e,t,!0);else for(let r=0;r<e.length;r++)n(e[r],t,!0)}(r,t.class),t.id&&r.setAttribute("id",t.id),t.attr)for(let n=0,i=t.attr.length;n<i;n++){const e=t.attr[n];r.setAttribute(e[0],e[1])}if(t.parent&&t.parent.appendChild(r),t.html&&(r.innerHTML=t.html),t.children)for(let n=0,i=t.children.length;n<i;n++)r.appendChild(t.children[n]);return r}const r=[];function i(e,n,t,i){if(void 0!==i){const r={passive:!1,once:!1};i.once&&(r.once=!0),i.passive&&(r.passive=!0),e.addEventListener(n,t,r)}else e.addEventListener(n,t);const a=`${Math.random()}-${+new Date}`;return r.push({id:a,el:e,target:n,callback:t}),{id:a,remove:o.bind(this,a)}}function o(e){const n=[];for(let t=0,i=r.length;t<i;t++){const i=r[t];i.id===e?i.el.removeEventListener(i.target,i.callback):n.push(i)}}function a(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=function(e,n){if(!e)return;if("string"==typeof e)return c(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return c(e,n)}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return a=e.done,e},e:function(e){s=!0,o=e},f:function(){try{a||null==t.return||t.return()}finally{if(s)throw o}}}}function c(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}window.nodeMarquee=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r={parent:"#node-marquee",speed:1,minQuantity:4,autoplay:!0,pauseOnHover:!1,useParentStyles:!0,prependWhitespace:!0},o=Object.assign(r,n),c="node-marquee",s=e(o.parent);if(!(s instanceof HTMLElement))return!1;s.classList.add(c);var l,u=!1,f=!1,d=0,p=!1,h=s.innerHTML,v=0,m=[],y=0,w=[i(window,"resize",b),i(s,"mouseenter",L),i(s,"mouseleave",M)];function b(){S(),v=0,m=[],s.innerHTML="",o.useParentStyles&&(s.style.position="relative",s.style.width="100%",s.style.overflow="hidden",s.style.whiteSpace="nowrap");var e=g();(y=e.clientWidth)<=0&&(y=window.innerWidth),y<s.clientWidth&&(v=Math.ceil((s.clientWidth+y)/y)),v<o.minQuantity&&(v=o.minQuantity);for(var n=1;n<v;n+=1)g(!0);T(),A(),setTimeout((function(){E()}),500)}function g(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=t("div",{class:"".concat(c,"__el"),html:"".concat(o.prependWhitespace?"&nbsp;":"").concat(h)});return e&&(n.style.position="absolute",n.style.top="0",n.style.left="0"),n.style.display="inline-block",s.appendChild(n),m.push(n),n}function L(){o.pauseOnHover&&j()}function M(){o.pauseOnHover&&O()}function A(){if(!l){(l=new MutationObserver((function(e){var n,t=a(e);try{for(t.s();!(n=t.n()).done;){"childList"===n.value.type&&(h=s.innerHTML,b())}}catch(r){t.e(r)}finally{t.f()}}))).observe(s,{childList:!0})}}function S(){l&&(l.disconnect(),l=void 0)}function E(){if(!u){for(var e=[],n=0;n<v;n+=1)e.push(m[n].clientWidth);y=Math.max.apply(Math,e)}}function H(){f&&(p=window.requestAnimationFrame(H)),T()}function T(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o.speed;d-=e;for(var n=y*(v-1),t=0;t<v;t+=1){var r=m[t],i=W(-y,n,d+y*t);r.style.transform="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ".concat(i,", 0, 0,1)")}}function W(e,n,t){var r=n-e;return q(t,(function(n){return(r+(n-e)%r)%r+e}))}function q(e,n){return e||0===e?n(e):n}function O(){p||(f=!0,p=window.requestAnimationFrame(H))}function j(){f=!1,p&&(window.cancelAnimationFrame(p),p=!1)}function C(){u=!0,j(),S(),w.forEach((function(e){e.remove()})),s.innerHTML=h}return b(),o.autoplay&&O(),{play:O,pause:j,isPlaying:function(){return f},render:T,recreate:b,updateSizes:E,destroy:C}}})();
+(()=>{"use strict";function e(n,t){if(n instanceof Window)return n;if(function(e){return e instanceof HTMLElement||e instanceof Element}(n))return n;if(void 0!==t){const i=e(t);if(i)return i.querySelector(n)}return document.querySelector(n)}function n(e,n,t){const i=n.split(" ");for(let r=0;r<i.length;r++)void 0===t?e.classList.toggle(i[r]):t?e.classList.add(i[r]):e.classList.remove(i[r])}function t(e,t={}){const i=document.createElement(e);if(t.class&&function(e,t){if(e instanceof Element)n(e,t,!0);else for(let i=0;i<e.length;i++)n(e[i],t,!0)}(i,t.class),t.id&&i.setAttribute("id",t.id),t.attr)for(let n=0,r=t.attr.length;n<r;n++){const e=t.attr[n];i.setAttribute(e[0],e[1])}if(t.parent&&t.parent.appendChild(i),t.html&&(i.innerHTML=t.html),t.children)for(let n=0,r=t.children.length;n<r;n++)i.appendChild(t.children[n]);return i}const i=[];function r(e,n,t,r){if(void 0!==r){const i={passive:!1,once:!1};r.once&&(i.once=!0),r.passive&&(i.passive=!0),e.addEventListener(n,t,i)}else e.addEventListener(n,t);const a=`${Math.random()}-${+new Date}`;return i.push({id:a,el:e,target:n,callback:t}),{id:a,remove:o.bind(this,a)}}function o(e){const n=[];for(let t=0,r=i.length;t<r;t++){const r=i[t];r.id===e?r.el.removeEventListener(r.target,r.callback):n.push(r)}}function a(e,n){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!t){if(Array.isArray(e)||(t=function(e,n){if(!e)return;if("string"==typeof e)return s(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return s(e,n)}(e))||n&&e&&"number"==typeof e.length){t&&(e=t);var i=0,r=function(){};return{s:r,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,c=!1;return{s:function(){t=t.call(e)},n:function(){var e=t.next();return a=e.done,e},e:function(e){c=!0,o=e},f:function(){try{a||null==t.return||t.return()}finally{if(c)throw o}}}}function s(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=new Array(n);t<n;t++)i[t]=e[t];return i}window.nodeMarquee=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i={parent:"#node-marquee",speed:1,minQuantity:4,autoplay:!0,pauseOnHover:!1,useParentStyles:!0,prependWhitespace:!0,resize:!0},o=Object.assign(i,n),s="node-marquee",c=e(o.parent);if(!(c instanceof HTMLElement))return!1;c.classList.add(s);var u,l={width:window.innerWidth,height:window.innerHeight},f=!1,d=!1,h=0,p=!1,v=c.innerHTML,m=0,y=[],w=0,g=[r(window,"resize",M),r(c,"mouseenter",H),r(c,"mouseleave",A)];function b(){E(),m=0,y=[],c.innerHTML="",o.useParentStyles&&(c.style.position="relative",c.style.width="100%",c.style.overflow="hidden",c.style.whiteSpace="nowrap");var e=L();(w=e.clientWidth)<=0&&(w=window.innerWidth),w<c.clientWidth&&(m=Math.ceil((c.clientWidth+w)/w)),m<o.minQuantity&&(m=o.minQuantity);for(var n=1;n<m;n+=1)L(!0);q(),S(),setTimeout((function(){W()}),500)}function L(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=t("div",{class:"".concat(s,"__el"),html:"".concat(o.prependWhitespace?"&nbsp;":"").concat(v)});return e&&(n.style.position="absolute",n.style.top="0",n.style.left="0"),n.style.display="inline-block",c.appendChild(n),y.push(n),n}function M(){if(!1!==o.resize){var e=l.width,n=l.height,t=window.innerWidth,i=window.innerHeight;if(l.width=t,l.height=i,"string"==typeof o.resize)return"w"===o.resize&&e!==t||"h"===o.resize&&n!==i?void b():void 0;b()}}function H(){o.pauseOnHover&&C()}function A(){o.pauseOnHover&&j()}function S(){if(!u){(u=new MutationObserver((function(e){var n,t=a(e);try{for(t.s();!(n=t.n()).done;){"childList"===n.value.type&&(v=c.innerHTML,b())}}catch(i){t.e(i)}finally{t.f()}}))).observe(c,{childList:!0})}}function E(){u&&(u.disconnect(),u=void 0)}function W(){if(!f){for(var e=[],n=0;n<m;n+=1)e.push(y[n].clientWidth);w=Math.max.apply(Math,e)}}function T(){d&&(p=window.requestAnimationFrame(T)),q()}function q(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:o.speed;h-=e;for(var n=w*(m-1),t=0;t<m;t+=1){var i=y[t],r=z(-w,n,h+w*t);i.style.transform="matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ".concat(r,", 0, 0,1)")}}function z(e,n,t){var i=n-e;return O(t,(function(n){return(i+(n-e)%i)%i+e}))}function O(e,n){return e||0===e?n(e):n}function j(){p||(d=!0,p=window.requestAnimationFrame(T))}function C(){d=!1,p&&(window.cancelAnimationFrame(p),p=!1)}function k(){f=!0,C(),E(),g.forEach((function(e){e.remove()})),c.innerHTML=v}return b(),o.autoplay&&j(),{play:j,pause:C,isPlaying:function(){return d},render:q,recreate:b,updateSizes:W,destroy:k}}})();

build/cjs/index.js

@@ -18,2 +18,3 @@ "use strict";
         prependWhitespace: true,
+        resize: true,
     };
@@ -25,3 +26,3 @@ // extend properties
     // get parent element
-    var parent = vevet_dom_1.selectOne(prop.parent);
+    var parent = (0, vevet_dom_1.selectOne)(prop.parent);
     if (!(parent instanceof HTMLElement)) {
@@ -32,2 +33,6 @@ return false;
     // states
+    var viewportSizes = {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
     var isDestroyed = false;
@@ -45,5 +50,5 @@ var isPlaying = false;
     var listeners = [
-        vevet_dom_1.addEventListener(window, 'resize', create),
-        vevet_dom_1.addEventListener(parent, 'mouseenter', handleMouseEnter),
-        vevet_dom_1.addEventListener(parent, 'mouseleave', handleMouseLeave),
+        (0, vevet_dom_1.addEventListener)(window, 'resize', handleResize),
+        (0, vevet_dom_1.addEventListener)(parent, 'mouseenter', handleMouseEnter),
+        (0, vevet_dom_1.addEventListener)(parent, 'mouseleave', handleMouseLeave),
     ];
@@ -105,5 +110,5 @@ // create the marquee
         if (isAbsolute === void 0) { isAbsolute = false; }
-        var element = vevet_dom_1.createElement('div', {
-            class: className + "__el",
-            html: "" + (prop.prependWhitespace ? ' ' : '') + defaultHTML,
+        var element = (0, vevet_dom_1.createElement)('div', {
+            class: "".concat(className, "__el"),
+            html: "".concat(prop.prependWhitespace ? ' ' : '').concat(defaultHTML),
         });
@@ -123,2 +128,25 @@ // apply styles
     /**
+     * Event on window resize
+     */
+    function handleResize() {
+        if (prop.resize === false) {
+            return;
+        }
+        var prevViewportWidth = viewportSizes.width;
+        var prevViewportHeight = viewportSizes.height;
+        var newViewportWidth = window.innerWidth;
+        var newViewportHeight = window.innerHeight;
+        viewportSizes.width = newViewportWidth;
+        viewportSizes.height = newViewportHeight;
+        if (typeof prop.resize === 'string') {
+            if ((prop.resize === 'w' && (prevViewportWidth !== newViewportWidth))
+                || (prop.resize === 'h' && (prevViewportHeight !== newViewportHeight))) {
+                create();
+                return;
+            }
+            return;
+        }
+        create();
+    }
+    /**
      * Event on hover - ON
@@ -208,3 +236,3 @@ */
             // 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)";
+            el.style.transform = "matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0, ".concat(x, ", 0, 0,1)");
         }
@@ -211,0 +239,0 @@ }

build/es/index.js

@@ -15,2 +15,3 @@ import { selectOne, addEventListener, createElement } from 'vevet-dom';
         prependWhitespace: true,
+        resize: true,
     };
@@ -28,2 +29,6 @@ // extend properties
     // states
+    const viewportSizes = {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
     let isDestroyed = false;
@@ -41,3 +46,3 @@ let isPlaying = false;
     const listeners = [
-        addEventListener(window, 'resize', create),
+        addEventListener(window, 'resize', handleResize),
         addEventListener(parent, 'mouseenter', handleMouseEnter),
@@ -117,2 +122,25 @@ addEventListener(parent, 'mouseleave', handleMouseLeave),
     /**
+     * Event on window resize
+     */
+    function handleResize() {
+        if (prop.resize === false) {
+            return;
+        }
+        const prevViewportWidth = viewportSizes.width;
+        const prevViewportHeight = viewportSizes.height;
+        const newViewportWidth = window.innerWidth;
+        const newViewportHeight = window.innerHeight;
+        viewportSizes.width = newViewportWidth;
+        viewportSizes.height = newViewportHeight;
+        if (typeof prop.resize === 'string') {
+            if ((prop.resize === 'w' && (prevViewportWidth !== newViewportWidth))
+                || (prop.resize === 'h' && (prevViewportHeight !== newViewportHeight))) {
+                create();
+                return;
+            }
+            return;
+        }
+        create();
+    }
+    /**
      * Event on hover - ON
@@ -119,0 +147,0 @@ */

build/types/types.d.ts

@@ -36,2 +36,12 @@ export interface NodeMarqueeProp {
     prependWhitespace?: boolean;
+    /**
+     * When the window is resized, the marquee element is recreated
+     * for its sizes correspond to the current size of the window.
+     * This property allow you to decide what viewport changes to react. <br>
+     * true - update on each resize <br>
+     * 'w' - update on width resize only <br>
+     * 'h' - update on height resize only <br>
+     * false - to not update on resize
+     */
+    resize?: boolean | 'w' | 'h';
 }
@@ -38,0 +48,0 @@ export interface NodeMarquee {

package.json

 {
   "name": "node-marquee",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Custom Marquee element",
@@ -16,3 +16,3 @@ "browserslist": [
     "docs": "typedoc --out examples-build/docs ./src/ts --theme default --hideGenerator",
-    "gh-pages": "git add examples-build/docs/* && git commit -m \"Update github pages\" && git subtree push --prefix examples-build/ origin gh-pages",
+    "gh-pages": "git add examples-build/* && git commit -m \"Update github pages\" && git subtree push --prefix examples-build/ origin gh-pages",
     "lint:js": "eslint . --ext .ts,.js",
@@ -19,0 +19,0 @@ "prepare": "npm run lint:js && npm run prepare:all && npm run pages-build && npm run docs && npm run gh-pages",

src/ts/index.ts

@@ -24,2 +24,3 @@ import { selectOne, addEventListener, createElement } from 'vevet-dom';
         prependWhitespace: true,
+        resize: true,
     };
@@ -40,2 +41,6 @@ // extend properties
     // states
+    const viewportSizes = {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
     let isDestroyed = false;
@@ -55,3 +60,3 @@ let isPlaying = false;
     const listeners = [
-        addEventListener(window, 'resize', create),
+        addEventListener(window, 'resize', handleResize),
         addEventListener(parent, 'mouseenter', handleMouseEnter),
@@ -148,3 +153,34 @@ addEventListener(parent, 'mouseleave', handleMouseLeave),
 
+    /**
+     * Event on window resize
+     */
+    function handleResize () {
+        if (prop.resize === false) {
+            return;
+        }
 
+        const prevViewportWidth = viewportSizes.width;
+        const prevViewportHeight = viewportSizes.height;
+        const newViewportWidth = window.innerWidth;
+        const newViewportHeight = window.innerHeight;
+        viewportSizes.width = newViewportWidth;
+        viewportSizes.height = newViewportHeight;
+
+        if (
+            typeof prop.resize === 'string'
+        ) {
+            if (
+                (prop.resize === 'w' && (prevViewportWidth !== newViewportWidth))
+                || (prop.resize === 'h' && (prevViewportHeight !== newViewportHeight))
+            ) {
+                create();
+                return;
+            }
+            return;
+        }
+
+        create();
+    }
+
+
     /**
@@ -151,0 +187,0 @@ * Event on hover - ON

src/ts/types.ts

@@ -36,2 +36,12 @@ export interface NodeMarqueeProp {
     prependWhitespace?: boolean;
+    /**
+     * When the window is resized, the marquee element is recreated
+     * for its sizes correspond to the current size of the window.
+     * This property allow you to decide what viewport changes to react. <br>
+     * true - update on each resize <br>
+     * 'w' - update on width resize only <br>
+     * 'h' - update on height resize only <br>
+     * false - to not update on resize
+     */
+    resize?: boolean | 'w' | 'h';
 }
@@ -38,0 +48,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

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

Improved metrics

Total package byte prevSize

41023

increased by11.45%

Lines of code

1021

increased by11.83%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes