Makeroom wizard #27

Merged
stranck merged 15 commits from drew-dev into stranck-dev 2024-05-20 10:32:09 +00:00
2 changed files with 53 additions and 25 deletions
Showing only changes of commit d9a792aef0 - Show all commits

View File

@ -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 ();

View File

@ -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 {
@ -21,3 +21,19 @@ 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;
}
}