@pushword/js-helper 0.0.117 → 0.0.119

package/README.md

@@ -5,7 +5,7 @@ Some js helpers for Pushword front end.
 [![Latest Version](https://img.shields.io/github/tag/pushword/pushword.svg?style=flat&label=release)](https://github.com/Pushword/Pushword/tags)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
 [![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/Pushword/Pushword/run-tests.yml?branch=main)](https://github.com/Pushword/Pushword/actions)
-[![Quality Score](https://img.shields.io/scrutinizer/g/pushword/pushword.svg?style=flat)](https://scrutinizer-ci.com/g/pushword/pushword)
+
 [![Code Coverage](https://codecov.io/gh/Pushword/Pushword/branch/main/graph/badge.svg)](https://codecov.io/gh/Pushword/Pushword/tree/main)
 [![Type Coverage](https://shepherd.dev/github/pushword/pushword/coverage.svg)](https://shepherd.dev/github/pushword/pushword)
 [![Total Downloads](https://img.shields.io/packagist/dt/pushword/core.svg?style=flat)](https://packagist.org/packages/pushword/core)
@@ -27,6 +27,6 @@ If you're interested in contributing to Pushword, please read our [contributing
 
 The MIT License (MIT). Please see [License File](https://pushword.piedweb.com/license#license) for more information.
 
-<p align="center"><a href="https://dev.piedweb.com" rel="dofollow">
+<p align="center"><a href="https://dev.piedweb.com">
 <img src="https://raw.githubusercontent.com/Pushword/Pushword/f5021f4c5d5d3ab3f2858ec2e4bdd70818806c6a/packages/admin/src/Resources/assets/logo.svg" width="200" height="200" alt="PHP Packages Open Source" />
 </a></p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushword/js-helper",
-  "version": "0.0.117",
+  "version": "0.0.119",
   "description": "Pushword front end helpers. ",
   "author": "Robin@PiedWeb <contact@piedweb.com>",
   "license": "MIT",
@@ -9,13 +9,12 @@
   },
   "dependencies": {
     "140.css": "^1.0.1",
-    "@babel/core": "^7.23",
-    "@babel/preset-env": "^7.22.20",
-    "@symfony/webpack-encore": "^4.6",
+    "@babel/core": "^7.24",
+    "@babel/preset-env": "^7.22",
+    "@symfony/webpack-encore": "^5",
     "@tailwindcss/aspect-ratio": "^0.4",
     "@tailwindcss/forms": "^0.5",
     "@tailwindcss/typography": "^0.5",
-    "ace-builds": "^1.36",
     "autoprefixer": "^10.4",
     "babel-preset-stage-2": "^6.24.1",
     "codemirror": "^6.0",
@@ -25,12 +24,12 @@
     "fslightbox": "^3.2.2",
     "postcss": "^8.4",
     "postcss-import": "^16",
-    "postcss-loader": "^7",
+    "postcss-loader": "^8",
     "sass": "^1.68",
     "sass-loader": "^16",
     "simple-jekyll-search": "^1.9.1",
     "tailwindcss": "^3",
-    "tailwindcss-animated": "^1.1",
+    "tailwindcss-animated": "^2",
     "tailwindcss-hero-patterns": "^0.1",
     "tailwindcss-multi-column": "^1.0.2",
     "webpack": "^5.94",

package/src/encore.js

@@ -2,6 +2,7 @@ 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 [
@@ -22,6 +23,10 @@ function getTailwindConfig(watchFiles = null) {
   return tailwindConfig
 }
 
+/**
+ *
+ * @param {Encore} Encore
+ */
 function getEncore(
   Encore,
   watchFiles = null, // default: getFilesToWatch()
@@ -32,6 +37,7 @@ function getEncore(
   filesToCopy = null, // default :: ... from: /favicons. ...
   entries = null, // [{ name: 'app', file: '/node_modules/@pushword/js-helper/src/app.js' }];
   styleEntries = null, // [{ name: 'style', file: '/node_modules/@pushword/js-helper/src/app.css' }];
+  isLegacy = false,
 ) {
   if (watchFiles === null) {
     watchFiles = getFilesToWatch()
@@ -41,13 +47,14 @@ function getEncore(
     tailwindConfig = getTailwindConfig(watchFiles)
   }
 
+  const jsAppName = 'app' + (isLegacy ? '-legacy' : '')
   if (entries === null) {
-    entries = [{ name: 'app', file: __dirname + '/app.js' }]
+    entries = [{ name: jsAppName, file: __dirname + '/app.js' }]
   } else if (typeof entries === 'string') {
-    entries = [{ name: 'app', file: entries }]
+    entries = [{ name: jsAppName, file: entries }]
   }
 
-  if (styleEntries === null) {
+  if (styleEntries === null && !isLegacy) {
     styleEntries = [{ name: 'style', file: __dirname + '/app.css' }]
   } else if (typeof styleEntries === 'string') {
     styleEntries = [{ name: 'style', file: styleEntries }]
@@ -59,7 +66,6 @@ function getEncore(
   Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev')
     .setOutputPath(outputPath)
     .setPublicPath(publicPath)
-    .cleanupOutputBeforeBuild()
     .enableSassLoader()
     .enableSourceMaps(false)
     .enableVersioning(false)
@@ -75,7 +81,7 @@ function getEncore(
     })
     .disableSingleRuntimeChunk()
 
-  if (filesToCopy === null) {
+  if (filesToCopy === null && !isLegacy) {
     filesToCopy = [
       {
         from: './favicons',
@@ -84,9 +90,10 @@ function getEncore(
     ]
   }
 
-  filesToCopy.forEach(function (toCopy) {
-    Encore.copyFiles(toCopy)
-  })
+  if (filesToCopy)
+    filesToCopy.forEach(function (toCopy) {
+      Encore.copyFiles(toCopy)
+    })
 
   if (manifestKeyPrefix !== null) Encore.setManifestKeyPrefix(manifestKeyPrefix)
 
@@ -94,9 +101,26 @@ function getEncore(
     Encore.addEntry(entry.name, entry.file)
   })
 
-  styleEntries.forEach(function (entry) {
-    Encore.addStyleEntry(entry.name, entry.file)
-  })
+  if (styleEntries)
+    styleEntries.forEach(function (entry) {
+      Encore.addStyleEntry(entry.name, entry.file)
+    })
+
+  //if (!isLegacy) Encore.cleanupOutputBeforeBuild()
+
+  if (!isLegacy) {
+    Encore.configureBabelPresetEnv((config) => {
+      config.targets = {
+        browsers: ['Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
+      }
+    })
+  } else {
+    Encore.configureBabelPresetEnv((config) => {
+      config.targets = {
+        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
+      }
+    })
+  }
 
   return Encore
 }

package/src/helpers.js

@@ -21,18 +21,18 @@ import 'regenerator-runtime/runtime'
  *
  * @param {string} attribute
  */
-export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '.live-form') {
+export function liveBlock(liveBlockAttribute = 'live', liveFormSelector = '.live-form') {
   var btnToBlock = function (event, btn) {
-    const liveBlockUrl = btn.getAttribute('src-' + liveBlockAttribute)
+    const liveBlockUrl = btn.getAttribute('data-src-' + liveBlockAttribute)
     if (btn.hasAttribute('data-target') && btn.getAttribute('data-target') == 'parent') {
       btn = btn.parentElement ?? btn
     }
-    btn.setAttribute(liveBlockAttribute, liveBlockUrl)
+    btn.setAttribute('data-' + liveBlockAttribute, liveBlockUrl)
     getLiveBlock(btn)
   }
 
   var getLiveBlock = function (item) {
-    var url = item.getAttribute(liveBlockAttribute)
+    var url = item.getAttribute('data-' + liveBlockAttribute)
     url = url.startsWith('e:') ? convertShortchutForLink(rot13ToText(url.substring(2))) : url
     fetch(url, {
       //headers: { "Content-Type": "application/json", Accept: "text/plain" },
@@ -43,7 +43,7 @@ export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '
         return response.text()
       })
       .then(function (body) {
-        item.removeAttribute(liveBlockAttribute)
+        item.removeAttribute('data-' + liveBlockAttribute)
         item.outerHTML = body
       })
       .then(function () {
@@ -94,12 +94,12 @@ export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '
   }
 
   // Listen data-live
-  document.querySelectorAll('[' + liveBlockAttribute + ']').forEach((item) => {
+  document.querySelectorAll('[' + 'data-' + liveBlockAttribute + ']').forEach((item) => {
     getLiveBlock(item)
   })
 
-  // Listen button src-data-live
-  document.querySelectorAll('[src-' + liveBlockAttribute + ']').forEach((item) => {
+  // Listen button src-data-live / data-src-live
+  document.querySelectorAll('[' + 'data-src' + liveBlockAttribute + ']').forEach((item) => {
     item.addEventListener('click', (event) => {
       if (item.tagName == 'BUTTON') {
         item.innerHTML = spinner
@@ -124,7 +124,7 @@ export function liveBlock(liveBlockAttribute = 'data-live', liveFormSelector = '
  * Block to replace Watcher
  * On $event on element find via $attribute, set attribute's content in element.innerHTML
  */
-export function replaceOn(attribute = 'replaceBy', eventName = 'click') {
+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) {
@@ -213,6 +213,11 @@ 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',
           })
@@ -366,10 +371,10 @@ export function testWebPSupport() {
  */
 export function convertImageLinkToWebPLink() {
   var switchToWebP = function () {
-    ;[].forEach.call(document.querySelectorAll('a[dwl]'), function (element) {
-      var href = responsiveImage(element.getAttribute('dwl'))
+    ;[].forEach.call(document.querySelectorAll('a[data-dwl]'), function (element) {
+      var href = responsiveImage(element.getAttribute('data-dwl'))
       element.setAttribute('href', href)
-      element.removeAttribute('dwl')
+      element.removeAttribute('data-dwl')
     })
   }