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();
-})();