@scrippsproduct/networks-ui-library 1.0.18 → 1.0.20
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
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Networks UI Component Library
|
|
2
2
|
|
|
3
|
-
A collection of [React](https://react.dev/) components in [Storybook](https://storybook.js.org/) for use with
|
|
3
|
+
A collection of [React](https://react.dev/) components in [Storybook](https://storybook.js.org/) for use with Scripps networks related applications. The library can be viewed at [Chormatic - External Component Libray](https://master--6320f9b58155e710d0652e0d.chromatic.com)). The NPM package can be found here: [Networks UI Component Library](https://www.npmjs.com/package/@scrippsproduct/networks-ui-library).
|
|
4
4
|
|
|
5
5
|
## Getting Started
|
|
6
6
|
- clone this repository to a local folder and navigate to that folder
|
|
7
|
-
- make sure you are using a **Node LTS version of
|
|
7
|
+
- make sure you are using a **Node LTS version of 22.16.0 or higher** (it is recommended to use [NVM](https://github.com/nvm-sh/nvm) for node version management)
|
|
8
8
|
- if you are using NVM you can just run ```nvm use``` from the root directory to switch to this version
|
|
9
9
|
- install dependencies (```npm install```)
|
|
10
10
|
- run the project (```npm run storybook```) - this will start a local server on port [6006](http://localhost:6006)
|
|
@@ -29,7 +29,6 @@ export default class CarouselUtils {
|
|
|
29
29
|
isInitialScroll: boolean;
|
|
30
30
|
totalSlideEls: number;
|
|
31
31
|
totalSlides: number;
|
|
32
|
-
carouselObserver: IntersectionObserver | undefined;
|
|
33
32
|
/**
|
|
34
33
|
* starts the autoplay timer
|
|
35
34
|
*/
|
|
@@ -64,5 +63,6 @@ export default class CarouselUtils {
|
|
|
64
63
|
* @returns void
|
|
65
64
|
*/
|
|
66
65
|
handleScrollEnd(): void;
|
|
66
|
+
carouselObserver: IntersectionObserver | undefined;
|
|
67
67
|
#private;
|
|
68
68
|
}
|
|
@@ -32,13 +32,12 @@ function E(r, t) {
|
|
|
32
32
|
e.listeners++;
|
|
33
33
|
}
|
|
34
34
|
function m(r, t) {
|
|
35
|
-
if (t !== "scroll" && t !== "scrollend")
|
|
36
|
-
return;
|
|
35
|
+
if (t !== "scroll" && t !== "scrollend") return;
|
|
37
36
|
let e = u.get(this);
|
|
38
37
|
e !== void 0 && (e[t]--, !(--e.listeners > 0) && (r.apply(this, ["scroll", e.scrollListener]), u.delete(this)));
|
|
39
38
|
}
|
|
40
39
|
const z = "onscrollend" in window;
|
|
41
|
-
var s, x, A, w,
|
|
40
|
+
var s, d, x, A, w, h, c, y, I, T;
|
|
42
41
|
class P {
|
|
43
42
|
constructor({ carouselEl: t, scrollerEl: e, paginationEl: l, slides: a, navBtnEls: S = { next: {}, previous: {} }, options: n }) {
|
|
44
43
|
b(this, s);
|
|
@@ -111,6 +110,13 @@ class P {
|
|
|
111
110
|
}
|
|
112
111
|
}
|
|
113
112
|
s = new WeakSet(), /**
|
|
113
|
+
* Scrolls the carousel to a specific child element
|
|
114
|
+
* @param {*} param0 - an object containing the scrollport element and the child element to scroll to
|
|
115
|
+
*/
|
|
116
|
+
d = function({ scrollport: t, element: e }) {
|
|
117
|
+
const l = this.slideGutterSize * 2 / 100;
|
|
118
|
+
t.style.scrollBehavior = "auto", t.scrollTo(Math.abs(t.offsetLeft - e.offsetLeft + e.clientWidth * l), 0);
|
|
119
|
+
}, /**
|
|
114
120
|
* adds an observer to the scroller element that we can use to
|
|
115
121
|
* determine which slide is intersecting
|
|
116
122
|
*/
|
|
@@ -133,13 +139,6 @@ A = function() {
|
|
|
133
139
|
*/
|
|
134
140
|
w = function() {
|
|
135
141
|
this.options.wrapAround ? (this.scrollerEl.style.scrollBehavior = "auto", this.scrollerEl.scrollTo(-9999, 0), i(this, s, d).call(this, { scrollport: this.scrollerEl, element: this.scrollerEl.children[1] })) : this.options.showControls ? (this.navBtnEls.previous.setAttribute("disabled", !0), i(this, s, c).call(this)) : i(this, s, I).call(this), this.totalSlides === 1 && this.slideEls[0].removeAttribute("inert");
|
|
136
|
-
}, /**
|
|
137
|
-
* Scrolls the carousel to a specific child element
|
|
138
|
-
* @param {*} param0 - an object containing the scrollport element and the child element to scroll to
|
|
139
|
-
*/
|
|
140
|
-
d = function({ scrollport: t, element: e }) {
|
|
141
|
-
const l = this.slideGutterSize * 2 / 100;
|
|
142
|
-
t.style.scrollBehavior = "auto", t.scrollTo(Math.abs(t.offsetLeft - e.offsetLeft + e.clientWidth * l), 0);
|
|
143
142
|
}, /**
|
|
144
143
|
* Scrolls the carousel in a specified direction by a specified distance
|
|
145
144
|
*
|
package/package.json
CHANGED