elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-25 12:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
steveseguin 2023-04-13 02:21:49 -04:00
parent 7e3c2983f3
commit d4adf75895
1 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
lib.js
View File

@ -2183,92 +2183,93 @@ function makeMiniDraggableElement(elmnt) {
function makeDraggableElement(element) { function makeDraggableElement(element) {
if (session.disableMouseEvents){return;} // this is here for a reason. :P if (session.disableMouseEvents){return;} // this is here for a reason. :P
element.initialX; element.initialX;
element.initialY; element.initialY;
element.currentX; element.currentX;
element.xOffset = 0; element.xOffset = 0;
element.currentY; element.currentY;
element.yOffset = 0; element.yOffset = 0;
element.isDragging = false; element.isDragging = false;
element.dragElement = true; element.dragElement = true;
element.addEventListener('mousedown', dragStart);
element.addEventListener('mousedown', dragStart);
function dragStart(e) { function dragStart(e) {
element.initialX = e.clientX - element.xOffset; element.initialX = e.clientX - element.xOffset;
element.initialY = e.clientY - element.yOffset; element.initialY = e.clientY - element.yOffset;
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd); document.addEventListener('mouseup', dragEnd);
document.addEventListener('onmouseleave', dragEnd); document.addEventListener('onmouseleave', dragEnd);
document.addEventListener('onmouseenter', dragEnd); document.addEventListener('onmouseenter', dragEnd);
element.isDragging = true;
element.isDragging = true;
} }
function dragEnd(e) { function dragEnd(e) {
element.initialX = element.currentX; element.initialX = element.currentX;
element.initialY = element.currentY; element.initialY = element.currentY;
document.removeEventListener('mousemove', drag); document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', dragEnd); document.removeEventListener('mouseup', dragEnd);
document.removeEventListener('onmouseleave', dragEnd); document.removeEventListener('onmouseleave', dragEnd);
document.removeEventListener('onmouseenter', dragEnd); document.removeEventListener('onmouseenter', dragEnd);
element.isDragging = false; element.isDragging = false;
} }
function drag(e) { function drag(e) {
if (element.isDragging) { if (element.isDragging) {
element.currentX = (e.clientX - element.initialX); element.currentX = (e.clientX - element.initialX);
element.currentY = (e.clientY - element.initialY); element.currentY = (e.clientY - element.initialY);
// Get the dimensions of the viewport
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// Get the dimensions of the object // Get the dimensions of the viewport
let elementWidth = element.offsetWidth; let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let elementHeight = element.offsetHeight; let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
// console.log('elementWidth:\n',elementWidth)
// console.log('elementHeight:\n',elementHeight)
// Calculate the boundaries
let maxX = vw - elementWidth;
let maxY = vh - elementHeight;
let minX = 0;
let minY = 0;
// Calculate real boundaries (parent position: fixed issues)
let topOffset = 0;
let leftOffset = 0;
let elementOffset = element;
while (elementOffset) {
topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent;
}
// Adjust the position if it's going beyond the boundaries
let realX = element.currentX + leftOffset;
let realY = element.currentY + topOffset;
if (realX > maxX) { // Get the dimensions of the object
element.currentX = maxX - leftOffset; let elementWidth = element.offsetWidth;
} else if (realX < minX) { let elementHeight = element.offsetHeight;
element.currentX = minX - leftOffset; // console.log('elementWidth:\n',elementWidth)
} // console.log('elementHeight:\n',elementHeight)
if (realY > maxY) { // Calculate the boundaries
element.currentY = maxY - topOffset; let maxX = vw - elementWidth;
} else if (realY < minY) { let maxY = vh - elementHeight;
element.currentY = minY - topOffset; let minX = 0;
} let minY = 0;
// Update the position and offset
element.xOffset = element.currentX; // Calculate real boundaries (parent position: fixed issues)
element.yOffset = element.currentY; let topOffset = 0;
let leftOffset = 0;
element.style.transform = `translate(${element.currentX}px, ${element.currentY}px)`; let elementOffset = element;
while (elementOffset) {
topOffset += elementOffset.offsetTop;
leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent;
}
// Adjust the position if it's going beyond the boundaries
let realX = element.currentX + leftOffset;
let realY = element.currentY + topOffset;
if (realX > maxX) {
element.currentX = maxX - leftOffset;
} else if (realX < minX) {
element.currentX = minX - leftOffset;
}
if (realY > maxY) {
element.currentY = maxY - topOffset;
} else if (realY < minY) {
element.currentY = minY - topOffset;
}
// Update the position and offset
element.xOffset = element.currentX;
element.yOffset = element.currentY;
element.style.transform = `translate(${element.currentX}px, ${element.currentY}px)`;
} }
} }
@ -3537,12 +3538,12 @@ function updateMixer(e=false){
leftOffset += elementOffset.offsetLeft; leftOffset += elementOffset.offsetLeft;
elementOffset = elementOffset.offsetParent; elementOffset = elementOffset.offsetParent;
} }
let realX = controlBar.xOffset + leftOffset; let realX = controlBar.xOffset + leftOffset;
let realY = controlBar.yOffset + topOffset; let realY = controlBar.yOffset + topOffset;
let maxX = vw - controlBar.offsetWidth; let maxX = vw - controlBar.offsetWidth;
let maxY = vh - controlBar.offsetHeight; let maxY = vh - controlBar.offsetHeight;
if (realX > maxX) { if (realX > maxX) {
controlBar.xOffset = maxX - leftOffset; controlBar.xOffset = maxX - leftOffset;
} else if (realX < 0) { } else if (realX < 0) {
@ -3554,7 +3555,7 @@ function updateMixer(e=false){
} else if (realY < 0) { } else if (realY < 0) {
controlBar.yOffset = 0 - topOffset; controlBar.yOffset = 0 - topOffset;
} }
controlBar.style.transform = `translate(${controlBar.xOffset}px, ${controlBar.yOffset}px)`; controlBar.style.transform = `translate(${controlBar.xOffset}px, ${controlBar.yOffset}px)`;
} }