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

feat(frontend): cleaned read-only & style 

* 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
No known key found for this signature in database
GPG Key ID: 9A0CE018889EA246
4 changed files with 113 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/css/main.css
View File

@ -33,6 +33,24 @@ button::-moz-focus-inner {
border: 0; border: 0;
} }
.whiteboard-edit-group.group-disabled {
background: repeating-linear-gradient(
45deg,
rgba(255, 166, 0, 0.366) ,
rgba(255, 166, 0, 0.366) 10px,
rgba(255, 166, 0, 0.666) 10px,
rgba(255, 166, 0, 0.666) 20px
);
}
/*
* Deactivate all pointer events on all the children
* of a group when it's disabled.
*/
.whiteboard-edit-group.group-disabled > * {
pointer-events: none;
}
/* Clear floats (clearfix hack) */ /* Clear floats (clearfix hack) */
@ -60,8 +78,8 @@ button {
position: relative; position: relative;
} }
.whiteboardTool.active { .whiteboard-tool.active:not(:disabled) {
background: #bfbfbf; background: #dfdfdf;
} }
#whiteboardThicknessSlider { #whiteboardThicknessSlider {
@ -94,4 +112,4 @@ button {
border: 0px; border: 0px;
min-width: 50px; min-width: 50px;
cursor: pointer; cursor: pointer;
} }

83
src/index.html
View File

@ -14,57 +14,60 @@
<!---Toolbar -!--> <!---Toolbar -!-->
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;"> <div id="toolbar" style="position: absolute; top: 10px; left: 10px;">
<div class="btn-group"> <div class="btn-group">
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button" class="whiteboardBtn whiteboardEditBtn"> <button id="whiteboardLockBtn" style="background-color: orange;" title="View and Write" type="button">
<i class="fa fa-lock"></i>
</button>
<button id="whiteboardUnlockBtn" title="View Only" type="button">
<i class="fa fa-lock-open"></i>
</button>
</div>
<div class="btn-group whiteboard-edit-group">
<button id="whiteboardTrashBtn" title="Clear the whiteboard" type="button">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
<button style="position:absolute; left:0px; top:0px; width: 46px; display:none;" <button style="position:absolute; left:0px; top:0px; width: 46px; display:none;"
id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button" class="whiteboardBtn whiteboardEditBtn"> id="whiteboardTrashBtnConfirm" title="Confirm clear..." type="button">
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</button> </button>
<button id="whiteboardUndoBtn" title="Undo your last step" type="button" class="whiteboardBtn whiteboardEditBtn"> <button id="whiteboardUndoBtn" title="Undo your last step" type="button">
<i class="fa fa-undo"></i> <i class="fa fa-undo"></i>
</button> </button>
<button id="whiteboardRedoBtn" title="Redo your last undo" type="button" class="whiteboardBtn whiteboardEditBtn"> <button id="whiteboardRedoBtn" title="Redo your last undo" type="button">
<i class="fa fa-redo"></i> <i class="fa fa-redo"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group whiteboard-edit-group">
<button id="whiteboardLockBtn" title="View and Write" type="button" class="whiteboardBtn"> <button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
<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> <i class="fa fa-mouse-pointer"></i>
</button> </button>
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button" <button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button"
class="whiteboardTool"> class="whiteboard-tool">
<img src="./images/dottedRec.png"> <img src="./images/dottedRec.png">
</button> </button>
<button tool="pen" title="Take the pen" type="button" class="whiteboardTool active"> <button tool="pen" title="Take the pen" type="button" class="whiteboard-tool active">
<i class="fa fa-pencil-alt"></i> <i class="fa fa-pencil-alt"></i>
</button> </button>
<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button" <button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
class="whiteboardTool"> class="whiteboard-tool">
╱ ╱
</button> </button>
<button tool="rect" title="draw a rectangle" type="button" class="whiteboardTool"> <button tool="rect" title="draw a rectangle" type="button" class="whiteboard-tool">
<i class="far fa-square"></i> <i class="far fa-square"></i>
</button> </button>
<button tool="circle" title="draw a circle" type="button" class="whiteboardTool"> <button tool="circle" title="draw a circle" type="button" class="whiteboard-tool">
<i class="far fa-circle"></i> <i class="far fa-circle"></i>
</button> </button>
<button tool="text" title="write text" type="button" class="whiteboardTool"> <button tool="text" title="write text" type="button" class="whiteboard-tool">
<i class="fas fa-font"></i> <i class="fas fa-font"></i>
</button> </button>
<button tool="eraser" title="take the eraser" type="button" class="whiteboardTool"> <button tool="eraser" title="take the eraser" type="button" class="whiteboard-tool">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group whiteboard-edit-group">
<button style="width: 190px; cursor:default;"> <button style="width: 190px; cursor:default;">
<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i <div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
class="fa fa-pencil-alt"></i></div> class="fa fa-pencil-alt"></i></div>
@ -80,42 +83,40 @@
</button> </button>
</div> </div>
<div class="btn-group whiteboard-edit-group">
<button id="addImgToCanvasBtn" title="Upload Image to whiteboard" type="button">
<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">
<i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-upload"></i>
</button>
<input style="display:none;" id="myFile" type="file" />
</div>
<div class="btn-group"> <div class="btn-group">
<button id="saveAsImageBtn" title="Save whiteboard as image" type="button" class="whiteboardBtn"> <button id="saveAsImageBtn" title="Save whiteboard as image" type="button">
<i class="fas fa-image"></i> <i class="fas fa-image"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-save"></i> class="fas fa-save"></i>
</button> </button>
<button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav" <button style="position: relative; display: none;" id="uploadWebDavBtn" title="Save whiteboard to webdav"
type="button" class="whiteboardBtn"> type="button">
<i class="fas fa-globe"></i> <i class="fas fa-globe"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-save"></i> class="fas fa-save"></i>
</button> </button>
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button" <button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button">
class="whiteboardBtn">
<i class="far fa-file-alt"></i> <i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; " <i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-save"></i> class="fas fa-save"></i>
</button> </button>
</div>
<div class="btn-group">
<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 whiteboardEditBtn">
<i class="far fa-file-alt"></i>
<i style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
class="fas fa-upload"></i>
</button>
<input style="display:none;" id="myFile" type="file" />
<button id="shareWhiteboardBtn" title="share whiteboard" type="button"> <button id="shareWhiteboardBtn" title="share whiteboard" type="button">
<i class="fas fa-share-square"></i> <i class="fas fa-share-square"></i>

52
src/js/main.js
View File

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

42
src/js/whiteboard.js
View File

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