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

add support for other charsets and reformat code

This commit is contained in:
raphael 2020-03-20 17:29:20 +01:00
parent 0c041e0a51
commit 9eebdeeddd
5 changed files with 899 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/main.css
View File

@ -1,3 +1,16 @@
body {
position: relative;
margin: 0px;
height: calc(var(--vh, 1vh) * 100);
width: 100%;
overflow: hidden;
}
#whiteboardContainer {
height: calc(var(--vh, 1vh) * 100);
width: 100%;
}
.btn-group button {
background: transparent;
border: 1px solid #636060;

5
public/index.html
View File

@ -32,10 +32,9 @@
</script>
</head>
<body
style="position: relative; margin: 0px; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overflow: hidden;">
<body>
<!---Whiteboard container -!-->
<div style="height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%;" id="whiteboardContainer"></div>
<div id="whiteboardContainer"></div>
<!---Toolbar -!-->
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;">

22
public/js/main.js
View File

@ -48,10 +48,10 @@ $(document).ready(function () {
if (getQueryVariable("webdav") == "true") {
$("#uploadWebDavBtn").show();
}
console.log(myUsername)
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId: whiteboardId,
username: myUsername,
username: btoa(myUsername),
sendFunction: function (content) {
content["at"] = accessToken;
signaling_socket.emit('drawToWhiteboard', content);
@ -102,17 +102,17 @@ $(document).ready(function () {
// whiteboard clear button
$("#whiteboardTrashBtn").click(function () {
$("#whiteboardTrashBtnConfirm").show().focus();
$(this).css({visibility: "hidden"});
$(this).css({ visibility: "hidden" });
});
$("#whiteboardTrashBtnConfirm").mouseout(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({visibility: "inherit"});
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
});
$("#whiteboardTrashBtnConfirm").click(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({visibility: "inherit"});
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
whiteboard.clearWhiteboard();
});
@ -179,27 +179,27 @@ $(document).ready(function () {
var webdavserver = localStorage.getItem('webdavserver') || ""
var webdavpath = localStorage.getItem('webdavpath') || "/"
var webdavusername = localStorage.getItem('webdavusername') || ""
var webdavpassword =localStorage.getItem('webdavpassword') || ""
var webdavpassword = localStorage.getItem('webdavpassword') || ""
var webDavHtml = $('<div>' +
'<table>' +
'<tr>' +
'<td>Server URL:</td>' +
'<td><input class="webdavserver" type="text" value="'+webdavserver+'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
'<td><input class="webdavserver" type="text" value="' + webdavserver + '" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
'<td></td>' +
'</tr>' +
'<tr>' +
'<td>Path:</td>' +
'<td><input class="webdavpath" type="text" placeholder="folder" value="'+webdavpath+'"></td>' +
'<td><input class="webdavpath" type="text" placeholder="folder" value="' + webdavpath + '"></td>' +
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
'</tr>' +
'<tr>' +
'<td>Username:</td>' +
'<td><input class="webdavusername" type="text" value="'+webdavusername+'" placeholder="username"></td>' +
'<td><input class="webdavusername" type="text" value="' + webdavusername + '" placeholder="username"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td>Password:</td>' +
'<td><input class="webdavpassword" type="password" value="'+webdavpassword+'" placeholder="password"></td>' +
'<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
@ -468,7 +468,7 @@ function isValidImageUrl(url, callback) {
// handle pasting from clipboard
window.addEventListener("paste", function (e) {
if($(".basicalert").length>0) {
if ($(".basicalert").length > 0) {
return;
}
if (e.clipboardData) {

11
public/js/whiteboard.js
View File

@ -543,7 +543,7 @@ var whiteboard = {
},
addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
var _this = this;
var textBox = $('<div id="' + txId + '" class="textBox" style="font-family: monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">' +
var textBox = $('<div id="' + txId + '" class="textBox" style="font-family: Monospace; position:absolute; top:' + top + 'px; left:' + left + 'px;">' +
'<div contentEditable="true" spellcheck="false" class="textContent" style="outline: none; font-size:' + fontsize + 'em; color:' + textcolor + '; min-width:50px; min-height:50px;"></div>' +
'<div title="remove textbox" class="removeIcon" style="position:absolute; cursor:pointer; top:-4px; right:2px;">x</div>' +
'<div title="move textbox" class="moveIcon" style="position:absolute; cursor:move; top:1px; left:2px; font-size: 0.5em;"><i class="fas fa-expand-arrows-alt"></i></div>' +
@ -580,7 +580,7 @@ var whiteboard = {
}
});
textBox.find(".textContent").on("input", function () {
var text = btoa($(this).html()); //Get html and make encode base64
var text = btoa(unescape(encodeURIComponent($(this).html()))); //Get html and make encode base64 also take care of the charset
_this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
});
textBox.find(".removeIcon").click(function (e) {
@ -597,7 +597,7 @@ var whiteboard = {
}
},
setTextboxText(txId, text) {
$("#" + txId).find(".textContent").html(atob(text)); //Set decoded base64 as html
$("#" + txId).find(".textContent").html(decodeURIComponent(escape(atob(text)))); //Set decoded base64 as html
},
removeTextbox(txId) {
$("#" + txId).remove();
@ -727,7 +727,7 @@ var whiteboard = {
} else {
_this.cursorContainer.append('<div style="font-size:0.8em; padding-left:2px; padding-right:2px; background:gray; color:white; border-radius:3px; position:absolute; left:' + data[0] + 'px; top:' + (data[1] - 151) + 'px;" class="userbadge ' + content["username"] + '">' +
'<div style="width:4px; height:4px; background:gray; position:absolute; top:13px; left:-2px; border-radius:50%;"></div>' +
content["username"] + '</div>');
decodeURIComponent(atob(content["username"])) + '</div>');
}
} else {
_this.cursorContainer.find("." + content["username"]).remove();
@ -780,7 +780,7 @@ var whiteboard = {
var left = Math.round(p.left * 100) / 100;
var top = Math.round(p.top * 100) / 100;
top += 25; //Fix top position
ctx.font = fontSize + " monospace";
ctx.font = fontSize + " Monospace";
ctx.fillStyle = fontColor;
ctx.fillText(text, left, top);
});
@ -808,6 +808,7 @@ var whiteboard = {
},
loadDataInSteps(content, isNewData, callAfterEveryStep) {
var _this = this;
function lData(index) {
for (var i = index; i < content.length; i++) {
if (content[i]["t"] === "addImgBG" && content[i]["draw"] == "1") {

31
s_whiteboard.js
View File

@ -2,19 +2,19 @@
var savedBoards = {};
module.exports = {
handleEventsAndData : function(content) {
handleEventsAndData: function (content) {
var tool = content["t"]; //Tool witch is used
var wid = content["wid"]; //whiteboard ID
var username = content["username"];
if(tool==="clear") { //Clear the whiteboard
if (tool === "clear") { //Clear the whiteboard
delete savedBoards[wid];
} else if(tool==="undo") { //Undo an action
if(savedBoards[wid]) {
for(var i=savedBoards[wid].length-1;i>=0;i--){
if(savedBoards[wid][i]["username"]==username) {
} else if (tool === "undo") { //Undo an action
if (savedBoards[wid]) {
for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
if (savedBoards[wid][i]["username"] == username) {
var drawId = savedBoards[wid][i]["drawId"];
for(var i=savedBoards[wid].length-1;i>=0;i--){
if(savedBoards[wid][i]["drawId"]==drawId && savedBoards[wid][i]["username"]==username) {
for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
if (savedBoards[wid][i]["drawId"] == drawId && savedBoards[wid][i]["username"] == username) {
savedBoards[wid].splice(i, 1);
}
}
@ -22,22 +22,23 @@ module.exports = {
}
}
}
} else if(["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions
if(!savedBoards[wid]) {
} else if (["line", "pen", "rect", "circle", "eraser", "addImgBG", "recSelect", "eraseRec", "addTextBox", "setTextboxText", "removeTextbox", "setTextboxPosition", "setTextboxFontSize", "setTextboxFontColor"].includes(tool)) { //Save all this actions
if (!savedBoards[wid]) {
savedBoards[wid] = [];
}
delete content["wid"]; //Delete id from content so we don't store it twice
if(tool==="setTextboxText") {
for(var i=savedBoards[wid].length-1;i>=0;i--){ //Remove old textbox tex -> dont store it twice
if(savedBoards[wid][i]["t"]==="setTextboxText" && savedBoards[wid][i]["d"][0]===content["d"][0]) {
savedBoards[wid].splice(i,1);
if (tool === "setTextboxText") {
for (var i = savedBoards[wid].length - 1; i >= 0; i--) { //Remove old textbox tex -> dont store it twice
if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
savedBoards[wid].splice(i, 1);
}
}
}
console.log(content)
savedBoards[wid].push(content);
}
},
loadStoredData : function(wid) { //Load saved whiteboard
loadStoredData: function (wid) { //Load saved whiteboard
return savedBoards[wid] ? savedBoards[wid] : [];
}
}