@pushword/js-helper 0.0.99 → 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 +185 -181
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushword/js-helper",
3
- "version": "0.0.99",
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="sticky left-0 -top-3 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)
23
+ }
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
24
49
  }
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);
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')
40
67
  }
68
+ }
41
69
 
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 =
56
- element.scrollTop >= element.scrollHeight - element.clientHeight - 10;
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
- }
68
- }
69
-
70
- mouseSliderY(toSlide, speed = 1) {
71
- if ('ontouchstart' in document.documentElement) {
72
- return;
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
- });
70
+ mouseSliderY(toSlide, speed = 1) {
71
+ if ('ontouchstart' in document.documentElement) {
72
+ return
99
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
+ }
100
100
  }
101
101
 
102
- export class ScrollXEnhancer {
103
- constructor(
104
- selector = '.enhance-scroll-x',
105
- chevronRight = '<div class="scroll-right relative left-[calc(100vw-62px)] 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
- chevronLeft = '<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-[6px] text-center text-3xl leading-none text-gray-600 hover:bg-gray-100" onclick="scrollX(this)">🠄</div>'
107
- ) {
108
- this.chevronLeft = chevronLeft;
109
- this.chevronRight = chevronRight;
110
- window.scrollLeft = this.scrollLeft;
111
- window.scrollX = this.scrollX;
112
- window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility;
113
-
114
- document.querySelectorAll(selector).forEach((element) => {
115
- this.enhanceScrollX(element);
116
- this.mouseSliderX(element);
117
- this.wheelScroll(element);
118
- element.onscroll = function () {
119
- manageScrollXControllerVisibility(this);
120
- };
121
- });
122
- }
123
-
124
- wheelScroll(element) {
125
- element.addEventListener('wheel', (evt) => {
126
- evt.preventDefault();
127
- if (evt.target.closest('.enhance-scroll-y')) return;
128
- if (window.isScrolling === true) return;
129
- element.classList.toggle('scroll-smooth');
130
- element.scrollLeft += evt.deltaY;
131
- element.classList.toggle('scroll-smooth');
132
- });
133
- }
134
-
135
- enhanceScrollX(element) {
136
- if (element.scrollWidth <= element.clientWidth) return;
137
- element.insertAdjacentHTML('beforebegin', this.chevronLeft + this.chevronRight);
138
- }
139
-
140
- scrollX(scroller) {
141
- const element = scroller.parentNode;
142
- if (!element) return;
143
-
144
- const scrollToRight = scroller.classList.contains('scroll-right');
145
-
146
- const oppositeSelector = scrollToRight ? 'scroll-left' : 'scroll-right';
147
- const oppositeController = element.querySelector('.' + oppositeSelector);
148
-
149
- const nextElementToScroll = element.children[3]; // work only with equal width block
150
- const toScrollWidth =
151
- nextElementToScroll.offsetWidth +
152
- parseInt(window.getComputedStyle(nextElementToScroll).marginLeft);
153
- element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth;
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');
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)
121
+ }
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
  }