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

(() => {
  // 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