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
parent
c454a23e71
commit
7ec4ef0df0
@ -33,6 +33,24 @@ button::-moz-focus-inner {
|
||||
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) */
|
||||
|
||||
@ -60,8 +78,8 @@ button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.whiteboardTool.active {
|
||||
background: #bfbfbf;
|
||||
.whiteboard-tool.active:not(:disabled) {
|
||||
background: #dfdfdf;
|
||||
}
|
||||
|
||||
#whiteboardThicknessSlider {
|
||||
@ -94,4 +112,4 @@ button {
|
||||
border: 0px;
|
||||
min-width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,57 +14,60 @@
|
||||
<!---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 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>
|
||||
</button>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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">
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button tool="mouse" title="Take the mouse" type="button" class="whiteboard-tool">
|
||||
<i class="fa fa-mouse-pointer"></i>
|
||||
</button>
|
||||
<button style="padding-bottom: 11px;" tool="recSelect" title="Select an area" type="button"
|
||||
class="whiteboardTool">
|
||||
class="whiteboard-tool">
|
||||
<img src="./images/dottedRec.png">
|
||||
</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>
|
||||
</button>
|
||||
<button style="padding-bottom: 8px; padding-top: 6px;" tool="line" title="draw a line" type="button"
|
||||
class="whiteboardTool">
|
||||
class="whiteboard-tool">
|
||||
╱
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<div class="btn-group whiteboard-edit-group">
|
||||
<button style="width: 190px; cursor:default;">
|
||||
<div class="activeToolIcon" style="position:absolute; top:2px; left:2px; font-size: 0.6em;"><i
|
||||
class="fa fa-pencil-alt"></i></div>
|
||||
@ -80,42 +83,40 @@
|
||||
</button>
|
||||
</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">
|
||||
<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 style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
<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 style="position: absolute; top: 3px; left: 2px; color: #000000; font-size: 0.5em; "
|
||||
class="fas fa-save"></i>
|
||||
</button>
|
||||
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" type="button"
|
||||
class="whiteboardBtn">
|
||||
<button style="position: relative;" id="saveAsJSONBtn" title="Save whiteboard as JSON" 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-save"></i>
|
||||
</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">
|
||||
<i class="fas fa-share-square"></i>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user