diff --git a/src/js/main.js b/src/js/main.js index 078d78d..96164b4 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -6,6 +6,7 @@ import Picker from "vanilla-picker"; import { dom } from "@fortawesome/fontawesome-svg-core"; import pdfjsLib from "pdfjs-dist/webpack"; import shortcutFunctions from "./shortcutFunctions"; +import ReadOnlyService from "./services/ReadOnlyService"; function main() { @@ -70,7 +71,7 @@ function main() { $(document).ready(function () { // start in readOnly mode - whiteboard.setReadOnly(true); + ReadOnlyService.activateReadOnlyMode(); if (getQueryVariable("webdav") == "true") { $("#uploadWebDavBtn").show(); @@ -81,7 +82,7 @@ function main() { whiteboardId: whiteboardId, username: btoa(myUsername), sendFunction: function (content) { - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; if (content.t === 'cursor') { if (whiteboard.drawFlag) return; } @@ -179,11 +180,11 @@ function main() { }); // view only - $("#whiteboardLockBtn").click(function () { - whiteboard.setReadOnly(false); + $("#whiteboardLockBtn").click(() => { + ReadOnlyService.deactivateReadOnlyMode(); }); - $("#whiteboardUnlockBtn").click(function () { - whiteboard.setReadOnly(true); + $("#whiteboardUnlockBtn").click(() => { + ReadOnlyService.activateReadOnlyMode(); }); $("#whiteboardUnlockBtn").hide(); $("#whiteboardLockBtn").show(); @@ -203,7 +204,7 @@ function main() { // upload image button $("#addImgToCanvasBtn").click(function () { - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; showBasicAlert("Please drag the image into the browser."); }); @@ -368,14 +369,14 @@ function main() { // On thickness slider change $("#whiteboardThicknessSlider").on("input", function () { - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; whiteboard.setStrokeThickness($(this).val()); }); // handle drag&drop var dragCounter = 0; $('#whiteboardContainer').on("dragenter", function (e) { - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; e.preventDefault(); e.stopPropagation(); dragCounter++; @@ -383,7 +384,7 @@ function main() { }); $('#whiteboardContainer').on("dragleave", function (e) { - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; e.preventDefault(); e.stopPropagation(); @@ -394,7 +395,7 @@ function main() { }); $('#whiteboardContainer').on('drop', function (e) { //Handle drop - if (whiteboard.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; if (e.originalEvent.dataTransfer) { if (e.originalEvent.dataTransfer.files.length) { //File from harddisc diff --git a/src/js/services/ReadOnlyService.js b/src/js/services/ReadOnlyService.js new file mode 100644 index 0000000..e52b9bf --- /dev/null +++ b/src/js/services/ReadOnlyService.js @@ -0,0 +1,60 @@ +/** + * Class the handle the read-only logic + */ +class ReadOnlyService { + /** + * @type {boolean} + * @private + */ + _readOnlyActive = true; + + /** + * @type {object} + * @private + */ + _previousToolHtmlElem = null; + + /** + * Activate read-only mode + */ + activateReadOnlyMode() { + this._readOnlyActive = true; + + this._previousToolHtmlElem = $(".whiteboard-tool.active"); + + // switch to mouse tool to prevent the use of the + // other tools + $(".whiteboard-tool[tool=mouse]").click(); + $(".whiteboard-tool").prop("disabled", true); + $(".whiteboard-edit-group > button").prop("disabled", true); + $(".whiteboard-edit-group").addClass("group-disabled"); + $("#whiteboardUnlockBtn").hide(); + $("#whiteboardLockBtn").show(); + } + + /** + * Deactivate read-only mode + */ + deactivateReadOnlyMode() { + this._readOnlyActive = false; + + $(".whiteboard-tool").prop("disabled", false); + $(".whiteboard-edit-group > button").prop("disabled", false); + $(".whiteboard-edit-group").removeClass("group-disabled"); + $("#whiteboardUnlockBtn").show(); + $("#whiteboardLockBtn").hide(); + + // restore previously selected tool + if (this._previousToolHtmlElem) this._previousToolHtmlElem.click(); + } + + /** + * Get the read-only status + * @returns {boolean} + */ + get readOnlyActive() { + return this._readOnlyActive; + } +} + +export default new ReadOnlyService(); \ No newline at end of file diff --git a/src/js/shortcutFunctions.js b/src/js/shortcutFunctions.js index 96f4a4d..aa64cb7 100644 --- a/src/js/shortcutFunctions.js +++ b/src/js/shortcutFunctions.js @@ -1,4 +1,5 @@ import whiteboard from "./whiteboard"; +import ReadOnlyService from "./services/ReadOnlyService"; /** * @param {function} callback @@ -6,7 +7,7 @@ import whiteboard from "./whiteboard"; */ function defineShortcut(callback, readOnlySensitive = true) { return () => { - if (readOnlySensitive && whiteboard.readOnly) return; + if (readOnlySensitive && ReadOnlyService.readOnlyActive) return; callback(); } } diff --git a/src/js/whiteboard.js b/src/js/whiteboard.js index a73d7f3..57bac41 100644 --- a/src/js/whiteboard.js +++ b/src/js/whiteboard.js @@ -2,6 +2,7 @@ import { dom } from "@fortawesome/fontawesome-svg-core"; import {computeDist, getCurrentTimeMs} from "./utils"; import Point from "./classes/Point"; import {POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA, POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA} from "./const"; +import ReadOnlyService from "./services/ReadOnlyService"; const whiteboard = { canvas: null, @@ -43,7 +44,6 @@ const whiteboard = { sendFunction: null, backgroundGridUrl: './images/KtEBa2.png' }, - readOnly: true, lastPointerSentTime: 0, /** * @type Point @@ -109,7 +109,7 @@ const whiteboard = { if (_this.imgDragActive || _this.drawFlag) { return; } - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.drawFlag = true; _this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1; @@ -167,7 +167,7 @@ const whiteboard = { if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) { return; } - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; const currX = (e.offsetX || e.pageX - $(e.target).offset().left); const currY = (e.offsetY || e.pageY - $(e.target).offset().top); @@ -185,7 +185,7 @@ const whiteboard = { _this.mouseOverlay.on("mousemove touchmove", function (e) { e.preventDefault(); - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.triggerMouseMove(e); }); @@ -197,7 +197,7 @@ const whiteboard = { if (_this.imgDragActive) { return; } - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.drawFlag = false; _this.drawId++; _this.ctx.globalCompositeOperation = _this.oldGCO; @@ -294,12 +294,12 @@ const whiteboard = { } _this.mouseOverlay.on("mouseout", function (e) { - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.triggerMouseOut(); }); _this.mouseOverlay.on("mouseover", function (e) { - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.triggerMouseOver(); }); @@ -580,7 +580,7 @@ const whiteboard = { }, clearWhiteboard: function () { var _this = this; - if (_this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; _this.canvas.height = _this.canvas.height; _this.imgContainer.empty(); _this.textContainer.empty(); @@ -793,12 +793,12 @@ const whiteboard = { }); }, undoWhiteboardClick: function () { - if (this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; this.sendFunction({ "t": "undo" }); this.undoWhiteboard(); }, redoWhiteboardClick: function () { - if (this.readOnly) return; + if (ReadOnlyService.readOnlyActive) return; this.sendFunction({ "t": "redo" }); this.redoWhiteboard(); }, @@ -831,29 +831,6 @@ const whiteboard = { this.backgroundGrid.append('
smallest screen participating
'); } }, - setReadOnly: function(what) { - var _this = this; - _this.readOnly = what; - - if (what === true){ - _this.previousToolHtmlElem = $(".whiteboard-tool.active"); - // switch to mouse tool to prevent the use of the - // other tools - $(".whiteboard-tool[tool=mouse]").click(); - $(".whiteboard-tool").prop("disabled", true); - $(".whiteboard-edit-group > button").prop("disabled", true); - $(".whiteboard-edit-group").addClass("group-disabled"); - $("#whiteboardUnlockBtn").hide(); - $("#whiteboardLockBtn").show(); - } else { - $(".whiteboard-tool").prop("disabled", false); - $(".whiteboard-edit-group > button").prop("disabled", false); - $(".whiteboard-edit-group").removeClass("group-disabled"); - $("#whiteboardUnlockBtn").show(); - $("#whiteboardLockBtn").hide(); - if (_this.previousToolHtmlElem) _this.previousToolHtmlElem.click(); - } - }, handleEventsAndData: function (content, isNewData, doneCallback) { var _this = this; var tool = content["t"];