blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Dashboard touch events): allows to scroll on mobile over widgets, fixes dragging bug on mobile

Browse Source
This commit is contained in:
SimonGschnell
2025-05-23 11:33:58 +02:00
parent 4a10faeb25
commit ad8963e5b5
2 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/components/Drop/Grid.js
+10 -19
View File
@@ -132,15 +132,7 @@ export default {
return this.grid ? (this.grid.h+1) : 1;
}
return this.grid ? this.grid.h : 1;
/* if ((this.mode == MODE_MOVE || this.mode == MODE_RESIZE) && this.dragGrid){
return this.dragGrid.h;
}
if (this.mode == MODE_IDLE) {
if (this.additionalRowComputed) {
return this.grid ? (this.grid.h+1) : 1;
}
}
return this.grid ? this.grid.h : 1; */
},
gridStyle() {
const addH = this.active ? this.marginForExtraRow : 0;
@@ -370,9 +362,8 @@ export default {
/* if (this.mode == MODE_IDLE) {
this.x = -1;
this.y = -1;
this.additionalRowComputed = false;
} */
} */
},
updateCursor(evt) {
if (!this.active) {
@@ -381,17 +372,17 @@ export default {
}
const addH = this.active ? this.marginForExtraRow : 0;
const rect = this.$refs.container.getBoundingClientRect();
if (!evt.clientX && !evt.clientY && evt.touches) {
if (!evt.clientX && !evt.clientY && evt.touches){
evt.clientX = evt.touches[0].clientX;
evt.clientY = evt.touches[0].clientY;
}
this.clientX = (evt.clientX - rect.left);
this.clientY = (evt.clientY - rect.top);
const gridX = Math.floor(this.cols * (evt.clientX - rect.left) / this.$refs.container.clientWidth);
const gridY = Math.floor((this.rows + addH) * (evt.clientY - rect.top) / this.$refs.container.clientHeight);
if (this.x == gridX && this.y == gridY)
return false;
@@ -414,8 +405,8 @@ export default {
this.mode = MODE_MOVE;
this.grid.h += 1;
this.draggedItem = item;
this.$emit('draggedItem',item);
this.draggedNode = evt.target.closest(".drop-grid-item");
@@ -437,13 +428,13 @@ export default {
this._dragStart(evt);
},
dragOver(evt) {
if ((this.y + 1) > this.grid?.h && this.mode == MODE_MOVE) {
this.positionUpdates = this.positionUpdates.filter(item => {
if ((this.y + 1) > this.rows && this.mode == MODE_MOVE) {
this.positionUpdates = this.positionUpdates?.filter(item => {
return item.widgetid == this.draggedItem.data.widgetid;
})
this.dragEnd();
this.dragCancel();
}
}
if (!this.active)
return this.dragCancel();
this.checkPinnedWidgetAnimation();
@@ -613,7 +604,7 @@ export default {
ref="container"
class="drop-grid position-relative h-0"
:style="gridStyle"
@touchmove.prevent="dragOver"
@touchmove="dragOver"
@touchend="dragCancel"
@dragover.prevent="dragOver"
@drop="dragEnd"
public/js/components/Drop/Grid/Item.js
+10 -4
View File
@@ -64,19 +64,25 @@ export default {
this.registerDragAction(event);
this.tryDragStart(event, this.item);
},
touchMove(event){
if(this.dragging){
event.preventDefault();
this.$emit('dragging', event);
}
}
},
template: `
<div class="drop-grid-item"
@mousedown="registerDragAction"
@mouseup="$emit('mouseUp', $event)"
@touchstart.prevent="touchStart"
@touchstart="touchStart"
@touchend="touchDragEnd"
@dragstart="tryDragStart($event, item)"
@drag="$emit('dragging',$event)"
@touchmove.prevent="$emit('dragging',$event)"
@dragend="$emit('endDrag', $event)"
:draggable="active && !item.placeholder && dragAction != ''">
@touchmove="touchMove"
@dragend="$emit('endDrag', $event); dragging = false"
:draggable="active && !item.placeholder && dragging">
<slot v-bind="item"></slot>
</div>`
}