feat(frontend): add read-only mode and default to it

src/index.html

@@ -14,22 +14,28 @@
 	<!---Toolbar -!-->
 	<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
 		<div class="btn-group">
-			<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn">
+			<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn whiteboardEditBtn">
 				<i class="fa fa-trash"></i>
 			</button>
 			<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
-				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn">
+				id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn whiteboardEditBtn">
 				<i class="fa fa-check"></i>
 			</button>
-			<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn">
+			<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn whiteboardEditBtn">
 				<i class="fa fa-undo"></i>
 			</button>
-			<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn">
+			<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn whiteboardEditBtn">
 				<i class="fa fa-redo"></i>
 			</button>
 		</div>
 
 		<div class="btn-group">
+			<button id="whiteboardLockBtn" title="View and Write" type="button" class="whiteboardBtn">
+				<i class="fa fa-lock"></i>
+			</button>
+			<button id="whiteboardUnlockBtn" title="View Only" type="button" class="whiteboardBtn">
+				<i class="fa fa-lock-open"></i>
+			</button>
 			<button tool="mouse" title="Take the mouse" type="button" class="whiteboardTool">
 				<i class="fa fa-mouse-pointer"></i>
 			</button>
@@ -96,14 +102,14 @@
 		</div>
 
 		<div class="btn-group">
-			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn">
+			<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button" class="whiteboardBtn whiteboardEditBtn">
 				<i class="fas fa-image"></i>
 				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
 					class="fas fa-upload"></i>
 			</button>
 
 			<button style="position: relative;" id="uploadJsonBtn" title="Load saved JSON to whiteboard" type="button"
-				class="whiteboardBtn">
+				class="whiteboardBtn whiteboardEditBtn">
 
 				<i class="far fa-file-alt"></i>
 				<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "

src/js/icons.js

@@ -16,6 +16,8 @@ import {
     faAngleRight,
     faSortDown,
     faExpandArrowsAlt,
+    faLock,
+    faLockOpen
 } from "@fortawesome/free-solid-svg-icons";
 import {
     faSquare,
@@ -46,7 +48,9 @@ library.add(
     faCircle,
     faFile,
     faFileAlt,
-    faPlusSquare
+    faPlusSquare,
+    faLock,
+    faLockOpen
 );
 
 dom.i2svg()

src/js/main.js

@@ -68,6 +68,9 @@ function main() {
     });
 
     $(document).ready(function () {
+        // start in readOnly mode
+        whiteboard.setViewOnly(true);
+
         if (getQueryVariable("webdav") == "true") {
             $("#uploadWebDavBtn").show();
         }
@@ -77,6 +80,7 @@ function main() {
             whiteboardId: whiteboardId,
             username: btoa(myUsername),
             sendFunction: function (content) {
+                if (whiteboard.viewOnly) return;
                 if (content.t === 'cursor') {
                     if (whiteboard.drawFlag) return;
                 }
@@ -294,6 +298,16 @@ function main() {
             whiteboard.redoWhiteboardClick();
         });
 
+        // view only
+        $("#whiteboardLockBtn").click(function () {
+            whiteboard.setViewOnly(false);
+        });
+        $("#whiteboardUnlockBtn").click(function () {
+            whiteboard.setViewOnly(true);
+        });
+        $("#whiteboardUnlockBtn").hide();
+        $("#whiteboardLockBtn").show();
+
         // switch tool
         $(".whiteboardTool").click(function () {
             $(".whiteboardTool").removeClass("active");
@@ -309,6 +323,7 @@ function main() {
 
         // upload image button
         $("#addImgToCanvasBtn").click(function () {
+            if (whiteboard.viewOnly) return;
             showBasicAlert("Please drag the image into the browser.");
         });
 
@@ -473,12 +488,14 @@ function main() {
 
         // On thickness slider change
         $("#whiteboardThicknessSlider").on("input", function () {
+            if (whiteboard.viewOnly) return;
             whiteboard.setStrokeThickness($(this).val());
         });
 
         // handle drag&drop
         var dragCounter = 0;
         $('#whiteboardContainer').on("dragenter", function (e) {
+            if (whiteboard.viewOnly) return;
             e.preventDefault();
             e.stopPropagation();
             dragCounter++;
@@ -486,6 +503,8 @@ function main() {
         });
 
         $('#whiteboardContainer').on("dragleave", function (e) {
+            if (whiteboard.viewOnly) return;
+
             e.preventDefault();
             e.stopPropagation();
             dragCounter--;
@@ -495,6 +514,8 @@ function main() {
         });
 
         $('#whiteboardContainer').on('drop', function (e) { //Handle drop
+            if (whiteboard.viewOnly) return;
+
             if (e.originalEvent.dataTransfer) {
                 if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
                     e.preventDefault();

src/js/whiteboard.js

@@ -39,6 +39,7 @@ const whiteboard = {
         sendFunction: null,
         backgroundGridUrl: './images/KtEBa2.png'
     },
+    viewOnly: true,
     lastPointerSentTime: 0,
     lastPointerX: 0,
     lastPointerY: 0,
@@ -102,6 +103,7 @@ const whiteboard = {
             if (_this.imgDragActive || _this.drawFlag) {
                 return;
             }
+            if (_this.viewOnly) return;
 
             _this.drawFlag = true;
             _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
@@ -159,6 +161,7 @@ const whiteboard = {
             if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
                 return;
             }
+            if (_this.viewOnly) return;
 
             var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
             var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
@@ -170,13 +173,14 @@ const whiteboard = {
                     _this.lastPointerSentTime = pointerSentTime;
                     _this.lastPointerX = currX;
                     _this.lastPointerY = currY;
-            _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
+                    _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
                 }
             }
         })
 
         _this.mouseOverlay.on("mousemove touchmove", function (e) {
             e.preventDefault();
+            if (_this.viewOnly) return;
             _this.triggerMouseMove(e);
         });
 
@@ -188,6 +192,7 @@ const whiteboard = {
             if (_this.imgDragActive) {
                 return;
             }
+            if (_this.viewOnly) return;
             _this.drawFlag = false;
             _this.drawId++;
             _this.ctx.globalCompositeOperation = _this.oldGCO;
@@ -284,10 +289,12 @@ const whiteboard = {
         }
 
         _this.mouseOverlay.on("mouseout", function (e) {
+            if (_this.viewOnly) return;
             _this.triggerMouseOut();
         });
 
         _this.mouseOverlay.on("mouseover", function (e) {
+            if (_this.viewOnly) return;
             _this.triggerMouseOver();
         });
 
@@ -404,7 +411,7 @@ const whiteboard = {
                 _this.lastPointerSentTime = pointerSentTime;
                 _this.lastPointerX = currX;
                 _this.lastPointerY = currY;
-        _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
+                _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
             }
         }
     },
@@ -569,6 +576,7 @@ const whiteboard = {
     },
     clearWhiteboard: function () {
         var _this = this;
+        if (_this.viewOnly) return;
         _this.canvas.height = _this.canvas.height;
         _this.imgContainer.empty();
         _this.textContainer.empty();
@@ -667,7 +675,7 @@ const whiteboard = {
                     _this.lastPointerSentTime = pointerSentTime;
                     _this.lastPointerX = currX;
                     _this.lastPointerY = currY;
-            _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
+                    _this.sendFunction({ "t": "cursor", "event": "move", "d": [currX, currY], "username": _this.settings.username });
                 }
             }
         })
@@ -779,10 +787,12 @@ const whiteboard = {
         });
     },
     undoWhiteboardClick: function () {
+        if (this.viewOnly) return;
         this.sendFunction({ "t": "undo" });
         this.undoWhiteboard();
     },
     redoWhiteboardClick: function () {
+        if (this.viewOnly) return;
         this.sendFunction({ "t": "redo" });
         this.redoWhiteboard();
     },
@@ -815,6 +825,24 @@ const whiteboard = {
             this.backgroundGrid.append('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
         }
     },
+    setViewOnly: function(what) {
+        var _this = this;
+        _this.viewOnly = what;
+
+        if (what === true){
+            $(".whiteboardTool[tool=mouse]").click(); // reset tool to prevent use of text
+            $(".whiteboardTool").prop("disabled", true);
+            $(".whiteboardEditBtn").prop("disabled", true);
+            $("#whiteboardUnlockBtn").hide();
+            $("#whiteboardLockBtn").show();
+
+        } else {
+            $(".whiteboardTool").prop("disabled", false);
+            $(".whiteboardEditBtn").prop("disabled", false);
+            $("#whiteboardUnlockBtn").show();
+            $("#whiteboardLockBtn").hide();
+        }
+    },
     handleEventsAndData: function (content, isNewData, doneCallback) {
         var _this = this;
         var tool = content["t"];