chore(front): remove click events before adding them

* Helps with hot reloading in dev env
* Prevents the same event handlers from being registered twice
* Shouldn't break things
This commit is contained in:
Florent Chehab 2020-06-01 21:40:46 +02:00
parent e7725e30d5
commit a78bb8a0d7
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
2 changed files with 360 additions and 299 deletions

View File

@ -117,15 +117,21 @@ function showBasicAlert(html, newOptions) {
);
alertHtml.find(".htmlcontent").append(html);
$("body").append(alertHtml);
alertHtml.find(".okbtn").click(function () {
if (options.onOkClick) {
options.onOkClick();
}
alertHtml.remove();
});
alertHtml.find(".closeAlert").click(function () {
alertHtml.remove();
});
alertHtml
.find(".okbtn")
.off("click")
.click(function () {
if (options.onOkClick) {
options.onOkClick();
}
alertHtml.remove();
});
alertHtml
.find(".closeAlert")
.off("click")
.click(function () {
alertHtml.remove();
});
if (options.hideAfter) {
setTimeout(function () {
@ -236,272 +242,309 @@ function initWhiteboard() {
});
// whiteboard clear button
$("#whiteboardTrashBtn").click(function () {
$("#whiteboardTrashBtnConfirm").show().focus();
$(this).css({ visibility: "hidden" });
});
$("#whiteboardTrashBtn")
.off("click")
.click(function () {
$("#whiteboardTrashBtnConfirm").show().focus();
$(this).css({ visibility: "hidden" });
});
$("#whiteboardTrashBtnConfirm").mouseout(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
});
$("#whiteboardTrashBtnConfirm").click(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
whiteboard.clearWhiteboard();
});
$("#whiteboardTrashBtnConfirm")
.off("click")
.click(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
whiteboard.clearWhiteboard();
});
// undo button
$("#whiteboardUndoBtn").click(function () {
whiteboard.undoWhiteboardClick();
});
$("#whiteboardUndoBtn")
.off("click")
.click(function () {
whiteboard.undoWhiteboardClick();
});
// redo button
$("#whiteboardRedoBtn").click(function () {
whiteboard.redoWhiteboardClick();
});
$("#whiteboardRedoBtn")
.off("click")
.click(function () {
whiteboard.redoWhiteboardClick();
});
// view only
$("#whiteboardLockBtn").click(() => {
ReadOnlyService.deactivateReadOnlyMode();
});
$("#whiteboardUnlockBtn").click(() => {
ReadOnlyService.activateReadOnlyMode();
});
$("#whiteboardLockBtn")
.off("click")
.click(() => {
ReadOnlyService.deactivateReadOnlyMode();
});
$("#whiteboardUnlockBtn")
.off("click")
.click(() => {
ReadOnlyService.activateReadOnlyMode();
});
$("#whiteboardUnlockBtn").hide();
$("#whiteboardLockBtn").show();
// switch tool
$(".whiteboard-tool").click(function () {
$(".whiteboard-tool").removeClass("active");
$(this).addClass("active");
var activeTool = $(this).attr("tool");
whiteboard.setTool(activeTool);
if (activeTool == "mouse" || activeTool == "recSelect") {
$(".activeToolIcon").empty();
} else {
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
}
});
$(".whiteboard-tool")
.off("click")
.click(function () {
$(".whiteboard-tool").removeClass("active");
$(this).addClass("active");
var activeTool = $(this).attr("tool");
whiteboard.setTool(activeTool);
if (activeTool == "mouse" || activeTool == "recSelect") {
$(".activeToolIcon").empty();
} else {
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
}
});
// upload image button
$("#addImgToCanvasBtn").click(function () {
if (ReadOnlyService.readOnlyActive) return;
showBasicAlert("Please drag the image into the browser.");
});
$("#addImgToCanvasBtn")
.off("click")
.click(function () {
if (ReadOnlyService.readOnlyActive) return;
showBasicAlert("Please drag the image into the browser.");
});
// save image as imgae
$("#saveAsImageBtn").click(function () {
whiteboard.getImageDataBase64(
{
imageFormat: ConfigService.imageDownloadFormat,
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
},
function (imgData) {
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = imgData;
a.download = "whiteboard." + ConfigService.imageDownloadFormat;
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () {
w.close();
}, 100);
}, 0);
}
);
});
// save image to json containing steps
$("#saveAsJSONBtn").click(function () {
var imgData = whiteboard.getImageDataJson();
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" }));
a.download = "whiteboard.json";
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () {
w.close();
}, 100);
}, 0);
});
$("#uploadWebDavBtn").click(function () {
if ($(".webdavUploadBtn").length > 0) {
return;
}
var webdavserver = localStorage.getItem("webdavserver") || "";
var webdavpath = localStorage.getItem("webdavpath") || "/";
var webdavusername = localStorage.getItem("webdavusername") || "";
var webdavpassword = localStorage.getItem("webdavpassword") || "";
var webDavHtml = $(
"<div>" +
"<table>" +
"<tr>" +
"<td>Server URL:</td>" +
'<td><input class="webdavserver" type="text" value="' +
webdavserver +
'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
"<td></td>" +
"</tr>" +
"<tr>" +
"<td>Path:</td>" +
'<td><input class="webdavpath" type="text" placeholder="folder" value="' +
webdavpath +
'"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
"</tr>" +
"<tr>" +
"<td>Username:</td>" +
'<td><input class="webdavusername" type="text" value="' +
webdavusername +
'" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
"<td>Password:</td>" +
'<td><input class="webdavpassword" type="password" value="' +
webdavpassword +
'" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
"</tr>" +
"<tr>" +
"<td></td>" +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
"</tr>" +
"</table>" +
"</div>"
);
webDavHtml.find(".webdavUploadBtn").click(function () {
var webdavserver = webDavHtml.find(".webdavserver").val();
localStorage.setItem("webdavserver", webdavserver);
var webdavpath = webDavHtml.find(".webdavpath").val();
localStorage.setItem("webdavpath", webdavpath);
var webdavusername = webDavHtml.find(".webdavusername").val();
localStorage.setItem("webdavusername", webdavusername);
var webdavpassword = webDavHtml.find(".webdavpassword").val();
localStorage.setItem("webdavpassword", webdavpassword);
$("#saveAsImageBtn")
.off("click")
.click(function () {
whiteboard.getImageDataBase64(
{
imageFormat: ConfigService.imageDownloadFormat,
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
},
function (base64data) {
var webdavaccess = {
webdavserver: webdavserver,
webdavpath: webdavpath,
webdavusername: webdavusername,
webdavpassword: webdavpassword,
};
webDavHtml.find(".loadingWebdavText").show();
webDavHtml.find(".webdavUploadBtn").hide();
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
if (err) {
webDavHtml.find(".loadingWebdavText").hide();
webDavHtml.find(".webdavUploadBtn").show();
} else {
webDavHtml.parents(".basicalert").remove();
}
});
function (imgData) {
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = imgData;
a.download = "whiteboard." + ConfigService.imageDownloadFormat;
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () {
w.close();
}, 100);
}, 0);
}
);
});
showBasicAlert(webDavHtml, {
header: "Save to Webdav",
okBtnText: "cancel",
headercolor: "#0082c9",
// save image to json containing steps
$("#saveAsJSONBtn")
.off("click")
.click(function () {
var imgData = whiteboard.getImageDataJson();
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
setTimeout(function () {
//FireFox seems to require a setTimeout for this to work.
var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob([imgData], { type: "text/json" }));
a.download = "whiteboard.json";
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () {
w.close();
}, 100);
}, 0);
});
// render newly added icons
dom.i2svg();
});
// upload json containing steps
$("#uploadJsonBtn").click(function () {
$("#myFile").click();
});
$("#shareWhiteboardBtn").click(() => {
function urlToClipboard(whiteboardId = null) {
const { protocol, host, pathname, search } = window.location;
const basePath = `${protocol}//${host}${pathname}`;
const getParams = new URLSearchParams(search);
// Clear ursername from get parameters
getParams.delete("username");
if (whiteboardId) {
// override whiteboardId value in URL
getParams.set("whiteboardid", whiteboardId);
$("#uploadWebDavBtn")
.off("click")
.click(function () {
if ($(".webdavUploadBtn").length > 0) {
return;
}
const url = `${basePath}?${getParams.toString()}`;
$("<textarea/>")
.appendTo("body")
.val(url)
.select()
.each(() => {
document.execCommand("copy");
})
.remove();
}
// UI related
// clear message
$("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
$("#shareWhiteboardDialog").toggleClass("displayNone", false);
$("#shareWhiteboardDialogGoBack").click(() => {
$("#shareWhiteboardDialog").toggleClass("displayNone", true);
});
$("#shareWhiteboardDialogCopyReadOnlyLink").click(() => {
urlToClipboard(ConfigService.correspondingReadOnlyWid);
$("#shareWhiteboardDialogMessage")
.toggleClass("displayNone", false)
.text("Read-only link copied to clipboard ✓");
});
$("#shareWhiteboardDialogCopyReadWriteLink")
.toggleClass("displayNone", ConfigService.isReadOnly)
.click(() => {
$("#shareWhiteboardDialogMessage")
.toggleClass("displayNone", false)
.text("Read/write link copied to clipboard ✓");
urlToClipboard();
var webdavserver = localStorage.getItem("webdavserver") || "";
var webdavpath = localStorage.getItem("webdavpath") || "/";
var webdavusername = localStorage.getItem("webdavusername") || "";
var webdavpassword = localStorage.getItem("webdavpassword") || "";
var webDavHtml = $(
"<div>" +
"<table>" +
"<tr>" +
"<td>Server URL:</td>" +
'<td><input class="webdavserver" type="text" value="' +
webdavserver +
'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
"<td></td>" +
"</tr>" +
"<tr>" +
"<td>Path:</td>" +
'<td><input class="webdavpath" type="text" placeholder="folder" value="' +
webdavpath +
'"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
"</tr>" +
"<tr>" +
"<td>Username:</td>" +
'<td><input class="webdavusername" type="text" value="' +
webdavusername +
'" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
"<td>Password:</td>" +
'<td><input class="webdavpassword" type="password" value="' +
webdavpassword +
'" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
"</tr>" +
"<tr>" +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
"</tr>" +
"<tr>" +
"<td></td>" +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
"</tr>" +
"</table>" +
"</div>"
);
webDavHtml
.find(".webdavUploadBtn")
.off("click")
.click(function () {
var webdavserver = webDavHtml.find(".webdavserver").val();
localStorage.setItem("webdavserver", webdavserver);
var webdavpath = webDavHtml.find(".webdavpath").val();
localStorage.setItem("webdavpath", webdavpath);
var webdavusername = webDavHtml.find(".webdavusername").val();
localStorage.setItem("webdavusername", webdavusername);
var webdavpassword = webDavHtml.find(".webdavpassword").val();
localStorage.setItem("webdavpassword", webdavpassword);
whiteboard.getImageDataBase64(
{
imageFormat: ConfigService.imageDownloadFormat,
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
},
function (base64data) {
var webdavaccess = {
webdavserver: webdavserver,
webdavpath: webdavpath,
webdavusername: webdavusername,
webdavpassword: webdavpassword,
};
webDavHtml.find(".loadingWebdavText").show();
webDavHtml.find(".webdavUploadBtn").hide();
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
if (err) {
webDavHtml.find(".loadingWebdavText").hide();
webDavHtml.find(".webdavUploadBtn").show();
} else {
webDavHtml.parents(".basicalert").remove();
}
});
}
);
});
showBasicAlert(webDavHtml, {
header: "Save to Webdav",
okBtnText: "cancel",
headercolor: "#0082c9",
});
});
// render newly added icons
dom.i2svg();
});
$("#displayWhiteboardInfoBtn").click(() => {
InfoService.toggleDisplayInfo();
});
// upload json containing steps
$("#uploadJsonBtn")
.off("click")
.click(function () {
$("#myFile").click();
});
$("#shareWhiteboardBtn")
.off("click")
.click(() => {
function urlToClipboard(whiteboardId = null) {
const { protocol, host, pathname, search } = window.location;
const basePath = `${protocol}//${host}${pathname}`;
const getParams = new URLSearchParams(search);
// Clear ursername from get parameters
getParams.delete("username");
if (whiteboardId) {
// override whiteboardId value in URL
getParams.set("whiteboardid", whiteboardId);
}
const url = `${basePath}?${getParams.toString()}`;
$("<textarea/>")
.appendTo("body")
.val(url)
.select()
.each(() => {
document.execCommand("copy");
})
.remove();
}
// UI related
// clear message
$("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
$("#shareWhiteboardDialog").toggleClass("displayNone", false);
$("#shareWhiteboardDialogGoBack")
.off("click")
.click(() => {
$("#shareWhiteboardDialog").toggleClass("displayNone", true);
});
$("#shareWhiteboardDialogCopyReadOnlyLink")
.off("click")
.click(() => {
urlToClipboard(ConfigService.correspondingReadOnlyWid);
$("#shareWhiteboardDialogMessage")
.toggleClass("displayNone", false)
.text("Read-only link copied to clipboard ✓");
});
$("#shareWhiteboardDialogCopyReadWriteLink")
.toggleClass("displayNone", ConfigService.isReadOnly)
.click(() => {
$("#shareWhiteboardDialogMessage")
.toggleClass("displayNone", false)
.text("Read/write link copied to clipboard ✓");
urlToClipboard();
});
});
$("#displayWhiteboardInfoBtn")
.off("click")
.click(() => {
InfoService.toggleDisplayInfo();
});
var btnsMini = false;
$("#minMaxBtn").click(function () {
if (!btnsMini) {
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
$(this).find("#minBtn").hide();
$(this).find("#maxBtn").show();
} else {
$("#toolbar").find(".btn-group").show();
$(this).find("#minBtn").show();
$(this).find("#maxBtn").hide();
}
btnsMini = !btnsMini;
});
$("#minMaxBtn")
.off("click")
.click(function () {
if (!btnsMini) {
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
$(this).find("#minBtn").hide();
$(this).find("#maxBtn").show();
} else {
$("#toolbar").find(".btn-group").show();
$(this).find("#minBtn").show();
$(this).find("#maxBtn").hide();
}
btnsMini = !btnsMini;
});
// load json to whiteboard
$("#myFile").on("change", function () {
@ -590,12 +633,15 @@ function initWhiteboard() {
showPDFPageAsImage(parseInt($(this).val()));
});
modalDiv.find("button").click(function () {
if (currentDataUrl) {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(currentDataUrl);
}
});
modalDiv
.find("button")
.off("click")
.click(function () {
if (currentDataUrl) {
$(".basicalert").remove();
uploadImgAndAddToWhiteboard(currentDataUrl);
}
});
for (var i = 1; i < pdf.numPages + 1; i++) {
modalDiv

View File

@ -375,27 +375,33 @@ const whiteboard = {
width,
height
);
imgDiv.find(".xCanvasBtn").click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
imgDiv.remove();
dragOutOverlay.remove();
});
imgDiv.find(".addToCanvasBtn").click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
const p = imgDiv.position();
const leftT = Math.round(p.left * 100) / 100;
const topT = Math.round(p.top * 100) / 100;
_this.drawId++;
_this.sendFunction({
t: _this.tool,
d: [left, top, leftT, topT, width, height],
imgDiv
.find(".xCanvasBtn")
.off("click")
.click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
imgDiv.remove();
dragOutOverlay.remove();
});
imgDiv
.find(".addToCanvasBtn")
.off("click")
.click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
const p = imgDiv.position();
const leftT = Math.round(p.left * 100) / 100;
const topT = Math.round(p.top * 100) / 100;
_this.drawId++;
_this.sendFunction({
t: _this.tool,
d: [left, top, leftT, topT, width, height],
});
_this.dragCanvasRectContent(left, top, leftT, topT, width, height);
imgDiv.remove();
dragOutOverlay.remove();
});
_this.dragCanvasRectContent(left, top, leftT, topT, width, height);
imgDiv.remove();
dragOutOverlay.remove();
});
imgDiv.draggable();
_this.svgContainer.find("rect").remove();
}
@ -766,43 +772,49 @@ const whiteboard = {
'<div class="rotationHandle" style="position:absolute; bottom: -30px; left: 0px; width:100%; text-align:center; cursor:ew-resize;"><i class="fa fa-undo"></i></div>' +
"</div>"
);
imgDiv.find(".xCanvasBtn").click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
imgDiv.remove();
_this.setTool(oldTool);
});
imgDiv
.find(".xCanvasBtn")
.off("click")
.click(function () {
_this.imgDragActive = false;
_this.refreshCursorAppearance();
imgDiv.remove();
_this.setTool(oldTool);
});
var rotationAngle = 0;
var recoupLeft = 0;
var recoupTop = 0;
var p = imgDiv.position();
var left = 200;
var top = 200;
imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
var draw = $(this).attr("draw");
_this.imgDragActive = false;
imgDiv
.find(".addToCanvasBtn,.addToBackgroundBtn")
.off("click")
.click(function () {
var draw = $(this).attr("draw");
_this.imgDragActive = false;
var width = imgDiv.width();
var height = imgDiv.height();
var width = imgDiv.width();
var height = imgDiv.height();
if (draw == "1") {
//draw image to canvas
_this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
} else {
//Add image to background
_this.drawImgToBackground(url, width, height, left, top, rotationAngle);
}
_this.sendFunction({
t: "addImgBG",
draw: draw,
url: url,
d: [width, height, left, top, rotationAngle],
if (draw == "1") {
//draw image to canvas
_this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
} else {
//Add image to background
_this.drawImgToBackground(url, width, height, left, top, rotationAngle);
}
_this.sendFunction({
t: "addImgBG",
draw: draw,
url: url,
d: [width, height, left, top, rotationAngle],
});
_this.drawId++;
imgDiv.remove();
_this.refreshCursorAppearance();
_this.setTool(oldTool);
});
_this.drawId++;
imgDiv.remove();
_this.refreshCursorAppearance();
_this.setTool(oldTool);
});
_this.mouseOverlay.append(imgDiv);
imgDiv.draggable({
@ -930,12 +942,15 @@ const whiteboard = {
var text = btoa(unescape(encodeURIComponent($(this).html()))); //Get html and make encode base64 also take care of the charset
_this.sendFunction({ t: "setTextboxText", d: [txId, text] });
});
textBox.find(".removeIcon").click(function (e) {
$("#" + txId).remove();
_this.sendFunction({ t: "removeTextbox", d: [txId] });
e.preventDefault();
return false;
});
textBox
.find(".removeIcon")
.off("click")
.click(function (e) {
$("#" + txId).remove();
_this.sendFunction({ t: "removeTextbox", d: [txId] });
e.preventDefault();
return false;
});
if (newLocalBox) {
textBox.find(".textContent").focus();
}