motionrail 0.1.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
.motionrail-dots{z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:24px;gap:8px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-dots::-webkit-scrollbar{display:none}.motionrail-dot{--dot-size:44px;min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color:#fff;cursor:pointer;background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-
|
|
1
|
+
.motionrail-dots{z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:24px;gap:8px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-dots::-webkit-scrollbar{display:none}.motionrail-dot{--dot-size:44px;--dot-font-size:14px;min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color:#fff;cursor:pointer;font-size:var(--dot-font-size);background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;transition:all .3s;display:flex}.motionrail-dot:hover{background:#ffffff80;border-color:#fffc;scale:1.1}.motionrail-dot:active{scale:.95}.motionrail-dot-active{color:#000;background:#ffffffe6;border-color:#fff}.motionrail-dot-active:hover{background:#fff}
|
package/dist/extensions/dots.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import "../motionrail-DsLqZe8W.js";
|
|
2
2
|
function Dots(e) {
|
|
3
|
-
let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 44,
|
|
3
|
+
let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 44, fontSize: a = 14, log: o = !1 } = e || {};
|
|
4
4
|
return {
|
|
5
5
|
name: "DotsExtension",
|
|
6
|
-
onInit(e,
|
|
7
|
-
let { totalItems:
|
|
8
|
-
if (
|
|
9
|
-
t.className = "motionrail-dots", t.style.setProperty("--dot-size", `${i}px`);
|
|
10
|
-
for (let i = 0; i <
|
|
6
|
+
onInit(e, o) {
|
|
7
|
+
let { totalItems: s } = o;
|
|
8
|
+
if (s !== 0) {
|
|
9
|
+
t.className = "motionrail-dots", t.style.setProperty("--dot-size", `${i}px`), t.style.setProperty("--dot-font-size", `${a}px`);
|
|
10
|
+
for (let i = 0; i < s; i++) {
|
|
11
11
|
let a = document.createElement("button");
|
|
12
12
|
a.className = "motionrail-dot", a.setAttribute("aria-label", `Go to item ${i + 1}`), r && (a.textContent = (i + 1).toString()), a.addEventListener("click", () => {
|
|
13
13
|
e.scrollToIndex(i);
|
|
@@ -17,8 +17,8 @@ function Dots(e) {
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
onUpdate(e, r) {
|
|
20
|
-
let { visibleItemIndexes: i, totalItems:
|
|
21
|
-
if (!
|
|
20
|
+
let { visibleItemIndexes: i, totalItems: a } = r;
|
|
21
|
+
if (!a) {
|
|
22
22
|
t.style.display = "none";
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
@@ -34,7 +34,7 @@ function Dots(e) {
|
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
o && console.log("DotsExtension updated", r);
|
|
38
38
|
},
|
|
39
39
|
onDestroy(e, r) {
|
|
40
40
|
t.remove(), n.length = 0;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motionrail-scrollable]::-webkit-scrollbar{display:none}[data-motionrail]{position:relative}[data-motionrail] [data-motionrail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motionrail] [data-motionrail-scrollable]:active{cursor:grabbing}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motionrail] [data-motionrail-scrollable] [data-motionrail-grid]>*{pointer-events:none;scroll-snap-align:start}
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,log:
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,fontSize:a=14,log:o=!1}=e||{};return{name:`DotsExtension`,onInit(e,o){let{totalItems:s}=o;if(s!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`),t.style.setProperty(`--dot-font-size`,`${a}px`);for(let i=0;i<s;i++){let a=document.createElement(`button`);a.className=`motionrail-dot`,a.setAttribute(`aria-label`,`Go to item ${i+1}`),r&&(a.textContent=(i+1).toString()),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}e.element.appendChild(t)}},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:a}=r;if(!a){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}o&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});
|
package/dist/lib/main.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "motionrail",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "A lightweight carousel library with momentum-based scrolling, snap alignment, and responsive breakpoints",
|
|
4
5
|
"type": "module",
|
|
5
6
|
"module": "./dist/motionrail.js",
|
|
6
7
|
"types": "./dist/motionrail.d.ts",
|