klods-css 1.10.0 → 1.11.0

package/dist/klods.js

@@ -0,0 +1,70 @@
+/**
+ * klods.js — interactive helpers for vanilla HTML pages.
+ *
+ * A tiny companion to klods-css that wires up sidebar and nav toggling
+ * without requiring a build step or klods-js.
+ *
+ * Usage:
+ *   <script src="https://unpkg.com/klods-css/dist/klods.js"></script>
+ *
+ * The helpers are exposed on `window.klods`:
+ *   klods.toggleSidebar(buttonEl)
+ *   klods.toggleNav(buttonEl)
+ */
+(function (global) {
+  "use strict";
+
+  /**
+   * Toggle the open/closed state of the sidebar drawer.
+   * Pass the toggle button element (or any element inside .klods-page).
+   *
+   * On first call per page element, auto-wires:
+   *  - Clicking a link inside the sidebar closes the drawer.
+   *  - Clicking the backdrop (outside sidebar and header) closes the drawer.
+   */
+  function toggleSidebar(targetEl) {
+    var pageEl = targetEl.closest(".klods-page");
+    if (!pageEl) return;
+
+    if (!pageEl.hasAttribute("data-sidebar-wired")) {
+      pageEl.setAttribute("data-sidebar-wired", "");
+      var sidebarEl = pageEl.querySelector(":scope > .klods-sidebar");
+      if (sidebarEl) {
+        sidebarEl.addEventListener("click", function (e) {
+          e.stopPropagation();
+        });
+        sidebarEl.addEventListener("click", function (e) {
+          if (e.target.closest("a")) pageEl.removeAttribute("data-sidebar-open");
+        });
+      }
+      pageEl.addEventListener("click", function (e) {
+        if (!pageEl.hasAttribute("data-sidebar-open")) return;
+        var headerEl = pageEl.querySelector(":scope > .klods-header");
+        if (headerEl && headerEl.contains(e.target)) return;
+        pageEl.removeAttribute("data-sidebar-open");
+      });
+    }
+
+    if (pageEl.hasAttribute("data-sidebar-open")) {
+      pageEl.removeAttribute("data-sidebar-open");
+    } else {
+      pageEl.setAttribute("data-sidebar-open", "");
+    }
+  }
+
+  /**
+   * Toggle the open/closed state of a .klods-nav--collapse element.
+   * Pass the toggle button element (or any element inside the nav).
+   */
+  function toggleNav(targetEl) {
+    var navEl = targetEl.closest(".klods-nav--collapse");
+    if (!navEl) return;
+    if (navEl.hasAttribute("data-nav-open")) {
+      navEl.removeAttribute("data-nav-open");
+    } else {
+      navEl.setAttribute("data-nav-open", "");
+    }
+  }
+
+  global.klods = { toggleSidebar: toggleSidebar, toggleNav: toggleNav };
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "klods-css",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "klods stylesheet — drop-in CSS for layout, utilities and components.",
   "license": "MIT",
   "author": "Drue Wilding",
@@ -20,12 +20,14 @@
   "exports": {
     ".": "./dist/klods.css",
     "./min": "./dist/klods.min.css",
+    "./js": "./dist/klods.js",
     "./src/*": "./src/*"
   },
   "scripts": {
-    "build": "npm run build:css && npm run build:min",
+    "build": "npm run build:css && npm run build:min && npm run build:js",
     "build:css": "sass src/klods.scss dist/klods.css --style=expanded --no-source-map",
     "build:min": "sass src/klods.scss dist/klods.min.css --style=compressed --no-source-map",
+    "build:js": "cp src/klods.js dist/klods.js",
     "dev": "sass src/klods.scss dist/klods.css --watch --style=expanded"
   },
   "devDependencies": {

package/src/klods.js

@@ -0,0 +1,70 @@
+/**
+ * klods.js — interactive helpers for vanilla HTML pages.
+ *
+ * A tiny companion to klods-css that wires up sidebar and nav toggling
+ * without requiring a build step or klods-js.
+ *
+ * Usage:
+ *   <script src="https://unpkg.com/klods-css/dist/klods.js"></script>
+ *
+ * The helpers are exposed on `window.klods`:
+ *   klods.toggleSidebar(buttonEl)
+ *   klods.toggleNav(buttonEl)
+ */
+(function (global) {
+  "use strict";
+
+  /**
+   * Toggle the open/closed state of the sidebar drawer.
+   * Pass the toggle button element (or any element inside .klods-page).
+   *
+   * On first call per page element, auto-wires:
+   *  - Clicking a link inside the sidebar closes the drawer.
+   *  - Clicking the backdrop (outside sidebar and header) closes the drawer.
+   */
+  function toggleSidebar(targetEl) {
+    var pageEl = targetEl.closest(".klods-page");
+    if (!pageEl) return;
+
+    if (!pageEl.hasAttribute("data-sidebar-wired")) {
+      pageEl.setAttribute("data-sidebar-wired", "");
+      var sidebarEl = pageEl.querySelector(":scope > .klods-sidebar");
+      if (sidebarEl) {
+        sidebarEl.addEventListener("click", function (e) {
+          e.stopPropagation();
+        });
+        sidebarEl.addEventListener("click", function (e) {
+          if (e.target.closest("a")) pageEl.removeAttribute("data-sidebar-open");
+        });
+      }
+      pageEl.addEventListener("click", function (e) {
+        if (!pageEl.hasAttribute("data-sidebar-open")) return;
+        var headerEl = pageEl.querySelector(":scope > .klods-header");
+        if (headerEl && headerEl.contains(e.target)) return;
+        pageEl.removeAttribute("data-sidebar-open");
+      });
+    }
+
+    if (pageEl.hasAttribute("data-sidebar-open")) {
+      pageEl.removeAttribute("data-sidebar-open");
+    } else {
+      pageEl.setAttribute("data-sidebar-open", "");
+    }
+  }
+
+  /**
+   * Toggle the open/closed state of a .klods-nav--collapse element.
+   * Pass the toggle button element (or any element inside the nav).
+   */
+  function toggleNav(targetEl) {
+    var navEl = targetEl.closest(".klods-nav--collapse");
+    if (!navEl) return;
+    if (navEl.hasAttribute("data-nav-open")) {
+      navEl.removeAttribute("data-nav-open");
+    } else {
+      navEl.setAttribute("data-nav-open", "");
+    }
+  }
+
+  global.klods = { toggleSidebar: toggleSidebar, toggleNav: toggleNav };
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : this);