@pushword/js-helper 0.0.105 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pushword/js-helper",
-    "version": "0.0.105",
+    "version": "0.0.107",
     "description": "Pushword front end helpers. ",
     "author": "Robin@PiedWeb <contact@piedweb.com>",
     "license": "MIT",

package/src/ScrollEnhancer.js

@@ -5,7 +5,7 @@
 class ScrollYEnhancer {
   constructor(
     selector = '.enhance-scroll-y',
-    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>',
+    arrow = '<div class="scroller absolute left-[128px] z-10 -mt-[10px] h-[36px] w-[36px] cursor-pointer rounded-full border border-gray-200 bg-white text-center text-3xl leading-[23px] 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>',
     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>',
   ) {
     window.scrollPreviousDiv = this.scrollPreviousDiv
@@ -26,20 +26,32 @@ class ScrollYEnhancer {
 
   wheelScroll(element) {
     element.addEventListener('wheel', (evt) => {
+      if (window.isScrolling === true) return
       evt.preventDefault()
-      //element.classList.toggle('scroll-smooth')
+      window.isScrolling = true
+
       const before = element.scrollTop
       element.scrollTop += evt.deltaY
-      const after = element.scrollTop
-      if (before === after) {
-        window.scrollXWithoutDoingNothing++
-        if (window.scrollXWithoutDoingNothing > 12) window.scrollBy(0, evt.deltaY )
-      } else {
-        window.scrollXWithoutDoingNothing = 0
-      }
-      //element.classList.toggle('scroll-smooth')
+
+      if (before === element.scrollTop) {
+        if (
+          (parent = element.closest('.enhance-scroll-x')) &&
+          new Date().getTime() - window.lastScrollTime > 200 &&
+          scrollX(parent.parentNode.querySelector(evt.deltaY > 0 ? '.scroll-right' : '.scroll-left'))
+        ) {
+          window.lastScrollTime = new Date().getTime()
+          window.isScrolling = false
+          return
+        }
+
+        if (new Date().getTime() - window.lastScrollTime > 200) {
+          window.lastScrollTime = new Date().getTime()
+          const toScrollHeight = element.dataset.toscroll ?? 600
+          window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
+        }
+      } else window.lastScrollTime = new Date().getTime()
+      window.isScrolling = false
     })
-    return this
   }
 
   enhanceScrollY(element) {
@@ -64,13 +76,13 @@ class ScrollYEnhancer {
     if (scroller.textContent === '⌄' || isAtMaxScroll) {
       if (isAtMaxScroll) {
         scroller.textContent = '⌃'
-        scroller.classList.add('pt-[11px]')
+        scroller.classList.add('pt-[12px]')
         scroller.classList.add('text-gray-200')
       }
       return
     } else {
       scroller.textContent = '⌄'
-      scroller.classList.remove('pt-[11px]')
+      scroller.classList.remove('pt-[12px]')
       scroller.classList.remove('text-gray-200')
     }
   }
@@ -110,8 +122,8 @@ class ScrollYEnhancer {
 class ScrollXEnhancer {
   constructor(
     selector = '.enhance-scroll-x',
-    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>',
-    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>',
+    arrowRight = '<div class="scroll-right relative left-[calc(100vw-62px)] -mt-[36px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">›</div>',
+    arrowLeft = '<div class="scroll-left relative left-[22px] top-1/3 z-20 h-[36px] w-[36px] cursor-pointer select-none rounded-full border border-gray-200 bg-white text-center text-3xl leading-none text-gray-500 hover:text-gray-700" onclick="scrollX(this)">‹</div>',
   ) {
     window.scrollLeft = this.scrollLeft
     window.scrollX = this.scrollX
@@ -132,20 +144,26 @@ class ScrollXEnhancer {
 
   wheelScroll(element) {
     element.addEventListener('wheel', (evt) => {
-      evt.preventDefault()
-      if (evt.target.closest('.enhance-scroll-y')) return
       if (window.isScrolling === true) return
-      //element.classList.toggle('scroll-smooth')
+      evt.preventDefault()
+      window.isScrolling = true
+
+      if (evt.target.closest('.enhance-scroll-y')) {
+        window.isScrolling = false
+        return
+      }
+
       const before = element.scrollLeft
       element.scrollLeft += evt.deltaY
-      const after = element.scrollLeft
-      if (before === after) {
-        window.scrollYWithoutDoingNothing++
-        if (window.scrollYWithoutDoingNothing > 12) window.scrollBy(0, evt.deltaY)
-      } else {
-        window.scrollYWithoutDoingNothing = 0
-      }
-      //element.classList.toggle('scroll-smooth')
+
+      if (before === element.scrollLeft) {
+        if (new Date().getTime() - window.lastScrollTime > 200) {
+          window.lastScrollTime = new Date().getTime()
+          const toScrollHeight = element.dataset.toscroll ?? 600
+          window.scrollBy({ top: evt.deltaY > 0 ? toScrollHeight : -toScrollHeight, left: 0, behavior: 'smooth' })
+        }
+      } else window.lastScrollTime = new Date().getTime()
+      window.isScrolling = false
     })
   }
 
@@ -165,7 +183,9 @@ class ScrollXEnhancer {
 
     const nextElementToScroll = element.children[3] // work only with equal width block
     const toScrollWidth = nextElementToScroll.offsetWidth + parseInt(window.getComputedStyle(nextElementToScroll).marginLeft)
+    const before = element.scrollLeft
     element.scrollLeft += scrollToRight ? toScrollWidth : -toScrollWidth
+    return before !== element.scrollLeft
   }
 
   manageScrollXControllerVisibility(element) {