@yoursurprise/slider 0.0.9 → 0.0.11
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 +9 -1
- package/dist/Slider.d.ts +1 -1
- package/dist/index.css +14 -34
- package/dist/index.css.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Slider.scss +22 -33
- package/src/Slider.tsx +6 -6
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# React slider
|
|
1
|
+
# React slider (alpha)
|
|
2
2
|
|
|
3
3
|
This package contains a basic modern slider. The purpose of this slider is to provide a simple React component
|
|
4
4
|
which can be controlled in a userfriendly way on mobile, tablet and desktop.
|
|
@@ -11,9 +11,17 @@ This slider has the following features:
|
|
|
11
11
|
- Support for multiple variable width slides
|
|
12
12
|
|
|
13
13
|
Before using this slider, please consider the following:
|
|
14
|
+
- This project is still being set up, this is an alpha version
|
|
14
15
|
- The slider only contains styling to make it functional
|
|
15
16
|
- There is no configuration of aforementioned features (yet)
|
|
16
17
|
|
|
18
|
+
Todos:
|
|
19
|
+
- Add a demo page
|
|
20
|
+
- Add more configuration
|
|
21
|
+
- Add end-to-end tests
|
|
22
|
+
- Set up proper workflows in GitHub
|
|
23
|
+
- Set the GitHub repository to public
|
|
24
|
+
|
|
17
25
|
All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) are supported.
|
|
18
26
|
|
|
19
27
|
## Installation
|
package/dist/Slider.d.ts
CHANGED
package/dist/index.css
CHANGED
|
@@ -9,27 +9,26 @@
|
|
|
9
9
|
width: 48px;
|
|
10
10
|
position: absolute;
|
|
11
11
|
display: none;
|
|
12
|
+
border-radius: 50%;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
border: 1px solid #C9C9C9;
|
|
16
|
+
background-color: white;
|
|
17
|
+
font-size: 18px;
|
|
12
18
|
}
|
|
13
19
|
@media (hover: hover) {
|
|
14
20
|
.slider__button {
|
|
15
21
|
display: flex;
|
|
16
22
|
}
|
|
17
23
|
}
|
|
18
|
-
.slider__button--
|
|
19
|
-
|
|
24
|
+
.slider__button--hidden {
|
|
25
|
+
display: none;
|
|
20
26
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
right: 0;
|
|
24
|
-
}
|
|
27
|
+
.slider__button--next {
|
|
28
|
+
right: 0;
|
|
25
29
|
}
|
|
26
30
|
.slider__button--prev {
|
|
27
|
-
left:
|
|
28
|
-
}
|
|
29
|
-
@media screen and (min-width: 768px) {
|
|
30
|
-
.slider__button--prev {
|
|
31
|
-
left: 0;
|
|
32
|
-
}
|
|
31
|
+
left: 0;
|
|
33
32
|
}
|
|
34
33
|
.slider__wrapper {
|
|
35
34
|
overscroll-behavior-x: contain;
|
|
@@ -38,22 +37,19 @@
|
|
|
38
37
|
display: flex;
|
|
39
38
|
flex-direction: row;
|
|
40
39
|
overflow-x: auto;
|
|
41
|
-
margin: 16px;
|
|
42
40
|
scroll-snap-type: x proximity;
|
|
43
41
|
}
|
|
44
42
|
.slider__wrapper::-webkit-scrollbar {
|
|
45
43
|
display: none;
|
|
46
44
|
}
|
|
47
|
-
@media screen and (min-width: 768px) {
|
|
48
|
-
.slider__wrapper {
|
|
49
|
-
margin: 8px;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
45
|
@media (hover: hover) {
|
|
53
46
|
.slider__wrapper {
|
|
54
47
|
scroll-snap-type: initial;
|
|
55
48
|
}
|
|
56
49
|
}
|
|
50
|
+
.slider__wrapper:not(.is-dragging) {
|
|
51
|
+
scroll-behavior: smooth;
|
|
52
|
+
}
|
|
57
53
|
.slider__wrapper.is-scrollable {
|
|
58
54
|
cursor: move;
|
|
59
55
|
}
|
|
@@ -61,20 +57,4 @@
|
|
|
61
57
|
cursor: grabbing;
|
|
62
58
|
user-select: none;
|
|
63
59
|
}
|
|
64
|
-
.slider__wrapper:not(.is-dragging) {
|
|
65
|
-
scroll-behavior: smooth;
|
|
66
|
-
}
|
|
67
|
-
.slider__wrapper__slide {
|
|
68
|
-
scroll-snap-align: start;
|
|
69
|
-
margin-right: 8px;
|
|
70
|
-
}
|
|
71
|
-
@media screen and (min-width: 768px) {
|
|
72
|
-
.slider__wrapper__slide {
|
|
73
|
-
margin-left: 0;
|
|
74
|
-
margin-right: 16px;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
.slider__wrapper__slide:last-child {
|
|
78
|
-
margin-right: 0;
|
|
79
|
-
}
|
|
80
60
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,MAAM;EACN,SAAS;EACT,cAAc;EACd,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,aAAa;
|
|
1
|
+
{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,MAAM;EACN,SAAS;EACT,cAAc;EACd,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,aAAa;EACb,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,yBAAyB;EACzB,uBAAuB;EACvB,eAAe;AACjB;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,QAAQ;AACV;AACA;EACE,OAAO;AACT;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB","file":"index.css","sourcesContent":[".slider {\n position: relative;\n}\n.slider__button {\n top: 0;\n bottom: 0;\n margin: auto 0;\n height: 48px;\n width: 48px;\n position: absolute;\n display: none;\n border-radius: 50%;\n align-items: center;\n justify-content: center;\n border: 1px solid #C9C9C9;\n background-color: white;\n font-size: 18px;\n}\n@media (hover: hover) {\n .slider__button {\n display: flex;\n }\n}\n.slider__button--hidden {\n display: none;\n}\n.slider__button--next {\n right: 0;\n}\n.slider__button--prev {\n left: 0;\n}\n.slider__wrapper {\n overscroll-behavior-x: contain;\n -ms-overflow-style: none;\n scrollbar-width: none;\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n display: none;\n}\n@media (hover: hover) {\n .slider__wrapper {\n scroll-snap-type: initial;\n }\n}\n.slider__wrapper:not(.is-dragging) {\n scroll-behavior: smooth;\n}\n.slider__wrapper.is-scrollable {\n cursor: move;\n}\n.slider__wrapper.is-dragging {\n cursor: grabbing;\n user-select: none;\n}"]}
|
package/dist/index.js
CHANGED
|
@@ -97,9 +97,9 @@ const Slider = ({ children }) => {
|
|
|
97
97
|
const moreContentAvailable = isScrollable && lastSlideFullyVisible === false;
|
|
98
98
|
const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
|
|
99
99
|
if (arrowNextRef.current && arrowPrevRef.current) {
|
|
100
|
-
arrowNextRef.current.classList.toggle('hidden', moreContentAvailable === false);
|
|
100
|
+
arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
|
|
101
101
|
arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
|
|
102
|
-
arrowPrevRef.current.classList.toggle('hidden', previousContentAvailable === false);
|
|
102
|
+
arrowPrevRef.current.classList.toggle('slider__button--hidden', previousContentAvailable === false);
|
|
103
103
|
arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
|
|
104
104
|
}
|
|
105
105
|
}, [isScrollable]);
|
|
@@ -165,7 +165,7 @@ const Slider = ({ children }) => {
|
|
|
165
165
|
};
|
|
166
166
|
return (jsxs("div", { className: "slider", children: [jsx("div", { className: "slider__wrapper", role: "list", ref: wrapper, onMouseDown: mouseDownHandler, onMouseMove: mouseMoveHandler, onMouseUp: mouseUpHandler, onClickCapture: blockChildClickHandler, children: Children.map(children, (child, index) => (jsx("div", { className: "slider__wrapper__slide", role: "listitem", "data-slide-index": index, ref: (node) => { if (node) {
|
|
167
167
|
addSlide(node, index);
|
|
168
|
-
} }, children: child }, index))) }), jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef, className: "slider__button slider__button--prev
|
|
168
|
+
} }, children: child }, index))) }), jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef, className: "slider__button slider__button--prev slider__button--hidden", children: '<' }), jsx("button", { "aria-label": "Next slide", type: "button", onClick: () => navigate(NavigationDirection.NEXT), ref: arrowNextRef, className: "slider__button slider__button--next slider__button--hidden", children: '>' })] }));
|
|
169
169
|
};
|
|
170
170
|
|
|
171
171
|
export { Slider };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/Slider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Slider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Slider.scss
CHANGED
|
@@ -10,30 +10,35 @@
|
|
|
10
10
|
position: absolute;
|
|
11
11
|
display: none;
|
|
12
12
|
|
|
13
|
+
border-radius: 50%;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
border: 1px solid #C9C9C9;
|
|
17
|
+
background-color: white;
|
|
18
|
+
font-size: 18px;
|
|
19
|
+
|
|
13
20
|
@media (hover: hover) {
|
|
14
21
|
display: flex;
|
|
15
22
|
}
|
|
16
23
|
|
|
17
|
-
&--
|
|
18
|
-
|
|
24
|
+
&--hidden {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
19
27
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
28
|
+
&--next {
|
|
29
|
+
right: 0;
|
|
23
30
|
}
|
|
24
31
|
|
|
25
32
|
&--prev {
|
|
26
|
-
left:
|
|
27
|
-
|
|
28
|
-
@media screen and (min-width: 768px) {
|
|
29
|
-
left: 0;
|
|
30
|
-
}
|
|
33
|
+
left: 0;
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
36
|
|
|
34
37
|
&__wrapper {
|
|
38
|
+
|
|
35
39
|
// Prevent the browser from going back in history when there is no scroll area left
|
|
36
40
|
overscroll-behavior-x: contain;
|
|
41
|
+
|
|
37
42
|
// Hide the scrollbars
|
|
38
43
|
-ms-overflow-style: none; // for Internet Explorer, Edge
|
|
39
44
|
scrollbar-width: none; // for Firefox
|
|
@@ -45,17 +50,19 @@
|
|
|
45
50
|
display: flex;
|
|
46
51
|
flex-direction: row;
|
|
47
52
|
overflow-x: auto;
|
|
48
|
-
margin: 16px;
|
|
49
|
-
scroll-snap-type: x proximity;
|
|
50
53
|
|
|
51
|
-
|
|
52
|
-
margin: 8px;
|
|
53
|
-
}
|
|
54
|
+
scroll-snap-type: x proximity;
|
|
54
55
|
|
|
56
|
+
// Disable scroll snapping when we assume there's a mouse
|
|
55
57
|
@media (hover: hover) {
|
|
56
58
|
scroll-snap-type: initial;
|
|
57
59
|
}
|
|
58
60
|
|
|
61
|
+
// Enable smooth scroll, but only when not dragging the slider with a mouse
|
|
62
|
+
&:not(.is-dragging) {
|
|
63
|
+
scroll-behavior: smooth;
|
|
64
|
+
}
|
|
65
|
+
|
|
59
66
|
&.is-scrollable {
|
|
60
67
|
cursor: move;
|
|
61
68
|
}
|
|
@@ -64,23 +71,5 @@
|
|
|
64
71
|
cursor: grabbing;
|
|
65
72
|
user-select: none;
|
|
66
73
|
}
|
|
67
|
-
|
|
68
|
-
&:not(.is-dragging) {
|
|
69
|
-
scroll-behavior: smooth;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
&__slide {
|
|
73
|
-
scroll-snap-align: start;
|
|
74
|
-
margin-right: 8px;
|
|
75
|
-
|
|
76
|
-
@media screen and (min-width: 768px) {
|
|
77
|
-
margin-left: 0;
|
|
78
|
-
margin-right: 16px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&:last-child {
|
|
82
|
-
margin-right: 0;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
74
|
}
|
|
86
75
|
}
|
package/src/Slider.tsx
CHANGED
|
@@ -131,10 +131,10 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
131
131
|
const previousContentAvailable = getFirstVisibleSlideIndex() > 0 && isScrollable;
|
|
132
132
|
|
|
133
133
|
if (arrowNextRef.current && arrowPrevRef.current) {
|
|
134
|
-
arrowNextRef.current.classList.toggle('hidden', moreContentAvailable === false);
|
|
134
|
+
arrowNextRef.current.classList.toggle('slider__button--hidden', moreContentAvailable === false);
|
|
135
135
|
arrowNextRef.current.ariaHidden = String(moreContentAvailable === false);
|
|
136
136
|
|
|
137
|
-
arrowPrevRef.current.classList.toggle('hidden', previousContentAvailable === false);
|
|
137
|
+
arrowPrevRef.current.classList.toggle('slider__button--hidden', previousContentAvailable === false);
|
|
138
138
|
arrowPrevRef.current.ariaHidden = String(previousContentAvailable === false);
|
|
139
139
|
}
|
|
140
140
|
}, [isScrollable]);
|
|
@@ -235,18 +235,18 @@ export const Slider: React.FC<PropsWithChildren> = ({ children }) => {
|
|
|
235
235
|
type="button"
|
|
236
236
|
onClick={() => navigate(NavigationDirection.PREV)}
|
|
237
237
|
ref={arrowPrevRef}
|
|
238
|
-
className="slider__button slider__button--prev
|
|
238
|
+
className="slider__button slider__button--prev slider__button--hidden"
|
|
239
239
|
>
|
|
240
|
-
<
|
|
240
|
+
{ '<' }
|
|
241
241
|
</button>
|
|
242
242
|
<button
|
|
243
243
|
aria-label="Next slide"
|
|
244
244
|
type="button"
|
|
245
245
|
onClick={() => navigate(NavigationDirection.NEXT)}
|
|
246
246
|
ref={arrowNextRef}
|
|
247
|
-
className="slider__button slider__button--next
|
|
247
|
+
className="slider__button slider__button--next slider__button--hidden"
|
|
248
248
|
>
|
|
249
|
-
|
|
249
|
+
{ '>' }
|
|
250
250
|
</button>
|
|
251
251
|
</div>
|
|
252
252
|
);
|