@pushword/js-helper 0.0.113 → 0.0.114

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/HorizontalScroll.js +38 -51
  3. package/src/ScrollEnhancer.js +53 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushword/js-helper",
3
- "version": "0.0.113",
3
+ "version": "0.0.114",
4
4
  "description": "Pushword front end helpers. ",
5
5
  "author": "Robin@PiedWeb <contact@piedweb.com>",
6
6
  "license": "MIT",
package/src/HorizontalScroll.js CHANGED
@@ -1,61 +1,48 @@
1
-
2
1
  class HorizontalScroll {
3
- constructor(selectorToFindElementToScroll, scrollerSelectorOrContainer = null) {
4
- this.elementToScroll = document.querySelector(selectorToFindElementToScroll);
5
- this.scrollContainer = this.elementToScroll.querySelector('div:nth-child(2)');
6
- this.scroller =
7
- scrollerSelectorOrContainer instanceof HTMLElement
8
- ? scrollerSelectorOrContainer
9
- : document.querySelector(
10
- scrollerSelectorOrContainer || selectorToFindElementToScroll + '-scroller'
11
- );
12
- this.scrollWidth =
13
- this.scrollContainer.offsetWidth +
14
- parseInt(window.getComputedStyle(this.scrollContainer).marginLeft);
15
- this.scrollContainerWidth =
16
- this.elementToScroll.scrollWidth - this.elementToScroll.clientWidth;
17
- }
2
+ constructor(selectorToFindElementToScroll, scrollerSelectorOrContainer = null) {
3
+ this.elementToScroll = document.querySelector(selectorToFindElementToScroll)
4
+ this.scrollContainer = this.elementToScroll.querySelector('div:nth-child(2)')
5
+ this.scroller =
6
+ scrollerSelectorOrContainer instanceof HTMLElement
7
+ ? scrollerSelectorOrContainer
8
+ : document.querySelector(scrollerSelectorOrContainer || selectorToFindElementToScroll + '-scroller')
9
+ this.scrollWidth = this.scrollContainer.offsetWidth + parseInt(window.getComputedStyle(this.scrollContainer).marginLeft)
10
+ this.scrollContainerWidth = this.elementToScroll.scrollWidth - this.elementToScroll.clientWidth
11
+ }
18
12
 
19
- init() {
20
- if (!('ontouchstart' in document.documentElement)) {
21
- this.elementToScroll.classList.add('overflow-x-hidden');
22
- this.scroller.classList.toggle('hidden');
23
- }
24
- return this;
13
+ init() {
14
+ if (!('ontouchstart' in document.documentElement)) {
15
+ this.elementToScroll.classList.add('overflow-x-hidden')
16
+ this.scroller.classList.toggle('hidden')
25
17
  }
18
+ return this
19
+ }
26
20
 
27
- activateWheelScroll() {
28
- this.elementToScroll.addEventListener('wheel', (evt) => {
29
- evt.preventDefault();
30
- this.elementToScroll.classList.toggle('scroll-smooth');
31
- this.elementToScroll.scrollLeft += evt.deltaY;
32
- this.elementToScroll.classList.toggle('scroll-smooth');
33
- });
34
- return this;
35
- }
21
+ activateWheelScroll() {
22
+ this.elementToScroll.addEventListener(
23
+ 'wheel',
24
+ (evt) => {
25
+ evt.preventDefault()
26
+ this.elementToScroll.classList.toggle('scroll-smooth')
27
+ this.elementToScroll.scrollLeft += evt.deltaY
28
+ this.elementToScroll.classList.toggle('scroll-smooth')
29
+ },
30
+ { passive: true },
31
+ )
32
+ return this
33
+ }
36
34
 
37
- scroll(scrollerClassToToggle = 'opacity-50') {
38
- const isRightScroll =
39
- window.event.target == this.scroller.children[1] ||
40
- window.event.target.parentNode == this.scroller.children[1];
41
- const scrollPos = isRightScroll
42
- ? (this.elementToScroll.scrollLeft += this.scrollWidth)
43
- : (this.elementToScroll.scrollLeft -= this.scrollWidth);
35
+ scroll(scrollerClassToToggle = 'opacity-50') {
36
+ const isRightScroll = window.event.target == this.scroller.children[1] || window.event.target.parentNode == this.scroller.children[1]
37
+ const scrollPos = isRightScroll ? (this.elementToScroll.scrollLeft += this.scrollWidth) : (this.elementToScroll.scrollLeft -= this.scrollWidth)
44
38
 
45
- this.scroller.children[1].classList.toggle(
46
- scrollerClassToToggle,
47
- scrollPos >= this.scrollContainerWidth
48
- );
49
- this.scroller.children[1].classList.toggle(
50
- 'cursor-pointer',
51
- scrollPos < this.scrollContainerWidth
52
- );
53
- this.scroller.children[0].classList.toggle(scrollerClassToToggle, scrollPos <= 0);
54
- this.scroller.children[0].classList.toggle('cursor-pointer', scrollPos > 0);
55
- }
39
+ this.scroller.children[1].classList.toggle(scrollerClassToToggle, scrollPos >= this.scrollContainerWidth)
40
+ this.scroller.children[1].classList.toggle('cursor-pointer', scrollPos < this.scrollContainerWidth)
41
+ this.scroller.children[0].classList.toggle(scrollerClassToToggle, scrollPos <= 0)
42
+ this.scroller.children[0].classList.toggle('cursor-pointer', scrollPos > 0)
43
+ }
56
44
  }
57
45
 
58
-
59
46
  /*
60
47
  * Demo : https://codepen.io/PiedWeb/pen/ExrNWvP
61
48
  *
@@ -116,4 +103,4 @@ class HorizontalScroll {
116
103
 
117
104
  <h1>test</h1>
118
105
  <p class="h-[2000px] bg-slate-50">Lorem</p>
119
- */
106
+ */
package/src/ScrollEnhancer.js CHANGED
@@ -36,33 +36,37 @@ class ScrollYEnhancer {
36
36
  }
37
37
 
38
38
  wheelScrollY(element) {
39
- element.addEventListener('wheel', (evt) => {
40
- if (window.isScrolling === true) return
41
- evt.preventDefault()
42
- window.isScrolling = true
43
-
44
- const before = element.scrollTop
45
- element.scrollTop += evt.deltaY
46
-
47
- if (before === element.scrollTop) {
48
- if (
49
- (parent = element.closest('.enhance-scroll-x')) &&
50
- new Date().getTime() - window.lastScrollTime > 200 &&
51
- scrollX(parent.parentNode.querySelector(evt.deltaY > 0 ? '.scroll-right' : '.scroll-left'))
52
- ) {
53
- window.lastScrollTime = new Date().getTime()
54
- window.isScrolling = false
55
- return
56
- }
39
+ element.addEventListener(
40
+ 'wheel',
41
+ (evt) => {
42
+ if (window.isScrolling === true) return
43
+ evt.preventDefault()
44
+ window.isScrolling = true
57
45
 
58
- if (new Date().getTime() - window.lastScrollTime > 200) {
59
- window.lastScrollTime = new Date().getTime()
60
- const toScrollHeight = element.dataset.toscroll ?? 600
61
- window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
62
- }
63
- } else window.lastScrollTime = new Date().getTime()
64
- window.isScrolling = false
65
- })
46
+ const before = element.scrollTop
47
+ element.scrollTop += evt.deltaY
48
+
49
+ if (before === element.scrollTop) {
50
+ if (
51
+ (parent = element.closest('.enhance-scroll-x')) &&
52
+ new Date().getTime() - window.lastScrollTime > 200 &&
53
+ scrollX(parent.parentNode.querySelector(evt.deltaY > 0 ? '.scroll-right' : '.scroll-left'))
54
+ ) {
55
+ window.lastScrollTime = new Date().getTime()
56
+ window.isScrolling = false
57
+ return
58
+ }
59
+
60
+ if (new Date().getTime() - window.lastScrollTime > 200) {
61
+ window.lastScrollTime = new Date().getTime()
62
+ const toScrollHeight = element.dataset.toscroll ?? 600
63
+ window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
64
+ }
65
+ } else window.lastScrollTime = new Date().getTime()
66
+ window.isScrolling = false
67
+ },
68
+ { passive: true },
69
+ )
66
70
  }
67
71
 
68
72
  enhanceScrollY(element) {
@@ -161,28 +165,32 @@ class ScrollXEnhancer {
161
165
  }
162
166
 
163
167
  wheelScrollX(element) {
164
- element.addEventListener('wheel', (evt) => {
165
- if (window.isScrolling === true) return
166
- evt.preventDefault()
167
- window.isScrolling = true
168
+ element.addEventListener(
169
+ 'wheel',
170
+ (evt) => {
171
+ if (window.isScrolling === true) return
172
+ evt.preventDefault()
173
+ window.isScrolling = true
168
174
 
169
- if (evt.target.closest('.enhance-scroll-y')) {
170
- window.isScrolling = false
171
- return
172
- }
175
+ if (evt.target.closest('.enhance-scroll-y')) {
176
+ window.isScrolling = false
177
+ return
178
+ }
173
179
 
174
- const before = element.scrollLeft
175
- element.scrollLeft += evt.deltaY
180
+ const before = element.scrollLeft
181
+ element.scrollLeft += evt.deltaY
176
182
 
177
- if (before === element.scrollLeft) {
178
- if (new Date().getTime() - window.lastScrollTime > 200) {
179
- window.lastScrollTime = new Date().getTime()
180
- const toScrollHeight = element.dataset.toscroll ?? 600
181
- window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
182
- }
183
- } else window.lastScrollTime = new Date().getTime()
184
- window.isScrolling = false
185
- })
183
+ if (before === element.scrollLeft) {
184
+ if (new Date().getTime() - window.lastScrollTime > 200) {
185
+ window.lastScrollTime = new Date().getTime()
186
+ const toScrollHeight = element.dataset.toscroll ?? 600
187
+ window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
188
+ }
189
+ } else window.lastScrollTime = new Date().getTime()
190
+ window.isScrolling = false
191
+ },
192
+ { passive: true },
193
+ )
186
194
  }
187
195
 
188
196
  enhanceScrollX(element) {