@pushword/js-helper 0.0.59 → 0.0.63

package/package.json

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

package/src/app.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import "@pushword/js-helper/src/tailwind.prose.scss";

package/src/app.js

@@ -0,0 +1,27 @@
+require("fslightbox");
+import {
+    uncloakLinks,
+    readableEmail,
+    convertImageLinkToWebPLink,
+    replaceOn,
+    liveBlock,
+} from "@pushword/js-helper/src/helpers.js";
+import { allClickable } from "@pushword/js-helper/src/clickable.js";
+
+function onDomChanged() {
+    liveBlock();
+    convertImageLinkToWebPLink();
+    uncloakLinks();
+    readableEmail(".cea");
+    replaceOn();
+    refreshFsLightbox();
+    allClickable(".clickable");
+}
+
+function onPageLoaded() {
+    onDomChanged();
+    new FsLightbox();
+}
+
+document.addEventListener("DOMContentLoaded", onPageLoaded());
+document.addEventListener("DOMChanged", onDomChanged);

package/src/encore.js

@@ -29,24 +29,9 @@ module.exports = {
         outputPath = "./../public/assets/",
         publicPath = "/assets",
         manifestKeyPrefix = null,
-        filesToCopy = [
-            {
-                from: "./media/", // todo explain
-                to: "[name].[ext]",
-                pattern: /svg$/,
-            },
-            {
-                from: "./img/",
-                to: "[name].[ext]",
-                pattern: /header.jpg$/,
-            },
-            {
-                from: "./favicons",
-                to: "[name].[ext]",
-            },
-        ],
-        entries = [{ name: "app", file: "./app.js" }],
-        styleEntries = [{ name: "style", file: "./app.css" }]
+        filesToCopy = null,
+        entries = null,
+        styleEntries = null
     ) {
         if (watchFiles === null) {
             watchFiles = getFilesToWatch();
@@ -56,6 +41,27 @@ module.exports = {
             tailwindConfig = getTailwindConfig(watchFiles);
         }
 
+        if (filesToCopy === null) {
+            filesToCopy = [
+                {
+                    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 }];
+        }
+
+        if (styleEntries === null) {
+            styleEntries = [{ name: "style", file: __dirname + "/app.css" }];
+        } else if (typeof styleEntries === "string") {
+            styleEntries = [{ name: "style", file: styleEntries }];
+        }
+
         Encore.setOutputPath(outputPath)
             .setPublicPath(publicPath)
             .cleanupOutputBeforeBuild()

package/src/helpers.js

@@ -28,7 +28,9 @@ export function liveBlock(liveBlockAttribute = "data-live", liveFormSelector = "
     };
 
     var getLiveBlock = function (item) {
-        fetch(item.getAttribute(liveBlockAttribute), {
+        var url = item.getAttribute(liveBlockAttribute);
+        url = url.startsWith("e:") ? convertShortchutForLink(rot13ToText(url.substring(2))) : url;
+        fetch(url, {
             //headers: { "Content-Type": "application/json", Accept: "text/plain" },
             method: "POST",
             credentials: "include",
@@ -45,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 class="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 + "</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;
         }
@@ -95,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);
         });
     });