eSales Media Git repositories
Browse code

Allow for multiple GridPosition widgets to work

Benjamin Roth authored on28/02/2025 14:53:21
Showing1 changed files
public/js/grid_position_widget.js
History View file @5752388
1 1 
deleted file mode 100644
... ... 
@@ -1,101 +0,0 @@
1 
-document.addEventListener('DOMContentLoaded', () => {
2 
-  const gridContainer = document.querySelector('.grid-container');
3 
-  const gridSize = 5;
4 
-  let selectedIndices = [];
5 
-
6 
-  if (!gridContainer) return;
7 
-
8 
-  // Grid dynamisch erstellen
9 
-  const fragment = document.createDocumentFragment();
10 
-  for (let i = 0; i < gridSize * gridSize; i++) {
11 
-    const gridItem = document.createElement('div');
12 
-    gridItem.classList.add('grid-cell');
13 
-    gridItem.dataset.index = i;
14 
-    gridItem.addEventListener('click', () => toggleCell(i));
15 
-    fragment.appendChild(gridItem);
16 
-  }
17 
-  gridContainer.appendChild(fragment);
18 
-
19 
-  function toggleCell(index) {
20 
-    const gridItem = gridContainer.querySelector(`.grid-cell[data-index="${index}"]`);
21 
-    if (!gridItem) return;
22 
-
23 
-    if (selectedIndices.includes(index)) {
24 
-      // Entfernen, falls bereits ausgewählt
25 
-      selectedIndices = selectedIndices.filter(cell => cell !== index);
26 
-      gridItem.classList.remove('selected');
27 
-    } else if (isSelectable(index)) {
28 
-      // Wählen, wenn erste oder angrenzende Zelle
29 
-      selectedIndices.push(index);
30 
-      gridItem.classList.add('selected');
31 
-    } else {
32 
-      // Invalid, Auswahl zurücksetzen
33 
-      resetSelection(index);
34 
-    }
35 
-    validateSelection();
36 
-    saveSelection();
37 
-  }
38 
-
39 
-  function isSelectable(index) {
40 
-    return selectedIndices.length === 0 || selectedIndices.some(selected => isAdjacent(index, selected));
41 
-  }
42 
-
43 
-  function resetSelection(index) {
44 
-    selectedIndices = [index];
45 
-    resetGrid();
46 
-    gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
47 
-  }
48 
-
49 
-  function isAdjacent(index1, index2) {
50 
-    const rowDiff = Math.abs(Math.floor(index1 / gridSize) - Math.floor(index2 / gridSize));
51 
-    const colDiff = Math.abs(index1 % gridSize - index2 % gridSize);
52 
-    return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
53 
-  }
54 
-
55 
-  function validateSelection() {
56 
-    if (selectedIndices.length <= 1) return;
57 
-
58 
-    const validSelection = [selectedIndices[0]];
59 
-    const remainingCells = selectedIndices.slice(1);
60 
-
61 
-    while (remainingCells.length > 0) {
62 
-      let foundAdjacent = false;
63 
-
64 
-      for (let i = 0; i < remainingCells.length; i++) {
65 
-        if (validSelection.some(selected => isAdjacent(remainingCells[i], selected))) {
66 
-          validSelection.push(remainingCells[i]);
67 
-          remainingCells.splice(i, 1);
68 
-          foundAdjacent = true;
69 
-          break;
70 
-        }
71 
-      }
72 
-
73 
-      if (!foundAdjacent) {
74 
-        selectedIndices = validSelection;
75 
-        resetGrid();
76 
-        highlightSelection();
77 
-        return;
78 
-      }
79 
-    }
80 
-
81 
-    selectedIndices = validSelection;
82 
-    highlightSelection();
83 
-  }
84 
-
85 
-  function resetGrid() {
86 
-    gridContainer.querySelectorAll('.grid-cell').forEach(cell => cell.classList.remove('selected'));
87 
-  }
88 
-
89 
-  function highlightSelection() {
90 
-    selectedIndices.forEach(index => {
91 
-      gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
92 
-    });
93 
-  }
94 
-
95 
-  function saveSelection() {
96 
-    const gridDataInput = document.getElementById(gridContainer.dataset.fieldId);
97 
-    if (gridDataInput) {
98 
-      gridDataInput.value = JSON.stringify(selectedIndices);
99 
-    }
100 
-  }
101 
-});
Browse code

Add new GridPosition widget

Benjamin Roth authored on28/02/2025 10:55:44
Showing1 changed files
public/js/grid_position_widget.js
History View file @76c5c65
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,101 @@
1 
+document.addEventListener('DOMContentLoaded', () => {
2 
+  const gridContainer = document.querySelector('.grid-container');
3 
+  const gridSize = 5;
4 
+  let selectedIndices = [];
5 
+
6 
+  if (!gridContainer) return;
7 
+
8 
+  // Grid dynamisch erstellen
9 
+  const fragment = document.createDocumentFragment();
10 
+  for (let i = 0; i < gridSize * gridSize; i++) {
11 
+    const gridItem = document.createElement('div');
12 
+    gridItem.classList.add('grid-cell');
13 
+    gridItem.dataset.index = i;
14 
+    gridItem.addEventListener('click', () => toggleCell(i));
15 
+    fragment.appendChild(gridItem);
16 
+  }
17 
+  gridContainer.appendChild(fragment);
18 
+
19 
+  function toggleCell(index) {
20 
+    const gridItem = gridContainer.querySelector(`.grid-cell[data-index="${index}"]`);
21 
+    if (!gridItem) return;
22 
+
23 
+    if (selectedIndices.includes(index)) {
24 
+      // Entfernen, falls bereits ausgewählt
25 
+      selectedIndices = selectedIndices.filter(cell => cell !== index);
26 
+      gridItem.classList.remove('selected');
27 
+    } else if (isSelectable(index)) {
28 
+      // Wählen, wenn erste oder angrenzende Zelle
29 
+      selectedIndices.push(index);
30 
+      gridItem.classList.add('selected');
31 
+    } else {
32 
+      // Invalid, Auswahl zurücksetzen
33 
+      resetSelection(index);
34 
+    }
35 
+    validateSelection();
36 
+    saveSelection();
37 
+  }
38 
+
39 
+  function isSelectable(index) {
40 
+    return selectedIndices.length === 0 || selectedIndices.some(selected => isAdjacent(index, selected));
41 
+  }
42 
+
43 
+  function resetSelection(index) {
44 
+    selectedIndices = [index];
45 
+    resetGrid();
46 
+    gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
47 
+  }
48 
+
49 
+  function isAdjacent(index1, index2) {
50 
+    const rowDiff = Math.abs(Math.floor(index1 / gridSize) - Math.floor(index2 / gridSize));
51 
+    const colDiff = Math.abs(index1 % gridSize - index2 % gridSize);
52 
+    return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
53 
+  }
54 
+
55 
+  function validateSelection() {
56 
+    if (selectedIndices.length <= 1) return;
57 
+
58 
+    const validSelection = [selectedIndices[0]];
59 
+    const remainingCells = selectedIndices.slice(1);
60 
+
61 
+    while (remainingCells.length > 0) {
62 
+      let foundAdjacent = false;
63 
+
64 
+      for (let i = 0; i < remainingCells.length; i++) {
65 
+        if (validSelection.some(selected => isAdjacent(remainingCells[i], selected))) {
66 
+          validSelection.push(remainingCells[i]);
67 
+          remainingCells.splice(i, 1);
68 
+          foundAdjacent = true;
69 
+          break;
70 
+        }
71 
+      }
72 
+
73 
+      if (!foundAdjacent) {
74 
+        selectedIndices = validSelection;
75 
+        resetGrid();
76 
+        highlightSelection();
77 
+        return;
78 
+      }
79 
+    }
80 
+
81 
+    selectedIndices = validSelection;
82 
+    highlightSelection();
83 
+  }
84 
+
85 
+  function resetGrid() {
86 
+    gridContainer.querySelectorAll('.grid-cell').forEach(cell => cell.classList.remove('selected'));
87 
+  }
88 
+
89 
+  function highlightSelection() {
90 
+    selectedIndices.forEach(index => {
91 
+      gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
92 
+    });
93 
+  }
94 
+
95 
+  function saveSelection() {
96 
+    const gridDataInput = document.getElementById(gridContainer.dataset.fieldId);
97 
+    if (gridDataInput) {
98 
+      gridDataInput.value = JSON.stringify(selectedIndices);
99 
+    }
100 
+  }
101 
+});