MoveablePopups improved

This commit is contained in:
Mirco Wittrien 2019-01-16 14:57:02 +01:00
parent 5a4e93ad1c
commit 04de76d081
2 changed files with 47 additions and 53 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,24 +1,20 @@
//META{"name":"MoveablePopups"}*// //META{"name":"MoveablePopups"}*//
class MoveablePopups { class MoveablePopups {
initConstructor () {
}
getName () {return "MoveablePopups";} getName () {return "MoveablePopups";}
getDescription () {return "Adds the feature to move all popups and modals around like on a normal desktop. Ctrl + drag with your left mousebutton to drag element.";} getVersion () {return "1.1.1";}
getVersion () {return "1.1.0";}
getAuthor () {return "DevilBro";} getAuthor () {return "DevilBro";}
getDescription () {return "Adds the feature to move all popups and modals around like on a normal desktop. Ctrl + drag with your left mousebutton to drag element.";}
//legacy //legacy
load () {} load () {}
start () { start () {
var libraryScript = null; var libraryScript = null;
if (typeof BDFDB !== "object" || BDFDB.isLibraryOutdated()) { if (typeof BDFDB !== "object" || typeof BDFDB.isLibraryOutdated !== "function" || BDFDB.isLibraryOutdated()) {
if (typeof BDFDB === "object") BDFDB = "";
libraryScript = document.querySelector('head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]'); libraryScript = document.querySelector('head script[src="https://mwittrien.github.io/BetterDiscordAddons/Plugins/BDFDB.js"]');
if (libraryScript) libraryScript.remove(); if (libraryScript) libraryScript.remove();
libraryScript = document.createElement("script"); libraryScript = document.createElement("script");
@ -27,7 +23,7 @@ class MoveablePopups {
document.head.appendChild(libraryScript); document.head.appendChild(libraryScript);
} }
this.startTimeout = setTimeout(() => {this.initialize();}, 30000); this.startTimeout = setTimeout(() => {this.initialize();}, 30000);
if (typeof BDFDB === "object") this.initialize(); if (typeof BDFDB === "object" && typeof BDFDB.isLibraryOutdated === "function") this.initialize();
else libraryScript.addEventListener("load", () => {this.initialize();}); else libraryScript.addEventListener("load", () => {this.initialize();});
} }
@ -42,7 +38,7 @@ class MoveablePopups {
(change, i) => { (change, i) => {
if (change.addedNodes) { if (change.addedNodes) {
change.addedNodes.forEach((node) => { change.addedNodes.forEach((node) => {
if (node && node.classList && node.classList.length > 0 && node.classList.contains(BDFDB.disCN.popout)) { if (node && BDFDB.containsClass(node, BDFDB.disCN.popout)) {
this.makeMoveable(node); this.makeMoveable(node);
} }
}); });
@ -57,10 +53,10 @@ class MoveablePopups {
(change, i) => { (change, i) => {
if (change.addedNodes) { if (change.addedNodes) {
change.addedNodes.forEach((node) => { change.addedNodes.forEach((node) => {
if (node && node.classList && node.classList.contains(BDFDB.disCN.modal) && !node.querySelector(BDFDB.dotCN.downloadlink)) { if (node && BDFDB.containsClass(node, BDFDB.disCN.modal) && !node.querySelector(BDFDB.dotCN.downloadlink)) {
this.makeMoveable(node.querySelector(BDFDB.dotCN.modalinner)); this.makeMoveable(node.querySelector(BDFDB.dotCN.modalinner));
} }
else if (node && node.tagName && node.querySelector(BDFDB.dotCN.modal) && !node.querySelector(BDFDB.dotCN.downloadlink)) { else if (node.tagName && node.querySelector(BDFDB.dotCN.modal) && !node.querySelector(BDFDB.dotCN.downloadlink)) {
this.makeMoveable(node.querySelector(BDFDB.dotCN.modalinner)); this.makeMoveable(node.querySelector(BDFDB.dotCN.modalinner));
} }
}); });
@ -86,45 +82,43 @@ class MoveablePopups {
// begin of own functions // begin of own functions
makeMoveable (div) { makeMoveable (div) {
$(div) div.removeEventListener("click", div.clickMovablePopups);
.off("mousedown." + this.getName()).off("click." + this.getName()) div.removeEventListener("mousedown", div.mousedownMovablePopups);
.on("click." + this.getName(), (e) => { div.clickMovablePopups = e => {
if (this.dragging) { if (this.dragging) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}) };
.on("mousedown." + this.getName(), (e) => { div.mousedownMovablePopups = e => {
if (e.ctrlKey) { if (!e.ctrlKey) return;
this.dragging = true; div.style.setProperty("position", "fixed", "important");
this.dragging = true;
var disableTextSelectionCSS = ` var rects = div.getBoundingClientRect();
* { var transform = getComputedStyle(div,null).getPropertyValue("transform").replace(/[^0-9,-]/g,"").split(",");
user-select: none !important; var left = rects.left - (transform.length > 4 ? parseFloat(transform[4]) : 0);
}`; var top = rects.top - (transform.length > 4 ? parseFloat(transform[5]) : 0);
var oldX = e.pageX;
BDFDB.appendLocalStyle("disableTextSelection", disableTextSelectionCSS); var oldY = e.pageY;
var left = div.getBoundingClientRect().left; var mouseup = e2 => {
var top = div.getBoundingClientRect().top; BDFDB.removeLocalStyle("disableTextSelection");
var oldX = e.pageX; document.removeEventListener("mouseup", mouseup);
var oldY = e.pageY; document.removeEventListener("mousemove", mousemove);
$(document) setTimeout(() => {this.dragging = false},1);
.off("mouseup." + this.getName()).off("mousemove." + this.getName()) };
.on("mouseup." + this.getName(), () => { var mousemove = e2 => {
BDFDB.removeLocalStyle("disableTextSelection"); left = left - (oldX - e2.pageX);
$(document).off("mouseup." + this.getName()).off("mousemove." + this.getName()); top = top - (oldY - e2.pageY);
setTimeout(() => {this.dragging = false},1); oldX = e2.pageX;
}) oldY = e2.pageY;
.on("mousemove." + this.getName(), (e2) => { div.style.setProperty("left", left + "px", "important");
var newX = e2.pageX; div.style.setProperty("top", top + "px", "important");
var newY = e2.pageY;
left = left - (oldX - newX); };
top = top - (oldY - newY); document.addEventListener("mouseup", mouseup);
oldX = newX; document.addEventListener("mousemove", mousemove);
oldY = newY; };
$(div).offset({"left":left,"top":top}); div.addEventListener("click", div.clickMovablePopups);
}); div.addEventListener("mousedown", div.mousedownMovablePopups);
}
});
} }
} }