mypgs 1.6.0 → 2.1.0

package/templates/react/patterns/header.jsx

@@ -30,7 +30,7 @@ export default function Header() {
                 </div>
 
                 <div pgs="header-element-onlyDesktop">
-                    <nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Menu principale">
+                    <nav pgs="menu" pgs-option="horizontal menuHeader" aria-label="Main menu">
                         <ul>
                             <li><a href="/">Home</a></li>
                             <li><a href="#componenti">Componenti</a></li>
@@ -42,7 +42,7 @@ export default function Header() {
                 <div pgs="header-element-onlyMobile"></div>
 
                 <div pgs="header-element-alwaysOnLast">
-                    <button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Cambia tema">
+                    <button pgs="buttonIcon toggleDarkmode" type="button" aria-label="Change theme">
                         <i className="fa-solid fa-moon"></i>
                     </button>
                 </div>
@@ -52,7 +52,7 @@ export default function Header() {
 
                     <dialog pgs="modal-dialog" pgs-option="right">
                         <div pgs="modal-dialog-content">
-                            <nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Menu mobile">
+                            <nav pgs="menu" pgs-option="vertical menuHeader" aria-label="Mobile menu">
                                 <ul>
                                     <li><a href="/">Home</a></li>
                                     <li><a href="#componenti">Componenti</a></li>

package/templates/html/demo.js

@@ -1,130 +0,0 @@
-
-const templateFiles = [
-    "components/summary.html",
-    "components/menu.html",
-    "components/tooltip.html",
-    "components/modal.html",
-    "components/stepTabs.html",
-    "components/accordion.html",
-    "components/badges.html",
-    "components/breadcumbs.html",
-    "components/button.html",
-    "components/card.html",
-    "components/dropdown.html",
-    "components/tooltip.html",
-    "components/form.html",
-    "components/logo.html",
-    "components/search.html",
-    "components/slides.html",
-    "components/steps.html",
-    "components/table.html",
-    "components/notification.html",
-    "layout/body.html",
-    "layout/section.html",
-    "layout/flex.html",
-    "layout/grid.html",
-    "layout/pageShell.html",
-    "layout/footer.html",
-    "layout/header.html",
-    "patterns/cookieConsent.html",
-];
-
-function getTemplateTitle(path) {
-    return path.replace(".html", "").replace("/", " / ")
-}
-
-function renderSourceTemplate(section, html) {
-    const pre = document.createElement("pre");
-    const code = document.createElement("code");
-    code.textContent = html.trim();
-    pre.append(code);
-    section.append(pre);
-}
-
-function renderTemplate(section, path, html) {
-    const content = document.createElement("div");
-    content.setAttribute("pgs", "container flexColumnElements");
-    content.innerHTML = html;
-    section.append(content);
-}
-
-function renderLayout(root, path, html) {
-    const template = document.createElement("template");
-    template.innerHTML = html.trim();
-    root.append(template.content.cloneNode(true));
-}
-
-function renderTitle(section, path) {
-    const title = document.createElement("p");
-    title.classList.add("template-title");
-    title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
-    section.append(title);
-}
-
-async function loadTemplate(path) {
-    const response = await fetch(path);
-    if (!response.ok) throw new Error(`${path}: ${response.status}`);
-    return response.text();
-}
-
-function loadPgsJavascript() {
-    const script = document.createElement("script");
-    script.src = "../../dist/javascript/index.js";
-    document.body.append(script);
-}
-
-async function bootDemo() {
-    const BEEFORE = document.getElementById("templates-demo-before");
-    const MAIN = document.getElementById("templates-demo-main");
-    const AFTER = document.getElementById("templates-demo-after");
-
-    for (const path of templateFiles) {
-        const isHeader = path === "layout/header.html";
-        const isfooter = path === "layout/footer.html";
-        const isBody = path === "layout/body.html";
-
-        if (isHeader || isfooter) {
-            try {
-                const html = await loadTemplate(path);
-                renderLayout(isHeader ? BEEFORE : AFTER, path, html);
-            } catch (error) {
-                const message = document.createElement("p");
-                message.textContent = `Template non caricato: ${error.message}`;
-                layoutRoot.append(message);
-            }
-            continue;
-        }
-
-        const section = document.createElement("section");
-        section.setAttribute("pgs", "section flexColumnElements");
-        section.dataset.template = path;
-        renderTitle(section, path);
-
-        if (isBody) {
-            const html = await loadTemplate(path);
-            renderSourceTemplate(section, html);
-            MAIN.append(section);
-            continue
-        }
-
-        try {
-            const html = await loadTemplate(path);
-            renderTemplate(section, path, html);
-        } catch (error) {
-            const message = document.createElement("p");
-            message.textContent = `Template non caricato: ${error.message}`;
-            section.append(message);
-        }
-
-        MAIN.append(section);
-
-        if (path == "layout/section.html" || path == "layout/pageShell.html") {
-            section.style.display = "contents";
-            Array.from(section.children).forEach(c => c.style.width = "100%");
-        }
-    }
-
-    loadPgsJavascript();
-}
-
-bootDemo();