versoly-marquee 1.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Versoly Marquee (Versoly Limited) <volkan@versoly.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+<div align="">
+    <h1>Versoly Marquee</h1>
+    <p>A simple and small JS library to create marquee animations</p>
+    <ul>
+        <li>800 bytes</li>
+        <li>Stop animation on hover</li>
+        <li>Speed control</li>
+    </ul>
+    <p>
+        <a href="https://discord.versoly.com"><img src="https://flat.badgen.net/badge/icon/discord?icon=discord&label" alt="Discord"></a>
+        <a href="https://github.com/versoly/versoly-marquee/tree/main?tab=MIT-1-ov-file"><img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese"></a>
+        <a href="https://bundlephobia.com/result?p=versoly-marquee">
+            <img src="https://flat.badgen.net/bundlephobia/minzip/versoly-marquee?icon=packagephobia&label&color=blue&cache=10800" alt="gzip bundle size">
+        </a>
+    </p>
+</div>
+
+------
+
+[![Versoly - Tailwind page builder](public/versoly.png)](https://versoly.com/tailwind-page-builder?utm_source=github&utm_medium=repo&utm_campaign=image&utm_term=versoly-marquee)
+
+
+## Getting started
+
+Versoly marquee can be installed using npm, pnpm, CDNs. It is also tiny so you could just copy paste it onto a landing page for improved page speed.
+
+
+### Install versoly-marquee package
+```js
+npm install versoly-marquee --save
+```
+
+### import versoly-marquee package
+```js
+import { Marquee } from "versoly-marquee";
+
+// add data-toggle="marquee"
+document.querySelectorAll('[data-toggle="marquee"]').forEach((elem) => {
+    // set options on the element using data-options="{'duration': 10, 'direction': 'rtl'}"
+    let t = elem.dataset.options || "{}";
+    // parse data-options using replace for security instead of eval 
+    let options = JSON.parse(t.replaceAll("'", '"'));
+    // add Marquee animation
+    const marquee = new Marquee(elem, options);
+});
+```
+
+
+### CDN
+```html
+<script src="https://unpkg.com/versoly-marquee@1/dist/index.global.min.js"></script>
+```
+
+
+## Frequently Asked Questions
+
+### Why create Versoly Marquee
+
+It shouldn't require custom JS and re-inventing the wheel every time to add the same features to landing pages and marketing sites.
+
+By default if you want a marquee you should use versoly-marquee, and only if it doesn't fit your use case to build it yourself.
+
+### Why not just use CSS?
+
+Versoly Marquee was built to be used in Versoly page builder + CMS and other headless CMSs, this means that non-technical users would be changing content that would effect the CSS required to make it work.
+
+There is no way to only use CSS to create a marquee that isn't a fixed width.
+
+### Why not use a slider library?
+
+Slider libraries are usually 20-100x bigger than versoly-marquee, 99% of the features aren't needed.
+
+
+## Roadmap
+
+- Responsive options
+- Plugins. On scroll, on mouse over.
+- Vue/React and other JS frameworks
+
+
+## Community
+
+If you need help or just want to discuss about the library join the community on Github:
+
+[Discuss on GitHub](https://github.com/versoly/versoly-marquee/discussions)
+
+For casual chatting with others using the library:
+
+[Join the Versoly Discord Server](https://discord.versoly.com)

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=function(a,r={}){var S,w,N;let T=(S=r.loop)!=null?S:!0,x=r.duration||5,i=r.direction||"ltr",H=(w=r.pauseable)!=null?w:!0,m=(N=r.iterations)!=null?N:1,o=0,e=null,t=null,v=this,c=0,M=0,l=0,u=0,f=!1,b=null;const s=i.includes("tt"),q=s?"Y":"X",d=s?"height":"width",z="offset"+(s?"Height":"Width");let p=10/(x*1e3);const E=function(n){const g=n.innerHTML,C=n.childNodes[1]||n;if(u=n[z],t=C[z],t===0)return;const y=Math.ceil((u+1)/t)+3;if(e="<div>"+g+"</div>",n.innerHTML=e,e=n.getElementsByTagName("div")[0],n.style.overflow="clip",e.style[d]=t*y+"px",e.style.whiteSpace="nowrap",e.style.position="relative",e.style.display="flex",e.style.flexDirection=s?"column":"row",m){for(let h=0;h<y-1;h++)e.innerHTML+=g,e.children[h].style["min-"+d]=t+"px";e.style[d]=y*t,(i==="ltr"||i==="ttb")&&(l=-t)}else c=u,(i==="rtl"||i==="btt")&&(o=c);return i==="ltr"||i==="ttb"?o=-t:(i==="rtl"||i==="btt")&&(p=-p),v.init(),e};this.init=function(){b=setInterval(v.play,10),H&&(a.addEventListener("mouseenter",()=>f=!0),a.addEventListener("mouseleave",()=>f=!1))},this.play=function(){f||(e.style.transform="translate".concat(q,"(").concat(l,"px)"),l+=p*t,(l>c||l<-t)&&(l=o,M++,T!==!0&&M>=m&&(e.style.transform="")))},this.end=function(){clearInterval(b)},E(a)};window.Marquee=L;exports.Marquee=L;

package/dist/index.global.min.js

@@ -0,0 +1 @@
+var Marquee=function(a){"use strict";const v=function(o,l={}){var N,g,L;let q=(N=l.loop)!=null?N:!0,H=l.duration||5,i=l.direction||"ltr",E=(g=l.pauseable)!=null?g:!0,M=(L=l.iterations)!=null?L:1,c=0,e=null,t=null,b=this,u=0,z=0,r=0,f=0,d=!1,S=null;const s=i.includes("tt"),x=s?"Y":"X",y=s?"height":"width",w="offset"+(s?"Height":"Width");let p=10/(H*1e3);const C=function(n){const T=n.innerHTML,I=n.childNodes[1]||n;if(f=n[w],t=I[w],t===0)return;const h=Math.ceil((f+1)/t)+3;if(e="<div>"+T+"</div>",n.innerHTML=e,e=n.getElementsByTagName("div")[0],n.style.overflow="clip",e.style[y]=t*h+"px",e.style.whiteSpace="nowrap",e.style.position="relative",e.style.display="flex",e.style.flexDirection=s?"column":"row",M){for(let m=0;m<h-1;m++)e.innerHTML+=T,e.children[m].style["min-"+y]=t+"px";e.style[y]=h*t,(i==="ltr"||i==="ttb")&&(r=-t)}else u=f,(i==="rtl"||i==="btt")&&(c=u);return i==="ltr"||i==="ttb"?c=-t:(i==="rtl"||i==="btt")&&(p=-p),b.init(),e};this.init=function(){S=setInterval(b.play,10),E&&(o.addEventListener("mouseenter",()=>d=!0),o.addEventListener("mouseleave",()=>d=!1))},this.play=function(){d||(e.style.transform="translate".concat(x,"(").concat(r,"px)"),r+=p*t,(r>u||r<-t)&&(r=c,z++,q!==!0&&z>=M&&(e.style.transform="")))},this.end=function(){clearInterval(S)},C(o)};return window.Marquee=v,a.Marquee=v,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),a}({});

package/dist/index.mjs

@@ -0,0 +1,30 @@
+const C = function(a, r = {}) {
+  var N, b, x;
+  let S = (N = r.loop) != null ? N : !0, H = r.duration || 5, i = r.direction || "ltr", T = (b = r.pauseable) != null ? b : !0, m = (x = r.iterations) != null ? x : 1, o = 0, t = null, e = null, v = this, c = 0, z = 0, l = 0, f = 0, u = !1, w = null;
+  const s = i.includes("tt"), g = s ? "Y" : "X", d = s ? "height" : "width", M = "offset" + (s ? "Height" : "Width");
+  let p = 10 / (H * 1e3);
+  const E = function(n) {
+    const L = n.innerHTML, q = n.childNodes[1] || n;
+    if (f = n[M], e = q[M], e === 0)
+      return;
+    const y = Math.ceil((f + 1) / e) + 3;
+    if (t = "<div>" + L + "</div>", n.innerHTML = t, t = n.getElementsByTagName("div")[0], n.style.overflow = "clip", t.style[d] = e * y + "px", t.style.whiteSpace = "nowrap", t.style.position = "relative", t.style.display = "flex", t.style.flexDirection = s ? "column" : "row", m) {
+      for (let h = 0; h < y - 1; h++)
+        t.innerHTML += L, t.children[h].style["min-" + d] = e + "px";
+      t.style[d] = y * e, (i === "ltr" || i === "ttb") && (l = -e);
+    } else
+      c = f, (i === "rtl" || i === "btt") && (o = c);
+    return i === "ltr" || i === "ttb" ? o = -e : (i === "rtl" || i === "btt") && (p = -p), v.init(), t;
+  };
+  this.init = function() {
+    w = setInterval(v.play, 10), T && (a.addEventListener("mouseenter", () => u = !0), a.addEventListener("mouseleave", () => u = !1));
+  }, this.play = function() {
+    u || (t.style.transform = "translate".concat(g, "(").concat(l, "px)"), l += p * e, (l > c || l < -e) && (l = o, z++, S !== !0 && z >= m && (t.style.transform = "")));
+  }, this.end = function() {
+    clearInterval(w);
+  }, E(a);
+};
+window.Marquee = C;
+export {
+  C as Marquee
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "versoly-marquee",
+  "version": "1.0.1",
+  "description": "Marquee - A simple and small JS library to create marquee animations",
+  "author": "Versoly",
+  "license": "MIT",
+  "keywords": [
+    "marquee",
+    "Versoly Marquee",
+    "marquee CSS",
+    "marquee JS",
+    "versoly"
+  ],
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/versoly-marquee.cjs",
+  "unpkg": "dist/versoly-marquee.global.min.js",
+  "jsdelivr": "dist/versoly-marquee.global.min.js",
+  "module": "./dist/versoly-marquee.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/versoly-marquee.mjs",
+      "require": "./dist/versoly-marquee.cjs"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/versoly/versoly-marquee.git"
+  },
+  "bugs": {
+    "url": "https://github.com/versoly/versoly-marquee/issues"
+  },
+  "homepage": "https://versoly.com/versoly-marquee",
+  "contributors": [
+    "Volkan Kaya <volkan@versoly.com>"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^5.4.11"
+  }
+}