webseite-sass-js/assets/css/main.css

@@ -4,6 +4,7 @@
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
+@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css';
 :root,
 [data-bs-theme=light] {
   --bs-blue: #0d6efd;
@@ -12072,6 +12073,21 @@ body {
   font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+main,
+#main {
+  flex: 1 0 auto;
+}
+
+body > footer,
+.footer-main {
+  flex-shrink: 0;
+}
+
 h1, .h1,
 h2,
 .h2,
@@ -12117,6 +12133,16 @@ h6,
   justify-content: center;
   align-items: center;
 }
+.header-main--min {
+  height: 150px;
+  background-color: #8cbeb2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.header-main--min .content-box figure {
+  width: 150px;
+}
 
 figure.logo-main {
   width: 280px;
@@ -12135,11 +12161,21 @@ figure.logo-main figcaption {
 .menu-main {
   background-color: #f06060;
 }
-.menu-main ul.list {
-  display: flex;
+.menu-main ul {
   padding: 0;
   margin: 0;
   list-style: none;
+}
+.menu-main ul ul {
+  display: none;
+}
+.menu-main ul > li:hover ul,
+.menu-main ul > li:focus ul,
+.menu-main ul > li:focus-within ul {
+  display: block;
+}
+.menu-main ul.list {
+  display: flex;
   justify-content: center;
 }
 .menu-main ul.list li a {
@@ -12148,6 +12184,41 @@ figure.logo-main figcaption {
   text-transform: uppercase;
   color: white;
   padding: 0.5rem 1rem;
+  transition: all 0.4s ease-out;
+}
+.menu-main ul.list li a:hover, .menu-main ul.list li a:focus {
+  background-color: white;
+  color: #f06060;
+}
+.menu-main ul.sublist {
+  position: absolute;
+  background-color: rgba(240, 96, 96, 0.8);
+}
+.menu-main ul.sublist li a {
+  display: inline-block;
+  background-color: #f06060;
+  color: white;
+  padding: 0.5rem 1rem;
+  transition: all 0.4s ease-out;
+}
+.menu-main ul.sublist li a:hover, .menu-main ul.sublist li a:focus {
+  background-color: white;
+  color: #f06060;
+}
+
+.product-manager table .th-actions {
+  width: 150px;
+}
+.product-manager table tbody td button {
+  margin: 3px;
+}
+.product-manager table tfoot .row > * {
+  margin-bottom: 1rem;
+}
+@media (min-width: 992px) {
+  .product-manager table tfoot .row > * {
+    margin-bottom: 0;
+  }
 }
 
 /*# sourceMappingURL=main.css.map */

webseite-sass-js/assets/js/build.js

@@ -0,0 +1,161 @@
+(() => {
+  // dev/scripts/modules/ProductManager.js
+  var ProductManager = (el = null) => {
+    const module = el || document.querySelector(".product-manager") || console.error("Product Manager not found");
+    if (!module) return;
+    const DOM = {
+      module,
+      table: module.querySelector(".table-products"),
+      tBody: module.querySelector("tbody"),
+      inputName: module.querySelector(".input-product-name"),
+      inputPrice: module.querySelector(".input-product-price"),
+      btnAdd: module.querySelector(".button-product-add"),
+      templateRow: module.querySelector(".template-row")
+    };
+    console.log(DOM);
+    const init = () => {
+      console.log("init");
+      initProducts();
+      DOM.btnAdd.addEventListener("click", onClickAdd);
+    };
+    const onClickAdd = (e) => {
+      console.log("click");
+      const product = {
+        name: DOM.inputName.value,
+        price: Number(DOM.inputPrice.value)
+      };
+      addProduct(product);
+      disableNonFunctionalButtons();
+    };
+    const onClickRemove = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRowEl = parents(btnEl, "tr")[0];
+      currentRowEl.remove();
+      disableNonFunctionalButtons();
+    };
+    const onClickMoveUp = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRowEl = parents(btnEl, "tr")[0];
+      currentRowEl.previousElementSibling.before(currentRowEl);
+      console.log("move up");
+      disableNonFunctionalButtons();
+    };
+    const onClickMoveDown = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRowEl = parents(btnEl, "tr")[0];
+      currentRowEl.nextElementSibling.after(currentRowEl);
+      console.log("move down");
+      disableNonFunctionalButtons();
+    };
+    const onMouseDownDrag = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRowEl = parents(btnEl, "tr")[0];
+      currentRowEl.draggable = true;
+    };
+    const onMouseUpDrag = (e) => {
+      const btnEl = e.currentTarget;
+      const currentRowEl = parents(btnEl, "tr")[0];
+      currentRowEl.draggable = false;
+    };
+    const onDragStart = (e) => {
+      console.log("DragEvent: ", e);
+      const currentRowEl = e.currentTarget;
+      const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
+      e.dataTransfer.setData("text/plain", idx);
+      console.log("tr index:", idx);
+    };
+    const onDragOver = (e) => {
+      e.preventDefault();
+    };
+    const onDrop = (e) => {
+      const currentRowEl = e.currentTarget;
+      const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
+      const sourceIdx = parseInt(e.dataTransfer.getData("text/plain"));
+      console.log({ targetIdx, sourceIdx });
+      if (sourceIdx === targetIdx) {
+        return;
+      }
+      const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
+      if (sourceIdx > targetIdx) {
+        currentRowEl.before(draggedEl);
+      } else {
+        currentRowEl.after(draggedEl);
+      }
+      disableNonFunctionalButtons();
+    };
+    const fetchProducts = async () => {
+      try {
+        const response = await fetch("/data/products.json");
+        if (!response.ok) {
+          throw new Error("Fetch went wrong.");
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error(error);
+        return error;
+      }
+    };
+    const initProducts = () => {
+      fetchProducts().then((products) => {
+        products.forEach((product) => {
+          addProduct(product);
+        });
+        disableNonFunctionalButtons();
+      });
+    };
+    const addProduct = (product) => {
+      const { name, price } = product;
+      const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
+      const tdNameEl = trEl.querySelector(".td-name");
+      const tdPriceEl = trEl.querySelector(".td-price");
+      const btnRemoveEl = trEl.querySelector(".button-product-remove");
+      const btnMoveUpEl = trEl.querySelector(".button-product-move-up");
+      const btnMoveDownEl = trEl.querySelector(".button-product-move-down");
+      const btnDragEl = trEl.querySelector(".button-drag");
+      tdNameEl.textContent = name;
+      tdPriceEl.textContent = price;
+      btnRemoveEl.addEventListener("click", onClickRemove);
+      btnMoveUpEl.addEventListener("click", onClickMoveUp);
+      btnMoveDownEl.addEventListener("click", onClickMoveDown);
+      btnDragEl.addEventListener("mousedown", onMouseDownDrag);
+      btnDragEl.addEventListener("mouseup", onMouseUpDrag);
+      trEl.addEventListener("dragstart", onDragStart);
+      trEl.addEventListener("dragover", onDragOver);
+      trEl.addEventListener("drop", onDrop);
+      DOM.tBody.appendChild(trEl);
+    };
+    const disableNonFunctionalButtons = () => {
+      Array.from(DOM.tBody.querySelectorAll("tr")).forEach((tr) => {
+        const btnMoveUp = tr.querySelector(".button-product-move-up");
+        const btnMoveDown = tr.querySelector(".button-product-move-down");
+        btnMoveUp.disabled = !tr.previousElementSibling;
+        btnMoveDown.disabled = !tr.nextElementSibling;
+      });
+    };
+    const parents = (el2, selector) => {
+      const parents2 = [];
+      while ((el2 = el2.parentNode) && el2 !== document) {
+        if (!selector || el2.matches(selector)) parents2.push(el2);
+      }
+      return parents2;
+    };
+    init();
+    return {
+      init,
+      initProducts
+    };
+  };
+  var ProductManager_default = ProductManager;
+
+  // dev/scripts/main.js
+  (() => {
+    const DOM = {};
+    const init = () => {
+      const pm = ProductManager_default();
+      console.log("init");
+    };
+    init();
+  })();
+})();
+//# sourceMappingURL=build.js.map

webseite-sass-js/assets/js/main.js

@@ -1,19 +0,0 @@
-'use strict';
-
-(() => {
-  // === DOM & VARS =======
-  const DOM = {};
-
-  // === INIT =============
-  const init = () => {
-    console.log('init ...');
-  };
-
-  // === EVENTHANDLER =====
-
-  // === XHR/FETCH ========
-
-  // === FUNCTIONS ========
-
-  init();
-})();