@pushword/js-helper 0.0.107 → 0.0.109

package/package.json

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

package/src/ScrollEnhancer.js

@@ -2,6 +2,10 @@
  * Demo in Draft
  */
 
+/**
+ * Demo in Draft
+ */
+
 class ScrollYEnhancer {
   constructor(
     selector = '.enhance-scroll-y',
@@ -10,21 +14,28 @@ class ScrollYEnhancer {
   ) {
     window.scrollPreviousDiv = this.scrollPreviousDiv
     window.manageScrollYControllerVisibility = this.manageScrollYControllerVisibility
+    window.isScrolling = false
 
     document.querySelectorAll(selector).forEach((element) => {
+      if (element.scrollHeight <= element.clientHeight - 20) {
+        // 20 = padding-bottom
+        element.classList.remove('enhance-scroll-y')
+        return
+      }
+
       this.arrow = element.dataset.arrow ?? arrow
       this.fadeout = element.dataset.fadeout ?? fadeout
       element.classList.remove(selector)
       this.enhanceScrollY(element)
       this.mouseSliderY(element)
-      this.wheelScroll(element)
+      this.wheelScrollY(element)
       element.onscroll = function () {
         manageScrollYControllerVisibility(this)
       }
     })
   }
 
-  wheelScroll(element) {
+  wheelScrollY(element) {
     element.addEventListener('wheel', (evt) => {
       if (window.isScrolling === true) return
       evt.preventDefault()
@@ -72,7 +83,7 @@ class ScrollYEnhancer {
 
   manageScrollYControllerVisibility(element) {
     const scroller = element.parentNode.querySelector('.scroller')
-    const isAtMaxScroll = element.scrollTop >= element.scrollHeight - element.clientHeight - 12
+    const isAtMaxScroll = element.scrollTop >= element.scrollHeight - element.clientHeight - 8
     if (scroller.textContent === '⌄' || isAtMaxScroll) {
       if (isAtMaxScroll) {
         scroller.textContent = '⌃'
@@ -128,21 +139,28 @@ class ScrollXEnhancer {
     window.scrollLeft = this.scrollLeft
     window.scrollX = this.scrollX
     window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility
+    window.isScrolling = false
 
     document.querySelectorAll(selector).forEach((element) => {
+      if (element.scrollWidth <= element.clientWidth - 12) {
+        // 20 = padding-bottom
+        element.classList.remove('enhance-scroll-x')
+        return
+      }
+
       this.arrowLeft = element.dataset.arrowleft ?? arrowLeft
       this.arrowRight = element.dataset.arrowright ?? arrowRight
       element.classList.remove(selector)
       this.enhanceScrollX(element)
       this.mouseSliderX(element)
-      this.wheelScroll(element)
+      this.wheelScrollX(element)
       element.onscroll = function () {
         manageScrollXControllerVisibility(this)
       }
     })
   }
 
-  wheelScroll(element) {
+  wheelScrollX(element) {
     element.addEventListener('wheel', (evt) => {
       if (window.isScrolling === true) return
       evt.preventDefault()
@@ -173,14 +191,12 @@ class ScrollXEnhancer {
   }
 
   scrollX(scroller, selector = '.enhance-scroll-x') {
+    if (!scroller) return
     const element = scroller.parentNode.querySelector(selector)
     if (!element) return
 
     const scrollToRight = scroller.classList.contains('scroll-right')
 
-    const oppositeSelector = scrollToRight ? 'scroll-left' : 'scroll-right'
-    const oppositeController = element.querySelector('.' + oppositeSelector)
-
     const nextElementToScroll = element.children[3] // work only with equal width block
     const toScrollWidth = nextElementToScroll.offsetWidth + parseInt(window.getComputedStyle(nextElementToScroll).marginLeft)
     const before = element.scrollLeft

package/src/tailwind.prose.scss

@@ -25,7 +25,6 @@
     border-color: var(--primary);
     outline: none;
     text-decoration: none !important;
-    font-size: 120%;
 }
 
 .link-btn:hover {