From d421b1ccb81bf5f5c0adf343e0458ad3895b6c22 Mon Sep 17 00:00:00 2001 From: chfhtw Date: Mon, 30 Mar 2026 09:29:05 +0200 Subject: [PATCH] cleanup dropgrid code --- public/js/components/Drop/Grid.js | 145 ++++++++++--------------- public/js/components/Drop/Grid/Item.js | 39 +++---- 2 files changed, 74 insertions(+), 110 deletions(-) diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js index a7bea64e3..c4720781d 100644 --- a/public/js/components/Drop/Grid.js +++ b/public/js/components/Drop/Grid.js @@ -1,5 +1,3 @@ -// TODO(chris): Comments - import GridItem from './Grid/Item.js'; import GridLogic from '../../composables/GridLogic.js'; @@ -13,6 +11,12 @@ export default { components: { GridItem, }, + inject: { + sectionName: { + type: String, + default: '', + } + }, props: { cols: Number, items: Array, @@ -26,7 +30,7 @@ export default { type: Number, default: 0 }, - additionalRow:{ + additionalRow: { type: Boolean, default: false, } @@ -50,18 +54,12 @@ export default { permUpdates: [], positionUpdates: null, fixedPositionUpdates: null, - draggedOffset: [0,0], + draggedOffset: [0, 0], draggedItem: null, draggedNode: null, reorderedItems:[], clonedWidget:null, - } - }, - inject:{ - sectionName: { - type: String, - default: '', - }, + }; }, computed: { additionalRowComputed: { @@ -86,7 +84,7 @@ export default { }); return items }, - items_placeholders(){ + items_placeholders() { let placeholders = []; let col_max = this.cols; let rows_max = this.rows; @@ -133,7 +131,6 @@ export default { return this.grid ? (this.grid.h+1) : 1; } return this.grid ? this.grid.h : 1; - }, gridStyle() { const addH = this.active ? this.marginForExtraRow : 0; @@ -218,14 +215,12 @@ export default { return false; return this.grid.isFreeSlot(this.x, this.y); }, - widgetSetup(){ - if (!this.widgetsSetup) - return; - return this.widgetsSetup.reduce((acc, ele) => { - acc[ele.widget_id] =ele; - return acc; - } ,{}); - }, + currentItems() { + if (this.mode != 1 && this.mode != 2 && this.active) + return this.placedItems_withPlaceholders; + + return this.placedItems; + } }, watch: { active(active) { @@ -256,22 +251,22 @@ export default { } }, methods: { - needsReordering(item){ + needsReordering(item) { if (!item?.data?.place[this.cols]){ return true; } return false; }, - toggleDraggedItemOverlay(condition){ - if(!this.draggedNode) + toggleDraggedItemOverlay(condition) { + if (!this.draggedNode) return; - if(condition){ + if (condition) { this.draggedNode.firstElementChild.classList.add("dashboard-item-overlay"); - }else{ + } else { this.draggedNode.firstElementChild.classList.remove("dashboard-item-overlay"); } }, - dragging(event){ + dragging(event) { if(this.mode == MODE_MOVE){ this.toggleDraggedItemOverlay(true); @@ -313,7 +308,7 @@ export default { sortedItems.forEach(item => { let freeSlots = this.grid.getFreeSlots(); - if(this.needsReordering(item)){ + if (this.needsReordering(item)) { let firstFreeSlot = freeSlots.shift(); if (!firstFreeSlot) { item.x = 0; @@ -354,7 +349,6 @@ export default { return result; }, convertGridResultToUpdate(input, output, baseArray) { - if (!input) return; if (!baseArray) @@ -374,13 +368,6 @@ export default { output[item.index] = result; }); }, - mouseLeave() { - /* if (this.mode == MODE_IDLE) { - this.x = -1; - this.y = -1; - - } */ - }, updateCursor(evt) { if (!this.active) { this.x = this.y = -1; @@ -415,7 +402,6 @@ export default { } }, startMove(evt, item) { - if (!this.active) return; @@ -458,7 +444,7 @@ export default { if (!this.active) return this.dragCancel(); this.checkPinnedWidgetAnimation(); - if(this.mode == MODE_RESIZE){ + if (this.mode == MODE_RESIZE) { this.checkWidgetSizeLimitAnimation(); } if (this.updateCursor(evt)) { @@ -505,7 +491,6 @@ export default { this.draggedItem = null; this.$emit('draggedItem',null); this.draggedNode = null; - }, dragEnd() { this.removeWidgetClones(); @@ -554,14 +539,14 @@ export default { this.additionalRowComputed = false; this.$emit('newItem', this.x, this.y); }, - updateCursorOnMouseMove(evt){ - if(this.mode == MODE_IDLE){ + updateCursorOnMouseMove(evt) { + if(this.mode == MODE_IDLE) { this.updateCursor(evt); } }, - checkPinnedWidgetAnimation(){ - let itemAtPosition=[]; - switch(this.mode){ + checkPinnedWidgetAnimation() { + let itemAtPosition = []; + switch (this.mode) { case MODE_RESIZE: for (let x = this.draggedItem.x; x <= this.x; x++) { for (let y = this.draggedItem.y; y <= this.y; y++) { @@ -580,9 +565,9 @@ export default { Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => { ele.classList.remove("denied-dragging-animation"); - }) + }); - itemAtPosition.forEach(item=>{ + itemAtPosition.forEach(item => { if (item.place[this.cols] && item.place[this.cols].pinned) { let pinnedWidget = document.getElementById(item.widgetid); let pinNode = pinnedWidget.querySelector("[pinned='true']"); @@ -590,10 +575,9 @@ export default { pinNode.classList.add("denied-dragging-animation"); } } - }) + }); }, checkWidgetSizeLimitAnimation() { - let draggedItemSetup = this.itemsSetup[this.draggedItem.data.widget]; let draggedItemMaxWidth = draggedItemSetup.width.max ?? draggedItemSetup.width; let draggedItemMinWidth = draggedItemSetup.width.min ?? draggedItemSetup.width; @@ -603,7 +587,7 @@ export default { let width_after_resize = this.x - this.draggedItem.x + 1; let height_after_resize = this.y - this.draggedItem.y + 1; - if( + if ( (width_after_resize > 0 && (width_after_resize > draggedItemMaxWidth || width_after_resize < draggedItemMinWidth) ) @@ -611,26 +595,26 @@ export default { (height_after_resize > 0 && (height_after_resize > draggedItemMaxHeight || height_after_resize < draggedItemMinHeight) ) - ){ + ) { draggedItemNode.classList.add("border-danger"); - }else{ + } else { draggedItemNode.classList.remove("border-danger"); } }, - removeWidgetClones(){ + removeWidgetClones() { let widgetClones = Array.from(document.getElementsByClassName("widgetClone")); for (let i = 0; i < widgetClones.length; i++) { this.$refs.container.removeChild(widgetClones[i]); } }, - mouseDown(){ + mouseDown() { this.mode = MODE_MOUSE_DOWN; }, mouseUp() { this.mode = MODE_IDLE; }, }, - template: ` + template: /* html */` ` } - -/* -OLD VERSION - ON HOVER -
- -
-*/ \ No newline at end of file diff --git a/public/js/components/Drop/Grid/Item.js b/public/js/components/Drop/Grid/Item.js index bd256a1fb..49f2bbbcf 100644 --- a/public/js/components/Drop/Grid/Item.js +++ b/public/js/components/Drop/Grid/Item.js @@ -1,9 +1,5 @@ export default { name:'GridItem', - components: { - }, - inject: { - }, props: { item: Object, active: Boolean @@ -15,18 +11,14 @@ export default { "startResize", "dragging", "endDrag", - "dropDrag", - "item", "touchStart", - "touchEnd", + "touchEnd" ], data() { return { dragAction: '', dragging: false - } - }, - computed: { + }; }, methods: { registerDragAction(evt) { @@ -42,16 +34,15 @@ export default { } } }, - tryDragStart(evt, item) { + tryDragStart(evt) { let dragAction = this.dragAction || evt.target.getAttribute('drag-action'); if (dragAction) { this.dragging = true; if (dragAction == 'move') - return this.$emit('startMove', evt, item); + return this.$emit('startMove', evt, this.item); else if (dragAction == 'resize') - return this.$emit('startResize', evt, item); + return this.$emit('startResize', evt, this.item); } - //evt.preventDefault(); }, touchDragEnd(evt) { if (!this.dragging) @@ -59,30 +50,32 @@ export default { this.dragging = false; this.$emit('touchEnd', evt); }, - touchStart(event){ + touchStart(event) { this.$emit('touchStart', event); this.registerDragAction(event); - this.tryDragStart(event, this.item); + this.tryDragStart(event); }, - touchMove(event){ - if(this.dragging){ + touchMove(event) { + if (this.dragging){ event.preventDefault(); this.$emit('dragging', event); } } }, - template: ` -
+ >
` }