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

25
webseite-sass-js/dev/scripts/main.js
View File

@@ -1,3 +1,5 @@
// import 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
import ProductManager from './modules/ProductManager'; // Dateiendung kann weggelassen werden, wenn ein Bundler eingesetzt wird (esbuild, webpack, rollup, etc.)
(() => {
@@ -6,9 +8,8 @@ import ProductManager from './modules/ProductManager'; // Dateiendung kann wegge
// === INIT =============
const init = () => {
// TODO: routing
const pm = ProductManager();
console.log('init');
router();
};
// === EVENTHANDLER =====
@@ -16,6 +17,26 @@ import ProductManager from './modules/ProductManager'; // Dateiendung kann wegge
// === XHR/FETCH ========
// === FUNCTIONS ========
const router = () => {
const path = window.location.pathname;
console.log(path);
switch (path) {
case '/':
case '/index.html':
console.log('HOME');
// nur Skripte, die für Home relevant ausführen
break;
case '/projects/product-manager.html':
console.log('PRODUCT_MANAGER');
const pm = ProductManager();
break;
default:
console.warn('Page not found');
}
};
init();
})();

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) {