@pushword/js-helper 0.0.98 → 0.0.99

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 +41 -41
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.99",
4
4
  "description": "Pushword front end helpers. ",
5
5
  "author": "Robin@PiedWeb <contact@piedweb.com>",
6
6
  "license": "MIT",
package/src/ScrollEnhancer.js CHANGED
@@ -6,7 +6,7 @@ export class ScrollYEnhancer {
6
6
  constructor(
7
7
  selector = '.enhance-scroll-y',
8
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>'
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
10
  ) {
11
11
  this.chevron = chevron;
12
12
  this.insertAfterBegin = insertAfterBegin;
@@ -14,24 +14,24 @@ export class ScrollYEnhancer {
14
14
  window.manageScrollYControllerVisibility = this.manageScrollYControllerVisibility;
15
15
 
16
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
- })
24
- }
25
-
26
- wheelScroll(element) {
17
+ this.enhanceScrollY(element);
18
+ this.mouseSliderY(element);
19
+ this.wheelScroll(element);
20
+ element.onscroll = function () {
21
+ manageScrollYControllerVisibility(this);
22
+ };
23
+ });
24
+ }
25
+
26
+ wheelScroll(element) {
27
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
- }
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
35
 
36
36
  enhanceScrollY(element) {
37
37
  if (element.scrollHeight <= element.clientHeight) return;
@@ -52,7 +52,8 @@ export class ScrollYEnhancer {
52
52
  manageScrollYControllerVisibility(element) {
53
53
  const scroller = element.parentNode.querySelector('.scroller');
54
54
  if (scroller.textContent === '⌄') {
55
- const isAtMaxScroll = element.scrollTop >= element.scrollHeight - element.clientHeight - 10;
55
+ const isAtMaxScroll =
56
+ element.scrollTop >= element.scrollHeight - element.clientHeight - 10;
56
57
  if (isAtMaxScroll) {
57
58
  scroller.textContent = '⌃';
58
59
  scroller.classList.add('pt-[11px]');
@@ -101,8 +102,8 @@ export class ScrollYEnhancer {
101
102
  export class ScrollXEnhancer {
102
103
  constructor(
103
104
  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>'
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>'
106
107
  ) {
107
108
  this.chevronLeft = chevronLeft;
108
109
  this.chevronRight = chevronRight;
@@ -111,29 +112,29 @@ export class ScrollXEnhancer {
111
112
  window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility;
112
113
 
113
114
  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) {
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) {
124
125
  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
- })
132
- }
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
+ }
133
134
 
134
135
  enhanceScrollX(element) {
135
136
  if (element.scrollWidth <= element.clientWidth) return;
136
- element.insertAdjacentHTML('afterbegin', this.chevronLeft + this.chevronRight);
137
+ element.insertAdjacentHTML('beforebegin', this.chevronLeft + this.chevronRight);
137
138
  }
138
139
 
139
140
  scrollX(scroller) {
@@ -150,7 +151,6 @@ export class ScrollXEnhancer {
150
151
  nextElementToScroll.offsetWidth +
151
152
  parseInt(window.getComputedStyle(nextElementToScroll).marginLeft);
152
153
  element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth;
153
-
154
154
  }
155
155
 
156
156
  manageScrollXControllerVisibility(element) {