@evermade/overflow-slider 2.0.0 → 2.0.2
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 +12 -4
- package/dist/core/slider.esm.js +13 -6
- package/dist/core/slider.min.js +1 -1
- package/dist/plugins/arrows/arrows/index.esm.js +2 -1
- package/dist/plugins/arrows/arrows/index.min.js +1 -1
- package/docs/dist/core/slider.esm.js +13 -6
- package/docs/dist/core/slider.min.js +1 -1
- package/docs/dist/plugins/arrows/arrows/index.esm.js +2 -1
- package/docs/dist/plugins/arrows/arrows/index.min.js +1 -1
- package/package.json +3 -2
- package/src/core/slider.ts +14 -6
- package/src/plugins/arrows/index.ts +2 -1
package/README.md
CHANGED
|
@@ -27,7 +27,7 @@ You don't have to use even class `overflow-slider` and slides can be whatever el
|
|
|
27
27
|
If you’re using a bundler (such as Webpack or Rollup), you can install through npm:
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
npm install @evermade/
|
|
30
|
+
npm install @evermade/overflow-slider
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
Import the `OverflowSlider` along with plugins you want to use.
|
|
@@ -94,7 +94,7 @@ const slider = new OverflowSlider(
|
|
|
94
94
|
You can import base styles from the library to get started. The base styles include basic styles for the slider and some plugins.
|
|
95
95
|
|
|
96
96
|
```scss
|
|
97
|
-
@import "@evermade/overflow-slider/
|
|
97
|
+
@import "@evermade/overflow-slider/style.css";
|
|
98
98
|
```
|
|
99
99
|
|
|
100
100
|
You can use the CSS variables to override some values easily.
|
|
@@ -127,8 +127,7 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
|
|
|
127
127
|
|
|
128
128
|
## To-do
|
|
129
129
|
|
|
130
|
-
* Make drag scrolling snapping smooth
|
|
131
|
-
* Make moveToSlide method smooth
|
|
130
|
+
* Make drag scrolling snapping smooth (might be browser limitation)
|
|
132
131
|
* Rethink dot amount calculation
|
|
133
132
|
* Maybe split styles to separate files for plugins (but keep offering bundle as well)
|
|
134
133
|
* Maybe add plugin that adds class for visible slides
|
|
@@ -136,6 +135,15 @@ Auto-play is not supported at the moment but can probably be implemented as a pl
|
|
|
136
135
|
|
|
137
136
|
## Changelog
|
|
138
137
|
|
|
138
|
+
### 2.0.2
|
|
139
|
+
|
|
140
|
+
* Fix: Import style.css from correct path
|
|
141
|
+
|
|
142
|
+
### 2.0.1
|
|
143
|
+
|
|
144
|
+
* Fix: Smooth scrolling for moveToSlide method
|
|
145
|
+
* Fix: Prev arrow sometimes leaving visible although there are no more slides to scroll to
|
|
146
|
+
|
|
139
147
|
### 2.0.0
|
|
140
148
|
|
|
141
149
|
* Breaking: Separate plugins to their own imports/files
|
package/dist/core/slider.esm.js
CHANGED
|
@@ -92,7 +92,7 @@ function Slider(container, options, plugins) {
|
|
|
92
92
|
break;
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
ensureSlideIsInView(target);
|
|
95
|
+
ensureSlideIsInView(target, 'auto');
|
|
96
96
|
}
|
|
97
97
|
wasInteractedWith = false;
|
|
98
98
|
});
|
|
@@ -105,7 +105,8 @@ function Slider(container, options, plugins) {
|
|
|
105
105
|
function setDataAttributes() {
|
|
106
106
|
slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
|
|
107
107
|
}
|
|
108
|
-
function ensureSlideIsInView(slide) {
|
|
108
|
+
function ensureSlideIsInView(slide, scrollBehavior = null) {
|
|
109
|
+
const behavior = scrollBehavior || slider.options.scrollBehavior;
|
|
109
110
|
const slideRect = slide.getBoundingClientRect();
|
|
110
111
|
const sliderRect = slider.container.getBoundingClientRect();
|
|
111
112
|
const containerWidth = slider.container.offsetWidth;
|
|
@@ -124,10 +125,16 @@ function Slider(container, options, plugins) {
|
|
|
124
125
|
}
|
|
125
126
|
if (scrollTarget !== null) {
|
|
126
127
|
slider.container.style.scrollSnapType = 'none';
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
// seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
|
|
129
|
+
setTimeout((scrollTarget) => {
|
|
130
|
+
slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
|
|
131
|
+
}, 50, scrollTarget);
|
|
132
|
+
setTimeout(() => {
|
|
133
|
+
// leave snapping off to fix issues with slide moving back on focus
|
|
134
|
+
if (behavior == 'smooth') {
|
|
135
|
+
slider.container.style.scrollSnapType = '';
|
|
136
|
+
}
|
|
137
|
+
}, 500);
|
|
131
138
|
}
|
|
132
139
|
}
|
|
133
140
|
function setActiveSlideIdx() {
|
package/dist/core/slider.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e){const t=e.getBoundingClientRect(),
|
|
1
|
+
import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e,t=null){const n=t||r.options.scrollBehavior,i=e.getBoundingClientRect(),o=r.container.getBoundingClientRect(),l=r.container.offsetWidth,s=r.container.scrollLeft,a=i.left-o.left+s,c=a+i.width;let d=null;a<s?d=a:c>s+l?d=c-l:0===a&&(d=0),null!==d&&(r.container.style.scrollSnapType="none",setTimeout((e=>{r.container.scrollTo({left:e,behavior:n})}),50,d),setTimeout((()=>{"smooth"==n&&(r.container.style.scrollSnapType="")}),500))}function h(){const e=r.container.getBoundingClientRect(),t=r.container.scrollLeft,n=r.slides;let i=0;for(let o=0;o<n.length;o++){if(n[o].getBoundingClientRect().left-e.left+t+m()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function m(){let e=0;if(r.slides.length>1){const t=r.slides[0].getBoundingClientRect();e=r.slides[1].getBoundingClientRect().left-t.right}return e}return r={emit:function(e){var t;s&&s[e]&&s[e].forEach((e=>{e(r)}));const n=null===(t=null==r?void 0:r.options)||void 0===t?void 0:t[e];"function"==typeof n&&n(r)},moveToDirection:function(e="prev"){const t=r.options.scrollStrategy,n=r.container.scrollLeft,i=r.container.getBoundingClientRect(),o=r.container.offsetWidth;let l=n;if("prev"===e?l=Math.max(0,n-r.container.offsetWidth):"next"===e&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===t){let t=null;if(t="prev"===e?Math.max(0,l-m()):Math.min(r.container.scrollWidth,l+m()),"next"===e){let e=!1;for(let o of r.slides){const r=o.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<l&&a>l){t=s,e=!0;break}}e||(t=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),t&&t>n&&(l=t)}else{let e=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<n&&a>n){t=a-o,e=!0;break}}e||(t=Math.max(0,n-o)),t&&t<n&&(l=t)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(e){const t=r.slides[e];t&&u(t)},on:function(e,t){s[e]||(s[e]=[]),s[e].push(t)},options:o},function(){r.container=i;let e=i.getAttribute("id");null===e&&(e=t("overflow-slider"),i.setAttribute("id",e)),c(),a(!0),h(),r.on("contentsChanged",(()=>{c(),a(),h()})),r.on("containerSizeChanged",(()=>a()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{a(),h()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let e=!1;r.container.addEventListener("mousedown",(()=>{e=!0})),r.container.addEventListener("touchstart",(()=>{e=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!e){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}e=!1}))}(),f(),d(),l)for(const e of l)e(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{i as default};
|
|
@@ -47,13 +47,14 @@ function ArrowsPlugin(args) {
|
|
|
47
47
|
const scrollLeft = slider.container.scrollLeft;
|
|
48
48
|
const scrollWidth = slider.container.scrollWidth;
|
|
49
49
|
const clientWidth = slider.container.clientWidth;
|
|
50
|
+
const buffer = 1;
|
|
50
51
|
if (scrollLeft === 0) {
|
|
51
52
|
prev.setAttribute('data-has-content', 'false');
|
|
52
53
|
}
|
|
53
54
|
else {
|
|
54
55
|
prev.setAttribute('data-has-content', 'true');
|
|
55
56
|
}
|
|
56
|
-
if (scrollLeft + clientWidth >= scrollWidth) {
|
|
57
|
+
if (scrollLeft + clientWidth >= scrollWidth - buffer) {
|
|
57
58
|
next.setAttribute('data-has-content', 'false');
|
|
58
59
|
}
|
|
59
60
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};
|
|
1
|
+
const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e-1?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};
|
|
@@ -92,7 +92,7 @@ function Slider(container, options, plugins) {
|
|
|
92
92
|
break;
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
ensureSlideIsInView(target);
|
|
95
|
+
ensureSlideIsInView(target, 'auto');
|
|
96
96
|
}
|
|
97
97
|
wasInteractedWith = false;
|
|
98
98
|
});
|
|
@@ -105,7 +105,8 @@ function Slider(container, options, plugins) {
|
|
|
105
105
|
function setDataAttributes() {
|
|
106
106
|
slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
|
|
107
107
|
}
|
|
108
|
-
function ensureSlideIsInView(slide) {
|
|
108
|
+
function ensureSlideIsInView(slide, scrollBehavior = null) {
|
|
109
|
+
const behavior = scrollBehavior || slider.options.scrollBehavior;
|
|
109
110
|
const slideRect = slide.getBoundingClientRect();
|
|
110
111
|
const sliderRect = slider.container.getBoundingClientRect();
|
|
111
112
|
const containerWidth = slider.container.offsetWidth;
|
|
@@ -124,10 +125,16 @@ function Slider(container, options, plugins) {
|
|
|
124
125
|
}
|
|
125
126
|
if (scrollTarget !== null) {
|
|
126
127
|
slider.container.style.scrollSnapType = 'none';
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
// seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
|
|
129
|
+
setTimeout((scrollTarget) => {
|
|
130
|
+
slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
|
|
131
|
+
}, 50, scrollTarget);
|
|
132
|
+
setTimeout(() => {
|
|
133
|
+
// leave snapping off to fix issues with slide moving back on focus
|
|
134
|
+
if (behavior == 'smooth') {
|
|
135
|
+
slider.container.style.scrollSnapType = '';
|
|
136
|
+
}
|
|
137
|
+
}, 500);
|
|
131
138
|
}
|
|
132
139
|
}
|
|
133
140
|
function setActiveSlideIdx() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e){const t=e.getBoundingClientRect(),
|
|
1
|
+
import e from"./details.min.js";import{generateId as t,objectsAreEqual as n}from"./utils.min.js";function i(i,o,l){let r,s={};function a(t=!1){const i=r.details,o=e(r);r.details=o,t||n(i,o)?t&&r.emit("detailsChanged"):r.emit("detailsChanged")}function c(){r.slides=Array.from(r.container.querySelectorAll(r.options.slidesSelector))}function d(){r.container.style.setProperty("--slider-container-width",`${r.details.containerWidth}px`),r.container.style.setProperty("--slider-scrollable-width",`${r.details.scrollableAreaWidth}px`),r.container.style.setProperty("--slider-slides-count",`${r.details.slideCount}`)}function f(){r.container.setAttribute("data-has-overflow",r.details.hasOverflow?"true":"false")}function u(e,t=null){const n=t||r.options.scrollBehavior,i=e.getBoundingClientRect(),o=r.container.getBoundingClientRect(),l=r.container.offsetWidth,s=r.container.scrollLeft,a=i.left-o.left+s,c=a+i.width;let d=null;a<s?d=a:c>s+l?d=c-l:0===a&&(d=0),null!==d&&(r.container.style.scrollSnapType="none",setTimeout((e=>{r.container.scrollTo({left:e,behavior:n})}),50,d),setTimeout((()=>{"smooth"==n&&(r.container.style.scrollSnapType="")}),500))}function h(){const e=r.container.getBoundingClientRect(),t=r.container.scrollLeft,n=r.slides;let i=0;for(let o=0;o<n.length;o++){if(n[o].getBoundingClientRect().left-e.left+t+m()>t){i=o;break}}const o=r.activeSlideIdx;r.activeSlideIdx=i,o!==i&&r.emit("activeSlideChanged")}function m(){let e=0;if(r.slides.length>1){const t=r.slides[0].getBoundingClientRect();e=r.slides[1].getBoundingClientRect().left-t.right}return e}return r={emit:function(e){var t;s&&s[e]&&s[e].forEach((e=>{e(r)}));const n=null===(t=null==r?void 0:r.options)||void 0===t?void 0:t[e];"function"==typeof n&&n(r)},moveToDirection:function(e="prev"){const t=r.options.scrollStrategy,n=r.container.scrollLeft,i=r.container.getBoundingClientRect(),o=r.container.offsetWidth;let l=n;if("prev"===e?l=Math.max(0,n-r.container.offsetWidth):"next"===e&&(l=Math.min(r.container.scrollWidth,n+r.container.offsetWidth)),"fullSlide"===t){let t=null;if(t="prev"===e?Math.max(0,l-m()):Math.min(r.container.scrollWidth,l+m()),"next"===e){let e=!1;for(let o of r.slides){const r=o.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<l&&a>l){t=s,e=!0;break}}e||(t=Math.min(l,r.container.scrollWidth-r.container.offsetWidth)),t&&t>n&&(l=t)}else{let e=!1;for(let l of r.slides){const r=l.getBoundingClientRect(),s=r.left-i.left+n,a=s+r.width;if(s<n&&a>n){t=a-o,e=!0;break}}e||(t=Math.max(0,n-o)),t&&t<n&&(l=t)}}r.container.style.scrollBehavior=r.options.scrollBehavior,r.container.scrollLeft=l,setTimeout((()=>r.container.style.scrollBehavior=""),50)},moveToSlide:function(e){const t=r.slides[e];t&&u(t)},on:function(e,t){s[e]||(s[e]=[]),s[e].push(t)},options:o},function(){r.container=i;let e=i.getAttribute("id");null===e&&(e=t("overflow-slider"),i.setAttribute("id",e)),c(),a(!0),h(),r.on("contentsChanged",(()=>{c(),a(),h()})),r.on("containerSizeChanged",(()=>a()));let n=0;if(r.on("scroll",(()=>{n&&window.cancelAnimationFrame(n),n=window.requestAnimationFrame((()=>{a(),h()}))})),function(){new MutationObserver((()=>r.emit("contentsChanged"))).observe(r.container,{childList:!0});new ResizeObserver((()=>r.emit("containerSizeChanged"))).observe(r.container),r.container.addEventListener("scroll",(()=>r.emit("scroll")));let e=!1;r.container.addEventListener("mousedown",(()=>{e=!0})),r.container.addEventListener("touchstart",(()=>{e=!0}),{passive:!0}),r.container.addEventListener("focusin",(t=>{if(!e){let e=t.target;for(;e.parentElement!==r.container&&e.parentElement;)e=e.parentElement;u(e,"auto")}e=!1}))}(),f(),d(),l)for(const e of l)e(r);r.on("detailsChanged",(()=>{f(),d()})),r.emit("created"),r.container.setAttribute("data-ready","true")}(),r}export{i as default};
|
|
@@ -47,13 +47,14 @@ function ArrowsPlugin(args) {
|
|
|
47
47
|
const scrollLeft = slider.container.scrollLeft;
|
|
48
48
|
const scrollWidth = slider.container.scrollWidth;
|
|
49
49
|
const clientWidth = slider.container.clientWidth;
|
|
50
|
+
const buffer = 1;
|
|
50
51
|
if (scrollLeft === 0) {
|
|
51
52
|
prev.setAttribute('data-has-content', 'false');
|
|
52
53
|
}
|
|
53
54
|
else {
|
|
54
55
|
prev.setAttribute('data-has-content', 'true');
|
|
55
56
|
}
|
|
56
|
-
if (scrollLeft + clientWidth >= scrollWidth) {
|
|
57
|
+
if (scrollLeft + clientWidth >= scrollWidth - buffer) {
|
|
57
58
|
next.setAttribute('data-has-content', 'false');
|
|
58
59
|
}
|
|
59
60
|
else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};
|
|
1
|
+
const t={buttonPrevious:"Previous items",buttonNext:"Next items"},e={prev:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 3.4l-7.6 7.6 7.6 7.6 1.4-1.4-5-5h12.6v-2h-12.6l5-5z"/></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 3.4l-1.4 1.4 5 5h-12.6v2h12.6l-5 5 1.4 1.4 7.6-7.6z"/></svg>'},n={navContainer:"overflow-slider__arrows",prevButton:"overflow-slider__arrows-button overflow-slider__arrows-button--prev",nextButton:"overflow-slider__arrows-button overflow-slider__arrows-button--next"};function o(o){return i=>{var r,s,a,l,c,u;const d={texts:Object.assign(Object.assign({},t),(null==o?void 0:o.texts)||[]),icons:Object.assign(Object.assign({},e),(null==o?void 0:o.icons)||[]),classNames:Object.assign(Object.assign({},n),(null==o?void 0:o.classNames)||[]),container:null!==(r=null==o?void 0:o.container)&&void 0!==r?r:null,containerPrev:null!==(s=null==o?void 0:o.containerPrev)&&void 0!==s?s:null,containerNext:null!==(a=null==o?void 0:o.containerNext)&&void 0!==a?a:null},v=document.createElement("div");v.classList.add(d.classNames.navContainer);const b=document.createElement("button");b.setAttribute("class",d.classNames.prevButton),b.setAttribute("type","button"),b.setAttribute("aria-label",d.texts.buttonPrevious),b.setAttribute("aria-controls",null!==(l=i.container.getAttribute("id"))&&void 0!==l?l:""),b.setAttribute("data-type","prev"),b.innerHTML=d.icons.prev,b.addEventListener("click",(()=>i.moveToDirection("prev")));const p=document.createElement("button");p.setAttribute("class",d.classNames.nextButton),p.setAttribute("type","button"),p.setAttribute("aria-label",d.texts.buttonNext),p.setAttribute("aria-controls",null!==(c=i.container.getAttribute("id"))&&void 0!==c?c:""),p.setAttribute("data-type","next"),p.innerHTML=d.icons.next,p.addEventListener("click",(()=>i.moveToDirection("next"))),v.appendChild(b),v.appendChild(p);const x=()=>{const t=i.container.scrollLeft,e=i.container.scrollWidth,n=i.container.clientWidth;0===t?b.setAttribute("data-has-content","false"):b.setAttribute("data-has-content","true"),t+n>=e-1?p.setAttribute("data-has-content","false"):p.setAttribute("data-has-content","true")};d.containerNext&&d.containerPrev?(d.containerPrev.appendChild(b),d.containerNext.appendChild(p)):d.container?d.container.appendChild(v):null===(u=i.container.parentNode)||void 0===u||u.insertBefore(v,i.container.nextSibling),x(),i.on("scroll",x),i.on("contentsChanged",x),i.on("containerSizeChanged",x)}}export{o as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@evermade/overflow-slider",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Accessible slider tha works with overflow: auto.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"./plugins/thumbnails": {
|
|
39
39
|
"import": "./dist/plugins/thumbnails/thumbnails/index.esm.js",
|
|
40
40
|
"require": "./dist/plugins/thumbnails/thumbnails/index.min.js"
|
|
41
|
-
}
|
|
41
|
+
},
|
|
42
|
+
"./style.css": "./dist/overflow-slider.css"
|
|
42
43
|
},
|
|
43
44
|
"repository": {
|
|
44
45
|
"type": "git",
|
package/src/core/slider.ts
CHANGED
|
@@ -101,7 +101,7 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
|
|
|
101
101
|
break;
|
|
102
102
|
}
|
|
103
103
|
}
|
|
104
|
-
ensureSlideIsInView(target);
|
|
104
|
+
ensureSlideIsInView(target, 'auto');
|
|
105
105
|
}
|
|
106
106
|
wasInteractedWith = false;
|
|
107
107
|
});
|
|
@@ -119,7 +119,8 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
|
|
|
119
119
|
slider.container.setAttribute('data-has-overflow', slider.details.hasOverflow ? 'true' : 'false');
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
function ensureSlideIsInView( slide: HTMLElement ) {
|
|
122
|
+
function ensureSlideIsInView( slide: HTMLElement, scrollBehavior: null|ScrollBehavior = null) {
|
|
123
|
+
const behavior = scrollBehavior || slider.options.scrollBehavior as ScrollBehavior;
|
|
123
124
|
const slideRect = slide.getBoundingClientRect();
|
|
124
125
|
const sliderRect = slider.container.getBoundingClientRect();
|
|
125
126
|
const containerWidth = slider.container.offsetWidth;
|
|
@@ -136,10 +137,17 @@ export default function Slider( container: HTMLElement, options : SliderOptions,
|
|
|
136
137
|
}
|
|
137
138
|
if (scrollTarget !== null) {
|
|
138
139
|
slider.container.style.scrollSnapType = 'none';
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
// seems like in order for scroll behavior: smooth to work, we need to wait a bit to disable scrollSnapType
|
|
141
|
+
setTimeout((scrollTarget) => {
|
|
142
|
+
slider.container.scrollTo({ left: scrollTarget, behavior: behavior });
|
|
143
|
+
}, 50, scrollTarget);
|
|
144
|
+
setTimeout(() => {
|
|
145
|
+
// leave snapping off to fix issues with slide moving back on focus
|
|
146
|
+
if ( behavior == 'smooth' ) {
|
|
147
|
+
slider.container.style.scrollSnapType = '';
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
}, 500);
|
|
143
151
|
}
|
|
144
152
|
};
|
|
145
153
|
|
|
@@ -85,12 +85,13 @@ export default function ArrowsPlugin( args: { [key: string]: any } ) {
|
|
|
85
85
|
const scrollLeft = slider.container.scrollLeft;
|
|
86
86
|
const scrollWidth = slider.container.scrollWidth;
|
|
87
87
|
const clientWidth = slider.container.clientWidth;
|
|
88
|
+
const buffer = 1;
|
|
88
89
|
if ( scrollLeft === 0 ) {
|
|
89
90
|
prev.setAttribute( 'data-has-content', 'false' );
|
|
90
91
|
} else {
|
|
91
92
|
prev.setAttribute( 'data-has-content', 'true' );
|
|
92
93
|
}
|
|
93
|
-
if ( scrollLeft + clientWidth >= scrollWidth ) {
|
|
94
|
+
if ( scrollLeft + clientWidth >= scrollWidth - buffer ) {
|
|
94
95
|
next.setAttribute( 'data-has-content', 'false' );
|
|
95
96
|
} else {
|
|
96
97
|
next.setAttribute( 'data-has-content', 'true' );
|