mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
Replaces draggable function
This commit is contained in:
lindenkron
parent
ffc478bed5
commit
d249314f67
205
lib.js
205
lib.js
@ -2168,112 +2168,149 @@ function makeMiniDraggableElement(elmnt) {
|
||||
elmnt.ontouchstart = dragMouseDown;
|
||||
}
|
||||
|
||||
function makeDraggableElement(elmnt, absolute=false) {
|
||||
// function makeDraggableElement(elmnt, absolute=false) {
|
||||
|
||||
if (session.disableMouseEvents){return;}
|
||||
// if (session.disableMouseEvents){return;}
|
||||
|
||||
try {
|
||||
elmnt.dragElement = false;
|
||||
elmnt.style.bottom = "auto";
|
||||
elmnt.style.cursor = "grab";
|
||||
elmnt.stashonmouseup = null;
|
||||
elmnt.stashonmousemove = null;
|
||||
} catch (e) {
|
||||
errorlog(e);
|
||||
return;
|
||||
}
|
||||
var pos1 = 0;
|
||||
var pos2 = 0;
|
||||
var pos3 = 0;
|
||||
var pos4 = 0;
|
||||
var timestamp = false;
|
||||
// try {
|
||||
// elmnt.dragElement = false;
|
||||
// elmnt.style.bottom = "auto";
|
||||
// elmnt.style.cursor = "grab";
|
||||
// elmnt.stashonmouseup = null;
|
||||
// elmnt.stashonmousemove = null;
|
||||
// } catch (e) {
|
||||
// errorlog(e);
|
||||
// return;
|
||||
// }
|
||||
// var pos1 = 0;
|
||||
// var pos2 = 0;
|
||||
// var pos3 = 0;
|
||||
// var pos4 = 0;
|
||||
// var timestamp = false;
|
||||
|
||||
|
||||
var enterEventCount = 0;
|
||||
var leaveEventCount = 0;
|
||||
// var enterEventCount = 0;
|
||||
// var leaveEventCount = 0;
|
||||
|
||||
|
||||
function dragMouseDown(e) {
|
||||
timestamp = Date.now();
|
||||
// function dragMouseDown(e) {
|
||||
// timestamp = Date.now();
|
||||
|
||||
e = e || window.event;
|
||||
e.preventDefault();
|
||||
// e = e || window.event;
|
||||
// e.preventDefault();
|
||||
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
|
||||
//elmnt.stashonmousemove = document.onmousemove;
|
||||
//elmnt.stashonclick = document.onclick;
|
||||
// pos3 = e.clientX;
|
||||
// pos4 = e.clientY;
|
||||
// //elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
|
||||
// //elmnt.stashonmousemove = document.onmousemove;
|
||||
// //elmnt.stashonclick = document.onclick;
|
||||
|
||||
document.onmouseup = function(event){closeDragElement(event, elmnt);};
|
||||
// document.onmouseup = function(event){closeDragElement(event, elmnt);};
|
||||
|
||||
document.onmousemove = function(event){elementDrag(elmnt,event);};
|
||||
// document.onmousemove = function(event){elementDrag(elmnt,event);};
|
||||
|
||||
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
|
||||
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
|
||||
|
||||
elmnt.onmouseleave = function(event){
|
||||
leaveEventCount+=1;
|
||||
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
|
||||
closeDragElement(evt1, ele);}
|
||||
,100, elmnt, event);
|
||||
};
|
||||
elmnt.onmouseenter = function(event){
|
||||
enterEventCount+=1;
|
||||
if (enterEventCount>=leaveEventCount){
|
||||
if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
|
||||
} else {
|
||||
if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
|
||||
clearTimeout(elmnt.stopDragTimeout);
|
||||
elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
|
||||
// elmnt.onmouseleave = function(event){
|
||||
// leaveEventCount+=1;
|
||||
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
|
||||
// closeDragElement(evt1, ele);}
|
||||
// ,100, elmnt, event);
|
||||
// };
|
||||
// elmnt.onmouseenter = function(event){
|
||||
// enterEventCount+=1;
|
||||
// if (enterEventCount>=leaveEventCount){
|
||||
// if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
|
||||
// } else {
|
||||
// if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
|
||||
// clearTimeout(elmnt.stopDragTimeout);
|
||||
// elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
|
||||
|
||||
closeDragElement(evt1, ele);}
|
||||
,100, elmnt, event);
|
||||
}
|
||||
}
|
||||
};
|
||||
// closeDragElement(evt1, ele);}
|
||||
// ,100, elmnt, event);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
}
|
||||
function elementDrag(ele,e) {
|
||||
// }
|
||||
// function elementDrag(ele,e) {
|
||||
|
||||
e = e || window.event;
|
||||
if (("buttons" in e) && (e.buttons!==1)){return;}
|
||||
// e = e || window.event;
|
||||
// if (("buttons" in e) && (e.buttons!==1)){return;}
|
||||
|
||||
e.preventDefault();
|
||||
// e.preventDefault();
|
||||
|
||||
ele.dragElement = true;
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
// ele.dragElement = true;
|
||||
// pos1 = pos3 - e.clientX;
|
||||
// pos2 = pos4 - e.clientY;
|
||||
// pos3 = e.clientX;
|
||||
// pos4 = e.clientY;
|
||||
|
||||
var topDrag = (ele.offsetTop - pos2 );
|
||||
if (absolute){
|
||||
if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
|
||||
topDrag = (-3 + (window.innerHeight - ele.clientHeight));
|
||||
}
|
||||
} else {
|
||||
if (topDrag > -3){
|
||||
topDrag = -3;
|
||||
}
|
||||
}
|
||||
ele.style.top = topDrag + "px";
|
||||
ele.style.left = (ele.offsetLeft - pos1) + "px";
|
||||
// var topDrag = (ele.offsetTop - pos2 );
|
||||
// if (absolute){
|
||||
// if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
|
||||
// topDrag = (-3 + (window.innerHeight - ele.clientHeight));
|
||||
// }
|
||||
// } else {
|
||||
// if (topDrag > -3){
|
||||
// topDrag = -3;
|
||||
// }
|
||||
// }
|
||||
// ele.style.top = topDrag + "px";
|
||||
// ele.style.left = (ele.offsetLeft - pos1) + "px";
|
||||
|
||||
}
|
||||
function closeDragElement(event=false, ele=false) {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null
|
||||
ele.onmouseleave = null;
|
||||
ele.onmouseenter = null;
|
||||
enterEventCount = 0;
|
||||
leaveEventCount = 0;
|
||||
updateMixer();
|
||||
//document.onclick = elmnt.stashonclick;
|
||||
}
|
||||
// }
|
||||
// function closeDragElement(event=false, ele=false) {
|
||||
// document.onmouseup = null;
|
||||
// document.onmousemove = null
|
||||
// ele.onmouseleave = null;
|
||||
// ele.onmouseenter = null;
|
||||
// enterEventCount = 0;
|
||||
// leaveEventCount = 0;
|
||||
// updateMixer();
|
||||
// //document.onclick = elmnt.stashonclick;
|
||||
// }
|
||||
|
||||
elmnt.onmousedown = dragMouseDown;
|
||||
// elmnt.onmousedown = dragMouseDown;
|
||||
// }
|
||||
|
||||
let isDragging = false;
|
||||
let draggable = document.querySelector('#subControlButtons');
|
||||
let initialX;
|
||||
let currentX;
|
||||
let xOffset = 0;
|
||||
let initialY;
|
||||
let currentY;
|
||||
let yOffset = 0;
|
||||
|
||||
draggable.addEventListener('mousedown', dragStart);
|
||||
draggable.addEventListener('mouseup', dragEnd);
|
||||
|
||||
function dragStart(e) {
|
||||
initialX = e.clientX - xOffset;
|
||||
initialY = e.clientY - yOffset;
|
||||
isDragging = true;
|
||||
}
|
||||
|
||||
function dragEnd(e) {
|
||||
initialX = currentX;
|
||||
initialY = currentY;
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', drag);
|
||||
|
||||
function drag(e) {
|
||||
if (isDragging) {
|
||||
currentX = e.clientX - initialX;
|
||||
currentY = e.clientY - initialY;
|
||||
xOffset = currentX;
|
||||
yOffset = currentY;
|
||||
draggable.style.transform = `translate(${currentX}px, ${currentY}px)`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function removeStorage(cname){
|
||||
localStorage.removeItem(cname);
|
||||
}
|
||||
|
||||
2
main.js
2
main.js
@ -408,7 +408,7 @@ async function main(){ // main asyncronous thread; mostly initializes the user s
|
||||
session.audioMeterGuest = false;
|
||||
} else {
|
||||
log("MAKE DRAGGABLE");
|
||||
delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
|
||||
// delayedStartupFuncs.push([makeDraggableElement, document.getElementById("subControlButtons")]);
|
||||
if (SafariVersion && !ChromeVersion){ // if desktop Safari, so macOS, give a note saying it sucks
|
||||
getById("SafariWarning").classList.remove("hidden");
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user