From a0a2ac41bf2fa21b01d4ddcad7308234991a3764 Mon Sep 17 00:00:00 2001 From: SimonGschnell Date: Fri, 11 Apr 2025 12:00:38 +0200 Subject: [PATCH] refactor(Dashboard Grid): updates replace logic when moving widgets and fixes position detection between mousemove and mousedown --- public/js/components/Dashboard/Item.js | 43 ++++++++++++++++++---- public/js/components/Dashboard/Section.js | 25 ++++++++++--- public/js/components/Drop/Grid.js | 44 +++++++++++++++++------ public/js/components/Drop/Grid/Item.js | 5 +++ public/js/composables/GridLogic.js | 41 +++++++++++---------- 5 files changed, 119 insertions(+), 39 deletions(-) diff --git a/public/js/components/Dashboard/Item.js b/public/js/components/Dashboard/Item.js index 33e614531..b7a334b92 100644 --- a/public/js/components/Dashboard/Item.js +++ b/public/js/components/Dashboard/Item.js @@ -40,15 +40,30 @@ export default { "loading", "item_data", "place", + "setup", ], computed: { + maxHeight(){ + return this.setup?.height?.max; + }, + maxWidth(){ + if (Object.prototype.toString.call(this.setup?.width) == "[object Number]"){ + return this.setup?.width; + } + return this.setup?.width?.max; + }, + minHeight() { + return this.setup?.height?.min; + }, + minWidth() { + return this.setup?.width?.min; + }, + isResizeable(){ + return this.maxWidth >1 || this.maxHeight >1; + }, isPinned(){ return this.place?.pinned ? true : false; }, - isResizeable() { - if (!this.widget) return false; - return this.widget.setup.width.max || this.widget.setup.height.max; - }, ready() { return this.component && this.arguments !== null; }, @@ -138,7 +153,7 @@ export default { -
+
@@ -188,8 +203,22 @@ export default { -
- +
+ + +
`, diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js index 44fac5550..eb37009ae 100644 --- a/public/js/components/Dashboard/Section.js +++ b/public/js/components/Dashboard/Section.js @@ -1,4 +1,5 @@ import BsConfirm from "../Bootstrap/Confirm.js"; +import SectionModal from "../Bootstrap/Alert.js"; import DropGrid from '../Drop/Grid.js' import DashboardItem from "./Item.js"; import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js"; @@ -39,6 +40,7 @@ export default { configOpened: false, gridWidth: 1, gridHeight: null, + draggedItem:null, } }, provide() { @@ -50,6 +52,13 @@ export default { } }, computed: { + computedWidgetsSetup(){ + if(!this.widgetsSetup) return {}; + return this.widgetsSetup.reduce((acc, setup)=>{ + acc[setup.widget_id] = setup.setup; + return acc; + },{}) + }, editModeIsActive() { return (this.editMode || this.adminMode) && !this.configOpened }, @@ -81,6 +90,9 @@ export default { }, methods: { + showSectionInformation(){ + SectionModal.popup(`this is the information for the section ${name}`); + }, handleConfigOpened() { this.configOpened = true }, @@ -173,12 +185,17 @@ export default { }); }, template: ` +

+ + {{name}}: +

- + diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js index b69973294..b73cca9ef 100644 --- a/public/js/components/Drop/Grid.js +++ b/public/js/components/Drop/Grid.js @@ -6,6 +6,7 @@ import GridLogic from '../../composables/GridLogic.js'; const MODE_IDLE = 0; const MODE_MOVE = 1; const MODE_RESIZE = 2; +const MODE_MOUSE_DOWN = 3; export default { name: 'Grid', @@ -29,6 +30,7 @@ export default { "rearrangeItems", "newItem", "gridHeight", + "draggedItem", ], data() { return { @@ -45,7 +47,6 @@ export default { draggedOffset: [0,0], draggedItem: null, draggedNode: null, - draggedItemIcon: null, additionalRow: null, reorderedItems:[], clonedWidget:null, @@ -377,11 +378,13 @@ export default { return; this.mode = MODE_MOVE; + this.draggedItem = item; + this.$emit('draggedItem',item); this.draggedNode = evt.target; //clones the widget for the drag Image let clone = evt.target.cloneNode(true); - clone.style.zIndex = 20; + clone.style.zIndex = 5; clone.classList.add("widgetClone"); this.$refs.container.appendChild(clone); this.clonedWidget = clone; @@ -400,6 +403,7 @@ export default { if (!this.active) return this.dragCancel(); + this.checkPinnedWidgetAnimation(); if (this.updateCursor(evt)) { switch(this.mode) { case MODE_MOVE: { @@ -442,14 +446,9 @@ export default { this.positionUpdates = null; this.draggedOffset = [0,0], this.draggedItem = null; + this.$emit('draggedItem',null); this.draggedNode = null; - if(this.draggedItemIcon){ - this.draggedItemIcon.style.top = '-999px'; - this.draggedItemIcon.style.left = '-999px'; - this.draggedItemIcon = null; - } - }, dragEnd() { let widgetClones = document.getElementsByClassName("widgetClone"); @@ -486,11 +485,33 @@ export default { this.$emit('newItem', this.x, this.y); }, updateCursorOnMouseMove(evt){ - if(this.mode == MODE_IDLE) + if(this.mode == MODE_IDLE){ this.updateCursor(evt); - } + } + }, + checkPinnedWidgetAnimation(){ + let itemAtPosition = this.items.filter(item => item.x == this.x && item.y == this.y).pop(); + if (itemAtPosition && itemAtPosition.place[this.cols] && itemAtPosition.place[this.cols].pinned) { + let pinnedWidget = document.getElementById(itemAtPosition.widgetid); + let test = pinnedWidget.querySelector("[pinned='true']"); + if (!test.classList.contains("denied-dragging-animation")) { + test.classList.add("denied-dragging-animation"); + } + } else { + Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => { + ele.classList.remove("denied-dragging-animation"); + }) + } + }, + mouseDown(){ + this.mode = MODE_MOUSE_DOWN; + }, + mouseUp() { + this.mode = MODE_IDLE; + }, }, template: ` +

{{x}}-{{y}}