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

feat(frontend): cleaned read-only & style

Browse Source 
* cleaned unsued css classes
* Reorganized buttons based on if they are edit related or not
* meaningful css when locking for better ui experience
* renamed viewOnly to more standard readOnly
This commit is contained in:
Florent Chehab
2020-05-02 15:07:34 +02:00
parent c454a23e71
commit 7ec4ef0df0
4 changed files with 113 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/js/main.js
View File

@@ -69,7 +69,7 @@ function main() {
$(document).ready(function () {
// start in readOnly mode
whiteboard.setViewOnly(true);
whiteboard.setReadOnly(true);
if (getQueryVariable("webdav") == "true") {
$("#uploadWebDavBtn").show();
@@ -80,7 +80,7 @@ function main() {
whiteboardId: whiteboardId,
username: btoa(myUsername),
sendFunction: function (content) {
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
if (content.t === 'cursor') {
if (whiteboard.drawFlag) return;
}
@@ -144,18 +144,18 @@ function main() {
clearWhiteboard: function () { whiteboard.clearWhiteboard(); },
undoStep: function () { whiteboard.undoWhiteboardClick(); },
redoStep: function () { whiteboard.redoWhiteboardClick(); },
setTool_mouse: function () { $(".whiteboardTool[tool=mouse]").click(); },
setTool_recSelect: function () { $(".whiteboardTool[tool=recSelect]").click(); },
setTool_mouse: function () { $(".whiteboard-tool[tool=mouse]").click(); },
setTool_recSelect: function () { $(".whiteboard-tool[tool=recSelect]").click(); },
setTool_pen: function () {
$(".whiteboardTool[tool=pen]").click();
$(".whiteboard-tool[tool=pen]").click();
whiteboard.redrawMouseCursor();
},
setTool_line: function () { $(".whiteboardTool[tool=line]").click(); },
setTool_rect: function () { $(".whiteboardTool[tool=rect]").click(); },
setTool_circle: function () { $(".whiteboardTool[tool=circle]").click(); },
setTool_text: function () { $(".whiteboardTool[tool=text]").click(); },
setTool_line: function () { $(".whiteboard-tool[tool=line]").click(); },
setTool_rect: function () { $(".whiteboard-tool[tool=rect]").click(); },
setTool_circle: function () { $(".whiteboard-tool[tool=circle]").click(); },
setTool_text: function () { $(".whiteboard-tool[tool=text]").click(); },
setTool_eraser: function () {
$(".whiteboardTool[tool=eraser]").click();
$(".whiteboard-tool[tool=eraser]").click();
whiteboard.redrawMouseCursor();
},
thickness_bigger: function () {
@@ -200,21 +200,21 @@ function main() {
},
toggleLineRecCircle: function () {
var activeTool = $(".whiteboardTool.active").attr("tool");
var activeTool = $(".whiteboard-tool.active").attr("tool");
if (activeTool == "line") {
$(".whiteboardTool[tool=rect]").click();
$(".whiteboard-tool[tool=rect]").click();
} else if (activeTool == "rect") {
$(".whiteboardTool[tool=circle]").click();
$(".whiteboard-tool[tool=circle]").click();
} else {
$(".whiteboardTool[tool=line]").click();
$(".whiteboard-tool[tool=line]").click();
}
},
togglePenEraser: function () {
var activeTool = $(".whiteboardTool.active").attr("tool");
var activeTool = $(".whiteboard-tool.active").attr("tool");
if (activeTool == "pen") {
$(".whiteboardTool[tool=eraser]").click();
$(".whiteboard-tool[tool=eraser]").click();
} else {
$(".whiteboardTool[tool=pen]").click();
$(".whiteboard-tool[tool=pen]").click();
}
},
toggleMainColors: function () {
@@ -300,17 +300,17 @@ function main() {
// view only
$("#whiteboardLockBtn").click(function () {
whiteboard.setViewOnly(false);
whiteboard.setReadOnly(false);
});
$("#whiteboardUnlockBtn").click(function () {
whiteboard.setViewOnly(true);
whiteboard.setReadOnly(true);
});
$("#whiteboardUnlockBtn").hide();
$("#whiteboardLockBtn").show();
// switch tool
$(".whiteboardTool").click(function () {
$(".whiteboardTool").removeClass("active");
$(".whiteboard-tool").click(function () {
$(".whiteboard-tool").removeClass("active");
$(this).addClass("active");
var activeTool = $(this).attr("tool");
whiteboard.setTool(activeTool);
@@ -323,7 +323,7 @@ function main() {
// upload image button
$("#addImgToCanvasBtn").click(function () {
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
showBasicAlert("Please drag the image into the browser.");
});
@@ -488,14 +488,14 @@ function main() {
// On thickness slider change
$("#whiteboardThicknessSlider").on("input", function () {
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
whiteboard.setStrokeThickness($(this).val());
});
// handle drag&drop
var dragCounter = 0;
$('#whiteboardContainer').on("dragenter", function (e) {
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
e.preventDefault();
e.stopPropagation();
dragCounter++;
@@ -503,7 +503,7 @@ function main() {
});
$('#whiteboardContainer').on("dragleave", function (e) {
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
e.preventDefault();
e.stopPropagation();
@@ -514,7 +514,7 @@ function main() {
});
$('#whiteboardContainer').on('drop', function (e) { //Handle drop
if (whiteboard.viewOnly) return;
if (whiteboard.readOnly) return;
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) { //File from harddisc

42
src/js/whiteboard.js
View File

@@ -4,6 +4,7 @@ const whiteboard = {
canvas: null,
ctx: null,
drawcolor: "black",
previousToolHtmlElem: null, // useful for handling read-only mode
tool: "mouse",
thickness: 4,
prevX: null, //prev Mouse position
@@ -39,7 +40,7 @@ const whiteboard = {
sendFunction: null,
backgroundGridUrl: './images/KtEBa2.png'
},
viewOnly: true,
readOnly: true,
lastPointerSentTime: 0,
lastPointerX: 0,
lastPointerY: 0,
@@ -103,7 +104,7 @@ const whiteboard = {
if (_this.imgDragActive || _this.drawFlag) {
return;
}
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.drawFlag = true;
_this.prevX = (e.offsetX || e.pageX - $(e.target).offset().left) + 1;
@@ -161,7 +162,7 @@ const whiteboard = {
if (_this.imgDragActive || !$(e.target).hasClass("textcontainer")) {
return;
}
if (_this.viewOnly) return;
if (_this.readOnly) return;
var currX = (e.offsetX || e.pageX - $(e.target).offset().left);
var currY = (e.offsetY || e.pageY - $(e.target).offset().top);
@@ -180,7 +181,7 @@ const whiteboard = {
_this.mouseOverlay.on("mousemove touchmove", function (e) {
e.preventDefault();
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.triggerMouseMove(e);
});
@@ -192,7 +193,7 @@ const whiteboard = {
if (_this.imgDragActive) {
return;
}
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.drawFlag = false;
_this.drawId++;
_this.ctx.globalCompositeOperation = _this.oldGCO;
@@ -289,12 +290,12 @@ const whiteboard = {
}
_this.mouseOverlay.on("mouseout", function (e) {
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.triggerMouseOut();
});
_this.mouseOverlay.on("mouseover", function (e) {
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.triggerMouseOver();
});
@@ -576,7 +577,7 @@ const whiteboard = {
},
clearWhiteboard: function () {
var _this = this;
if (_this.viewOnly) return;
if (_this.readOnly) return;
_this.canvas.height = _this.canvas.height;
_this.imgContainer.empty();
_this.textContainer.empty();
@@ -787,12 +788,12 @@ const whiteboard = {
});
},
undoWhiteboardClick: function () {
if (this.viewOnly) return;
if (this.readOnly) return;
this.sendFunction({ "t": "undo" });
this.undoWhiteboard();
},
redoWhiteboardClick: function () {
if (this.viewOnly) return;
if (this.readOnly) return;
this.sendFunction({ "t": "redo" });
this.redoWhiteboard();
},
@@ -825,22 +826,27 @@ const whiteboard = {
this.backgroundGrid.append('<div style="position:absolute; left:' + (width + 5) + 'px; top:0px;">smallest screen participating</div>');
}
},
setViewOnly: function(what) {
setReadOnly: function(what) {
var _this = this;
_this.viewOnly = what;
_this.readOnly = what;
if (what === true){
$(".whiteboardTool[tool=mouse]").click(); // reset tool to prevent use of text
$(".whiteboardTool").prop("disabled", true);
$(".whiteboardEditBtn").prop("disabled", 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 {
$(".whiteboardTool").prop("disabled", false);
$(".whiteboardEditBtn").prop("disabled", false);
$(".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) {