motionrail 0.5.3 → 0.5.4
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.
- package/extensions/dots/dist/dots.d.ts +0 -2
- package/extensions/dots/dist/dots.es.js +12 -12
- package/extensions/dots/dist/dots.es.js.map +1 -1
- package/extensions/dots/dist/dots.umd.js +1 -1
- package/extensions/dots/dist/dots.umd.js.map +1 -1
- package/extensions/dots/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import "motionrail";
|
|
2
2
|
function Dots(e) {
|
|
3
|
-
let t = null, n = [], { showIndex: r = !1,
|
|
3
|
+
let t = null, n = [], { showIndex: r = !1, log: i = !1 } = e || {};
|
|
4
4
|
return {
|
|
5
5
|
name: "DotsExtension",
|
|
6
|
-
onInit(e,
|
|
7
|
-
let { totalItems:
|
|
8
|
-
if (
|
|
9
|
-
t = document.createElement("div"), t.className = "motionrail-dots"
|
|
10
|
-
for (let i = 0; i <
|
|
6
|
+
onInit(e, i) {
|
|
7
|
+
let { totalItems: a } = i;
|
|
8
|
+
if (a !== 0) {
|
|
9
|
+
t = document.createElement("div"), t.className = "motionrail-dots";
|
|
10
|
+
for (let i = 0; i < a; 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,16 +17,16 @@ function Dots(e) {
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
onUpdate(e, r) {
|
|
20
|
-
let { visibleItemIndexes:
|
|
20
|
+
let { visibleItemIndexes: a, totalItems: o } = r;
|
|
21
21
|
if (t) {
|
|
22
|
-
if (!
|
|
22
|
+
if (!o) {
|
|
23
23
|
t.style.display = "none";
|
|
24
24
|
return;
|
|
25
25
|
}
|
|
26
26
|
if (t.style.removeProperty("display"), n.forEach((e, t) => {
|
|
27
|
-
|
|
28
|
-
}),
|
|
29
|
-
let e = n[
|
|
27
|
+
a.includes(t) ? e.classList.add("motionrail-dot-active") : e.classList.remove("motionrail-dot-active");
|
|
28
|
+
}), a.length > 0) {
|
|
29
|
+
let e = n[a[0]];
|
|
30
30
|
if (e) {
|
|
31
31
|
let n = t.offsetWidth, r = e.offsetLeft, i = e.offsetWidth, a = r - n / 2 + i / 2;
|
|
32
32
|
t.scrollTo({
|
|
@@ -35,7 +35,7 @@ function Dots(e) {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
|
|
38
|
+
i && console.log("DotsExtension updated", r);
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
onDestroy(e, r) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dots.es.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n showIndex?: boolean;\n
|
|
1
|
+
{"version":3,"file":"dots.es.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n showIndex?: boolean;\n log?: boolean;\n}): MotionRailExtension {\n let dotsContainer: HTMLDivElement | null = null;\n const dots: HTMLButtonElement[] = [];\n const {\n showIndex = false,\n log = false,\n } = par || {};\n\n return {\n name: \"DotsExtension\",\n onInit(motionRail: MotionRail, state: MotionRailState) {\n const { totalItems } = state;\n\n if (totalItems === 0) {\n return;\n }\n\n dotsContainer = document.createElement(\"div\");\n\n dotsContainer.className = \"motionrail-dots\";\n\n for (let i = 0; i < totalItems; i++) {\n const dot = document.createElement(\"button\");\n dot.className = \"motionrail-dot\";\n dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n if (showIndex) {\n dot.textContent = (i + 1).toString();\n }\n\n dot.addEventListener(\"click\", () => {\n motionRail.scrollToIndex(i);\n });\n\n dots.push(dot);\n dotsContainer.appendChild(dot);\n }\n\n motionRail.element.appendChild(dotsContainer);\n },\n onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n const { visibleItemIndexes, totalItems } = state;\n if (!dotsContainer) return;\n\n if (!totalItems) {\n dotsContainer.style.display = \"none\";\n return;\n }\n\n dotsContainer.style.removeProperty(\"display\");\n\n dots.forEach((dot, index) => {\n if (visibleItemIndexes.includes(index)) {\n dot.classList.add(\"motionrail-dot-active\");\n } else {\n dot.classList.remove(\"motionrail-dot-active\");\n }\n });\n\n if (visibleItemIndexes.length > 0) {\n const firstActiveDot = dots[visibleItemIndexes[0]];\n if (firstActiveDot) {\n const containerWidth = dotsContainer.offsetWidth;\n const dotLeft = firstActiveDot.offsetLeft;\n const dotWidth = firstActiveDot.offsetWidth;\n const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n dotsContainer.scrollTo({\n left: scrollPosition,\n behavior: \"smooth\",\n });\n }\n }\n\n if (log) {\n console.log(\"DotsExtension updated\", state);\n }\n },\n onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n dotsContainer?.remove();\n dots.length = 0;\n },\n };\n}\n"],"mappings":";AAIA,SAAgB,KAAK,GAGG;CACtB,IAAIA,IAAuC,MACrCC,IAA4B,EAAE,EAC9B,EACJ,eAAY,IACZ,SAAM,OACJ,KAAO,EAAE;AAEb,QAAO;EACL,MAAM;EACN,OAAO,GAAwB,GAAwB;GACrD,IAAM,EAAE,kBAAe;AAEnB,aAAe,GAMnB;IAFA,IAAgB,SAAS,cAAc,MAAM,EAE7C,EAAc,YAAY;AAE1B,SAAK,IAAI,IAAI,GAAG,IAAI,GAAY,KAAK;KACnC,IAAM,IAAM,SAAS,cAAc,SAAS;AAa5C,KAZA,EAAI,YAAY,kBAChB,EAAI,aAAa,cAAc,cAAc,IAAI,IAAI,EAEjD,MACF,EAAI,eAAe,IAAI,GAAG,UAAU,GAGtC,EAAI,iBAAiB,eAAe;AAClC,QAAW,cAAc,EAAE;OAC3B,EAEF,EAAK,KAAK,EAAI,EACd,EAAc,YAAY,EAAI;;AAGhC,MAAW,QAAQ,YAAY,EAAc;;;EAE/C,SAAS,GAAyB,GAAwB;GACxD,IAAM,EAAE,uBAAoB,kBAAe;AACtC,UAEL;QAAI,CAAC,GAAY;AACf,OAAc,MAAM,UAAU;AAC9B;;AAaF,QAVA,EAAc,MAAM,eAAe,UAAU,EAE7C,EAAK,SAAS,GAAK,MAAU;AAC3B,KAAI,EAAmB,SAAS,EAAM,GACpC,EAAI,UAAU,IAAI,wBAAwB,GAE1C,EAAI,UAAU,OAAO,wBAAwB;MAE/C,EAEE,EAAmB,SAAS,GAAG;KACjC,IAAM,IAAiB,EAAK,EAAmB;AAC/C,SAAI,GAAgB;MAClB,IAAM,IAAiB,EAAc,aAC/B,IAAU,EAAe,YACzB,IAAW,EAAe,aAC1B,IAAiB,IAAU,IAAiB,IAAI,IAAW;AAEjE,QAAc,SAAS;OACrB,MAAM;OACN,UAAU;OACX,CAAC;;;AAIN,IAAI,KACF,QAAQ,IAAI,yBAAyB,EAAM;;;EAG/C,UAAU,GAAyB,GAAyB;AAE1D,GADA,GAAe,QAAQ,EACvB,EAAK,SAAS;;EAEjB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`motionrail`)):typeof define==`function`&&define.amd?define([`exports`,`motionrail`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={},e.MotionRail))})(this,function(e,t){function n(e){let t=null,n=[],{showIndex:r=!1,
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`motionrail`)):typeof define==`function`&&define.amd?define([`exports`,`motionrail`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={},e.MotionRail))})(this,function(e,t){function n(e){let t=null,n=[],{showIndex:r=!1,log:i=!1}=e||{};return{name:`DotsExtension`,onInit(e,i){let{totalItems:a}=i;if(a!==0){t=document.createElement(`div`),t.className=`motionrail-dots`;for(let i=0;i<a;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:a,totalItems:o}=r;if(t){if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{a.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),a.length>0){let e=n[a[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`})}}i&&console.log(`DotsExtension updated`,r)}},onDestroy(e,r){t?.remove(),n.length=0}}}e.Dots=n});
|
|
2
2
|
//# sourceMappingURL=dots.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dots.umd.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n showIndex?: boolean;\n
|
|
1
|
+
{"version":3,"file":"dots.umd.js","names":["dotsContainer: HTMLDivElement | null","dots: HTMLButtonElement[]"],"sources":["../src/dots.ts"],"sourcesContent":["import { MotionRail } from \"motionrail\";\nimport type { MotionRailExtension, MotionRailState } from \"motionrail\";\nimport \"./style.css\";\n\nexport function Dots(par?: {\n showIndex?: boolean;\n log?: boolean;\n}): MotionRailExtension {\n let dotsContainer: HTMLDivElement | null = null;\n const dots: HTMLButtonElement[] = [];\n const {\n showIndex = false,\n log = false,\n } = par || {};\n\n return {\n name: \"DotsExtension\",\n onInit(motionRail: MotionRail, state: MotionRailState) {\n const { totalItems } = state;\n\n if (totalItems === 0) {\n return;\n }\n\n dotsContainer = document.createElement(\"div\");\n\n dotsContainer.className = \"motionrail-dots\";\n\n for (let i = 0; i < totalItems; i++) {\n const dot = document.createElement(\"button\");\n dot.className = \"motionrail-dot\";\n dot.setAttribute(\"aria-label\", `Go to item ${i + 1}`);\n\n if (showIndex) {\n dot.textContent = (i + 1).toString();\n }\n\n dot.addEventListener(\"click\", () => {\n motionRail.scrollToIndex(i);\n });\n\n dots.push(dot);\n dotsContainer.appendChild(dot);\n }\n\n motionRail.element.appendChild(dotsContainer);\n },\n onUpdate(_motionRail: MotionRail, state: MotionRailState) {\n const { visibleItemIndexes, totalItems } = state;\n if (!dotsContainer) return;\n\n if (!totalItems) {\n dotsContainer.style.display = \"none\";\n return;\n }\n\n dotsContainer.style.removeProperty(\"display\");\n\n dots.forEach((dot, index) => {\n if (visibleItemIndexes.includes(index)) {\n dot.classList.add(\"motionrail-dot-active\");\n } else {\n dot.classList.remove(\"motionrail-dot-active\");\n }\n });\n\n if (visibleItemIndexes.length > 0) {\n const firstActiveDot = dots[visibleItemIndexes[0]];\n if (firstActiveDot) {\n const containerWidth = dotsContainer.offsetWidth;\n const dotLeft = firstActiveDot.offsetLeft;\n const dotWidth = firstActiveDot.offsetWidth;\n const scrollPosition = dotLeft - containerWidth / 2 + dotWidth / 2;\n\n dotsContainer.scrollTo({\n left: scrollPosition,\n behavior: \"smooth\",\n });\n }\n }\n\n if (log) {\n console.log(\"DotsExtension updated\", state);\n }\n },\n onDestroy(_motionRail: MotionRail, _state: MotionRailState) {\n dotsContainer?.remove();\n dots.length = 0;\n },\n };\n}\n"],"mappings":"2QAIA,SAAgB,EAAK,EAGG,CACtB,IAAIA,EAAuC,KACrCC,EAA4B,EAAE,CAC9B,CACJ,YAAY,GACZ,MAAM,IACJ,GAAO,EAAE,CAEb,MAAO,CACL,KAAM,gBACN,OAAO,EAAwB,EAAwB,CACrD,GAAM,CAAE,cAAe,EAEnB,OAAe,EAMnB,CAFA,EAAgB,SAAS,cAAc,MAAM,CAE7C,EAAc,UAAY,kBAE1B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAY,IAAK,CACnC,IAAM,EAAM,SAAS,cAAc,SAAS,CAC5C,EAAI,UAAY,iBAChB,EAAI,aAAa,aAAc,cAAc,EAAI,IAAI,CAEjD,IACF,EAAI,aAAe,EAAI,GAAG,UAAU,EAGtC,EAAI,iBAAiB,YAAe,CAClC,EAAW,cAAc,EAAE,EAC3B,CAEF,EAAK,KAAK,EAAI,CACd,EAAc,YAAY,EAAI,CAGhC,EAAW,QAAQ,YAAY,EAAc,GAE/C,SAAS,EAAyB,EAAwB,CACxD,GAAM,CAAE,qBAAoB,cAAe,EACtC,KAEL,IAAI,CAAC,EAAY,CACf,EAAc,MAAM,QAAU,OAC9B,OAaF,GAVA,EAAc,MAAM,eAAe,UAAU,CAE7C,EAAK,SAAS,EAAK,IAAU,CACvB,EAAmB,SAAS,EAAM,CACpC,EAAI,UAAU,IAAI,wBAAwB,CAE1C,EAAI,UAAU,OAAO,wBAAwB,EAE/C,CAEE,EAAmB,OAAS,EAAG,CACjC,IAAM,EAAiB,EAAK,EAAmB,IAC/C,GAAI,EAAgB,CAClB,IAAM,EAAiB,EAAc,YAC/B,EAAU,EAAe,WACzB,EAAW,EAAe,YAC1B,EAAiB,EAAU,EAAiB,EAAI,EAAW,EAEjE,EAAc,SAAS,CACrB,KAAM,EACN,SAAU,SACX,CAAC,EAIF,GACF,QAAQ,IAAI,wBAAyB,EAAM,GAG/C,UAAU,EAAyB,EAAyB,CAC1D,GAAe,QAAQ,CACvB,EAAK,OAAS,GAEjB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.motionrail-dots{--dot-size:34px;--dot-font-size:12px;z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:0 0;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{min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color
|
|
1
|
+
.motionrail-dots{--dot-size:34px;--dot-font-size:12px;--dot-bg:#8080804d;--dot-bg-hover:#80808080;--dot-bg-active:#666;--dot-bg-active-hover:#555;--dot-color:#999;--dot-color-active:#fff;z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:0 0;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{min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);background:var(--dot-bg);color:var(--dot-color);cursor:pointer;font-size:var(--dot-font-size);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:600;transition:all .3s;display:flex}.motionrail-dot:hover{background:var(--dot-bg-hover);scale:1.1}.motionrail-dot:active{scale:.95}.motionrail-dot-active{background:var(--dot-bg-active);color:var(--dot-color-active)}.motionrail-dot-active:hover{background:var(--dot-bg-active-hover)}
|
|
2
2
|
/*$vite$:1*/
|