motionrail 0.1.2 → 0.1.3
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/README.md +19 -19
- package/dist/extensions/arrows.js +1 -1
- package/dist/extensions/arrows.umd.cjs +1 -1
- package/dist/extensions/dots.js +1 -1
- package/dist/extensions/dots.umd.cjs +1 -1
- package/dist/extensions/logger.js +1 -1
- package/dist/extensions/logger.umd.cjs +1 -1
- package/dist/extensions/thumbnails.js +3 -3
- package/dist/extensions/thumbnails.umd.cjs +2 -2
- package/dist/{motionrail-Dq8joDtA.js → motionrail-DsLqZe8W.js} +8 -8
- package/dist/motionrail.js +1 -1
- package/dist/motionrail.umd.cjs +4 -4
- package/dist/react.js +4 -4
- package/dist/solid.js +2 -2
- package/dist/style.css +1 -1
- package/dist/svelte.js +4 -4
- package/dist/svelte5.js +4 -4
- package/dist/vue.js +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -132,9 +132,9 @@ const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
|
|
|
132
132
|
### HTML Structure
|
|
133
133
|
|
|
134
134
|
```html
|
|
135
|
-
<div data-
|
|
136
|
-
<div data-
|
|
137
|
-
<div data-
|
|
135
|
+
<div data-motionrail id="carousel">
|
|
136
|
+
<div data-motionrail-scrollable>
|
|
137
|
+
<div data-motionrail-grid>
|
|
138
138
|
<div>Item 1</div>
|
|
139
139
|
<div>Item 2</div>
|
|
140
140
|
<div>Item 3</div>
|
|
@@ -145,9 +145,9 @@ const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
|
|
|
145
145
|
```
|
|
146
146
|
|
|
147
147
|
**Structure layers:**
|
|
148
|
-
- `[data-
|
|
149
|
-
- `[data-
|
|
150
|
-
- `[data-
|
|
148
|
+
- `[data-motionrail]` - Wrapper element (receives the ID)
|
|
149
|
+
- `[data-motionrail-scrollable]` - Scrollable container with overflow and snap behavior
|
|
150
|
+
- `[data-motionrail-grid]` - Grid layout container
|
|
151
151
|
- Direct children - Carousel items (no specific class or attribute required)
|
|
152
152
|
|
|
153
153
|
### CSS Import
|
|
@@ -534,7 +534,7 @@ Refresh the carousel after dynamically adding or removing items from the DOM. Th
|
|
|
534
534
|
|
|
535
535
|
```js
|
|
536
536
|
// Add items to the DOM
|
|
537
|
-
const grid = document.querySelector('[data-
|
|
537
|
+
const grid = document.querySelector('[data-motionrail-grid]');
|
|
538
538
|
const newItem = document.createElement('div');
|
|
539
539
|
newItem.textContent = 'New Item';
|
|
540
540
|
grid.appendChild(newItem);
|
|
@@ -771,9 +771,9 @@ const carousel = new MotionRail(
|
|
|
771
771
|
### With Navigation Controls
|
|
772
772
|
|
|
773
773
|
```html
|
|
774
|
-
<div data-
|
|
775
|
-
<div data-
|
|
776
|
-
<div data-
|
|
774
|
+
<div data-motionrail id="carousel">
|
|
775
|
+
<div data-motionrail-scrollable>
|
|
776
|
+
<div data-motionrail-grid>
|
|
777
777
|
<div>Item 1</div>
|
|
778
778
|
<div>Item 2</div>
|
|
779
779
|
<div>Item 3</div>
|
|
@@ -811,9 +811,9 @@ document.getElementById('pause').addEventListener('click', () => carousel.pause(
|
|
|
811
811
|
### Dynamic Content
|
|
812
812
|
|
|
813
813
|
```html
|
|
814
|
-
<div data-
|
|
815
|
-
<div data-
|
|
816
|
-
<div data-
|
|
814
|
+
<div data-motionrail id="carousel">
|
|
815
|
+
<div data-motionrail-scrollable>
|
|
816
|
+
<div data-motionrail-grid id="carousel-grid">
|
|
817
817
|
<div>Item 1</div>
|
|
818
818
|
<div>Item 2</div>
|
|
819
819
|
<div>Item 3</div>
|
|
@@ -859,11 +859,11 @@ document.getElementById('remove-item').addEventListener('click', () => {
|
|
|
859
859
|
The library includes base styles via `motionrail/style.css`. You can customize the appearance of items with your own CSS:
|
|
860
860
|
|
|
861
861
|
```css
|
|
862
|
-
[data-
|
|
862
|
+
[data-motionrail] {
|
|
863
863
|
height: 400px; /* Set carousel height */
|
|
864
864
|
}
|
|
865
865
|
|
|
866
|
-
[data-
|
|
866
|
+
[data-motionrail-grid] > * {
|
|
867
867
|
/* Style your carousel items */
|
|
868
868
|
background: #f0f0f0;
|
|
869
869
|
border-radius: 8px;
|
|
@@ -873,10 +873,10 @@ The library includes base styles via `motionrail/style.css`. You can customize t
|
|
|
873
873
|
```
|
|
874
874
|
|
|
875
875
|
**Key selectors:**
|
|
876
|
-
- `[data-
|
|
877
|
-
- `[data-
|
|
878
|
-
- `[data-
|
|
879
|
-
- `[data-
|
|
876
|
+
- `[data-motionrail]` - Wrapper element
|
|
877
|
+
- `[data-motionrail-scrollable]` - Scrollable container (has overflow and snap type)
|
|
878
|
+
- `[data-motionrail-grid]` - Grid layout container
|
|
879
|
+
- `[data-motionrail-grid] > *` - Direct children (carousel items)
|
|
880
880
|
|
|
881
881
|
## Browser Support
|
|
882
882
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../motionrail-
|
|
1
|
+
import "../motionrail-DsLqZe8W.js";
|
|
2
2
|
function Arrows(e) {
|
|
3
3
|
let t = document.createElement("button"), n = document.createElement("button"), { leftIcon: r = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-left-icon lucide-chevron-left\"><path d=\"m15 18-6-6 6-6\"/></svg>", rightIcon: i = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-right-icon lucide-chevron-right\"><path d=\"m9 18 6-6-6-6\"/></svg>", loop: a = !0, log: o = !1 } = e || {};
|
|
4
4
|
return {
|
|
@@ -1,2 +1,2 @@
|
|
|
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.MotionRailArrows={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-
|
|
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.MotionRailArrows={}))})(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
2
|
/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`button`),n=document.createElement(`button`),{leftIcon:r=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>`,rightIcon:i=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>`,loop:a=!0,log:o=!1}=e||{};return{name:`ArrowExtension`,onInit(e,a){let{totalItems:o}=a;if(o===0)return;let{rtl:s}=e.getOptions();t.innerHTML=r,t.className=`motionrail-arrow motionrail-arrow-left`,t.addEventListener(`click`,()=>{s?e.next():e.prev()}),n.innerHTML=i,n.className=`motionrail-arrow motionrail-arrow-right`,n.addEventListener(`click`,()=>{s?e.prev():e.next()}),e.element.appendChild(t),e.element.appendChild(n)},onUpdate(e,r){let{isFirstItemVisible:i,isLastItemVisible:s,totalItems:c,visibleItemIndexes:l}=r;a||(t.disabled=i,n.disabled=s),l.length<c?(t.style.removeProperty(`display`),n.style.removeProperty(`display`)):(t.style.display=`none`,n.style.display=`none`),c||(t.style.display=`none`,n.style.display=`none`),o&&console.log(`ArrowExtension updated`,r)},onDestroy(e,r){t.remove(),n.remove()}}}e.Arrows=n});
|
package/dist/extensions/dots.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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-
|
|
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
2
|
/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,log:a=!1}=e||{};return{name:`DotsExtension`,onInit(e,a){let{totalItems:o}=a;if(o!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`);for(let i=0;i<o;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:o}=r;if(!o){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`})}}a&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});
|
|
@@ -1,2 +1,2 @@
|
|
|
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.MotionRailLogger={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-
|
|
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.MotionRailLogger={}))})(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
2
|
/*$vite$:1*/`,document.head.appendChild(t);function n(){return{name:`LoggerExtension`,onInit(e,t){console.debug(`[LoggerExtension] MotionRail initialized`,t),console.debug(e)},onUpdate(e,t){console.debug(`[LoggerExtension] MotionRail updated`,t),console.debug(e)},onDestroy(e,t){console.debug(`[LoggerExtension] MotionRail destroyed`,t),console.debug(e)}}}e.Logger=n});
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import "../motionrail-
|
|
1
|
+
import "../motionrail-DsLqZe8W.js";
|
|
2
2
|
function Thumbnails(e) {
|
|
3
3
|
let t = document.createElement("div"), n = [], { thumbnailWidth: r = 80, thumbnailHeight: i = 80, log: a = !1 } = e || {};
|
|
4
4
|
return {
|
|
5
5
|
name: "ThumbnailsExtension",
|
|
6
6
|
onInit(e, a) {
|
|
7
7
|
let { totalItems: o } = a;
|
|
8
|
-
o !== 0 && (t.className = "motionrail-thumbnails", t.style.setProperty("--thumbnail-width", `${r}px`), t.style.setProperty("--thumbnail-height", `${i}px`), e.element.querySelectorAll("[data-
|
|
8
|
+
o !== 0 && (t.className = "motionrail-thumbnails", t.style.setProperty("--thumbnail-width", `${r}px`), t.style.setProperty("--thumbnail-height", `${i}px`), e.element.querySelectorAll("[data-motionrail-grid] > *").forEach((r, i) => {
|
|
9
9
|
let a = document.createElement("button");
|
|
10
10
|
a.className = "motionrail-thumbnail", a.setAttribute("aria-label", `Go to item ${i + 1}`);
|
|
11
11
|
let o = r.cloneNode(!0);
|
|
12
|
-
o.removeAttribute("data-
|
|
12
|
+
o.removeAttribute("data-motionrail-item"), a.appendChild(o), a.addEventListener("click", () => {
|
|
13
13
|
e.scrollToIndex(i);
|
|
14
14
|
}), n.push(a), t.appendChild(a);
|
|
15
15
|
}), e.element.appendChild(t));
|
|
@@ -1,2 +1,2 @@
|
|
|
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.MotionRailThumbnails={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{thumbnailWidth:r=80,thumbnailHeight:i=80,log:a=!1}=e||{};return{name:`ThumbnailsExtension`,onInit(e,a){let{totalItems:o}=a;o!==0&&(t.className=`motionrail-thumbnails`,t.style.setProperty(`--thumbnail-width`,`${r}px`),t.style.setProperty(`--thumbnail-height`,`${i}px`),e.element.querySelectorAll(`[data-
|
|
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.MotionRailThumbnails={}))})(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=[],{thumbnailWidth:r=80,thumbnailHeight:i=80,log:a=!1}=e||{};return{name:`ThumbnailsExtension`,onInit(e,a){let{totalItems:o}=a;o!==0&&(t.className=`motionrail-thumbnails`,t.style.setProperty(`--thumbnail-width`,`${r}px`),t.style.setProperty(`--thumbnail-height`,`${i}px`),e.element.querySelectorAll(`[data-motionrail-grid] > *`).forEach((r,i)=>{let a=document.createElement(`button`);a.className=`motionrail-thumbnail`,a.setAttribute(`aria-label`,`Go to item ${i+1}`);let o=r.cloneNode(!0);o.removeAttribute(`data-motionrail-item`),a.appendChild(o),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}),e.element.appendChild(t))},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-thumbnail-active`):e.classList.remove(`motionrail-thumbnail-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`})}}a&&console.log(`ThumbnailsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Thumbnails=n});
|
|
@@ -38,9 +38,9 @@ var MotionRail = class {
|
|
|
38
38
|
columns: 1,
|
|
39
39
|
gap: "0px"
|
|
40
40
|
}], this.element = e, this.extensions = t.extensions || [];
|
|
41
|
-
let n = this.element.querySelector("[data-
|
|
42
|
-
if (!n) throw Error("MotionRail: [data-
|
|
43
|
-
this.scrollable = n, this.delay = t.delay || 3e3, this.resumeDelay = t.resumeDelay || 4e3, this.onChange = t.onChange, this.state.totalItems = this.element.querySelectorAll("[data-
|
|
41
|
+
let n = this.element.querySelector("[data-motionrail-scrollable]");
|
|
42
|
+
if (!n) throw Error("MotionRail: [data-motionrail-scrollable] element not found");
|
|
43
|
+
this.scrollable = n, this.delay = t.delay || 3e3, this.resumeDelay = t.resumeDelay || 4e3, this.onChange = t.onChange, this.state.totalItems = this.element.querySelectorAll("[data-motionrail-grid] > *").length, this.setBreakPoints(), this.setLogicalScroll(0), this.attachPointerEvents(), this.cacheSnapPoints(), this.observeResize(), this.observeEdgeItems(), this.autoplay && this.play();
|
|
44
44
|
let r = this.getState();
|
|
45
45
|
this.extensions.forEach((e) => {
|
|
46
46
|
e.onInit && e.onInit(this, r);
|
|
@@ -50,7 +50,7 @@ var MotionRail = class {
|
|
|
50
50
|
return `motion-rail-${Math.random().toString(36).substring(2, 11)}`;
|
|
51
51
|
}
|
|
52
52
|
setBreakPoints() {
|
|
53
|
-
let e = this.element.querySelector("[data-
|
|
53
|
+
let e = this.element.querySelector("[data-motionrail-scrollable]");
|
|
54
54
|
if (!e) return;
|
|
55
55
|
let t = "";
|
|
56
56
|
e.style.containerName ? t = e.style.containerName : (t = this.randomContainerName(), e.style.containerName = t);
|
|
@@ -59,7 +59,7 @@ var MotionRail = class {
|
|
|
59
59
|
let n = e.columns || 1, i = e.gap || "0px", o = `calc((100cqw - (${n - 1} * ${i})) / ${n})`, s = "";
|
|
60
60
|
s = e.width ? `(min-width: ${e.width}px)` : a ? `(max-width: ${a - 1}px)` : "(min-width: 0px)", r += `
|
|
61
61
|
@container ${t} ${s} {
|
|
62
|
-
[data-
|
|
62
|
+
[data-motionrail-grid] {
|
|
63
63
|
grid-template-columns: repeat(${this.state.totalItems}, ${o});
|
|
64
64
|
gap: ${i};
|
|
65
65
|
}
|
|
@@ -86,7 +86,7 @@ var MotionRail = class {
|
|
|
86
86
|
}
|
|
87
87
|
observeEdgeItems() {
|
|
88
88
|
if (typeof IntersectionObserver > "u") return;
|
|
89
|
-
let e = this.element.querySelectorAll("[data-
|
|
89
|
+
let e = this.element.querySelectorAll("[data-motionrail-grid] > *");
|
|
90
90
|
if (e.length === 0) return;
|
|
91
91
|
let t = e[0], n = e[e.length - 1];
|
|
92
92
|
this.intersectionObserver = new IntersectionObserver((r) => {
|
|
@@ -114,7 +114,7 @@ var MotionRail = class {
|
|
|
114
114
|
}), e.forEach((e) => this.intersectionObserver.observe(e));
|
|
115
115
|
}
|
|
116
116
|
cacheSnapPoints() {
|
|
117
|
-
let e = this.element.querySelectorAll("[data-
|
|
117
|
+
let e = this.element.querySelectorAll("[data-motionrail-grid] > *"), t = this.scrollable.scrollWidth - this.scrollable.clientWidth;
|
|
118
118
|
this.snapPoints = Array.from(e).map((e) => Math.min(e.offsetLeft, t));
|
|
119
119
|
}
|
|
120
120
|
findNearestSnapPoint(e) {
|
|
@@ -201,7 +201,7 @@ var MotionRail = class {
|
|
|
201
201
|
};
|
|
202
202
|
}
|
|
203
203
|
update() {
|
|
204
|
-
this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.state.totalItems = this.element.querySelectorAll("[data-
|
|
204
|
+
this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.state.totalItems = this.element.querySelectorAll("[data-motionrail-grid] > *").length, this.state.visibleItemIndexes = [], this.state.isFirstItemVisible = !1, this.state.isLastItemVisible = !1, this.setBreakPoints(), this.cacheSnapPoints(), this.observeEdgeItems(), this.handleStateChange();
|
|
205
205
|
}
|
|
206
206
|
destroy() {
|
|
207
207
|
let e = this.getState();
|
package/dist/motionrail.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
export { MotionRail };
|
package/dist/motionrail.umd.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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.MotionRail={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(t),e.MotionRail=class{element;scrollable;rtl=!1;autoplay=!1;delay=3e3;resumeDelay=4e3;onChange;handleStateChange=()=>{let e=this.getState();this.extensions.forEach(t=>{t.onUpdate&&t.onUpdate(this,e)}),this.onChange&&this.onChange(e)};extensions=[];breakpoints=[];autoPlayIntervalId=null;autoPlayTimeoutId=null;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;intersectionObserver=null;state={totalItems:0,visibleItemIndexes:[],isFirstItemVisible:!1,isLastItemVisible:!1};constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints||[{columns:1,gap:`0px`}],this.element=e,this.extensions=t.extensions||[];let n=this.element.querySelector(`[data-
|
|
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.MotionRail={}))})(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),e.MotionRail=class{element;scrollable;rtl=!1;autoplay=!1;delay=3e3;resumeDelay=4e3;onChange;handleStateChange=()=>{let e=this.getState();this.extensions.forEach(t=>{t.onUpdate&&t.onUpdate(this,e)}),this.onChange&&this.onChange(e)};extensions=[];breakpoints=[];autoPlayIntervalId=null;autoPlayTimeoutId=null;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;intersectionObserver=null;state={totalItems:0,visibleItemIndexes:[],isFirstItemVisible:!1,isLastItemVisible:!1};constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints||[{columns:1,gap:`0px`}],this.element=e,this.extensions=t.extensions||[];let n=this.element.querySelector(`[data-motionrail-scrollable]`);if(!n)throw Error(`MotionRail: [data-motionrail-scrollable] element not found`);this.scrollable=n,this.delay=t.delay||3e3,this.resumeDelay=t.resumeDelay||4e3,this.onChange=t.onChange,this.state.totalItems=this.element.querySelectorAll(`[data-motionrail-grid] > *`).length,this.setBreakPoints(),this.setLogicalScroll(0),this.attachPointerEvents(),this.cacheSnapPoints(),this.observeResize(),this.observeEdgeItems(),this.autoplay&&this.play();let r=this.getState();this.extensions.forEach(e=>{e.onInit&&e.onInit(this,r)})}randomContainerName(){return`motion-rail-${Math.random().toString(36).substring(2,11)}`}setBreakPoints(){let e=this.element.querySelector(`[data-motionrail-scrollable]`);if(!e)return;let t=``;e.style.containerName?t=e.style.containerName:(t=this.randomContainerName(),e.style.containerName=t);let n=document.createElement(`style`),r=``,i=this.breakpoints.filter(e=>e.width),a=i.length>0?Math.min(...i.map(e=>e.width)):null;return this.breakpoints.forEach(e=>{let n=e.columns||1,i=e.gap||`0px`,o=`calc((100cqw - (${n-1} * ${i})) / ${n})`,s=``;s=e.width?`(min-width: ${e.width}px)`:a?`(max-width: ${a-1}px)`:`(min-width: 0px)`,r+=`
|
|
3
3
|
@container ${t} ${s} {
|
|
4
|
-
[data-
|
|
4
|
+
[data-motionrail-grid] {
|
|
5
5
|
grid-template-columns: repeat(${this.state.totalItems}, ${o});
|
|
6
6
|
gap: ${i};
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
`}),n.textContent=r,document.head.appendChild(n),n}getLogicalScroll(){return this.scrollable.scrollLeft}setLogicalScroll(e){this.scrollable.scrollLeft=e}scrollToLogical(e,t=`auto`){this.scrollable.scrollTo({left:e,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.scrollable))}observeEdgeItems(){if(typeof IntersectionObserver>`u`)return;let e=this.element.querySelectorAll(`[data-
|
|
9
|
+
`}),n.textContent=r,document.head.appendChild(n),n}getLogicalScroll(){return this.scrollable.scrollLeft}setLogicalScroll(e){this.scrollable.scrollLeft=e}scrollToLogical(e,t=`auto`){this.scrollable.scrollTo({left:e,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.scrollable))}observeEdgeItems(){if(typeof IntersectionObserver>`u`)return;let e=this.element.querySelectorAll(`[data-motionrail-grid] > *`);if(e.length===0)return;let t=e[0],n=e[e.length-1];this.intersectionObserver=new IntersectionObserver(r=>{let i=!1;r.forEach(r=>{let a=Array.from(e).indexOf(r.target);if(a!==-1){if(r.isIntersecting)this.state.visibleItemIndexes.includes(a)||(this.state.visibleItemIndexes.push(a),this.state.visibleItemIndexes.sort((e,t)=>e-t),i=!0);else{let e=this.state.visibleItemIndexes.length;this.state.visibleItemIndexes=this.state.visibleItemIndexes.filter(e=>e!==a),this.state.visibleItemIndexes.length!==e&&(i=!0)}if(r.target===t){let e=r.isIntersecting;this.state.isFirstItemVisible!==e&&(this.state.isFirstItemVisible=e,i=!0)}else if(r.target===n){let e=r.isIntersecting;this.state.isLastItemVisible!==e&&(this.state.isLastItemVisible=e,i=!0)}}}),i&&this.handleStateChange()},{root:this.scrollable,threshold:.5}),e.forEach(e=>this.intersectionObserver.observe(e))}cacheSnapPoints(){let e=this.element.querySelectorAll(`[data-motionrail-grid] > *`),t=this.scrollable.scrollWidth-this.scrollable.clientWidth;this.snapPoints=Array.from(e).map(e=>Math.min(e.offsetLeft,t))}findNearestSnapPoint(e){let t=0,n=1/0;for(let r of this.snapPoints){let i=Math.abs(r-e);i<n&&(n=i,t=r)}return t}attachPointerEvents(){window.matchMedia(`(pointer: fine)`).matches&&(this.scrollable.addEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.addEventListener(`pointermove`,this.handlePointerMove),this.scrollable.addEventListener(`pointerup`,this.handlePointerUp),this.scrollable.addEventListener(`pointerleave`,this.handlePointerUp))}handlePointerDown=e=>{this.pointerId===null&&(this.pointerId=e.pointerId,this.scrollable.setPointerCapture(e.pointerId),this.isDragging=!0,this.startX=e.clientX,this.startLogicalScroll=this.getLogicalScroll(),this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp,this.velocity=0,this.scrollable.style.userSelect=`none`,this.scrollable.style.scrollSnapType=`none`,this.pause(),this.cancelScroll&&this.cancelScroll(),this.autoPlayTimeoutId&&clearTimeout(this.autoPlayTimeoutId))};handlePointerMove=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;e.preventDefault();let t=e.clientX-this.startX,n=this.startLogicalScroll-t;this.setLogicalScroll(n);let r=e.timeStamp-this.lastPointerTime;r>0&&(this.velocity=(e.clientX-this.lastPointerX)/r,this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp)};handlePointerUp=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;this.scrollable.releasePointerCapture(e.pointerId),this.pointerId=null,this.isDragging=!1,this.scrollable.style.userSelect=``;let t=Math.abs(this.velocity),n=Math.min(100+Math.sqrt(t)*50,200),r=-this.velocity*n,i=this.getLogicalScroll()+r;this.cancelScroll&&this.cancelScroll();let a=this.findNearestSnapPoint(i);this.cancelScroll=this.animateLogicalScroll(a,n,()=>{this.scrollable.style.scrollSnapType=`x mandatory`,this.cancelScroll=null,this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}),this.velocity=0};animateLogicalScroll(e,t,n){let r=this.getLogicalScroll(),i=performance.now(),a=!1,o=s=>{if(a)return;let c=s-i,l=Math.min(c/t,1),u=1-(1-l)**3,d=r+(e-r)*u;this.setLogicalScroll(d),l<1?requestAnimationFrame(o):n()};return requestAnimationFrame(o),()=>{a=!0}}scrollByPage(e){if(this.state.visibleItemIndexes.length===0)return;let t,n=this.state.visibleItemIndexes[0],r=this.state.visibleItemIndexes[this.state.visibleItemIndexes.length-1],i=this.state.visibleItemIndexes.length;e===1?(t=r+1,this.rtl&&(t=r+i),t>=this.snapPoints.length-1&&this.state.isLastItemVisible?t=0:t>=this.snapPoints.length-1&&!this.state.isLastItemVisible&&(t=this.snapPoints.length-1)):(t=n-i,this.rtl&&(t=r-i),t<=0&&this.state.isFirstItemVisible?t=this.snapPoints.length-1:t<=0&&!this.state.isFirstItemVisible&&(t=0)),this.scrollToLogical(this.snapPoints[t],`smooth`)}play(){this.autoPlayIntervalId=window.setInterval(()=>{this.scrollByPage(1)},this.delay)}next(){this.pause(),this.scrollByPage(1)}prev(){this.pause(),this.scrollByPage(-1)}pause(){this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),!this.isDragging&&this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}scrollToIndex(e){this.pause(),e>=0&&e<this.snapPoints.length&&this.scrollToLogical(this.snapPoints[e],`smooth`)}getState(){return{...this.state,visibleItemIndexes:[...this.state.visibleItemIndexes]}}getOptions(){return{autoplay:this.autoplay,rtl:this.rtl,delay:this.delay,resumeDelay:this.resumeDelay,breakpoints:this.breakpoints.map(e=>({...e}))}}update(){this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.state.totalItems=this.element.querySelectorAll(`[data-motionrail-grid] > *`).length,this.state.visibleItemIndexes=[],this.state.isFirstItemVisible=!1,this.state.isLastItemVisible=!1,this.setBreakPoints(),this.cacheSnapPoints(),this.observeEdgeItems(),this.handleStateChange()}destroy(){let e=this.getState();this.extensions.forEach(t=>{t.onDestroy&&t.onDestroy(this,e)}),this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.cancelScroll&&=(this.cancelScroll(),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),this.resizeObserver&&=(this.resizeObserver.disconnect(),null),this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.scrollable.removeEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.removeEventListener(`pointermove`,this.handlePointerMove),this.scrollable.removeEventListener(`pointerup`,this.handlePointerUp),this.scrollable.removeEventListener(`pointerleave`,this.handlePointerUp)}}});
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
import { useEffect, useRef } from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
function MotionRailReact({ options: i, ref: a, divRef: o, ...s }) {
|
|
@@ -11,12 +11,12 @@ function MotionRailReact({ options: i, ref: a, divRef: o, ...s }) {
|
|
|
11
11
|
l.current && l.current.update();
|
|
12
12
|
}, [u]), /* @__PURE__ */ jsx("div", {
|
|
13
13
|
ref: c,
|
|
14
|
-
"data-
|
|
14
|
+
"data-motionrail": !0,
|
|
15
15
|
...d,
|
|
16
16
|
children: /* @__PURE__ */ jsx("div", {
|
|
17
|
-
"data-
|
|
17
|
+
"data-motionrail-scrollable": !0,
|
|
18
18
|
children: /* @__PURE__ */ jsx("div", {
|
|
19
|
-
"data-
|
|
19
|
+
"data-motionrail-grid": !0,
|
|
20
20
|
children: u
|
|
21
21
|
})
|
|
22
22
|
})
|
package/dist/solid.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
import { insert, spread, template, use } from "solid-js/web";
|
|
3
3
|
import { createEffect, onCleanup, onMount, splitProps } from "solid-js";
|
|
4
|
-
var _tmpl$ = /* @__PURE__ */ template("<div data-
|
|
4
|
+
var _tmpl$ = /* @__PURE__ */ template("<div data-motionrail><div data-motionrail-scrollable><div data-motionrail-grid>");
|
|
5
5
|
function MotionRailSolid(c) {
|
|
6
6
|
let [u, d] = splitProps(c, [
|
|
7
7
|
"options",
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-
|
|
1
|
+
[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}
|
package/dist/svelte.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
import { C as reset, S as push, T as enable_legacy_mode_flag, _ as child, a as bind_this, c as slot, d as from_html, f as deep_read_state, h as legacy_pre_effect_reset, i as init, m as legacy_pre_effect, n as prop, o as bind_prop, p as get, s as attribute_effect, t as legacy_rest_props, u as append, v as mutable_source, x as pop, y as set } from "./client-pmAKFFi-.js";
|
|
3
3
|
import { onDestroy, onMount } from "svelte";
|
|
4
4
|
enable_legacy_mode_flag();
|
|
5
|
-
var root = from_html("<div><div data-
|
|
5
|
+
var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
|
|
6
6
|
function Svelte(S, C) {
|
|
7
7
|
let w = legacy_rest_props(legacy_rest_props(C, [
|
|
8
8
|
"children",
|
|
@@ -27,7 +27,7 @@ function Svelte(S, C) {
|
|
|
27
27
|
onMount(() => {
|
|
28
28
|
if (!get(O)) return;
|
|
29
29
|
set(k, new MotionRail(get(O), T()));
|
|
30
|
-
let x = get(O).querySelector("[data-
|
|
30
|
+
let x = get(O).querySelector("[data-motionrail-grid]");
|
|
31
31
|
x && (A = new MutationObserver(() => {
|
|
32
32
|
get(k) && get(k).update();
|
|
33
33
|
}), A.observe(x, {
|
|
@@ -50,7 +50,7 @@ function Svelte(S, C) {
|
|
|
50
50
|
init();
|
|
51
51
|
var P = root();
|
|
52
52
|
attribute_effect(P, () => ({
|
|
53
|
-
"data-
|
|
53
|
+
"data-motionrail": !0,
|
|
54
54
|
...w
|
|
55
55
|
}));
|
|
56
56
|
var F = child(P), I = child(F);
|
package/dist/svelte5.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
import { C as reset, S as push, _ as child, a as bind_this, b as state, d as from_html, g as user_effect, l as snippet, n as prop, p as get, r as rest_props, s as attribute_effect, u as append, w as noop, x as pop, y as set } from "./client-pmAKFFi-.js";
|
|
3
3
|
import { onMount } from "svelte";
|
|
4
|
-
var root = from_html("<div><div data-
|
|
4
|
+
var root = from_html("<div><div data-motionrail-scrollable=\"\"><div data-motionrail-grid=\"\"><!></div></div></div>");
|
|
5
5
|
function Svelte5(v, y) {
|
|
6
6
|
push(y, !0);
|
|
7
7
|
let b = prop(y, "options", 19, () => ({})), x = prop(y, "instance", 15), S = prop(y, "container", 15), C = rest_props(y, [
|
|
@@ -27,7 +27,7 @@ function Svelte5(v, y) {
|
|
|
27
27
|
onMount(() => {
|
|
28
28
|
if (!get(w)) return;
|
|
29
29
|
set(T, new MotionRail(get(w), b()), !0);
|
|
30
|
-
let _ = get(w).querySelector("[data-
|
|
30
|
+
let _ = get(w).querySelector("[data-motionrail-grid]");
|
|
31
31
|
return _ && (set(E, new MutationObserver(() => {
|
|
32
32
|
get(T) && get(T).update();
|
|
33
33
|
}), !0), get(E).observe(_, {
|
|
@@ -44,7 +44,7 @@ function Svelte5(v, y) {
|
|
|
44
44
|
getContainer: O
|
|
45
45
|
}, A = root();
|
|
46
46
|
attribute_effect(A, () => ({
|
|
47
|
-
"data-
|
|
47
|
+
"data-motionrail": !0,
|
|
48
48
|
...C
|
|
49
49
|
}));
|
|
50
50
|
var j = child(A), M = child(j);
|
package/dist/vue.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { t as MotionRail } from "./motionrail-
|
|
1
|
+
import { t as MotionRail } from "./motionrail-DsLqZe8W.js";
|
|
2
2
|
import { createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useSlots, watch } from "vue";
|
|
3
|
-
var _hoisted_1 = { "data-
|
|
3
|
+
var _hoisted_1 = { "data-motionrail-scrollable": "" }, _hoisted_2 = { "data-motionrail-grid": "" }, vue_default = /* @__PURE__ */ defineComponent({
|
|
4
4
|
__name: "vue",
|
|
5
5
|
props: { options: { default: () => ({}) } },
|
|
6
6
|
emits: ["mounted"],
|
|
@@ -20,7 +20,7 @@ var _hoisted_1 = { "data-motion-rail-scrollable": "" }, _hoisted_2 = { "data-mot
|
|
|
20
20
|
}), (e, p) => (openBlock(), createElementBlock("div", mergeProps({
|
|
21
21
|
ref_key: "containerRef",
|
|
22
22
|
ref: y,
|
|
23
|
-
"data-
|
|
23
|
+
"data-motionrail": ""
|
|
24
24
|
}, e.$attrs), [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(e.$slots, "default")])])], 16));
|
|
25
25
|
}
|
|
26
26
|
});
|