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

src/js/main.js

@@ -117,13 +117,19 @@ function showBasicAlert(html, newOptions) {
     );
     alertHtml.find(".htmlcontent").append(html);
     $("body").append(alertHtml);
-    alertHtml.find(".okbtn").click(function () {
+    alertHtml
+        .find(".okbtn")
+        .off("click")
+        .click(function () {
             if (options.onOkClick) {
                 options.onOkClick();
             }
             alertHtml.remove();
         });
-    alertHtml.find(".closeAlert").click(function () {
+    alertHtml
+        .find(".closeAlert")
+        .off("click")
+        .click(function () {
             alertHtml.remove();
         });
 
@@ -236,7 +242,9 @@ function initWhiteboard() {
         });
 
         // whiteboard clear button
-        $("#whiteboardTrashBtn").click(function () {
+        $("#whiteboardTrashBtn")
+            .off("click")
+            .click(function () {
                 $("#whiteboardTrashBtnConfirm").show().focus();
                 $(this).css({ visibility: "hidden" });
             });
@@ -246,34 +254,46 @@ function initWhiteboard() {
             $("#whiteboardTrashBtn").css({ visibility: "inherit" });
         });
 
-        $("#whiteboardTrashBtnConfirm").click(function () {
+        $("#whiteboardTrashBtnConfirm")
+            .off("click")
+            .click(function () {
                 $(this).hide();
                 $("#whiteboardTrashBtn").css({ visibility: "inherit" });
                 whiteboard.clearWhiteboard();
             });
 
         // undo button
-        $("#whiteboardUndoBtn").click(function () {
+        $("#whiteboardUndoBtn")
+            .off("click")
+            .click(function () {
                 whiteboard.undoWhiteboardClick();
             });
 
         // redo button
-        $("#whiteboardRedoBtn").click(function () {
+        $("#whiteboardRedoBtn")
+            .off("click")
+            .click(function () {
                 whiteboard.redoWhiteboardClick();
             });
 
         // view only
-        $("#whiteboardLockBtn").click(() => {
+        $("#whiteboardLockBtn")
+            .off("click")
+            .click(() => {
                 ReadOnlyService.deactivateReadOnlyMode();
             });
-        $("#whiteboardUnlockBtn").click(() => {
+        $("#whiteboardUnlockBtn")
+            .off("click")
+            .click(() => {
                 ReadOnlyService.activateReadOnlyMode();
             });
         $("#whiteboardUnlockBtn").hide();
         $("#whiteboardLockBtn").show();
 
         // switch tool
-        $(".whiteboard-tool").click(function () {
+        $(".whiteboard-tool")
+            .off("click")
+            .click(function () {
                 $(".whiteboard-tool").removeClass("active");
                 $(this).addClass("active");
                 var activeTool = $(this).attr("tool");
@@ -286,13 +306,17 @@ function initWhiteboard() {
             });
 
         // upload image button
-        $("#addImgToCanvasBtn").click(function () {
+        $("#addImgToCanvasBtn")
+            .off("click")
+            .click(function () {
                 if (ReadOnlyService.readOnlyActive) return;
                 showBasicAlert("Please drag the image into the browser.");
             });
 
         // save image as imgae
-        $("#saveAsImageBtn").click(function () {
+        $("#saveAsImageBtn")
+            .off("click")
+            .click(function () {
                 whiteboard.getImageDataBase64(
                     {
                         imageFormat: ConfigService.imageDownloadFormat,
@@ -317,7 +341,9 @@ function initWhiteboard() {
             });
 
         // save image to json containing steps
-        $("#saveAsJSONBtn").click(function () {
+        $("#saveAsJSONBtn")
+            .off("click")
+            .click(function () {
                 var imgData = whiteboard.getImageDataJson();
 
                 var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
@@ -335,7 +361,9 @@ function initWhiteboard() {
                 }, 0);
             });
 
-        $("#uploadWebDavBtn").click(function () {
+        $("#uploadWebDavBtn")
+            .off("click")
+            .click(function () {
                 if ($(".webdavUploadBtn").length > 0) {
                     return;
                 }
@@ -385,7 +413,10 @@ function initWhiteboard() {
                         "</table>" +
                         "</div>"
                 );
-            webDavHtml.find(".webdavUploadBtn").click(function () {
+                webDavHtml
+                    .find(".webdavUploadBtn")
+                    .off("click")
+                    .click(function () {
                         var webdavserver = webDavHtml.find(".webdavserver").val();
                         localStorage.setItem("webdavserver", webdavserver);
                         var webdavpath = webDavHtml.find(".webdavpath").val();
@@ -429,11 +460,15 @@ function initWhiteboard() {
             });
 
         // upload json containing steps
-        $("#uploadJsonBtn").click(function () {
+        $("#uploadJsonBtn")
+            .off("click")
+            .click(function () {
                 $("#myFile").click();
             });
 
-        $("#shareWhiteboardBtn").click(() => {
+        $("#shareWhiteboardBtn")
+            .off("click")
+            .click(() => {
                 function urlToClipboard(whiteboardId = null) {
                     const { protocol, host, pathname, search } = window.location;
                     const basePath = `${protocol}//${host}${pathname}`;
@@ -463,11 +498,15 @@ function initWhiteboard() {
                 $("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
 
                 $("#shareWhiteboardDialog").toggleClass("displayNone", false);
-            $("#shareWhiteboardDialogGoBack").click(() => {
+                $("#shareWhiteboardDialogGoBack")
+                    .off("click")
+                    .click(() => {
                         $("#shareWhiteboardDialog").toggleClass("displayNone", true);
                     });
 
-            $("#shareWhiteboardDialogCopyReadOnlyLink").click(() => {
+                $("#shareWhiteboardDialogCopyReadOnlyLink")
+                    .off("click")
+                    .click(() => {
                         urlToClipboard(ConfigService.correspondingReadOnlyWid);
 
                         $("#shareWhiteboardDialogMessage")
@@ -485,12 +524,16 @@ function initWhiteboard() {
                     });
             });
 
-        $("#displayWhiteboardInfoBtn").click(() => {
+        $("#displayWhiteboardInfoBtn")
+            .off("click")
+            .click(() => {
                 InfoService.toggleDisplayInfo();
             });
 
         var btnsMini = false;
-        $("#minMaxBtn").click(function () {
+        $("#minMaxBtn")
+            .off("click")
+            .click(function () {
                 if (!btnsMini) {
                     $("#toolbar").find(".btn-group:not(.minGroup)").hide();
                     $(this).find("#minBtn").hide();
@@ -590,7 +633,10 @@ function initWhiteboard() {
                                         showPDFPageAsImage(parseInt($(this).val()));
                                     });
 
-                                    modalDiv.find("button").click(function () {
+                                    modalDiv
+                                        .find("button")
+                                        .off("click")
+                                        .click(function () {
                                             if (currentDataUrl) {
                                                 $(".basicalert").remove();
                                                 uploadImgAndAddToWhiteboard(currentDataUrl);

src/js/whiteboard.js

@@ -375,13 +375,19 @@ const whiteboard = {
                     width,
                     height
                 );
-                imgDiv.find(".xCanvasBtn").click(function () {
+                imgDiv
+                    .find(".xCanvasBtn")
+                    .off("click")
+                    .click(function () {
                         _this.imgDragActive = false;
                         _this.refreshCursorAppearance();
                         imgDiv.remove();
                         dragOutOverlay.remove();
                     });
-                imgDiv.find(".addToCanvasBtn").click(function () {
+                imgDiv
+                    .find(".addToCanvasBtn")
+                    .off("click")
+                    .click(function () {
                         _this.imgDragActive = false;
                         _this.refreshCursorAppearance();
                         const p = imgDiv.position();
@@ -766,7 +772,10 @@ 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 () {
+        imgDiv
+            .find(".xCanvasBtn")
+            .off("click")
+            .click(function () {
                 _this.imgDragActive = false;
                 _this.refreshCursorAppearance();
                 imgDiv.remove();
@@ -778,7 +787,10 @@ const whiteboard = {
         var p = imgDiv.position();
         var left = 200;
         var top = 200;
-        imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
+        imgDiv
+            .find(".addToCanvasBtn,.addToBackgroundBtn")
+            .off("click")
+            .click(function () {
                 var draw = $(this).attr("draw");
                 _this.imgDragActive = false;
 
@@ -930,7 +942,10 @@ 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) {
+        textBox
+            .find(".removeIcon")
+            .off("click")
+            .click(function (e) {
                 $("#" + txId).remove();
                 _this.sendFunction({ t: "removeTextbox", d: [txId] });
                 e.preventDefault();