navigation: a first step into type-safe icons.

WebEngineering-FHNW · Dec 14, 2024 · 6e58aca · 6e58aca
1 parent 16e165f
commit 6e58aca
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/docs/img/icons/house.js b/docs/img/icons/house.js
@@ -0,0 +1,7 @@
+
+export{ house }
+const house = `
+<svg viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 12.5815C1 11.6147 1.46592 10.7072 2.25152 10.1437L15 1L27.7485 10.1437C28.5341 10.7072 29 11.6147 29 12.5815V28.5C29 29.8807 27.8807 31 26.5 31H20.2C19.6477 31 19.2 30.5523 19.2 30V21.2727C19.2 20.9966 18.9761 20.7727 18.7 20.7727H11.3C11.0239 20.7727 10.8 20.9966 10.8 21.2727V30C10.8 30.5523 10.3523 31 9.8 31H3.5C2.11929 31 1 29.8807 1 28.5V12.5815Z"/>
+</svg>
+`;
diff --git a/docs/src/customize/icons.js b/docs/src/customize/icons.js
@@ -0,0 +1,49 @@
+/**
+ * A typesafe way to create icons from svg and ensure consistent styling.
+ */
+export {
+    svg,
+    ICON_EMPTY,
+    ICON_HOUSE,
+    ICON_ONE_TWO,
+    ICON_PLUS_MINUS
+}
+
+/**
+ * @typedef {
+ *        "empty"
+ *      | "house"
+ *      | "one_two"
+ *      | "plus_minus"
+ *      }  IconNameType
+ */
+
+/** @type { IconNameType } */ const ICON_EMPTY   = "empty";
+/** @type { IconNameType } */ const ICON_HOUSE   = "house";
+/** @type { IconNameType } */ const ICON_ONE_TWO = "one_two";
+/** @type { IconNameType } */ const ICON_PLUS_MINUS = "plus_minus";
+
+
+const svg = /** @type { Object.<IconNameType, String>  } */ {};
+
+svg[ICON_EMPTY] = `
+    <svg viewBox="0 0 1 1" >
+    </svg>
+`;
+svg[ICON_HOUSE] = `
+    <svg viewBox="0 0 30 32" >
+        <path d="M1 12.5815C1 11.6147 1.46592 10.7072 2.25152 10.1437L15 1L27.7485 10.1437C28.5341 10.7072 29 11.6147 29 12.5815V28.5C29 29.8807 27.8807 31 26.5 31H20.2C19.6477 31 19.2 30.5523 19.2 30V21.2727C19.2 20.9966 18.9761 20.7727 18.7 20.7727H11.3C11.0239 20.7727 10.8 20.9966 10.8 21.2727V30C10.8 30.5523 10.3523 31 9.8 31H3.5C2.11929 31 1 29.8807 1 28.5V12.5815Z" />
+    </svg>
+`;
+svg[ICON_ONE_TWO] = `
+    <svg viewBox="0 0 24 24" >
+        <path d="M3.604 3.089A.75.75 0 014 3.75V8.5h.75a.75.75 0 010 1.5h-3a.75.75 0 110-1.5h.75V5.151l-.334.223a.75.75 0 01-.832-1.248l1.5-1a.75.75 0 01.77-.037zM8.75 5.5a.75.75 0 000 1.5h11.5a.75.75 0 000-1.5H8.75zm0 6a.75.75 0 000 1.5h11.5a.75.75 0 000-1.5H8.75zm0 6a.75.75 0 000 1.5h11.5a.75.75 0 000-1.5H8.75zM5.5 15.75c0-.704-.271-1.286-.72-1.686a2.302 2.302 0 00-1.53-.564c-.535 0-1.094.178-1.53.565-.449.399-.72.982-.72 1.685a.75.75 0 001.5 0c0-.296.104-.464.217-.564A.805.805 0 013.25 15c.215 0 .406.072.533.185.113.101.217.268.217.565 0 .332-.069.48-.21.657-.092.113-.216.24-.403.419l-.147.14c-.152.144-.33.313-.52.504l-1.5 1.5a.75.75 0 00-.22.53v.25c0 .414.336.75.75.75H5A.75.75 0 005 19H3.31l.47-.47c.176-.176.333-.324.48-.465l.165-.156a5.98 5.98 0 00.536-.566c.358-.447.539-.925.539-1.593z"/>
+    </svg>
+`;
+svg[ICON_PLUS_MINUS] = `
+    <svg viewBox="0 0 24 24" >
+        <path d="M12.5 6.75a.75.75 0 00-1.5 0V9H8.75a.75.75 0 000 1.5H11v2.25a.75.75 0 001.5 0V10.5h2.25a.75.75 0 000-1.5H12.5V6.75zM8.75 16a.75.75 0 000 1.5h6a.75.75 0 000-1.5h-6z"/><path fill-rule="evenodd" d="M5 1a2 2 0 00-2 2v18a2 2 0 002 2h14a2 2 0 002-2V7.018a2 2 0 00-.586-1.414l-4.018-4.018A2 2 0 0014.982 1H5zm-.5 2a.5.5 0 01.5-.5h9.982a.5.5 0 01.354.146l4.018 4.018a.5.5 0 01.146.354V21a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V3z"/>
+    </svg>
+`;
+
+
diff --git a/docs/src/examples/style/iconOverview.html b/docs/src/examples/style/iconOverview.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="shortcut icon" type="image/png" href="../../../img/logo/logo-60x54.png"/>
+    <link rel="stylesheet" href="../../../css/kolibri-base.css">
+    <title>Icon Overview</title>
+
+    <style>
+        .icon {
+            height:             2em;
+
+            fill:               rebeccapurple;
+            stroke:             none;
+            stroke-width:       2;
+            stroke-linecap:     round;
+            stroke-linejoin:    round;
+
+            border:             1px solid lightgray;
+        }
+        #out {
+            display:            flex;
+            gap:                1em;
+        }
+        #out > div {
+            display:            flex;
+            flex-direction:     column;
+            align-items:        center;
+            gap:                .2lh;
+        }
+    </style>
+
+</head>
+<body>
+<h1>Kolibri Icon Overview</h1>
+<p>
+    The gallery of icons.
+</p>
+
+
+<div id="out">
+
+</div>
+
+<script type="module">
+    import { icon }                                                from "../../kolibri/style/icon.js";
+    import { dom  }                                                from "../../kolibri/util/dom.js";
+    import {ICON_EMPTY, ICON_HOUSE, ICON_ONE_TWO, ICON_PLUS_MINUS} from "../../customize/icons.js";
+
+    [
+        ICON_EMPTY, ICON_HOUSE, ICON_ONE_TWO, ICON_PLUS_MINUS
+    ].forEach( iconName => {
+        const [entryDiv] = dom(`
+            <div title="${iconName.toUpperCase()}">
+                <span>${iconName.toUpperCase()}</span>
+            </div>
+        `);
+        entryDiv.prepend(...icon(iconName));
+        out.append(entryDiv);
+    });
+
+
+</script>
+
+
+</body>
+</html>
diff --git a/docs/src/kolibri/style/icon.js b/docs/src/kolibri/style/icon.js
@@ -0,0 +1,18 @@
+import { dom } from "../util/dom.js";
+import { svg } from "../../customize/icons.js";
+
+export { icon }
+
+const xmlns ="http://www.w3.org/2000/svg";
+
+const icon = iconName => {
+    const [iconSVG] = dom(svg[iconName]);
+    iconSVG.removeAttribute("height"); // remove attributes that we like to override via class styling
+    iconSVG.removeAttribute("width");
+    iconSVG.removeAttribute("stroke-width");
+    iconSVG.removeAttribute("stroke-linecap");
+    iconSVG.removeAttribute("stroke-linejoin");
+    iconSVG.setAttribute("xmlns", xmlns);
+    iconSVG.setAttribute("class", "icon");
+    return [iconSVG];
+};