@pushword/js-helper 0.0.62 → 0.0.66

package/package.json

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

package/src/encore.js

@@ -1,21 +1,21 @@
-const WatchExternalFilesPlugin = require("webpack-watch-files-plugin").default;
-const Encore = require("@symfony/webpack-encore");
-const tailwindcss = require("tailwindcss");
+const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;
+const Encore = require('@symfony/webpack-encore');
+const tailwindcss = require('tailwindcss');
 
-function getFilesToWatch(basePath = "./..") {
+function getFilesToWatch(basePath = './..') {
     return [
-        basePath + "/vendor/pushword/core/src/templates/**/*.html.twig",
-        basePath + "/vendor/pushword/core/src/templates/*.html.twig",
-        basePath + "/vendor/pushword/conversation/src/templates/*.html.twig",
-        basePath + "/vendor/pushword/admin-block-editor/src/templates/page/*.html.twig",
-        basePath + "/templates/*.html.twig",
-        basePath + "/templates/**/*.html.twig",
-        basePath + "/templates/**/**/*.html.twig",
+        basePath + '/vendor/pushword/core/src/templates/**/*.html.twig',
+        basePath + '/vendor/pushword/core/src/templates/*.html.twig',
+        basePath + '/vendor/pushword/conversation/src/templates/*.html.twig',
+        basePath + '/vendor/pushword/admin-block-editor/src/templates/page/*.html.twig',
+        basePath + '/templates/*.html.twig',
+        basePath + '/templates/**/*.html.twig',
+        basePath + '/templates/**/**/*.html.twig',
     ];
 }
 function getTailwindConfig(watchFiles = null) {
     if (watchFiles === null) watchFiles = getFilesToWatch();
-    var tailwindConfig = require("@pushword/js-helper/src/tailwind.config.js");
+    var tailwindConfig = require('@pushword/js-helper/src/tailwind.config.js');
     tailwindConfig.content = watchFiles;
     return tailwindConfig;
 }
@@ -24,14 +24,14 @@ module.exports = {
     getFilesToWatch: getFilesToWatch,
     getTailwindConfig: getTailwindConfig,
     getEncore: function (
-        watchFiles = null,
-        tailwindConfig = null,
-        outputPath = "./../public/assets/",
-        publicPath = "/assets",
-        manifestKeyPrefix = null,
-        filesToCopy = null,
-        entries = null,
-        styleEntries = null
+        watchFiles = null, // default: getFilesToWatch()
+        tailwindConfig = null, // default : getTailwindConfig()
+        outputPath = null, // default : './../public/assets/'
+        publicPath = null, // default: '/assets'
+        manifestKeyPrefix = null, // default: null
+        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' }];
     ) {
         if (watchFiles === null) {
             watchFiles = getFilesToWatch();
@@ -44,26 +44,26 @@ module.exports = {
         if (filesToCopy === null) {
             filesToCopy = [
                 {
-                    from: "./favicons",
-                    to: "[name].[ext]",
+                    from: './favicons',
+                    to: '[name].[ext]',
                 },
             ];
         }
 
         if (entries === null) {
-            entries = [{ name: "app", file: __dirname + "/app.js" }];
-        } else if (typeof entries === "string") {
-            entries = [{ name: "app", file: entries }];
+            entries = [{ name: 'app', file: __dirname + '/app.js' }];
+        } else if (typeof entries === 'string') {
+            entries = [{ name: 'app', file: entries }];
         }
 
         if (styleEntries === null) {
-            styleEntries = [{ name: "style", file: __dirname + "/app.css" }];
-        } else if (typeof styleEntries === "string") {
-            styleEntries = [{ name: "style", file: styleEntries }];
+            styleEntries = [{ name: 'style', file: __dirname + '/app.css' }];
+        } else if (typeof styleEntries === 'string') {
+            styleEntries = [{ name: 'style', file: styleEntries }];
         }
 
-        Encore.setOutputPath(outputPath)
-            .setPublicPath(publicPath)
+        Encore.setOutputPath(outputPath ?? './../public/assets/')
+            .setPublicPath(publicPath ?? '/assets')
             .cleanupOutputBeforeBuild()
             .enableSassLoader()
             .enableSourceMaps(false)
@@ -75,7 +75,11 @@ module.exports = {
             )
             .enablePostCssLoader((options) => {
                 options.postcssOptions = {
-                    plugins: [require("postcss-import"), tailwindcss(tailwindConfig), require("autoprefixer")],
+                    plugins: [
+                        require('postcss-import'),
+                        tailwindcss(tailwindConfig),
+                        require('autoprefixer'),
+                    ],
                 };
             })
             .disableSingleRuntimeChunk();

package/src/helpers.js

@@ -29,7 +29,7 @@ export function liveBlock(liveBlockAttribute = "data-live", liveFormSelector = "
 
     var getLiveBlock = function (item) {
         var url = item.getAttribute(liveBlockAttribute);
-        url = (url.startsWith("http") ? "" : "https://") + url;
+        url = url.startsWith("e:") ? convertShortchutForLink(rot13ToText(url.substring(2))) : url;
         fetch(url, {
             //headers: { "Content-Type": "application/json", Accept: "text/plain" },
             method: "POST",
@@ -47,13 +47,14 @@ export function liveBlock(liveBlockAttribute = "data-live", liveFormSelector = "
             });
     };
 
-    var htmlLoader =
-        '<div style="width:1em;height:1em;border: 2px solid #222;border-top-color: #fff;border-radius: 50%;  animation: 1s spin linear infinite;"></div><style>@keyframes spin {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>';
+    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);
         if ($submitButton !== undefined) {
-            var initialButton = $submitButton.outerHTML;
+            //var initialButton = $submitButton.outerHTML;
             $submitButton.innerHTML = "";
             $submitButton.outerHTML = htmlLoader;
         }
@@ -97,6 +98,10 @@ export function liveBlock(liveBlockAttribute = "data-live", liveFormSelector = "
     // Listen button src-data-live
     document.querySelectorAll("[src-" + liveBlockAttribute + "]").forEach((item) => {
         item.addEventListener("click", (event) => {
+            if (item.tagName == "BUTTON") {
+                item.innerHTML = spinner;
+                item.setAttribute("disabled", true);
+            }
             btnToBlock(event, item);
         });
     });
@@ -280,13 +285,13 @@ export function convertFormFromRot13(attribute = "data-frot") {
 
 export function convertShortchutForLink(str) {
     if (str.charAt(0) == "-") {
-        return str.replace("-", "http://");
+        return "http://" + str.substring(1);
     }
     if (str.charAt(0) == "_") {
-        return str.replace("_", "https://");
+        return "https://" + str.substring(1);
     }
     if (str.charAt(0) == "@") {
-        return str.replace("@", "mailto:");
+        return "mailto:" + str.substring(1);
     }
     return str;
 }

package/src/tailwind.helpers.js

@@ -3,11 +3,16 @@ module.exports = {
         return {
             DEFAULT: {
                 css: {
-                    ":where(a):not(:where([class~=not-prose] *)), :where(span[data-rot]):not(:where([class~=not-prose] *))":
+                    a: {
+                        textDecoration: 'none',
+                    },
+                    ':where(a):not(:where([class~=not-prose] *)), :where(span[data-rot]):not(:where([class~=not-prose] *))':
                         {
-                            color: "var(--primary)",
-                            "&:hover": {
-                                opacity: ".75",
+                            color: 'var(--primary)',
+                            fontWeight: 500,
+                            borderBottom: '1px solid;',
+                            '&:hover': {
+                                opacity: '.75',
                             },
                         },
                 },
@@ -15,14 +20,14 @@ module.exports = {
         };
     },
     twFirstLetterPlugin: function ({ addVariant, e }) {
-        addVariant("first-letter", ({ modifySelectors, separator }) => {
+        addVariant('first-letter', ({ modifySelectors, separator }) => {
             modifySelectors(({ className }) => {
                 return `.${e(`first-letter${separator}${className}`)}:first-letter`;
             });
         });
     },
     twFirstChildPlugin: function ({ addVariant, e }) {
-        addVariant("first-child", ({ modifySelectors, separator }) => {
+        addVariant('first-child', ({ modifySelectors, separator }) => {
             modifySelectors(({ className }) => {
                 return `.${e(`first-child${separator}${className}`)}:first-child`;
             });
@@ -30,18 +35,18 @@ module.exports = {
     },
     twBleedPlugin: function ({ addUtilities }) {
         addUtilities({
-            ".bleed": {
-                width: "100vw",
-                "margin-inline-start": "50%",
-                "margin-inline-end": "unset",
-                transform: "translateX(-50%)",
-                "max-width": "none",
+            '.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",
+            '.bleed-disable': {
+                width: 'inherit',
+                'margin-inline-start': 'inherit',
+                'margin-inline-end': 'inherit',
+                transform: 'default',
             },
         });
     },