1 |
|
-document.addEventListener("DOMContentLoaded",()=>{const gridContainer=document.querySelector(".grid-container");if(!gridContainer)return;const gridRows=parseInt(gridContainer.dataset.rows)||1;const gridCols=parseInt(gridContainer.dataset.cols)||6;let selectedIndices=[];const fragment=document.createDocumentFragment();for(let i=0;i<gridRows*gridCols;i++){const gridItem=document.createElement("div");gridItem.classList.add("grid-cell");gridItem.dataset.index=i;gridItem.addEventListener("click",()=>toggleCell(i));fragment.appendChild(gridItem)}gridContainer.appendChild(fragment);function toggleCell(index){if(selectedIndices.includes(index)){removeRowOrColumn(index)}else{selectedIndices.push(index);fillSelection()}updateGrid();saveSelection()}function removeRowOrColumn(index){const row=Math.floor(index/gridCols);const col=index%gridCols;if(col===0){selectedIndices=selectedIndices.filter(cell=>{const cellRow=Math.floor(cell/gridCols);return cellRow<row})}else{selectedIndices=selectedIndices.filter(cell=>{const cellCol=cell%gridCols;return cellCol!==col});adjustRectangleAfterColumnRemoval()}}function adjustRectangleAfterColumnRemoval(){if(selectedIndices.length===0)return;const firstCol=Math.min(...selectedIndices.map(cell=>cell%gridCols));const lastCol=Math.max(...selectedIndices.map(cell=>cell%gridCols));for(let col=firstCol;col<=lastCol;col++){const isColumnEmpty=!selectedIndices.some(cell=>cell%gridCols===col);if(isColumnEmpty){selectedIndices=selectedIndices.filter(cell=>cell%gridCols<col);break}}}function fillSelection(){if(selectedIndices.length===0)return;const firstRow=Math.min(...selectedIndices.map(cell=>Math.floor(cell/gridCols)));const lastRow=Math.max(...selectedIndices.map(cell=>Math.floor(cell/gridCols)));const firstCol=Math.min(...selectedIndices.map(cell=>cell%gridCols));const lastCol=Math.max(...selectedIndices.map(cell=>cell%gridCols));const newSelection=[];for(let row=firstRow;row<=lastRow;row++){for(let col=firstCol;col<=lastCol;col++){const cellIndex=row*gridCols+col;newSelection.push(cellIndex)}}selectedIndices=newSelection}function updateGrid(){gridContainer.querySelectorAll(".grid-cell").forEach(cell=>{cell.classList.remove("selected")});selectedIndices.forEach(index=>{gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add("selected")})}function saveSelection(){const gridDataInput=document.getElementById("grid-data");if(gridDataInput){gridDataInput.value=JSON.stringify(selectedIndices)}}});
|
|
2 |
+function init(){const gridContainers=document.querySelectorAll(".vr--grid-pos-container");if(!gridContainers.length)return;for(const gridContainer of gridContainers){gridContainer.gridRows=parseInt(gridContainer.dataset.rows)||1;gridContainer.gridCols=parseInt(gridContainer.dataset.cols)||6;gridContainer.dataField=document.getElementById(gridContainer.dataset.fieldId);gridContainer.selectedIndices=gridContainer.selectedIndices||[];const fragment=document.createDocumentFragment();for(let i=0;i<gridContainer.gridRows*gridContainer.gridCols;i++){const gridItem=document.createElement("div");gridItem.classList.add("grid-cell");gridItem.dataset.index=i;gridItem.addEventListener("click",()=>toggleCell(gridContainer,i));fragment.appendChild(gridItem)}gridContainer.appendChild(fragment);loadSelection(gridContainer)}function toggleCell(gridContainer,index){if(gridContainer.selectedIndices.includes(index)){removeRowOrColumn(gridContainer,index)}else{gridContainer.selectedIndices.push(index);fillSelection(gridContainer)}updateGrid(gridContainer);saveSelection(gridContainer)}function removeRowOrColumn(gridContainer,index){const row=Math.floor(index/gridContainer.gridCols);const col=index%gridContainer.gridCols;if(col===0){gridContainer.selectedIndices=gridContainer.selectedIndices.filter(cell=>{const cellRow=Math.floor(cell/gridContainer.gridCols);return cellRow<row})}else{gridContainer.selectedIndices=gridContainer.selectedIndices.filter(cell=>{const cellCol=cell%gridContainer.gridCols;return cellCol!==col});adjustRectangleAfterColumnRemoval(gridContainer)}}function adjustRectangleAfterColumnRemoval(gridContainer){if(gridContainer.selectedIndices.length===0)return;const firstCol=Math.min(...gridContainer.selectedIndices.map(cell=>cell%gridContainer.gridCols));const lastCol=Math.max(...gridContainer.selectedIndices.map(cell=>cell%gridContainer.gridCols));for(let col=firstCol;col<=lastCol;col++){const isColumnEmpty=!gridContainer.selectedIndices.some(cell=>cell%gridContainer.gridCols===col);if(isColumnEmpty){gridContainer.selectedIndices=gridContainer.selectedIndices.filter(cell=>cell%gridContainer.gridCols<col);break}}}function fillSelection(gridContainer){if(gridContainer.selectedIndices.length===0)return;const firstRow=Math.min(...gridContainer.selectedIndices.map(cell=>Math.floor(cell/gridContainer.gridCols)));const lastRow=Math.max(...gridContainer.selectedIndices.map(cell=>Math.floor(cell/gridContainer.gridCols)));const firstCol=Math.min(...gridContainer.selectedIndices.map(cell=>cell%gridContainer.gridCols));const lastCol=Math.max(...gridContainer.selectedIndices.map(cell=>cell%gridContainer.gridCols));const newSelection=[];for(let row=firstRow;row<=lastRow;row++){for(let col=firstCol;col<=lastCol;col++){const cellIndex=row*gridContainer.gridCols+col;newSelection.push(cellIndex)}}gridContainer.selectedIndices=newSelection}function updateGrid(gridContainer){gridContainer.querySelectorAll(".grid-cell").forEach(cell=>{cell.classList.remove("selected")});gridContainer.selectedIndices.forEach(index=>{gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add("selected")})}function saveSelection(gridContainer){const gridDataInput=gridContainer.dataField;if(gridDataInput){gridDataInput.value=JSON.stringify(selectedIndices)}}function loadSelection(gridContainer){const gridDataInput=gridContainer.dataField;if(gridDataInput){selectedIndices=JSON.parse(gridDataInput.value);updateGrid(gridContainer)}}}document.addEventListener("DOMContentLoaded",()=>{init()});document.addEventListener("turbo:render",()=>{init()});
|