ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added Modal and router function

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-22 11:26:14 +02:00
parent f0e074dc9f
commit 3ec02626a6
11 changed files with 5341 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
webseite-sass-js/dev/scripts/modules/ProductManager.js
View File

@@ -1,3 +1,8 @@
import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
// import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'; // würde auch ohne Bundler funktionieren
// import '../../../node_modules/bootstrap/dist/js/bootstrap.esm.js'; // würde auch ohne Bundler funktionieren
// Factory Function
const ProductManager = (el = null) => {
// === DOM & VARS =======
@@ -14,8 +19,15 @@ const ProductManager = (el = null) => {
inputPrice: module.querySelector('.input-product-price'),
btnAdd: module.querySelector('.button-product-add'),
templateRow: module.querySelector('.template-row'),
modalEdit: module.querySelector('.modal-edit'),
};
const bsModalEdit = new Modal(DOM.modalEdit, {
backdrop: 'static', // true
keyboard: true,
});
console.log(DOM);
// === INIT =============
@@ -102,7 +114,8 @@ const ProductManager = (el = null) => {
const currentRowEl = e.currentTarget; // tr <- aktuelle Zeie, die bewegt wird
const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
e.dataTransfer.setData('text/plain', idx); // e.dataTransfer.setData('application/json', JSON.stringify({idx, name: sourceElement}));
e.dataTransfer.setData('text/plain', idx);
// e.dataTransfer.setData('application/json', JSON.stringify({idx, name: sourceElement}));
console.log('tr index:', idx);
};
@@ -111,7 +124,7 @@ const ProductManager = (el = null) => {
};
const onDrop = (e) => {
const currentRowEl = e.currentTarget; // tr <- Zielezeile, auf die gedroppt wird.
const currentRowEl = e.currentTarget; // tr <- Zielzeile, auf die gedroppt wird.
const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
const sourceIdx = parseInt(e.dataTransfer.getData('text/plain'));
// const { sourceIdx } = JSON.parse(e.dataTransfer.getData('application/json'));
@@ -124,6 +137,7 @@ const ProductManager = (el = null) => {
}
const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
// const draggedEl = DOM.tBody.children[sourceIdx]
// Verschiebe das Element im DOM
if (sourceIdx > targetIdx) {