update pushword/js-helper version

packages/core/src/templates/component/image_inline.html.twig

@@ -46,7 +46,7 @@
     {% set width = image.width %}
     {% set height = image.height %}
 {% endif %}
-<picture>
+<picture style="margin:0">
     <source type="image/webp"
      srcset="{{ image|image('xs', 'webp') ~' 576w'
       ~','~ image|image('sm', 'webp') ~' 768w'

packages/core/src/templates/component/video.html.twig

@@ -6,7 +6,7 @@
 {% block video %}
     {% set is_embed = embed_code is defined and embed_code is not null %}
     <div class="max-w-screen-xl mx-auto">
-        <div class="relative m-3  my-6 aspect-w-16 aspect-h-9"
+        <div class="relative m-3 my-6 aspect-w-16 aspect-h-9"
             {% if is_embed %} replaceBy="{{ embed_code|replace({'"': "'"}) }}"{% endif %}
         >
             {% if false ==  is_embed %}<span data-rot="{{ encrypt(url) }}" data-fslightbox>{% endif %}

packages/js-helper/package.json

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

packages/js-helper/src/ScrollEnhancer.js

@@ -2,29 +2,35 @@
  * Demo in Draft
  */
 
+/**
+ * Demo in Draft
+ */
+
 class ScrollYEnhancer {
-  constructor(
-    selector = '.enhance-scroll-y',
-    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>',
-  ) {
+  constructor(selector = '.enhance-scroll-y', 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
     window.manageScrollYControllerVisibility = this.manageScrollYControllerVisibility
 
     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()
@@ -34,11 +40,7 @@ class ScrollYEnhancer {
       element.scrollTop += evt.deltaY
 
       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'))
-        ) {
+        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
@@ -72,7 +74,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 = '⌃'
@@ -120,29 +122,31 @@ class ScrollYEnhancer {
 }
 
 class ScrollXEnhancer {
-  constructor(
-    selector = '.enhance-scroll-x',
-    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>',
-  ) {
+  constructor(selector = '.enhance-scroll-x', 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
     window.manageScrollXControllerVisibility = this.manageScrollXControllerVisibility
 
     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()
@@ -178,9 +182,6 @@ class ScrollXEnhancer {
 
     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
@@ -228,6 +229,7 @@ class ScrollXEnhancer {
   }
 }
 
+
 module.exports = {
   ScrollXEnhancer: ScrollXEnhancer,
   ScrollYEnhancer: ScrollYEnhancer,

packages/js-helper/src/tailwind.prose.scss

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