diff --git a/res/scripts/wizardManager.js b/res/scripts/wizardManager.js index 883e07b..ba0187f 100644 --- a/res/scripts/wizardManager.js +++ b/res/scripts/wizardManager.js @@ -1,3 +1,9 @@ +var draggingData = { + id: 0, + roomTypeId: 0, + parentRoomId: 0 +} + function initObjects (){ draggables = document.querySelectorAll("div.grid.people div.edit-drag"); rooms = document.querySelectorAll("main.container>div.room"); @@ -13,47 +19,38 @@ function initObjects (){ }); } +/** + * + * @param {DragEvent} e + */ function dragStart(e) { element = e.target; room = element.closest('div.room') - dataToSave = { - id: element.id, - type: element.getAttribute('room-type'), - parentId: room.id - } - e.dataTransfer.setData('application/json', JSON.stringify(dataToSave)); - toggleRoomSelection(true); + setData(element.id, element.getAttribute('room-type'), room.id) + e.dataTransfer.effectAllowed = 'move'; + setTimeout(()=>toggleRoomSelection(true), 0); } function dragEnd(e) { toggleRoomSelection(false); + resetData (); e.stopPropagation(); } function dragEnter(e) { e.preventDefault(); e.target.classList.add('drag-over'); - checkDragLocation (decodeData(e), e.target); + checkDragLocation (getData(), e.target); e.stopPropagation(); } function dragOver(e) { e.preventDefault(); e.target.classList.add('drag-over'); - checkDragLocation (decodeData(e), e.target); + checkDragLocation (getData(), e.target) 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 @@ -62,10 +59,12 @@ function checkDragLocation (data, target) { let toReturn = true; const isInfinite = target.getAttribute("infinite"); 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)) { target.classList.add('drag-forbidden'); toReturn = false; + } else { + target.classList.remove('drag-forbidden'); } return toReturn; } @@ -78,11 +77,10 @@ function dragLeave(e) { function drop(e) { e.target.classList.remove('drag-over'); toggleRoomSelection(false); - if (checkDragLocation(decodeData(e), e.target) === true) { - console.log () - const data = decodeData (e); + if (checkDragLocation(getData(), e.target) === true) { + const data = getData(); let item = document.getElementById (data.id) - let oldParent = document.getElementById (data.parentId) + let oldParent = document.getElementById (data.parentRoomId) let newParent = e.target; let newParentContainer = newParent.querySelector('div.grid.people') 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 (); \ No newline at end of file diff --git a/res/styles/wizard.css b/res/styles/wizard.css index 362ed2c..f0e5d98 100644 --- a/res/styles/wizard.css +++ b/res/styles/wizard.css @@ -11,7 +11,7 @@ div.grid.people div.edit-drag>div.propic-container { div.drag-over { border-radius: 1rem; - border: 0.2rem dashed white; + border: 0.2rem dashed #000; } div.drag-forbidden { @@ -20,4 +20,20 @@ div.drag-forbidden { div.interactless>*{ 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; + } } \ No newline at end of file