refactor(Dashboard touch events): fixes the touch event behaviors for the widgets and the dashboard

public/css/components/dashboard.css

@@ -15,6 +15,7 @@
 	height: 100%;
 	width: 100%;
 	background-color:white;
+	position:relative;
 }
 
 .empty-tile-hover:hover {

public/js/components/Dashboard/Item.js

@@ -41,6 +41,8 @@ export default {
 		"item_data",
 		"place",
 		"setup",
+		"dragstate",
+		"resizeOverlay"
 	],
 	computed: {
 		maxHeight(){
@@ -153,7 +155,8 @@ export default {
 			<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 		</div>
 	</div>
-	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="arguments && arguments.className ? arguments.className : ''">
+	<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
+	<div v-show="!dragstate" class="h-100 card border-0">
 		<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
 			<Transition>
 				<span v-if="editMode && !isPinned" drag-action="move" class="col-auto mx-2 px-2 cursor-move"><i class="fa-solid fa-grip-vertical"></i></span>
@@ -221,5 +224,6 @@ export default {
 				</template>
 			</div>
 		</height-transition>
+		</div>
 	</div>`,
 };

public/js/components/Dashboard/Section.js

@@ -209,7 +209,7 @@ export default {
 		});
 	},
 	template: `
-	<h4 v-if="editModeIsActive" class=" mb-0">
+	<h4 v-if="editModeIsActive" class=" mb-2">
 		<i @click="showSectionInformation(name)" class="fa-solid fa-circle-info section-info" ></i>
 		{{sectionNameTranslation()}}:
 	</h4>
@@ -217,10 +217,11 @@ export default {
 		<drop-grid v-model:cols="gridWidth" :items="items" :itemsSetup="computedWidgetsSetup" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
 				<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
-				<div v-else-if="item.blank || (item.widgetid && item.widgetid == draggedItem?.data.widgetid)" :class="{'dashboard-item-overlay':item.resizeOverlay}" class="dashboard-item card overflow-hidden h-100 position-relative draggedItem" ></div>
 				<dashboard-item 
 					v-else
 					:id="item.widget"
+					:dragstate="item.blank || (item.widgetid && item.widgetid == draggedItem?.data.widgetid)"
+					:resizeOverlay="item.resizeOverlay"
 					:widgetID="item.id"
 					:width="item.w"
 					:height="item.h"

public/js/components/Drop/Grid.js

@@ -405,6 +405,7 @@ export default {
 			}
 		},
 		startMove(evt, item) {
+			
 			if (!this.active)
 				return;
 			
@@ -413,14 +414,15 @@ export default {
 			this.grid.h += 1;
 			this.draggedItem = item;
 			this.$emit('draggedItem',item);
-			this.draggedNode = evt.target;
+			
+			this.draggedNode = evt.target.closest(".drop-grid-item");
 			//clones the widget for the drag Image
-			let clone = evt.target.cloneNode(true);
+			let clone = evt.target.closest(".drop-grid-item")?.cloneNode(true);
+			
 			clone.style.zIndex = 5;
 			clone.classList.add("widgetClone");
 			this.$refs.container.appendChild(clone);
 			this.clonedWidget = clone;
-			
 			this.draggedOffset = [item.x - this.x, item.y - this.y];
 			this._dragStart(evt, item);
 		},
@@ -498,9 +500,10 @@ export default {
 			Array.from(document.getElementsByClassName("denied-dragging-animation"))?.forEach(ele => {
 				ele.classList.remove("denied-dragging-animation");
 			})
+			
 			let widgetClones = document.getElementsByClassName("widgetClone");
-			for(let widget of widgetClones){
-				this.$refs.container.removeChild(widget);
+			for (let i=0; i <widgetClones.length; i++){ 
+				this.$refs.container.removeChild(widgetClones[i]);
 			}
 			
 			if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
@@ -614,7 +617,7 @@ export default {
 		<TransitionGroup tag="div">
 			<grid-item
 				ref="gridItems"
-				v-for="(item,index) in ((mode != 1 || mode != 2) && active ? placedItems_withPlaceholders : placedItems)"
+				v-for="(item,index) in ((mode != 1 && mode != 2) && active ? placedItems_withPlaceholders : placedItems)"
 				:key="item.data.id"
 				:item="item"
 				@start-move="startMove"
@@ -623,8 +626,8 @@ export default {
 				@start-resize="startResize"
 				@dragging="dragging"
 				@end-drag="dragCancel"
-				@drop-drag="dragEnd"
-				@touchEvent="updateCursorOnMouseMove"
+				@touch-end="dragEnd();mouseUp();"
+				@touch-start="updateCursorOnMouseMove($event); mouseDown();"
 				class="position-absolute"
 				:active="active"
 				:style="{

public/js/components/Drop/Grid/Item.js

@@ -17,7 +17,8 @@ export default {
 		"endDrag",
 		"dropDrag",
 		"item",
-		"touchEvent"
+		"touchStart",
+		"touchEnd",
 	],
 	data() {
 		return {
@@ -54,16 +55,16 @@ export default {
 		},
 		touchDragEnd(evt) {
 			if (!this.dragging)
-				//return evt.preventDefault();
-                                return;
+				return;
 			this.dragging = false;
-			this.$emit('dropDrag', evt);
+			this.$emit('touchEnd', evt);
 		},
 		touchStart(event){
-			this.$emit('touchEvent', event); 
+			this.$emit('touchStart', event); 
 			this.registerDragAction(event); 
 			this.tryDragStart(event, this.item);
-		}
+		},
+		
 	},
 	template: `
 	<div class="drop-grid-item"
@@ -73,7 +74,7 @@ export default {
 		@touchend="touchDragEnd"
 		@dragstart="tryDragStart($event, item)"
 		@drag="$emit('dragging',$event)"
-		@touchmove="$emit('dragging',$event)"
+		@touchmove.prevent="$emit('dragging',$event)"
 		@dragend="$emit('endDrag', $event)"
 		:draggable="active && !item.placeholder && dragAction != ''">
 		<slot v-bind="item"></slot>