vanilla-marquee - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/vanilla-marquee.d.ts

@@ -141,3 +141,7 @@ declare module "vanilla-marquee" {
         destroy(): void;
+        /**
+         * Forces a refresh (like recalcResize) but done manually
+         */
+        refresh(): void;
     }
 }

dist/vanilla-marquee.js

@@ -695,4 +695,11 @@ /**
 
+  /**
+   * Forces a refresh (like recalcResize) but done manually
+   */
+  refresh() {
+    this._recalcResize();
+  }
+
 }
 
 export default marquee;

dist/vanilla-marquee.min.js

@@ -1,1 +0,1 @@
-function t(t,s=document){return s.getElementsByClassName(t)}function s(t,s,i){for(let e=0,h=t.length;e<h;e++)s.call(i,t[e],e)}function i(t,s,i,e){t.addEventListener(s,i,e)}function e(t,s,i,e){t.removeEventListener(s,i,e)}function h(t,s){return t.getAttribute(s)}function n(t,s,i){t.setAttribute(s,i)}const a={css3easing:"linear",delayBeforeStart:1e3,direction:"left",duplicated:!1,duration:5e3,gap:20,pauseOnHover:!1,recalcResize:!1,speed:0,startVisible:!1};let r=0;export default class{constructor(s,e){if(void 0===s)throw new Error("el cannot be undefined");if("string"==typeof s)throw new Error("el cannot be just a selector");if(null===s)throw new Error("el cannot be null");e={...a,...e},this.t=s,this.i=3;for(const t in a){let i=h(s,`data-${a[t]}`);null!==i&&""!==i&&("true"!==i&&"false"!==i||(i=Boolean(i)),e[t]=i)}e.speed&&(e.duration=parseInt(s.clientWidth)/e.speed*1e3),e.gap=e.duplicated?parseInt(e.gap):0,s.innerHTML=`<div class="js-marquee">${s.innerHTML}</div>`;const n=t("js-marquee",s)[0];n.style.marginRight=`${e.gap}px`,n.style.willChange="transform",n.style.float="left",e.duplicated&&s.appendChild(n.cloneNode(!0)),s.innerHTML=`<div style="width:100000px" class="js-marquee-wrapper">${s.innerHTML}</div>`;const o=t("js-marquee-wrapper",s)[0],u="up"===e.direction||"down"===e.direction;this.h=o,this.o=u,this.u=e.duration,this.l=e,this.p();const l=`marqueeAnimation-${Math.floor(1e7*Math.random())}`,p=this.m(l,e.duration/1e3,e.delayBeforeStart/1e3,"infinite");this.$=l,this.v=p,e.duplicated?(u?e.startVisible?this.h.style.transform="translateY(0px)":this.h.style.transform=`translateY(${"up"===e.direction?this.g:-1*(2*this.I-e.gap)}px)`:e.startVisible?this.h.style.transform="translateX(0px)":this.h.style.transform=`translateX(${"left"===e.direction?this.q:-1*(2*this.j-e.gap)}px)`,e.startVisible||(this.i=1)):e.startVisible?this.i=2:u?this.S():this.X(),i(this.t,"pause",this.pause.bind(this)),i(this.t,"resume",this.resume.bind(this)),e.pauseOnHover&&(i(this.t,"mouseover",this.pause.bind(this)),i(this.t,"mouseout",this.resume.bind(this))),this.Y=()=>{this._(u),this.t.dispatchEvent(new CustomEvent("finished"))},this.C=r,r++,this._(u),e.recalcResize&&i(window,"resize",this.B.bind(this))}m(t="",s=0,i=0,e=""){return`${t} ${s}s ${i}s ${e} ${this.l.css3easing}`}_(e=!1){const h=this.l;if(h.duplicated){if(1===this.i){let t=h.duration;t=e?"up"===h.direction?t+this.g/(this.I/t):2*t:"left"===h.direction?t+this.q/(this.j/t):2*t,this.v=this.m(this.$,t/1e3,h.delayBeforeStart/1e3)}else 2===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,h.duration/1e3,0,"infinite"));this.i++}let a="";e?h.duplicated?(this.i>2&&(this.h.style.transform=`translateY(${"up"===h.direction?0:-1*this.I}px)`),a=`translateY(${"up"===h.direction?-1*this.I:0}px)`):h.startVisible?2===this.i?(this.v=this.m(this.$,h.duration/1e3,h.delayBeforeStart/1e3),a=`translateY(${"up"===h.direction?-1*this.I:this.g}px)`,this.i++):3===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,this.H/1e3,0,"infinite"),this.S()):(this.S(),a=`translateY(${"up"===h.direction?-1*this.h.clientHeight:this.g}px)`):h.duplicated?(this.i>2&&(this.h.style.transform=`translateX(${"left"===h.direction?0:-1*this.j}px)`),a=`translateX(${"left"===h.direction?-1*this.j:0}px)`):h.startVisible?2===this.i?(this.v=this.m(this.$,h.duration/1e3,h.delayBeforeStart/1e3),a=`translateX(${"left"===h.direction?-1*this.j:this.q}px)`,this.i++):3===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,h.duration/1e3,0,"infinite"),this.X()):(this.X(),a=`translateX(${"left"===h.direction?-1*this.j:this.g}px)`),this.t.dispatchEvent(new CustomEvent("beforeStarting")),this.h.style.animation=this.v;const r=`@keyframes ${this.$} {\n        100% {\n          transform: ${a};\n        }\n      }`,o=function(t,s=document){return s.querySelectorAll(t)}("style",this.h);if(o.length)o[o.length-1].innerHTML=r;else if(t(`marq-wrap-style-${this.C}`).length)t(`marq-wrap-style-${this.C}`)[0].innerHTML=r;else{const t=document.createElement("style");!function(t,...i){function e(t,...s){s.forEach((s=>{t.classList.add(s)}))}void 0===t.length?e(t,...i):s(t,(t=>{e(t,...i)}))}(t,`marq-wrap-style-${this.C}`),t.innerHTML=r,function(t,s=document){return s.querySelector(t)}("head").appendChild(t)}i(this.h,"animationiteration",this.M.bind(this),{once:!0}),i(this.h,"animationend",this.Y.bind(this),{once:!0}),this.R="running",n(this.t,"data-runningStatus","resumed")}M(){this.t.dispatchEvent(new CustomEvent("finished"))}S(){this.h.style.transform=`translateY(${"up"===this.l.direction?this.g:-1*this.I}px)`}X(){this.h.style.transform=`translateX(${"left"===this.l.direction?this.q:-1*this.j}px)`}p(){const i=this.t,e=this.l;if(this.o){const h=i.clientHeight;this.g=h,function(t,s){t.removeAttribute(s)}(this.h,"style"),i.style.clientHeight=`${h}px`;const n=t("js-marquee",i),a=n.length-1;s(n,((t,s)=>{t.style.float="none",t.style.marginRight="0px",e.duplicated&&s===a?t.style.marginBottom="0px":t.style.marginBottom=`${e.gap}px`}));const r=parseInt(n[0].clientHeight+e.gap);this.I=r,e.startVisible&&!e.duplicated?(this.H=(r+h)/parseInt(h)*this.u,e.duration=r/parseInt(h)*this.u):e.duration=r/parseInt(h)/parseInt(h)*this.u}else{const s=parseInt(t("js-marquee",i)[0].clientWidth+e.gap),h=i.clientWidth;this.q=h,this.j=s,e.startVisible&&!e.duplicated?(this.H=(s+h)/parseInt(h)*this.u,e.duration=s/parseInt(h)*this.u):e.duration=(s+parseInt(h))/parseInt(h)*this.u}e.duplicated&&(e.duration=e.duration/2)}B(){this.p(),this.i=2,this.Y()}pause(){this.h.style.animationPlayState="paused",this.R="paused",n(this.t,"data-runningStatus","paused"),this.t.dispatchEvent(new CustomEvent("paused"))}resume(){this.h.style.animationPlayState="running",this.R="running",n(this.t,"data-runningStatus","resumed"),this.t.dispatchEvent(new CustomEvent("resumed"))}toggle(){"paused"===this.R?this.resume():"running"===this.R&&this.pause()}V(){e(this.t,"pause",this.pause.bind(this)),e(this.t,"resume",this.resume.bind(this)),this.l.pauseOnHover&&(e(this.t,"mouseover",this.pause.bind(this)),e(this.t,"mouseout",this.resume.bind(this))),e(this.h,"animationiteration",this.M.bind(this),{once:!0}),e(this.h,"animationend",this.Y.bind(this),{once:!0}),this.l.recalcResize&&e(window,"resize",this.B.bind(this))}}
+function t(t,s=document){return s.getElementsByClassName(t)}function s(t,s,i){for(let e=0,h=t.length;e<h;e++)s.call(i,t[e],e)}function i(t,s,i,e){t.addEventListener(s,i,e)}function e(t,s,i,e){t.removeEventListener(s,i,e)}function h(t,s){return t.getAttribute(s)}function n(t,s,i){t.setAttribute(s,i)}const a={css3easing:"linear",delayBeforeStart:1e3,direction:"left",duplicated:!1,duration:5e3,gap:20,pauseOnHover:!1,recalcResize:!1,speed:0,startVisible:!1};let r=0;export default class{constructor(s,e){if(void 0===s)throw new Error("el cannot be undefined");if("string"==typeof s)throw new Error("el cannot be just a selector");if(null===s)throw new Error("el cannot be null");e={...a,...e},this.t=s,this.i=3;for(const t in a){let i=h(s,`data-${a[t]}`);null!==i&&""!==i&&("true"!==i&&"false"!==i||(i=Boolean(i)),e[t]=i)}e.speed&&(e.duration=parseInt(s.clientWidth)/e.speed*1e3),e.gap=e.duplicated?parseInt(e.gap):0,s.innerHTML=`<div class="js-marquee">${s.innerHTML}</div>`;const n=t("js-marquee",s)[0];n.style.marginRight=`${e.gap}px`,n.style.willChange="transform",n.style.float="left",e.duplicated&&s.appendChild(n.cloneNode(!0)),s.innerHTML=`<div style="width:100000px" class="js-marquee-wrapper">${s.innerHTML}</div>`;const o=t("js-marquee-wrapper",s)[0],u="up"===e.direction||"down"===e.direction;this.h=o,this.o=u,this.u=e.duration,this.l=e,this.p();const l=`marqueeAnimation-${Math.floor(1e7*Math.random())}`,p=this.m(l,e.duration/1e3,e.delayBeforeStart/1e3,"infinite");this.$=l,this.v=p,e.duplicated?(u?e.startVisible?this.h.style.transform="translateY(0px)":this.h.style.transform=`translateY(${"up"===e.direction?this.g:-1*(2*this.I-e.gap)}px)`:e.startVisible?this.h.style.transform="translateX(0px)":this.h.style.transform=`translateX(${"left"===e.direction?this.q:-1*(2*this.j-e.gap)}px)`,e.startVisible||(this.i=1)):e.startVisible?this.i=2:u?this.S():this.X(),i(this.t,"pause",this.pause.bind(this)),i(this.t,"resume",this.resume.bind(this)),e.pauseOnHover&&(i(this.t,"mouseover",this.pause.bind(this)),i(this.t,"mouseout",this.resume.bind(this))),this.Y=()=>{this._(u),this.t.dispatchEvent(new CustomEvent("finished"))},this.C=r,r++,this._(u),e.recalcResize&&i(window,"resize",this.B.bind(this))}m(t="",s=0,i=0,e=""){return`${t} ${s}s ${i}s ${e} ${this.l.css3easing}`}_(e=!1){const h=this.l;if(h.duplicated){if(1===this.i){let t=h.duration;t=e?"up"===h.direction?t+this.g/(this.I/t):2*t:"left"===h.direction?t+this.q/(this.j/t):2*t,this.v=this.m(this.$,t/1e3,h.delayBeforeStart/1e3)}else 2===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,h.duration/1e3,0,"infinite"));this.i++}let a="";e?h.duplicated?(this.i>2&&(this.h.style.transform=`translateY(${"up"===h.direction?0:-1*this.I}px)`),a=`translateY(${"up"===h.direction?-1*this.I:0}px)`):h.startVisible?2===this.i?(this.v=this.m(this.$,h.duration/1e3,h.delayBeforeStart/1e3),a=`translateY(${"up"===h.direction?-1*this.I:this.g}px)`,this.i++):3===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,this.H/1e3,0,"infinite"),this.S()):(this.S(),a=`translateY(${"up"===h.direction?-1*this.h.clientHeight:this.g}px)`):h.duplicated?(this.i>2&&(this.h.style.transform=`translateX(${"left"===h.direction?0:-1*this.j}px)`),a=`translateX(${"left"===h.direction?-1*this.j:0}px)`):h.startVisible?2===this.i?(this.v=this.m(this.$,h.duration/1e3,h.delayBeforeStart/1e3),a=`translateX(${"left"===h.direction?-1*this.j:this.q}px)`,this.i++):3===this.i&&(this.$=`${this.$}0`,this.v=this.m(this.$,h.duration/1e3,0,"infinite"),this.X()):(this.X(),a=`translateX(${"left"===h.direction?-1*this.j:this.g}px)`),this.t.dispatchEvent(new CustomEvent("beforeStarting")),this.h.style.animation=this.v;const r=`@keyframes ${this.$} {\n        100% {\n          transform: ${a};\n        }\n      }`,o=function(t,s=document){return s.querySelectorAll(t)}("style",this.h);if(o.length)o[o.length-1].innerHTML=r;else if(t(`marq-wrap-style-${this.C}`).length)t(`marq-wrap-style-${this.C}`)[0].innerHTML=r;else{const t=document.createElement("style");!function(t,...i){function e(t,...s){s.forEach((s=>{t.classList.add(s)}))}void 0===t.length?e(t,...i):s(t,(t=>{e(t,...i)}))}(t,`marq-wrap-style-${this.C}`),t.innerHTML=r,function(t,s=document){return s.querySelector(t)}("head").appendChild(t)}i(this.h,"animationiteration",this.M.bind(this),{once:!0}),i(this.h,"animationend",this.Y.bind(this),{once:!0}),this.R="running",n(this.t,"data-runningStatus","resumed")}M(){this.t.dispatchEvent(new CustomEvent("finished"))}S(){this.h.style.transform=`translateY(${"up"===this.l.direction?this.g:-1*this.I}px)`}X(){this.h.style.transform=`translateX(${"left"===this.l.direction?this.q:-1*this.j}px)`}p(){const i=this.t,e=this.l;if(this.o){const h=i.clientHeight;this.g=h,function(t,s){t.removeAttribute(s)}(this.h,"style"),i.style.clientHeight=`${h}px`;const n=t("js-marquee",i),a=n.length-1;s(n,((t,s)=>{t.style.float="none",t.style.marginRight="0px",e.duplicated&&s===a?t.style.marginBottom="0px":t.style.marginBottom=`${e.gap}px`}));const r=parseInt(n[0].clientHeight+e.gap);this.I=r,e.startVisible&&!e.duplicated?(this.H=(r+h)/parseInt(h)*this.u,e.duration=r/parseInt(h)*this.u):e.duration=r/parseInt(h)/parseInt(h)*this.u}else{const s=parseInt(t("js-marquee",i)[0].clientWidth+e.gap),h=i.clientWidth;this.q=h,this.j=s,e.startVisible&&!e.duplicated?(this.H=(s+h)/parseInt(h)*this.u,e.duration=s/parseInt(h)*this.u):e.duration=(s+parseInt(h))/parseInt(h)*this.u}e.duplicated&&(e.duration=e.duration/2)}B(){this.p(),this.i=2,this.Y()}pause(){this.h.style.animationPlayState="paused",this.R="paused",n(this.t,"data-runningStatus","paused"),this.t.dispatchEvent(new CustomEvent("paused"))}resume(){this.h.style.animationPlayState="running",this.R="running",n(this.t,"data-runningStatus","resumed"),this.t.dispatchEvent(new CustomEvent("resumed"))}toggle(){"paused"===this.R?this.resume():"running"===this.R&&this.pause()}V(){e(this.t,"pause",this.pause.bind(this)),e(this.t,"resume",this.resume.bind(this)),this.l.pauseOnHover&&(e(this.t,"mouseover",this.pause.bind(this)),e(this.t,"mouseout",this.resume.bind(this))),e(this.h,"animationiteration",this.M.bind(this),{once:!0}),e(this.h,"animationend",this.Y.bind(this),{once:!0}),this.l.recalcResize&&e(window,"resize",this.B.bind(this))}refresh(){this.B()}}

package.json

 {
   "name": "vanilla-marquee",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
@@ -31,7 +31,7 @@ "main": "./dist/vanilla-marquee.js",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-eslint": "^8.0.1",
-    "@rollup/plugin-node-resolve": "^11.2.0",
-    "eslint": "^7.21.0",
-    "rollup": "^2.40.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "eslint": "^7.23.0",
+    "rollup": "^2.43.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -38,0 +38,0 @@ "typescript": "^4.2.3"

README.md

@@ -21,2 +21,6 @@ # vanilla-marquee
 
+## Demo
+
+https://mattiacoll.github.io/vanilla-marquee-site/
+
 ---
@@ -49,24 +53,32 @@
 
-- **`css3easing`** a css3 transtion timing. Default: `'linear'`
-- **`delayBeforeStart`** Time in milliseconds before the marquee starts animating. Default: `1000`.
-- **`direction`** Direction towards which the marquee will animate ` 'left' | 'right' | 'up' | 'down'`. Default: `'left'`. Todo: need to change this to ltr/rtl etc
-- **`duplicated`** Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container. Default: `false`
-- **`duration`** Duration in milliseconds in which you want your element to travel. Default: `5000`.
-- **`speed`** Speed will override duration. Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels/second. Default `0`.
-- **`gap`** Gap in pixels between the tickers. Will work only when the `duplicated` option is set to `true`. Default: `20`. Note: 20 means 20px so no need to use '20px' as the value.
-- **`pauseOnHover`** Pause the marquee on hover. Default: `false`.
-- **`startVisible`** The marquee will be visible from the start if set to `true`. Default `false`.
+| Option | Default | Description |
+| --- | --- | --- |
+| `css3easing` | `'linear'` | a css3 transtion timing |
+| `delayBeforeStart` | `1000` | Time in ms before the marquee starts animating |
+| `direction` | `'left'` | Direction towards which the marquee will animate ` 'left', 'right', 'up', 'down'` |
+| `duplicated` | `false` | Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container |
+| `duration` | `5000` | Duration in ms in which you want your element to travel |
+| `speed` | `0` | Speed will override duration. Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels/second |
+| `gap` | `20` | Gap in pixels between the tickers. Will work only when the `duplicated` option is set to `true`. Note: `20` means `20px` so no need to use `'20px'` as the value. |
+| `pauseOnHover` | `false` | Pause the marquee on hover. |
+| `startVisible` | `false` | The marquee will be visible from the start if set to `true`. |
+| `recalcResize` | `false` | Should the marquee be updated on resize. |
 
 ## Methods
 
-- **`pause`**: To pause the marquee at any time.
-- **`resume`**: To resume the marquee after being paused previously.
-- **`toggle`**: To toggle between `pause` and `resume` methods.
-- **`destroy`**: To remove the marquee and all attached events from your element. This method is useful if you are loading/changing the data using Ajax or just another string. You can combine this with the finished event so you can have the marquee show some data and as soon as it finishes showing that, you can destroy it, change the html and then apply the plugin again.
+| Name | Description |
+| --- | --- |
+| `pause` | To pause the marquee at any time. |
+| `resume` | To resume the marquee after being paused previously. |
+| `toggle` | To toggle between `pause` and `resume` methods. |
+| `destroy` | To remove the marquee and all attached events from your element. This method is useful if you are loading/changing the data using Ajax or just another string. You can combine this with the finished event so you can have the marquee show some data and as soon as it finishes showing that, you can destroy it, change the html and then apply the plugin again. |
+| `refresh` | Recalcs the marquee size and position. Works like the `recalcResize` but is triggered manually instead of on window resize |
 
 ## Events:
 
- - **`beforeStarting`:** Event will be fired on the element before animation starts.
- - **`finished`:** Event will be fired on the element on each iteration of the animation when it finishes.
- - **`paused`:** Event will be fired on the element when the animation is paused.
- - **`resumed`:** Event will be fired on the element when the animation is resumed.
+| Name | Description |
+| --- | --- |
+| `beforeStarting` | Event will be fired on the element before animation starts. |
+| `finished` | Event will be fired on the element on each iteration of the animation when it finishes. |
+| `paused` | Event will be fired on the element when the animation is paused. |
+| `resumed` | Event will be fired on the element when the animation is resumed. |

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

37079

increased by1.39%

Lines of code

721

increased by1.41%

Number of lines in readme file

83

increased by16.9%

No dependency changes