@pushword/js-helper 0.0.98 → 0.0.100

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/ScrollEnhancer.js +183 -179
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushword/js-helper",
3
- "version": "0.0.98",
3
+ "version": "0.0.100",
4
4
  "description": "Pushword front end helpers. ",
5
5
  "author": "Robin@PiedWeb <contact@piedweb.com>",
6
6
  "license": "MIT",
package/src/ScrollEnhancer.js CHANGED
@@ -2,193 +2,197 @@
2
2
  * Demo in Draft
3
3
  */
4
4
 
5
- export class ScrollYEnhancer {
6
- constructor(
7
- selector = '.enhance-scroll-y',
8
- chevron = '<div class="scroller absolute left-[128px] z-10 -mt-[10px] h-[44px] w-[44px] cursor-pointer rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-600 hover:bg-gray-100 select-none" onclick="scrollPreviousDiv(this)">⌄</div><div class="relative z-0 -mt-8 h-8 w-full bg-gradient-to-t from-white to-transparent"></div>',
9
- insertAfterBegin = '<div class="fixed left-0 z-0 -mt-3 h-3 w-full bg-gradient-to-b from-white to-transparent"></div>'
10
- ) {
11
- this.chevron = chevron;
12
- this.insertAfterBegin = insertAfterBegin;
13
- window.scrollPreviousDiv = this.scrollPreviousDiv;
14
- window.manageScrollYControllerVisibility = this.manageScrollYControllerVisibility;
15
-
16
- document.querySelectorAll(selector).forEach((element) => {
17
- this.enhanceScrollY(element)
18
- this.mouseSliderY(element)
19
- this.wheelScroll(element)
20
- element.onscroll = function () {
21
- manageScrollYControllerVisibility(this)
22
- }
23
- })
5
+ class ScrollYEnhancer {
6
+ constructor(
7
+ selector = '.enhance-scroll-y',
8
+ arrow = '<div class="scroller absolute left-[128px] z-10 -mt-[10px] h-[44px] w-[44px] cursor-pointer rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700 select-none" onclick="scrollPreviousDiv(this)">⌄</div><div class="relative z-0 -mt-8 h-8 w-full bg-gradient-to-t from-white to-transparent"></div>',
9
+ fadeout = '<div class="sticky left-0 -top-3 z-0 -mt-3 h-3 w-full bg-gradient-to-b from-white to-transparent"></div>',
10
+ ) {
11
+ window.scrollPreviousDiv = this.scrollPreviousDiv
12
+ window.manageScrollYControllerVisibility = this.manageScrollYControllerVisibility
13
+
14
+ document.querySelectorAll(selector).forEach((element) => {
15
+ this.arrow = element.dataset.arrow ?? arrow
16
+ this.fadeout = element.dataset.fadeout ?? fadeout
17
+ element.classList.remove(selector)
18
+ this.enhanceScrollY(element)
19
+ this.mouseSliderY(element)
20
+ this.wheelScroll(element)
21
+ element.onscroll = function () {
22
+ manageScrollYControllerVisibility(this)
24
23
  }
25
-
26
- wheelScroll(element) {
27
- element.addEventListener('wheel', (evt) => {
28
- evt.preventDefault()
29
- element.classList.toggle('scroll-smooth')
30
- element.scrollTop += evt.deltaY
31
- element.classList.toggle('scroll-smooth')
32
- })
33
- return this
34
- }
35
-
36
- enhanceScrollY(element) {
37
- if (element.scrollHeight <= element.clientHeight) return;
38
- element.insertAdjacentHTML('afterBegin', this.insertAfterBegin);
39
- element.insertAdjacentHTML('afterEnd', this.chevron);
24
+ })
25
+ }
26
+
27
+ wheelScroll(element) {
28
+ element.addEventListener('wheel', (evt) => {
29
+ evt.preventDefault()
30
+ element.classList.toggle('scroll-smooth')
31
+ element.scrollTop += evt.deltaY
32
+ element.classList.toggle('scroll-smooth')
33
+ })
34
+ return this
35
+ }
36
+
37
+ enhanceScrollY(element) {
38
+ if (element.scrollHeight <= element.clientHeight) return
39
+ element.insertAdjacentHTML('afterBegin', this.fadeout)
40
+ element.insertAdjacentHTML('afterEnd', this.arrow)
41
+ }
42
+
43
+ scrollPreviousDiv(element) {
44
+ const previousDiv = element.previousElementSibling
45
+ if (!previousDiv) return
46
+ if (element.textContent === '⌄') {
47
+ previousDiv.scrollTop += 25 // ~ one line
48
+ return
40
49
  }
41
-
42
- scrollPreviousDiv(element) {
43
- const previousDiv = element.previousElementSibling;
44
- if (!previousDiv) return;
45
- if (element.textContent === '⌄') {
46
- previousDiv.scrollTop += 25; // ~ one line
47
- return;
48
- }
49
- previousDiv.scrollTop = 0;
50
- }
51
-
52
- manageScrollYControllerVisibility(element) {
53
- const scroller = element.parentNode.querySelector('.scroller');
54
- if (scroller.textContent === '⌄') {
55
- const isAtMaxScroll = element.scrollTop >= element.scrollHeight - element.clientHeight - 10;
56
- if (isAtMaxScroll) {
57
- scroller.textContent = '⌃';
58
- scroller.classList.add('pt-[11px]');
59
- scroller.classList.add('text-gray-200');
60
- }
61
- return;
62
- } else {
63
- scroller.textContent = '⌄';
64
- scroller.classList.remove('pt-[11px]');
65
- scroller.classList.remove('text-gray-200');
66
- }
50
+ previousDiv.scrollTop = 0
51
+ }
52
+
53
+ manageScrollYControllerVisibility(element) {
54
+ const scroller = element.parentNode.querySelector('.scroller')
55
+ const isAtMaxScroll = element.scrollTop >= element.scrollHeight - element.clientHeight - 12
56
+ if (scroller.textContent === '⌄' || isAtMaxScroll) {
57
+ if (isAtMaxScroll) {
58
+ scroller.textContent = '⌃'
59
+ scroller.classList.add('pt-[11px]')
60
+ scroller.classList.add('text-gray-200')
61
+ }
62
+ return
63
+ } else {
64
+ scroller.textContent = '⌄'
65
+ scroller.classList.remove('pt-[11px]')
66
+ scroller.classList.remove('text-gray-200')
67
67
  }
68
+ }
68
69
 
69
- mouseSliderY(toSlide, speed = 1) {
70
- if ('ontouchstart' in document.documentElement) {
71
- return;
72
- }
73
- toSlide.classList.add('overflow-y-hidden');
74
- let isDown = false;
75
- let startX;
76
- let scrollTop;
77
- toSlide.addEventListener('mousedown', (e) => {
78
- isDown = true;
79
- //toSlide.classList.add('active');
80
- startX = e.pageY - toSlide.offsetTop;
81
- scrollTop = toSlide.scrollTop;
82
- });
83
- toSlide.addEventListener('mouseleave', () => {
84
- isDown = false;
85
- //toSlide.classList.remove('active');
86
- });
87
- toSlide.addEventListener('mouseup', () => {
88
- isDown = false;
89
- //toSlide.classList.remove('active');
90
- });
91
- toSlide.addEventListener('mousemove', (e) => {
92
- if (!isDown) return;
93
- e.preventDefault();
94
- const x = e.pageY - toSlide.offsetTop;
95
- const walk = (x - startX) * speed;
96
- toSlide.scrollTop = scrollTop - walk;
97
- });
70
+ mouseSliderY(toSlide, speed = 1) {
71
+ if ('ontouchstart' in document.documentElement) {
72
+ return
98
73
  }
74
+ toSlide.classList.add('overflow-y-hidden')
75
+ let isDown = false
76
+ let startX
77
+ let scrollTop
78
+ toSlide.addEventListener('mousedown', (e) => {
79
+ isDown = true
80
+ //toSlide.classList.add('active');
81
+ startX = e.pageY - toSlide.offsetTop
82
+ scrollTop = toSlide.scrollTop
83
+ })
84
+ toSlide.addEventListener('mouseleave', () => {
85
+ isDown = false
86
+ //toSlide.classList.remove('active');
87
+ })
88
+ toSlide.addEventListener('mouseup', () => {
89
+ isDown = false
90
+ //toSlide.classList.remove('active');
91
+ })
92
+ toSlide.addEventListener('mousemove', (e) => {
93
+ if (!isDown) return
94
+ e.preventDefault()
95
+ const x = e.pageY - toSlide.offsetTop
96
+ const walk = (x - startX) * speed
97
+ toSlide.scrollTop = scrollTop - walk
98
+ })
99
+ }
99
100
  }
100
101
 
101
- export class ScrollXEnhancer {
102
- constructor(
103
- selector = '.enhance-scroll-x',
104
- chevronRight = '<div class="scroll-right fixed right-0 top-1/3 z-20 h-[44px] w-[44px] cursor-pointer select-none rounded-full border border-gray-200 bg-white pt-[6px] text-center text-3xl leading-none text-gray-600 hover:bg-gray-100" onclick="scrollX(this)">🠆</div>',
105
- chevronLeft = '<div class="scroll-left fixed left-[22px] top-1/3 z-20 h-[44px] w-[44px] cursor-pointer select-none rounded-full border border-gray-200 bg-white pt-[6px] text-center text-3xl leading-none text-gray-600 hover:bg-gray-100" onclick="scrollX(this)">🠄</div>'
106
- ) {
107
- this.chevronLeft = chevronLeft;
108
- this.chevronRight = chevronRight;
109
- window.scrollLeft = this.scrollLeft;
110
- window.scrollX = this.scrollX;
111
- window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility;
112
-
113
- document.querySelectorAll(selector).forEach((element) => {
114
- this.enhanceScrollX(element)
115
- this.mouseSliderX(element)
116
- this.wheelScroll(element)
117
- element.onscroll = function () {
118
- manageScrollXControllerVisibility(this)
119
- }
120
- })
121
- }
122
-
123
- wheelScroll(element) {
124
- element.addEventListener('wheel', (evt) => {
125
- evt.preventDefault()
126
- if (evt.target.closest('.enhance-scroll-y')) return
127
- if (window.isScrolling === true) return
128
- element.classList.toggle('scroll-smooth')
129
- element.scrollLeft += evt.deltaY
130
- element.classList.toggle('scroll-smooth')
131
- })
102
+ class ScrollXEnhancer {
103
+ constructor(
104
+ selector = '.enhance-scroll-x',
105
+ arrowRight = '<div class="scroll-right relative left-[calc(100vw-62px)] -mt-[44px] top-1/3 z-20 h-[44px] w-[44px] cursor-pointer select-none rounded-full border border-gray-200 bg-white pt-[3px] text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">›</div>',
106
+ arrowLeft = '<div class="scroll-left relative left-[22px] top-1/3 z-20 h-[44px] w-[44px] cursor-pointer select-none rounded-full border border-gray-200 bg-white pt-[3px] text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">‹</div>',
107
+ ) {
108
+ this.arrowLeft = arrowLeft
109
+ this.arrowRight = arrowRight
110
+ window.scrollLeft = this.scrollLeft
111
+ window.scrollX = this.scrollX
112
+ window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility
113
+
114
+ document.querySelectorAll(selector).forEach((element) => {
115
+ element.classList.remove(selector)
116
+ this.enhanceScrollX(element)
117
+ this.mouseSliderX(element)
118
+ this.wheelScroll(element)
119
+ element.onscroll = function () {
120
+ manageScrollXControllerVisibility(this)
132
121
  }
133
-
134
- enhanceScrollX(element) {
135
- if (element.scrollWidth <= element.clientWidth) return;
136
- element.insertAdjacentHTML('afterbegin', this.chevronLeft + this.chevronRight);
137
- }
138
-
139
- scrollX(scroller) {
140
- const element = scroller.parentNode;
141
- if (!element) return;
142
-
143
- const scrollToRight = scroller.classList.contains('scroll-right');
144
-
145
- const oppositeSelector = scrollToRight ? 'scroll-left' : 'scroll-right';
146
- const oppositeController = element.querySelector('.' + oppositeSelector);
147
-
148
- const nextElementToScroll = element.children[3]; // work only with equal width block
149
- const toScrollWidth =
150
- nextElementToScroll.offsetWidth +
151
- parseInt(window.getComputedStyle(nextElementToScroll).marginLeft);
152
- element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth;
153
-
154
- }
155
-
156
- manageScrollXControllerVisibility(element) {
157
- const scrollLeftElement = element.querySelector('.scroll-left');
158
- const scrollRightElement = element.querySelector('.scroll-right');
159
- scrollRightElement.classList.remove('opacity-30');
160
- scrollLeftElement.classList.remove('opacity-30');
161
-
162
- const isAtMaxScroll = element.scrollLeft >= element.scrollWidth - element.clientWidth;
163
- if (isAtMaxScroll) scrollRightElement.classList.add('opacity-30');
164
- if (element.scrollLeft === 0) scrollLeftElement.classList.add('opacity-30');
122
+ })
123
+ }
124
+
125
+ wheelScroll(element) {
126
+ element.addEventListener('wheel', (evt) => {
127
+ evt.preventDefault()
128
+ if (evt.target.closest('.enhance-scroll-y')) return
129
+ if (window.isScrolling === true) return
130
+ element.classList.toggle('scroll-smooth')
131
+ element.scrollLeft += evt.deltaY
132
+ element.classList.toggle('scroll-smooth')
133
+ })
134
+ }
135
+
136
+ enhanceScrollX(element) {
137
+ if (element.scrollWidth <= element.clientWidth) return
138
+ element.insertAdjacentHTML('beforebegin', this.arrowLeft + this.arrowRight)
139
+ }
140
+
141
+ scrollX(scroller, selector = '.enhance-scroll-x') {
142
+ const element = scroller.parentNode.querySelector(selector)
143
+ if (!element) return
144
+
145
+ const scrollToRight = scroller.classList.contains('scroll-right')
146
+
147
+ const oppositeSelector = scrollToRight ? 'scroll-left' : 'scroll-right'
148
+ const oppositeController = element.querySelector('.' + oppositeSelector)
149
+
150
+ const nextElementToScroll = element.children[3] // work only with equal width block
151
+ const toScrollWidth = nextElementToScroll.offsetWidth + parseInt(window.getComputedStyle(nextElementToScroll).marginLeft)
152
+ element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth
153
+ }
154
+
155
+ manageScrollXControllerVisibility(element) {
156
+ const scrollLeftElement = element.parentNode.querySelector('.scroll-left')
157
+ const scrollRightElement = element.parentNode.querySelector('.scroll-right')
158
+ scrollRightElement.classList.remove('opacity-30')
159
+ scrollLeftElement.classList.remove('opacity-30')
160
+
161
+ const isAtMaxScroll = element.scrollLeft >= element.scrollWidth - element.clientWidth
162
+ if (isAtMaxScroll) scrollRightElement.classList.add('opacity-30')
163
+ if (element.scrollLeft === 0) scrollLeftElement.classList.add('opacity-30')
164
+ }
165
+
166
+ mouseSliderX(toSlide, speed = 1) {
167
+ if ('ontouchstart' in document.documentElement) {
168
+ return
165
169
  }
170
+ toSlide.classList.add('overflow-x-hidden')
171
+ let isDown = false
172
+ let startX
173
+ let scrollLeft
174
+ toSlide.addEventListener('mousedown', (e) => {
175
+ isDown = true
176
+ startX = e.pageX - toSlide.offsetLeft
177
+ scrollLeft = toSlide.scrollLeft
178
+ })
179
+ toSlide.addEventListener('mouseleave', () => {
180
+ isDown = false
181
+ })
182
+ toSlide.addEventListener('mouseup', () => {
183
+ isDown = false
184
+ })
185
+ toSlide.addEventListener('mousemove', (e) => {
186
+ if (!isDown) return
187
+ e.preventDefault()
188
+ const x = e.pageX - toSlide.offsetLeft
189
+ const walk = (x - startX) * speed
190
+ toSlide.scrollLeft = scrollLeft - walk
191
+ })
192
+ }
193
+ }
166
194
 
167
- mouseSliderX(toSlide, speed = 1) {
168
- if ('ontouchstart' in document.documentElement) {
169
- return;
170
- }
171
- toSlide.classList.add('overflow-x-hidden');
172
- let isDown = false;
173
- let startX;
174
- let scrollLeft;
175
- toSlide.addEventListener('mousedown', (e) => {
176
- isDown = true;
177
- startX = e.pageX - toSlide.offsetLeft;
178
- scrollLeft = toSlide.scrollLeft;
179
- });
180
- toSlide.addEventListener('mouseleave', () => {
181
- isDown = false;
182
- });
183
- toSlide.addEventListener('mouseup', () => {
184
- isDown = false;
185
- });
186
- toSlide.addEventListener('mousemove', (e) => {
187
- if (!isDown) return;
188
- e.preventDefault();
189
- const x = e.pageX - toSlide.offsetLeft;
190
- const walk = (x - startX) * speed;
191
- toSlide.scrollLeft = scrollLeft - walk;
192
- });
193
- }
195
+ module.exports = {
196
+ ScrollXEnhancer: ScrollXEnhancer,
197
+ ScrollYEnhancer: ScrollYEnhancer,
194
198
  }