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