ks-web-comp-nav 1.3.1

package/bin/commands/template/v1/WebComponents/v6/nav/index.js

@@ -0,0 +1,31 @@
+import composeNavigationStory from "./composeNavigationStory.js";
+import navDefaults from "./navDefaults.js";
+import navUsage from "./navUsage.js";
+
+class KSNav extends HTMLElement {
+    connectedCallback() {
+        if (this.dataset.rendered === "true") return;
+
+        this.dataset.rendered = "true";
+
+        this.appendChild(
+            composeNavigationStory({
+                inElement: this
+            })
+        );
+    }
+}
+
+KSNav.defaults = navDefaults;
+KSNav.usage = navUsage;
+
+customElements.define(
+    "ks-nav",
+    KSNav
+);
+
+export default KSNav;
+export {
+    navDefaults,
+    navUsage
+};

package/bin/commands/template/v1/WebComponents/v6/nav/navDefaults.js

@@ -0,0 +1,15 @@
+const navDefaults = {
+    navClass: "bg-gray-800 text-white",
+    outerClass: `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`,
+    innerClass: "flex flex-wrap items-center justify-between",
+    brandClass: "text-xl font-semibold",
+    menuClass: `w-full hidden flex flex-col space-y-2 mt-4
+    md:flex md:flex-row md:space-y-0 md:gap-4
+    md:mt-0 md:w-auto md:flex-wrap`,
+    buttonClass: "text-xl px-4 py-1 md:hidden"
+};
+
+export default navDefaults;

package/bin/commands/template/v1/WebComponents/v6/nav/navUsage.js

@@ -0,0 +1,45 @@
+import navDefaults from "./navDefaults.js";
+
+const navUsage = {
+    tagName: "ks-nav",
+    attributes: {
+        title: {
+            name: "ks-title",
+            defaultValue: "KeshavSoft"
+        },
+        titleId: {
+            name: "ks-title-id",
+            defaultValue: "titlehtmlId"
+        },
+        navClass: {
+            name: "ks-nav-class",
+            defaultValue: navDefaults.navClass
+        },
+        outerClass: {
+            name: "ks-outer-class",
+            defaultValue: navDefaults.outerClass
+        },
+        innerClass: {
+            name: "ks-inner-class",
+            defaultValue: navDefaults.innerClass
+        },
+        brandClass: {
+            name: "ks-brand-class",
+            defaultValue: navDefaults.brandClass
+        },
+        menuClass: {
+            name: "ks-menu-class",
+            defaultValue: navDefaults.menuClass
+        },
+        menuExtraClass: {
+            name: "ks-ul-class",
+            defaultValue: ""
+        },
+        buttonClass: {
+            name: "ks-button-class",
+            defaultValue: navDefaults.buttonClass
+        }
+    }
+};
+
+export default navUsage;

package/bin/commands/template/v1/WebComponents/v6/nav/readAttributeOrDefault.js

@@ -0,0 +1,9 @@
+const readAttributeOrDefault = ({ inElement, inName, inDefaultValue }) => {
+    const value = inElement.getAttribute(inName);
+
+    if (value === null) return inDefaultValue;
+
+    return value;
+};
+
+export default readAttributeOrDefault;

package/bin/commands/template/v1/WebComponents/v6/nav/readNavStoryFromElement.js

@@ -0,0 +1,42 @@
+import navDefaults from "./navDefaults.js";
+import readAttributeOrDefault from "./readAttributeOrDefault.js";
+
+const readNavStoryFromElement = ({ inElement }) => {
+    return {
+        navClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-nav-class",
+            inDefaultValue: navDefaults.navClass
+        }),
+        outerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-outer-class",
+            inDefaultValue: navDefaults.outerClass
+        }),
+        innerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-inner-class",
+            inDefaultValue: navDefaults.innerClass
+        }),
+        titleId: inElement.getAttribute("ks-title-id"),
+        title: inElement.getAttribute("ks-title"),
+        brandClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-brand-class",
+            inDefaultValue: navDefaults.brandClass
+        }),
+        menuClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-menu-class",
+            inDefaultValue: navDefaults.menuClass
+        }),
+        menuExtraClass: inElement.getAttribute("ks-ul-class"),
+        buttonClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-button-class",
+            inDefaultValue: navDefaults.buttonClass
+        })
+    };
+};
+
+export default readNavStoryFromElement;

package/bin/commands/template/v1/initHeader.js

@@ -0,0 +1,61 @@
+import "./WebComponents/v6/menuItem/index.js";
+import "./WebComponents/v6/nav/index.js";
+
+import { buildMenuItem } from "./BuildMenuItem/buildMenuItem.js";
+import { buildNav } from "./BuildNav/buildNav.js";
+
+const initHeader = (config = {}) => {
+
+    const header = document.getElementById("header");
+
+    if (!header) return;
+
+    header.appendChild(
+        buildNav({
+            inTitle: config.title,
+            inUiClasses: config.uiClasses
+        })
+    );
+
+    const menu = document.getElementById("menu");
+
+    (config.items || []).forEach(item => {
+
+        const classes = {
+            liClass: "md:text-center",
+
+            aClass: `${item?.uiClasses?.aClass} flex justify-between items-center
+        bg-gray-700 px-4 py-2 rounded-md
+        hover:bg-gray-600
+        active:bg-gray-500 active:scale-95
+        transition-all duration-150
+        md:flex-col md:justify-center md:items-center
+        lg:bg-transparent lg:px-2 lg:py-1`,
+
+            spanClass: `ml-3 text-right w-full text-base
+        md:w-auto md:text-center md:ml-0 lg:text-lg`,
+
+            svgClass: item?.uiClasses?.svgDivClass || "text-gray-300 w-6 h-6 lg:w-7 lg:h-7"
+        };
+
+        const li = buildMenuItem({
+            inTextToShow: item.text,
+            inHtmlId: item.id,
+            inIconPaths: item.icon,
+            inHref: item.href,
+            onClick: item.onClick,
+            inTableName: item.tableName,
+            inClasses: classes,
+            inSvgName: item.svgName,
+            inConfigUiClasses: config.uiClasses
+        });
+
+        menu.appendChild(li);
+    });
+};
+
+window.KSHeader = initHeader;
+
+console.log("KSHeader v8 loaded to DOM");
+
+export default initHeader;

package/bin/commands/template/v2/composeNavigationStory.js

@@ -0,0 +1,54 @@
+import createBrandTitle from "./createBrandTitle.js";
+import createMenuList from "./createMenuList.js";
+import createMenuToggleButton from "./createMenuToggleButton.js";
+import createNavigationBar from "./createNavigationBar.js";
+import createNavigationRow from "./createNavigationRow.js";
+import createNavigationWrapper from "./createNavigationWrapper.js";
+import readNavStoryFromElement from "./readNavStoryFromElement.js";
+
+const composeNavigationStory = ({ inElement }) => {
+    const story = readNavStoryFromElement({
+        inElement
+    });
+
+    const nav = createNavigationBar({
+        inClassName: story.navClass
+    });
+
+    const wrapper = createNavigationWrapper({
+        inClassName: story.outerClass
+    });
+
+    const row = createNavigationRow({
+        inClassName: story.innerClass
+    });
+
+    const brand = createBrandTitle({
+        inTitleId: story.titleId,
+        inTitle: story.title,
+        inClassName: story.brandClass
+    });
+
+    const menu = createMenuList({
+        inClassName: story.menuClass,
+        inExtraClass: story.menuExtraClass
+    });
+
+    const toggleButton = createMenuToggleButton({
+        inMenu: menu,
+        inClassName: story.buttonClass
+    });
+
+    row.append(
+        brand,
+        toggleButton,
+        menu
+    );
+
+    wrapper.appendChild(row);
+    nav.appendChild(wrapper);
+
+    return nav;
+};
+
+export default composeNavigationStory;

package/bin/commands/template/v2/createBrandTitle.js

@@ -0,0 +1,11 @@
+const createBrandTitle = ({ inTitleId, inTitle, inClassName }) => {
+    const brand = document.createElement("div");
+
+    brand.className = inClassName;
+    brand.id = inTitleId || "titlehtmlId";
+    brand.innerText = inTitle || "KeshavSoft";
+
+    return brand;
+};
+
+export default createBrandTitle;

package/bin/commands/template/v2/createMenuList.js

@@ -0,0 +1,10 @@
+const createMenuList = ({ inClassName, inExtraClass }) => {
+    const menu = document.createElement("ul");
+
+    menu.id = "menu";
+    menu.className = `${inClassName} ${inExtraClass || ""}`;
+
+    return menu;
+};
+
+export default createMenuList;

package/bin/commands/template/v2/createMenuToggleButton.js

@@ -0,0 +1,14 @@
+const createMenuToggleButton = ({ inMenu, inClassName }) => {
+    const button = document.createElement("button");
+
+    button.className = inClassName;
+    button.innerText = "☰";
+
+    button.addEventListener("click", () => {
+        inMenu.classList.toggle("hidden");
+    });
+
+    return button;
+};
+
+export default createMenuToggleButton;

package/bin/commands/template/v2/createNavigationBar.js

@@ -0,0 +1,9 @@
+const createNavigationBar = ({ inClassName }) => {
+    const nav = document.createElement("nav");
+
+    nav.className = inClassName;
+
+    return nav;
+};
+
+export default createNavigationBar;

package/bin/commands/template/v2/createNavigationRow.js

@@ -0,0 +1,9 @@
+const createNavigationRow = ({ inClassName }) => {
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className = inClassName;
+
+    return innerDiv;
+};
+
+export default createNavigationRow;

package/bin/commands/template/v2/createNavigationWrapper.js

@@ -0,0 +1,9 @@
+const createNavigationWrapper = ({ inClassName }) => {
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = inClassName;
+
+    return outerDiv;
+};
+
+export default createNavigationWrapper;

package/bin/commands/template/v2/index.js

@@ -0,0 +1,31 @@
+import composeNavigationStory from "./composeNavigationStory.js";
+import navDefaults from "./navDefaults.js";
+import navUsage from "./navUsage.js";
+
+class KSNav extends HTMLElement {
+    connectedCallback() {
+        if (this.dataset.rendered === "true") return;
+
+        this.dataset.rendered = "true";
+
+        this.appendChild(
+            composeNavigationStory({
+                inElement: this
+            })
+        );
+    }
+}
+
+KSNav.defaults = navDefaults;
+KSNav.usage = navUsage;
+
+customElements.define(
+    "ks-nav",
+    KSNav
+);
+
+export default KSNav;
+export {
+    navDefaults,
+    navUsage
+};

package/bin/commands/template/v2/navDefaults.js

@@ -0,0 +1,15 @@
+const navDefaults = {
+    navClass: "bg-gray-800 text-white",
+    outerClass: `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`,
+    innerClass: "flex flex-wrap items-center justify-between",
+    brandClass: "text-xl font-semibold",
+    menuClass: `w-full hidden flex flex-col space-y-2 mt-4
+    md:flex md:flex-row md:space-y-0 md:gap-4
+    md:mt-0 md:w-auto md:flex-wrap`,
+    buttonClass: "text-xl px-4 py-1 md:hidden"
+};
+
+export default navDefaults;

package/bin/commands/template/v2/navUsage.js

@@ -0,0 +1,45 @@
+import navDefaults from "./navDefaults.js";
+
+const navUsage = {
+    tagName: "ks-nav",
+    attributes: {
+        title: {
+            name: "ks-title",
+            defaultValue: "KeshavSoft"
+        },
+        titleId: {
+            name: "ks-title-id",
+            defaultValue: "titlehtmlId"
+        },
+        navClass: {
+            name: "ks-nav-class",
+            defaultValue: navDefaults.navClass
+        },
+        outerClass: {
+            name: "ks-outer-class",
+            defaultValue: navDefaults.outerClass
+        },
+        innerClass: {
+            name: "ks-inner-class",
+            defaultValue: navDefaults.innerClass
+        },
+        brandClass: {
+            name: "ks-brand-class",
+            defaultValue: navDefaults.brandClass
+        },
+        menuClass: {
+            name: "ks-menu-class",
+            defaultValue: navDefaults.menuClass
+        },
+        menuExtraClass: {
+            name: "ks-ul-class",
+            defaultValue: ""
+        },
+        buttonClass: {
+            name: "ks-button-class",
+            defaultValue: navDefaults.buttonClass
+        }
+    }
+};
+
+export default navUsage;

package/bin/commands/template/v2/readAttributeOrDefault.js

@@ -0,0 +1,9 @@
+const readAttributeOrDefault = ({ inElement, inName, inDefaultValue }) => {
+    const value = inElement.getAttribute(inName);
+
+    if (value === null) return inDefaultValue;
+
+    return value;
+};
+
+export default readAttributeOrDefault;

package/bin/commands/template/v2/readNavStoryFromElement.js

@@ -0,0 +1,42 @@
+import navDefaults from "./navDefaults.js";
+import readAttributeOrDefault from "./readAttributeOrDefault.js";
+
+const readNavStoryFromElement = ({ inElement }) => {
+    return {
+        navClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-nav-class",
+            inDefaultValue: navDefaults.navClass
+        }),
+        outerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-outer-class",
+            inDefaultValue: navDefaults.outerClass
+        }),
+        innerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-inner-class",
+            inDefaultValue: navDefaults.innerClass
+        }),
+        titleId: inElement.getAttribute("ks-title-id"),
+        title: inElement.getAttribute("ks-title"),
+        brandClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-brand-class",
+            inDefaultValue: navDefaults.brandClass
+        }),
+        menuClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-menu-class",
+            inDefaultValue: navDefaults.menuClass
+        }),
+        menuExtraClass: inElement.getAttribute("ks-ul-class"),
+        buttonClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-button-class",
+            inDefaultValue: navDefaults.buttonClass
+        })
+    };
+};
+
+export default readNavStoryFromElement;

package/bin/commands/template/v3/composeNavigationStory.js

@@ -0,0 +1,54 @@
+import createBrandTitle from "./createBrandTitle.js";
+import createMenuList from "./createMenuList.js";
+import createMenuToggleButton from "./createMenuToggleButton.js";
+import createNavigationBar from "./createNavigationBar.js";
+import createNavigationRow from "./createNavigationRow.js";
+import createNavigationWrapper from "./createNavigationWrapper.js";
+import readNavStoryFromElement from "./readNavStoryFromElement.js";
+
+const composeNavigationStory = ({ inElement }) => {
+    const story = readNavStoryFromElement({
+        inElement
+    });
+
+    const nav = createNavigationBar({
+        inClassName: story.navClass
+    });
+
+    const wrapper = createNavigationWrapper({
+        inClassName: story.outerClass
+    });
+
+    const row = createNavigationRow({
+        inClassName: story.innerClass
+    });
+
+    const brand = createBrandTitle({
+        inTitleId: story.titleId,
+        inTitle: story.title,
+        inClassName: story.brandClass
+    });
+
+    const menu = createMenuList({
+        inClassName: story.menuClass,
+        inExtraClass: story.menuExtraClass
+    });
+
+    const toggleButton = createMenuToggleButton({
+        inMenu: menu,
+        inClassName: story.buttonClass
+    });
+
+    row.append(
+        brand,
+        toggleButton,
+        menu
+    );
+
+    wrapper.appendChild(row);
+    nav.appendChild(wrapper);
+
+    return nav;
+};
+
+export default composeNavigationStory;

package/bin/commands/template/v3/createBrandTitle.js

@@ -0,0 +1,11 @@
+const createBrandTitle = ({ inTitleId, inTitle, inClassName }) => {
+    const brand = document.createElement("div");
+
+    brand.className = inClassName;
+    brand.id = inTitleId || "titlehtmlId";
+    brand.innerText = inTitle || "KeshavSoft";
+
+    return brand;
+};
+
+export default createBrandTitle;

package/bin/commands/template/v3/createMenuList.js

@@ -0,0 +1,10 @@
+const createMenuList = ({ inClassName, inExtraClass }) => {
+    const menu = document.createElement("ul");
+
+    menu.id = "menu";
+    menu.className = `${inClassName} ${inExtraClass || ""}`;
+
+    return menu;
+};
+
+export default createMenuList;

package/bin/commands/template/v3/createMenuToggleButton.js

@@ -0,0 +1,14 @@
+const createMenuToggleButton = ({ inMenu, inClassName }) => {
+    const button = document.createElement("button");
+
+    button.className = inClassName;
+    button.innerText = "☰";
+
+    button.addEventListener("click", () => {
+        inMenu.classList.toggle("hidden");
+    });
+
+    return button;
+};
+
+export default createMenuToggleButton;

package/bin/commands/template/v3/createNavigationBar.js

@@ -0,0 +1,9 @@
+const createNavigationBar = ({ inClassName }) => {
+    const nav = document.createElement("nav");
+
+    nav.className = inClassName;
+
+    return nav;
+};
+
+export default createNavigationBar;

package/bin/commands/template/v3/createNavigationRow.js

@@ -0,0 +1,9 @@
+const createNavigationRow = ({ inClassName }) => {
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className = inClassName;
+
+    return innerDiv;
+};
+
+export default createNavigationRow;

package/bin/commands/template/v3/createNavigationWrapper.js

@@ -0,0 +1,9 @@
+const createNavigationWrapper = ({ inClassName }) => {
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = inClassName;
+
+    return outerDiv;
+};
+
+export default createNavigationWrapper;

package/bin/commands/template/v3/index.js

@@ -0,0 +1,34 @@
+import composeNavigationStory from "./composeNavigationStory.js";
+// import navDefaults from "./navDefaults.js";
+// import navUsage from "./navUsage.js";
+
+class KSNav extends HTMLElement {
+    connectedCallback() {
+        if (this.dataset.rendered === "true") return;
+
+        this.dataset.rendered = "true";
+
+        this.appendChild(
+            composeNavigationStory({
+                inElement: this
+            })
+        );
+    }
+}
+
+// KSNav.defaults = navDefaults;
+// KSNav.usage = navUsage;
+
+customElements.define(
+    "ks-nav",
+    KSNav
+);
+
+// export default KSNav;
+// export {
+//     navDefaults,
+//     navUsage
+// };
+
+
+export default {};

package/bin/commands/template/v3/navDefaults.js

@@ -0,0 +1,15 @@
+const navDefaults = {
+    navClass: "bg-gray-800 text-white",
+    outerClass: `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`,
+    innerClass: "flex flex-wrap items-center justify-between",
+    brandClass: "text-xl font-semibold",
+    menuClass: `w-full hidden flex flex-col space-y-2 mt-4
+    md:flex md:flex-row md:space-y-0 md:gap-4
+    md:mt-0 md:w-auto md:flex-wrap`,
+    buttonClass: "text-xl px-4 py-1 md:hidden"
+};
+
+export default navDefaults;