@pushword/js-helper 0.0.121 → 0.0.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushword/js-helper",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "description": "Pushword front end helpers. ",
   "author": "Robin@PiedWeb <contact@piedweb.com>",
   "license": "MIT",
@@ -8,33 +8,18 @@
     "prettier": "prettier ./src/*.{js,scss} --write"
   },
   "dependencies": {
-    "140.css": "^1.0.1",
-    "@babel/core": "^7.24",
-    "@babel/preset-env": "^7.22",
-    "@symfony/webpack-encore": "^5",
-    "@tailwindcss/aspect-ratio": "^0.4",
-    "@tailwindcss/forms": "^0.5",
+    "vite": "^7.1.12",
+    "@tailwindcss/vite": "^4.1.16",
+    "vite-plugin-static-copy": "^3.1.4",
+    "vite-plugin-symfony": "^8.2.2",
     "@tailwindcss/typography": "^0.5",
-    "autoprefixer": "^10.4",
-    "babel-preset-stage-2": "^6.24.1",
+    "tailwindcss-animated": "^2",
+    "@tailwindcss/forms": "^0.5",
+    "140.css": "^1.0.1",
     "codemirror": "^6.0",
     "core-js": "^3.38",
     "easymde": "^2.18",
-    "file-loader": "^6.0",
-    "fslightbox": "^3.2.2",
-    "postcss": "^8.4",
-    "postcss-import": "^16",
-    "postcss-loader": "^8",
-    "sass": "^1.68",
-    "sass-loader": "^16",
-    "simple-jekyll-search": "^1.9.1",
-    "tailwindcss": "^3",
-    "tailwindcss-animated": "^2",
-    "tailwindcss-hero-patterns": "^0.1",
-    "tailwindcss-multi-column": "^1.0.2",
-    "webpack": "^5.94",
-    "webpack-cli": "^4.9.1 || ^5.0.1",
-    "webpack-watch-files-plugin": "^1.1.0"
+    "glightbox": "^3.3"
   },
   "repository": {
     "type": "git",

package/src/FilesToWatch.js

@@ -0,0 +1,11 @@
+export default function getFilesToWatch(basePath = './..') {
+  return [
+    basePath + '/vendor/pushword/core/src/templates/**/*.html.twig',
+    basePath + '/vendor/pushword/conversation/src/templates/**/*.html.twig',
+    basePath + '/vendor/pushword/admin-block-editor/src/templates/**/*.html.twig',
+    basePath + '/vendor/pushword/advanced-main-image/src/templates/**/*.html.twig',
+    basePath + '/templates/**/*.html.twig',
+    basePath + '/var/TailwindGeneratorCache/*',
+    basePath + '/src/Twig/AppExtension.php',
+  ]
+}

package/src/HorizontalScroll.js

@@ -5,9 +5,14 @@ class HorizontalScroll {
     this.scroller =
       scrollerSelectorOrContainer instanceof HTMLElement
         ? scrollerSelectorOrContainer
-        : document.querySelector(scrollerSelectorOrContainer || selectorToFindElementToScroll + '-scroller')
-    this.scrollWidth = this.scrollContainer.offsetWidth + parseInt(window.getComputedStyle(this.scrollContainer).marginLeft)
-    this.scrollContainerWidth = this.elementToScroll.scrollWidth - this.elementToScroll.clientWidth
+        : document.querySelector(
+            scrollerSelectorOrContainer || selectorToFindElementToScroll + '-scroller',
+          )
+    this.scrollWidth =
+      this.scrollContainer.offsetWidth +
+      parseInt(window.getComputedStyle(this.scrollContainer).marginLeft)
+    this.scrollContainerWidth =
+      this.elementToScroll.scrollWidth - this.elementToScroll.clientWidth
   }
 
   init() {
@@ -33,11 +38,21 @@ class HorizontalScroll {
   }
 
   scroll(scrollerClassToToggle = 'opacity-50') {
-    const isRightScroll = window.event.target == this.scroller.children[1] || window.event.target.parentNode == this.scroller.children[1]
-    const scrollPos = isRightScroll ? (this.elementToScroll.scrollLeft += this.scrollWidth) : (this.elementToScroll.scrollLeft -= this.scrollWidth)
+    const isRightScroll =
+      window.event.target == this.scroller.children[1] ||
+      window.event.target.parentNode == this.scroller.children[1]
+    const scrollPos = isRightScroll
+      ? (this.elementToScroll.scrollLeft += this.scrollWidth)
+      : (this.elementToScroll.scrollLeft -= this.scrollWidth)
 
-    this.scroller.children[1].classList.toggle(scrollerClassToToggle, scrollPos >= this.scrollContainerWidth)
-    this.scroller.children[1].classList.toggle('cursor-pointer', scrollPos < this.scrollContainerWidth)
+    this.scroller.children[1].classList.toggle(
+      scrollerClassToToggle,
+      scrollPos >= this.scrollContainerWidth,
+    )
+    this.scroller.children[1].classList.toggle(
+      'cursor-pointer',
+      scrollPos < this.scrollContainerWidth,
+    )
     this.scroller.children[0].classList.toggle(scrollerClassToToggle, scrollPos <= 0)
     this.scroller.children[0].classList.toggle('cursor-pointer', scrollPos > 0)
   }
@@ -89,10 +104,10 @@ class HorizontalScroll {
     </div>
   </div>
   <div id="toScroll2-scroller" class="hidden" onclick="(new HorizontalScroll('#toScroll2', this)).scroll('hidden')">
-    <div class="hidden cursor-default cursor-pointer bg-white px-2 text-2xl text-gray-600 white bg-opacity-50
+    <div class="hidden cursor-default cursor-pointer bg-white px-2 text-2xl text-gray-600 white bg-white/50
                 absolute h-full top-0 left-0 flex items-center"><span>❮</span></div>
     <div class="cursor-default cursor-pointer bg-white px-2 text-2xl text-gray-600
-                absolute h-full top-0 right-0 flex items-center bg-opacity-50"><span>❯</span></div>
+                absolute h-full top-0 right-0 flex items-center bg-white/50"><span>❯</span></div>
   </div>
   <script>document.addEventListener('DOMContentLoaded', function() {
      (new HorizontalScroll('#toScroll2')).init().activateWheelScroll();

package/src/app.css

@@ -1,4 +1,83 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import "./tailwind.prose.scss";
+@import 'tailwindcss';
+
+@import 'tailwindcss-animated';
+
+@plugin '@tailwindcss/typography';
+/* @plugin "@tailwindcss/forms"; */
+
+/*
+Tailwind content sources for all packages
+-----------------------------------------
+*/
+
+@source "./../../../../vendor/pushword/**/templates/";
+@source "./../../**/templates/";
+@source "./../../../../templates";
+@source "./../../../../var/TailwindGeneratorCache/*";
+@source "./../../../../vendor/pushword/core/src/Twig/**.php";
+@source "./../../core/src/Twig/**.php";
+@source "./../../../../vendor/pushword/admin/src/templates/markdown_cheatsheet.html.twig";
+@source "./../../admin/src/templates/markdown_cheatsheet.html.twig";
+
+/* Tailwind v4 CSS-first configuration */
+@theme {
+  /* Custom minHeight values */
+  --min-height-screen-1-4: 25vh;
+  --min-height-screen-3-4: 75vh;
+  --min-height-screen-1-3: 33vh;
+  --min-height-screen-2-3: 66vh;
+  --min-height-screen-1-2: 50vh;
+
+  /* Custom colors */
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+}
+
+/* Custom variants for first-letter */
+@variant first-letter (&:first-letter);
+
+/* Custom variants for first-child */
+@variant first-child (&:first-child);
+
+/* Custom utilities - Bleed plugin replacement */
+@utility bleed {
+  width: 100vw;
+  margin-inline-start: 50%;
+  margin-inline-end: unset;
+  transform: translateX(-50%);
+  max-width: none;
+}
+
+@utility bleed-disable {
+  width: inherit;
+  margin-inline-start: inherit;
+  margin-inline-end: inherit;
+  transform: default;
+}
+
+/* Custom utilities - Justify safe center */
+@utility justify-safe-center {
+  justify-content: safe center;
+}
+
+/* Typography customization */
+.prose a:not(.not-prose a),
+.prose span[data-rot]:not(.not-prose span[data-rot]),
+.prose .link:not(.not-prose .link) {
+  text-decoration: none;
+  color: var(--primary);
+  font-weight: 500;
+  border-bottom: 1px solid;
+}
+.prose a:hover:not(.not-prose a:hover),
+.prose span[data-rot]:hover:not(.not-prose span[data-rot]:hover),
+.prose .link:hover:not(.not-prose .link:hover) {
+  opacity: 0.75;
+}
+
+.img-stretched {
+  @apply w-screen relative left-1/2 right-1/2 mr-[-50vw] ml-[-50vw];
+}
+.img-background {
+  @apply px-6 sm:px-12 py-1 text-center bg-gray-200 rounded;
+}

package/src/app.js

@@ -1,17 +1,28 @@
-require('fslightbox')
-import { uncloakLinks, addClassForNormalUser, readableEmail, convertImageLinkToWebPLink, replaceOn, liveBlock, convertFormFromRot13 } from './helpers.js'
+import Glightbox from 'glightbox'
+import {
+  uncloakLinks,
+  addClassForNormalUser,
+  readableEmail,
+  convertImageLinkToWebPLink,
+  replaceOn,
+  liveBlock,
+  convertFormFromRot13,
+} from './helpers.js'
 import { allClickable } from './clickable.js'
 
 //import { HorizontalScroll } from '@pushword/js-helper/src/horizontalScroll.js';
 //window.HorizontalScroll = HorizontalScroll;
 
+let lightbox
 function onDomChanged() {
   liveBlock()
   convertImageLinkToWebPLink()
   uncloakLinks()
   readableEmail('.cea')
   replaceOn()
-  refreshFsLightbox()
+  if (lightbox) {
+    lightbox.reload()
+  }
   allClickable('.clickable')
   addClassForNormalUser()
   convertFormFromRot13()
@@ -19,7 +30,7 @@ function onDomChanged() {
 
 function onPageLoaded() {
   onDomChanged()
-  new FsLightbox()
+  lightbox = new Glightbox()
 }
 
 document.addEventListener('DOMContentLoaded', onPageLoaded())

package/src/encore.js

@@ -1,26 +1,19 @@
+// @deprecated use vite instead
+
 const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default
 const tailwindcss = require('tailwindcss')
 const postcssImport = require('postcss-import')
 const autoprefixer = require('autoprefixer')
 const Encore = require('@symfony/webpack-encore')
-
-function getFilesToWatch(basePath = './..') {
-  return [
-    basePath + '/vendor/pushword/core/src/templates/**/*.html.twig',
-    basePath + '/vendor/pushword/conversation/src/templates/**/*.html.twig',
-    basePath + '/vendor/pushword/admin-block-editor/src/templates/**/*.html.twig',
-    basePath + '/vendor/pushword/advanced-main-image/src/templates/**/*.html.twig',
-    basePath + '/templates/**/*.html.twig',
-    basePath + '/var/TailwindGeneratorCache/*',
-    basePath + '/src/Twig/AppExtension.php',
-  ]
-}
+const getFilesToWatch = require('./FilesToWatch')
 
 function getTailwindConfig(watchFiles = null) {
+  // Tailwind v4 CSS-first: configuration is now handled in CSS files
+  // Return a minimal config for content watching only
   if (watchFiles === null) watchFiles = getFilesToWatch()
-  var tailwindConfig = require('./tailwind.config.js')
-  tailwindConfig.content = watchFiles
-  return tailwindConfig
+  return {
+    content: watchFiles,
+  }
 }
 
 /**
@@ -76,7 +69,7 @@ function getEncore(
     )
     .enablePostCssLoader((options) => {
       options.postcssOptions = {
-        plugins: [postcssImport, tailwindcss(tailwindConfig), autoprefixer],
+        plugins: [require('@tailwindcss/postcss')],
       }
     })
     .disableSingleRuntimeChunk()
@@ -111,7 +104,13 @@ function getEncore(
   if (!isLegacy) {
     Encore.configureBabelPresetEnv((config) => {
       config.targets = {
-        browsers: ['Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
+        browsers: [
+          'Chrome >= 60',
+          'Safari >= 10.1',
+          'iOS >= 10.3',
+          'Firefox >= 54',
+          'Edge >= 15',
+        ],
       }
     })
   } else {

package/src/helpers.js

@@ -1,5 +1,5 @@
 import 'core-js/stable'
-import 'regenerator-runtime/runtime'
+//import 'regenerator-runtime/runtime'
 /**
  * List of all functions
  *
@@ -33,7 +33,9 @@ export function liveBlock(liveBlockAttribute = 'live', liveFormSelector = '.live
 
   var getLiveBlock = function (item) {
     var url = item.getAttribute('data-' + liveBlockAttribute)
-    url = url.startsWith('e:') ? convertShortchutForLink(rot13ToText(url.substring(2))) : url
+    url = url.startsWith('e:')
+      ? convertShortchutForLink(rot13ToText(url.substring(2)))
+      : url
     fetch(url, {
       //headers: { "Content-Type": "application/json", Accept: "text/plain" },
       method: 'POST',
@@ -51,8 +53,10 @@ export function liveBlock(liveBlockAttribute = 'live', liveFormSelector = '.live
       })
   }
 
-  const spinner = '<span style="border-top-color: transparent" class="inline-block w-5 h-5 border-4 border-gray-50 border-solid rounded-full animate-spin"></span>'
-  const htmlLoader = '<div>' + spinner.replace('border-gray-50', 'border-gray-800') + '</div>'
+  const spinner =
+    '<span style="border-top-color: transparent" class="inline-block w-5 h-5 border-4 border-gray-50 border-solid rounded-full animate-spin"></span>'
+  const htmlLoader =
+    '<div>' + spinner.replace('border-gray-50', 'border-gray-800') + '</div>'
 
   var setLoader = function (form) {
     var $submitButton = getSubmitButton(form)
@@ -94,12 +98,12 @@ export function liveBlock(liveBlockAttribute = 'live', liveFormSelector = '.live
   }
 
   // Listen data-live
-  document.querySelectorAll('[' + 'data-' + liveBlockAttribute + ']').forEach((item) => {
+  document.querySelectorAll('[data-' + liveBlockAttribute + ']').forEach((item) => {
     getLiveBlock(item)
   })
 
   // Listen button src-data-live / data-src-live
-  document.querySelectorAll('[' + 'data-src-' + liveBlockAttribute + ']').forEach((item) => {
+  document.querySelectorAll('[data-src-' + liveBlockAttribute + ']').forEach((item) => {
     item.addEventListener('click', (event) => {
       if (item.tagName == 'BUTTON') {
         item.innerHTML = spinner
@@ -127,7 +131,11 @@ export function liveBlock(liveBlockAttribute = 'live', liveFormSelector = '.live
 export function replaceOn(attribute = 'data-replaceBy', eventName = 'click') {
   var loadVideo = function (element) {
     var content = element.getAttribute(attribute)
-    if (element.classList.contains('hero-banner-overlay-lg') && element.querySelector('picture') && window.innerWidth < 992) {
+    if (
+      element.classList.contains('hero-banner-overlay-lg') &&
+      element.querySelector('picture') &&
+      window.innerWidth < 992
+    ) {
       element.querySelector('picture').outerHTML = content
       element.querySelector('.btn-play').outerHTML = ' '
     } else {
@@ -140,17 +148,19 @@ export function replaceOn(attribute = 'data-replaceBy', eventName = 'click') {
     document.dispatchEvent(new Event('DOMChanged'))
   }
 
-  document.querySelectorAll('[' + attribute + ']:not([listen])').forEach(function (element) {
-    element.setAttribute('listen', '')
-    element.addEventListener(
-      eventName,
-      function (event) {
-        loadVideo(event.currentTarget) //event.currentTarget;
-        element.removeAttribute('listen')
-      },
-      { once: true },
-    )
-  })
+  document
+    .querySelectorAll('[' + attribute + ']:not([listen])')
+    .forEach(function (element) {
+      element.setAttribute('listen', '')
+      element.addEventListener(
+        eventName,
+        function (event) {
+          loadVideo(event.currentTarget) //event.currentTarget;
+          element.removeAttribute('listen')
+        },
+        { once: true },
+      )
+    })
 }
 
 /**
@@ -201,15 +211,18 @@ export function addClassForNormalUser(attribute = 'data-acinb') {
     }
     if (startScrolling === 4) {
       document.removeEventListener('scroll', scrollEventAddClassHandler)
-      ;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
-        var classToAddRaw = element.getAttribute(attribute)
-        var classToAdd = classToAddRaw.split(' ')
-        element.removeAttribute(attribute)
-        element.classList.add(...classToAdd)
-        if (classToAdd.includes('block')) {
-          element.classList.remove('hidden')
-        }
-      })
+      ;[].forEach.call(
+        document.querySelectorAll('[' + attribute + ']'),
+        function (element) {
+          var classToAddRaw = element.getAttribute(attribute)
+          var classToAdd = classToAddRaw.split(' ')
+          element.removeAttribute(attribute)
+          element.classList.add(...classToAdd)
+          if (classToAdd.includes('block')) {
+            element.classList.remove('hidden')
+          }
+        },
+      )
       if (window.location.hash) {
         const targetElement = document.querySelector(window.location.hash)
         if (targetElement) {
@@ -233,7 +246,10 @@ export function addClassForNormalUser(attribute = 'data-acinb') {
  *
  * @param {string}  attribute
  */
-export async function uncloakLinks(attribute = 'data-rot', onClickMouseoverOrTouchstart = true) {
+export async function uncloakLinks(
+  attribute = 'data-rot',
+  onClickMouseoverOrTouchstart = true,
+) {
   var convertLink = function (element) {
     // fix "bug" with img
     if (element.getAttribute(attribute) === null) {
@@ -253,9 +269,12 @@ export async function uncloakLinks(attribute = 'data-rot', onClickMouseoverOrTou
   }
 
   var convertAll = function (attribute) {
-    ;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
-      convertLink(element)
-    })
+    ;[].forEach.call(
+      document.querySelectorAll('[' + attribute + ']'),
+      function (element) {
+        convertLink(element)
+      },
+    )
   }
 
   var fireEventLinksBuilt = async function (element, event) {
@@ -277,29 +296,32 @@ export async function uncloakLinks(attribute = 'data-rot', onClickMouseoverOrTou
   }
 
   if (onClickMouseoverOrTouchstart) {
-    ;[].forEach.call(document.querySelectorAll('[' + attribute + ']'), function (element) {
-      element.addEventListener(
-        'touchstart',
-        function (e) {
-          convertLinkOnEvent(e)
-        },
-        { once: true, passive: true },
-      )
-      element.addEventListener(
-        'click',
-        function (e) {
-          convertLinkOnEvent(e)
-        },
-        { once: true },
-      )
-      element.addEventListener(
-        'mouseover',
-        function (e) {
-          convertLinkOnEvent(e)
-        },
-        { once: true },
-      )
-    })
+    ;[].forEach.call(
+      document.querySelectorAll('[' + attribute + ']'),
+      function (element) {
+        element.addEventListener(
+          'touchstart',
+          function (e) {
+            convertLinkOnEvent(e)
+          },
+          { once: true, passive: true },
+        )
+        element.addEventListener(
+          'click',
+          function (e) {
+            convertLinkOnEvent(e)
+          },
+          { once: true },
+        )
+        element.addEventListener(
+          'mouseover',
+          function (e) {
+            convertLinkOnEvent(e)
+          },
+          { once: true },
+        )
+      },
+    )
   } else convertAll(attribute)
 }
 
@@ -352,7 +374,9 @@ export function readableEmail(selector) {
  */
 export function rot13ToText(str) {
   return str.replace(/[a-zA-Z]/g, function (c) {
-    return String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26)
+    return String.fromCharCode(
+      (c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26,
+    )
   })
 }
 

package/src/tailwind.config.js

@@ -1,38 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-const pushwordHelper = require('./tailwind.helpers.js');
-
-module.exports = {
-    mode: 'jit',
-    theme: {
-        minHeight: {
-            0: '0',
-            'screen-1/4': '25vh',
-            'screen-3/4': '75vh',
-            'screen-1/3': '33vh',
-            'screen-2/3': '66vh',
-            'screen-1/2': '50vh',
-            screen: '100vh',
-            full: '100%',
-        },
-        extend: {
-            typography: pushwordHelper.extendTailwindTypography(),
-            colors: {
-                primary: 'var(--primary)',
-                secondary: 'var(--secondary)',
-            },
-        },
-    },
-    variants: {},
-    plugins: [
-        require('tailwindcss-multi-column')(),
-        require('@tailwindcss/typography'),
-        require('@tailwindcss/aspect-ratio'),
-        require('@tailwindcss/forms'),
-        require('tailwindcss-animated'),
-        require('tailwindcss-hero-patterns'),
-        plugin(pushwordHelper.twFirstLetterPlugin),
-        plugin(pushwordHelper.twFirstChildPlugin),
-        plugin(pushwordHelper.twBleedPlugin),
-        plugin(pushwordHelper.justifySafeCenterPlugin),
-    ],
-};

package/src/tailwind.helpers.js

@@ -1,57 +0,0 @@
-module.exports = {
-  extendTailwindTypography: function () {
-    return {
-      DEFAULT: {
-        css: {
-          'a, span[data-rot], .link': {
-            textDecoration: 'none',
-            color: 'var(--primary)',
-            fontWeight: 500,
-            borderBottom: '1px solid;',
-            '&:hover': {
-              opacity: '.75',
-            },
-          },
-        },
-      },
-    }
-  },
-  twFirstLetterPlugin: function ({ addVariant, e }) {
-    addVariant('first-letter', ({ modifySelectors, separator }) => {
-      modifySelectors(({ className }) => {
-        return `.${e(`first-letter${separator}${className}`)}:first-letter`
-      })
-    })
-  },
-  twFirstChildPlugin: function ({ addVariant, e }) {
-    addVariant('first-child', ({ modifySelectors, separator }) => {
-      modifySelectors(({ className }) => {
-        return `.${e(`first-child${separator}${className}`)}:first-child`
-      })
-    })
-  },
-  twBleedPlugin: function ({ addUtilities }) {
-    addUtilities({
-      '.bleed': {
-        width: '100vw',
-        'margin-inline-start': '50%',
-        'margin-inline-end': 'unset',
-        transform: 'translateX(-50%)',
-        'max-width': 'none',
-      },
-      '.bleed-disable': {
-        width: 'inherit',
-        'margin-inline-start': 'inherit',
-        'margin-inline-end': 'inherit',
-        transform: 'default',
-      },
-    })
-  },
-  justifySafeCenterPlugin: function ({ addUtilities }) {
-    addUtilities({
-      '.justify-safe-center': {
-        'justify-content': 'safe center',
-      },
-    })
-  },
-}