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

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

Browse Source
This commit is contained in:
Florent Chehab 2020-05-02 13:09:36 +02:00
parent b0501824cf
commit 8117be3f52
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
4 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/index.html
View File

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

6
src/js/icons.js
View File

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

21
src/js/main.js
View File

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

36
src/js/whiteboard.js
View File

@ -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"];
@ -1029,4 +1057,4 @@ function lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, a) {
return [cm1 * xm1 + c0 * x0 + c1 * x1 + c2 * x2, cm1 * ym1 + c0 * y0 + c1 * y1 + c2 * y2];
}
export default whiteboard;
export default whiteboard;