Makeroom wizard #27
|
@ -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 ();
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue