WebDev
/
VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refacto(frontend): added and used ReadOnlyService

This commit is contained in:
Florent Chehab 2020-05-02 21:35:08 +02:00
parent 67fd33c66b
commit 9933930a73
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
4 changed files with 84 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/js/main.js
View File

@ -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

60
src/js/services/ReadOnlyService.js Normal file
View File

@ -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();

3
src/js/shortcutFunctions.js
View File

@ -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();
}
}

43
src/js/whiteboard.js
View File

@ -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('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
}
},
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"];