wip - client adjustments for chrome

This commit is contained in:
Andrea 2024-05-18 18:24:06 +02:00
parent 41373dfcfa
commit d9a792aef0
2 changed files with 53 additions and 25 deletions

View File

@ -1,3 +1,9 @@
var draggingData = {
id: 0,
roomTypeId: 0,
parentRoomId: 0
}
function initObjects (){ function initObjects (){
draggables = document.querySelectorAll("div.grid.people div.edit-drag"); draggables = document.querySelectorAll("div.grid.people div.edit-drag");
rooms = document.querySelectorAll("main.container>div.room"); rooms = document.querySelectorAll("main.container>div.room");
@ -13,47 +19,38 @@ function initObjects (){
}); });
} }
/**
*
* @param {DragEvent} e
*/
function dragStart(e) { function dragStart(e) {
element = e.target; element = e.target;
room = element.closest('div.room') room = element.closest('div.room')
dataToSave = { setData(element.id, element.getAttribute('room-type'), room.id)
id: element.id, e.dataTransfer.effectAllowed = 'move';
type: element.getAttribute('room-type'), setTimeout(()=>toggleRoomSelection(true), 0);
parentId: room.id
}
e.dataTransfer.setData('application/json', JSON.stringify(dataToSave));
toggleRoomSelection(true);
} }
function dragEnd(e) { function dragEnd(e) {
toggleRoomSelection(false); toggleRoomSelection(false);
resetData ();
e.stopPropagation(); e.stopPropagation();
} }
function dragEnter(e) { function dragEnter(e) {
e.preventDefault(); e.preventDefault();
e.target.classList.add('drag-over'); e.target.classList.add('drag-over');
checkDragLocation (decodeData(e), e.target); checkDragLocation (getData(), e.target);
e.stopPropagation(); e.stopPropagation();
} }
function dragOver(e) { function dragOver(e) {
e.preventDefault(); e.preventDefault();
e.target.classList.add('drag-over'); e.target.classList.add('drag-over');
checkDragLocation (decodeData(e), e.target); checkDragLocation (getData(), e.target)
e.stopPropagation(); e.stopPropagation();
} }
/**
* @param {DragEvent} e
* @returns
*/
function decodeData (e) {
const raw = e.dataTransfer.getData('application/json');
console.log(raw);
return JSON.parse(raw);
}
/** /**
* *
* @param {Element} target * @param {Element} target
@ -62,10 +59,12 @@ function checkDragLocation (data, target) {
let toReturn = true; let toReturn = true;
const isInfinite = target.getAttribute("infinite"); const isInfinite = target.getAttribute("infinite");
const maxSizeReached = target.getAttribute("current-size") >= target.getAttribute("room-size"); const maxSizeReached = target.getAttribute("current-size") >= target.getAttribute("room-size");
const roomTypeMismatch = data.type !== target.getAttribute("room-type"); const roomTypeMismatch = data.roomTypeId !== target.getAttribute("room-type");
if (!isInfinite && (maxSizeReached || roomTypeMismatch)) { if (!isInfinite && (maxSizeReached || roomTypeMismatch)) {
target.classList.add('drag-forbidden'); target.classList.add('drag-forbidden');
toReturn = false; toReturn = false;
} else {
target.classList.remove('drag-forbidden');
} }
return toReturn; return toReturn;
} }
@ -78,11 +77,10 @@ function dragLeave(e) {
function drop(e) { function drop(e) {
e.target.classList.remove('drag-over'); e.target.classList.remove('drag-over');
toggleRoomSelection(false); toggleRoomSelection(false);
if (checkDragLocation(decodeData(e), e.target) === true) { if (checkDragLocation(getData(), e.target) === true) {
console.log () const data = getData();
const data = decodeData (e);
let item = document.getElementById (data.id) let item = document.getElementById (data.id)
let oldParent = document.getElementById (data.parentId) let oldParent = document.getElementById (data.parentRoomId)
let newParent = e.target; let newParent = e.target;
let newParentContainer = newParent.querySelector('div.grid.people') let newParentContainer = newParent.querySelector('div.grid.people')
newParentContainer.appendChild (item); newParentContainer.appendChild (item);
@ -100,4 +98,18 @@ function toggleRoomSelection(newStatus) {
}) })
} }
function setData (id, roomType, parentRoomId) {
draggingData.id = id;
draggingData.roomTypeId = roomType;
draggingData.parentRoomId = parentRoomId;
}
function resetData (){
setData(0, 0, 0);
}
function getData () {
return draggingData;
}
initObjects (); initObjects ();

View File

@ -11,7 +11,7 @@ div.grid.people div.edit-drag>div.propic-container {
div.drag-over { div.drag-over {
border-radius: 1rem; border-radius: 1rem;
border: 0.2rem dashed white; border: 0.2rem dashed #000;
} }
div.drag-forbidden { div.drag-forbidden {
@ -21,3 +21,19 @@ div.drag-forbidden {
div.interactless>*{ div.interactless>*{
pointer-events: none; pointer-events: none;
} }
div.room > h4 {
user-select: none;
}
/* Dark theme */
@media only screen and (prefers-color-scheme: dark) {
div.drag-over {
border-radius: 1rem;
border: 0.2rem dashed #fff;
}
div.drag-forbidden {
border-color: #c92121aa;
}
}