@pushword/js-helper 0.0.123 → 0.0.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushword/js-helper",
-  "version": "0.0.123",
+  "version": "0.0.127",
   "description": "Pushword front end helpers. ",
   "author": "Robin@PiedWeb <contact@piedweb.com>",
   "license": "MIT",
@@ -8,18 +8,20 @@
     "prettier": "prettier ./src/*.{js,scss} --write"
   },
   "dependencies": {
-    "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",
-    "tailwindcss-animated": "^2",
+    "140.css": "^1.0",
     "@tailwindcss/forms": "^0.5",
-    "140.css": "^1.0.1",
+    "@tailwindcss/typography": "^0.5",
+    "@tailwindcss/vite": "^4.1",
+    "alpinejs": "^3.15.2",
     "codemirror": "^6.0",
     "core-js": "^3.38",
     "easymde": "^2.18",
-    "glightbox": "^3.3"
+    "glightbox": "^3.3",
+    "tailwindcss-animated": "^2",
+    "vite": "^7.1.12",
+    "vite-plugin-compression2": "^2.3.1",
+    "vite-plugin-static-copy": "^3.1",
+    "vite-plugin-symfony": "^8.2"
   },
   "repository": {
     "type": "git",
@@ -31,6 +33,5 @@
   "bugs": {
     "url": "https://github.com/Pushword/Pushword/issues"
   },
-  "homepage": "https://pushword.piedweb.com",
-  "gitHead": "242ec54483dca1be93d7a62d8d554c9c08008c28"
+  "homepage": "https://pushword.piedweb.com"
 }

package/src/ShowMore.js

@@ -0,0 +1,324 @@
+/**
+ * ShowMore - Expand/collapse content blocks
+ *
+ * Features:
+ * - [x] Open/close show-more blocks
+ *    1. Page loads → blocks are fully visible (no max-height - best for SEO)
+ *    2. On scroll → `addClassForNormalUser` adds `max-h-[250px]` via `data-acinb`, collapsing them
+ *       Exception → blocks previously opened by user (in localStorage) stay open
+ * - [x] Auto-open when URL contains hash pointing inside block
+ * - [x] Auto-open when page loads with scroll position (browser back/refresh)
+ * - [x] Auto-open on hash change (SPA navigation)
+ * - [x] Ctrl+F: Auto-open when browser finds text in collapsed block
+ */
+
+const STORAGE_KEY = 'showmore_opened'
+
+const ShowMore = {
+  _initialized: false,
+  _scrollPos: 0,
+  _userClosed: new WeakSet(), // Track blocks manually closed by user
+  _openedIds: new Set(), // IDs of blocks user has ever opened
+
+  /**
+   * Load opened block IDs from localStorage
+   */
+  _loadOpenedIds() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (stored) {
+        JSON.parse(stored).forEach((id) => this._openedIds.add(id))
+      }
+    } catch (e) {
+      // localStorage not available or corrupted
+    }
+  },
+
+  /**
+   * Save opened block ID to localStorage
+   */
+  _saveOpenedId(id) {
+    if (!id) return
+    this._openedIds.add(id)
+    this._persistOpenedIds()
+  },
+
+  /**
+   * Remove closed block ID from localStorage
+   */
+  _removeOpenedId(id) {
+    if (!id) return
+    this._openedIds.delete(id)
+    this._persistOpenedIds()
+  },
+
+  /**
+   * Persist opened IDs to localStorage
+   */
+  _persistOpenedIds() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([...this._openedIds]))
+    } catch (e) {
+      // localStorage not available
+    }
+  },
+
+  /**
+   * Check if user has ever opened this block
+   */
+  _hasUserOpened(wrapper) {
+    const input = wrapper.querySelector('input.show-hide-input')
+    return input && this._openedIds.has(input.id)
+  },
+
+  /**
+   * Open a show-more block
+   * @param {HTMLElement} el - Element inside the .show-more wrapper (typically .show-more-btn)
+   * @param {boolean} auto - Whether this is an automatic open (not user-initiated)
+   */
+  open(el, auto = false) {
+    const wrapper = el.closest('.show-more')
+    if (!wrapper) return
+
+    // Don't auto-open if user manually closed this block
+    if (auto && this._userClosed.has(wrapper)) return
+
+    const content = wrapper.children[1]
+    if (!content) return
+
+    this._scrollPos = wrapper.getBoundingClientRect().top + window.scrollY
+    content.classList.remove('overflow-hidden')
+    content.style.maxHeight = content.scrollHeight + 'px'
+    wrapper.dataset.showMoreOpen = 'true'
+
+    // Toggle checkbox to update arrow icon state
+    const checkbox = wrapper.querySelector('input.show-hide-input')
+    if (checkbox) {
+      checkbox.checked = true
+      // Save to localStorage when user manually opens (not auto)
+      if (!auto) {
+        this._saveOpenedId(checkbox.id)
+      }
+    }
+  },
+
+  /**
+   * Close a show-more block
+   * @param {HTMLElement} el - Element inside the .show-more wrapper
+   */
+  close(el) {
+    const wrapper = el.closest('.show-more')
+    if (!wrapper) return
+
+    const content = wrapper.children[1]
+    if (!content) return
+
+    // Mark as user-closed to prevent auto-reopening
+    this._userClosed.add(wrapper)
+
+    content.classList.add('overflow-hidden')
+    content.style.maxHeight = '250px'
+    delete wrapper.dataset.showMoreOpen
+
+    // Toggle checkbox to update arrow icon state
+    const checkbox = wrapper.querySelector('input.show-hide-input')
+    if (checkbox) {
+      checkbox.checked = false
+      // Remove from localStorage when user closes
+      this._removeOpenedId(checkbox.id)
+    }
+
+    if (this._scrollPos) {
+      window.scrollTo({ top: Math.max(0, this._scrollPos - 20), behavior: 'smooth' })
+    } else {
+      wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  },
+
+  /**
+   * Check if block is open
+   * @param {HTMLElement} wrapper
+   * @returns {boolean}
+   */
+  isOpen(wrapper) {
+    return wrapper.dataset.showMoreOpen === 'true'
+  },
+
+  /**
+   * Open the show-more block containing the given element
+   * @param {HTMLElement} element - Element inside a show-more block
+   * @param {boolean} auto - Whether this is an automatic open
+   */
+  openContaining(element, auto = true) {
+    if (!element) return
+
+    const wrapper = element.closest('.show-more')
+    if (!wrapper || this.isOpen(wrapper)) return
+
+    // Use the wrapper itself as fallback if btn not found yet (hidden)
+    const btn = wrapper.querySelector('.show-more-btn') || wrapper
+    this.open(btn, auto)
+  },
+
+  /**
+   * Open show-more block containing the hash target and scroll to it
+   * @param {string} hash - The hash (with #) to navigate to
+   */
+  scrollToHash(hash) {
+    if (!hash) return
+
+    try {
+      const target = document.querySelector(hash)
+      if (target) {
+        this.openContaining(target)
+        setTimeout(() => {
+          target.scrollIntoView({ behavior: 'smooth' })
+        }, 100)
+      }
+    } catch (e) {
+      // Invalid selector, ignore
+    }
+  },
+
+  /**
+   * Check if a show-more block is currently collapsed
+   * @param {HTMLElement} wrapper - The .show-more wrapper element
+   * @returns {boolean}
+   */
+  isCollapsed(wrapper) {
+    const content = wrapper.children[1]
+    return content && content.classList.contains('overflow-hidden')
+  },
+
+  /**
+   * Open all visible collapsed show-more blocks
+   * Useful when page loads with scroll position
+   */
+  openVisibleBlocks() {
+    document.querySelectorAll('.show-more').forEach((wrapper) => {
+      if (!this.isCollapsed(wrapper)) return
+      if (this._userClosed.has(wrapper)) return
+      // Only auto-open if user has previously opened this block
+      if (!this._hasUserOpened(wrapper)) return
+
+      const rect = wrapper.getBoundingClientRect()
+      // Check if block intersects with viewport (with some margin)
+      const isVisible = rect.top < window.innerHeight + 100 && rect.bottom > -100
+
+      if (isVisible) {
+        this.openContaining(wrapper, true)
+      }
+    })
+  },
+
+  /**
+   * Initialize ShowMore functionality
+   * Safe to call multiple times - will only initialize once
+   */
+  init() {
+    if (this._initialized) return
+    this._initialized = true
+
+    // Load previously opened block IDs from localStorage
+    this._loadOpenedIds()
+
+    // Open if URL has hash pointing inside a show-more block
+    if (location.hash) {
+      this.scrollToHash(location.hash)
+    }
+
+    // Open if page loaded with scroll (e.g., browser back/refresh)
+    // Listen for scroll events to catch smooth scroll restoration
+    let scrollCheckCount = 0
+    const maxScrollChecks = 10
+    const checkScrollAndOpen = () => {
+      if (window.scrollY > 0) {
+        this.openVisibleBlocks()
+      }
+    }
+
+    // Immediate check
+    checkScrollAndOpen()
+
+    // Listen for scroll events (catches smooth scroll restoration)
+    const onScrollRestore = () => {
+      scrollCheckCount++
+      checkScrollAndOpen()
+      if (scrollCheckCount >= maxScrollChecks) {
+        window.removeEventListener('scroll', onScrollRestore)
+      }
+    }
+    window.addEventListener('scroll', onScrollRestore, { passive: true })
+
+    // Also use scrollend event if available (modern browsers)
+    if ('onscrollend' in window) {
+      window.addEventListener(
+        'scrollend',
+        () => {
+          checkScrollAndOpen()
+          window.removeEventListener('scroll', onScrollRestore)
+        },
+        { once: true },
+      )
+    }
+
+    // Fallback: remove listener after 2 seconds
+    setTimeout(() => {
+      window.removeEventListener('scroll', onScrollRestore)
+    }, 2000)
+
+    // Handle hash changes (SPA navigation)
+    window.addEventListener('hashchange', () => {
+      if (location.hash) {
+        this.scrollToHash(location.hash)
+      }
+    })
+
+    // Handle clicks on anchor links pointing to content inside show-more
+    document.addEventListener('click', (e) => {
+      const link = e.target.closest('a[href^="#"]')
+      if (link) {
+        const hash = link.getAttribute('href')
+        if (hash && hash.length > 1) {
+          // Delay to let default navigation happen first
+          setTimeout(() => this.scrollToHash(hash), 10)
+        }
+      }
+    })
+
+    // Ctrl+F: open all collapsed blocks so browser can find text
+    document.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+        this.openAllCollapsed()
+      }
+    })
+  },
+
+  /**
+   * Open all collapsed show-more blocks
+   * Useful for Ctrl+F to make all content searchable
+   */
+  openAllCollapsed() {
+    document.querySelectorAll('.show-more').forEach((wrapper) => {
+      if (this.isCollapsed(wrapper)) {
+        this.openContaining(wrapper, true)
+      }
+    })
+  },
+}
+
+// Auto-init when DOM is ready
+export function initShowMore() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => ShowMore.init())
+  } else {
+    ShowMore.init()
+  }
+}
+
+// Expose globally for inline onclick handlers in templates
+if (typeof window !== 'undefined') {
+  window.ShowMore = ShowMore
+}
+
+export default ShowMore

package/src/alpine.js

@@ -0,0 +1,5 @@
+import Alpine from 'alpinejs'
+
+// Initialize Alpine.js
+window.Alpine = Alpine
+Alpine.start()

package/src/app.css

@@ -1,10 +1,12 @@
 @import 'tailwindcss';
-
 @import 'tailwindcss-animated';
-
 @plugin '@tailwindcss/typography';
+@import './tailwind.prose.scss';
+@import './utility.css'; /* node_modules/@pushword/js-helper/src/utility.css */
 /* @plugin "@tailwindcss/forms"; */
 
+@import './../node_modules/glightbox/dist/css/glightbox.css';
+
 /*
 Tailwind content sources for all packages
 -----------------------------------------
@@ -12,6 +14,8 @@ Tailwind content sources for all packages
 
 @source "./../../../../vendor/pushword/**/templates/";
 @source "./../../**/templates/";
+@source "./../../**/src/templates/";
+@source "./../../conversation/src/templates/";
 @source "./../../../../templates";
 @source "./../../../../var/TailwindGeneratorCache/*";
 @source "./../../../../vendor/pushword/core/src/Twig/**.php";
@@ -19,65 +23,6 @@ Tailwind content sources for all packages
 @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;
+[x-cloak] {
+  display: none !important;
 }

package/src/app.js

@@ -9,10 +9,14 @@ import {
   convertFormFromRot13,
 } from './helpers.js'
 import { allClickable } from './clickable.js'
+import { initShowMore } from './ShowMore.js'
 
 //import { HorizontalScroll } from '@pushword/js-helper/src/horizontalScroll.js';
 //window.HorizontalScroll = HorizontalScroll;
 
+// Initialize ShowMore (exposes window.ShowMore and sets up event listeners)
+initShowMore()
+
 let lightbox
 function onDomChanged() {
   liveBlock()
@@ -29,8 +33,8 @@ function onDomChanged() {
 }
 
 function onPageLoaded() {
-  onDomChanged()
   lightbox = new Glightbox()
+  onDomChanged()
 }
 
 document.addEventListener('DOMContentLoaded', onPageLoaded())

package/src/helpers.js

@@ -223,18 +223,9 @@ export function addClassForNormalUser(attribute = 'data-acinb') {
           }
         },
       )
-      if (window.location.hash) {
-        const targetElement = document.querySelector(window.location.hash)
-        if (targetElement) {
-          // open show more block if exists
-          const showMoreTarget = targetElement.closest('.show-more')
-          if (showMoreTarget) {
-            showMoreTarget.querySelector('.show-more-btn label').click()
-          }
-          targetElement.scrollIntoView({
-            behavior: 'smooth',
-          })
-        }
+      // Handle hash navigation - delegate to ShowMore if available
+      if (window.location.hash && window.ShowMore) {
+        window.ShowMore.scrollToHash(window.location.hash)
       }
     }
   }
@@ -260,7 +251,12 @@ export async function uncloakLinks(
     var href = element.getAttribute(attribute)
     element.removeAttribute(attribute)
     for (var i = 0, n = element.attributes.length; i < n; i++) {
-      link.setAttribute(element.attributes[i].nodeName, element.attributes[i].nodeValue)
+      const attr = element.attributes[i]
+      if (attr.nodeName.startsWith('@') || attr.nodeName.startsWith(':')) {
+        console.log("You can't use @alpine.js attribute on", element)
+        continue
+      }
+      link.setAttribute(attr.nodeName, attr.nodeValue)
     }
     link.innerHTML = element.innerHTML
     link.setAttribute('href', responsiveImage(convertShortchutForLink(rot13ToText(href))))

package/src/tailwind.prose.scss

@@ -3,32 +3,32 @@
  */
 .text-color-inherit,
 .link-text {
-    color: inherit !important;
+  color: inherit !important;
 }
 
 .no-decoration,
 .ninja {
-    text-decoration: none !important;
-    color: inherit !important;
-    cursor: auto !important;
-    border-bottom: 0 !important;
+  text-decoration: none !important;
+  color: inherit !important;
+  cursor: auto !important;
+  border-bottom: 0 !important;
 }
 
 .link-btn {
-    padding: 6px 12px;
-    margin-bottom: 0;
-    border-radius: 3px;
-    border: 1px solid transparent;
-    cursor: pointer;
-    color: #fff !important;
-    background-color: var(--primary);
-    border-color: var(--primary);
-    outline: none;
-    text-decoration: none !important;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  color: #fff !important;
+  background-color: var(--primary);
+  border-color: var(--primary);
+  outline: none;
+  text-decoration: none !important;
 }
 
 .link-btn:hover {
-    color: #fff !important;
+  color: #fff !important;
 }
 
 /**
@@ -36,8 +36,8 @@
  */
 
 html {
-    font-family: var(--font-family);
-    scroll-behavior: smooth;
+  font-family: var(--font-family);
+  scroll-behavior: smooth;
 }
 
 /**
@@ -46,21 +46,21 @@ html {
 
 .show-hide-input:checked ~ ul,
 .show-hide-input:checked ~ nav {
-    max-height: 100vh;
-    padding-top: 1rem;
+  max-height: 100vh;
+  padding-top: 1rem;
 }
 
 /** Pure CSS accordion and show more
     Example  https: //play.tailwindcss.com/VxdXWMH64M
 
 **/
-.show-hide-input:checked~div {
-    max-height: 100%;
+.show-hide-input:checked ~ div {
+  max-height: 100%;
 }
 
-.show-more>.show-hide-input:checked~div.show-more-btn {
-    max-height: 0;
-    overflow: hidden;
-    padding-top: 0;
-    margin-top: 0;
-}
+.show-more > .show-hide-input:checked ~ div.show-more-btn {
+  max-height: 0;
+  overflow: hidden;
+  padding-top: 0;
+  margin-top: 0;
+}

package/src/utility.css

@@ -0,0 +1,62 @@
+/* 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;
+}