raphael/whiteboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add support for other charsets and reformat code

Browse Source
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 { .btn-group button {
background: transparent; background: transparent;
border: 1px solid #636060; border: 1px solid #636060;

5
public/index.html
View File

@ -32,10 +32,9 @@
</script> </script>
</head> </head>
<body <body>
style="position: relative; margin: 0px; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overflow: hidden;">
<!---Whiteboard container -!--> <!---Whiteboard container -!-->
<div style="height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%;" id="whiteboardContainer"></div> <div id="whiteboardContainer"></div>
<!---Toolbar -!--> <!---Toolbar -!-->
<div id="toolbar" style="position: absolute; top: 10px; left: 10px;"> <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") { if (getQueryVariable("webdav") == "true") {
$("#uploadWebDavBtn").show(); $("#uploadWebDavBtn").show();
} }
console.log(myUsername)
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId: whiteboardId, whiteboardId: whiteboardId,
username: myUsername, username: btoa(myUsername),
sendFunction: function (content) { sendFunction: function (content) {
content["at"] = accessToken; content["at"] = accessToken;
signaling_socket.emit('drawToWhiteboard', content); signaling_socket.emit('drawToWhiteboard', content);
@ -102,17 +102,17 @@ $(document).ready(function () {
// whiteboard clear button // whiteboard clear button
$("#whiteboardTrashBtn").click(function () { $("#whiteboardTrashBtn").click(function () {
$("#whiteboardTrashBtnConfirm").show().focus(); $("#whiteboardTrashBtnConfirm").show().focus();
$(this).css({visibility: "hidden"}); $(this).css({ visibility: "hidden" });
}); });
$("#whiteboardTrashBtnConfirm").mouseout(function () { $("#whiteboardTrashBtnConfirm").mouseout(function () {
$(this).hide(); $(this).hide();
$("#whiteboardTrashBtn").css({visibility: "inherit"}); $("#whiteboardTrashBtn").css({ visibility: "inherit" });
}); });
$("#whiteboardTrashBtnConfirm").click(function () { $("#whiteboardTrashBtnConfirm").click(function () {
$(this).hide(); $(this).hide();
$("#whiteboardTrashBtn").css({visibility: "inherit"}); $("#whiteboardTrashBtn").css({ visibility: "inherit" });
whiteboard.clearWhiteboard(); whiteboard.clearWhiteboard();
}); });
@ -179,27 +179,27 @@ $(document).ready(function () {
var webdavserver = localStorage.getItem('webdavserver') || "" var webdavserver = localStorage.getItem('webdavserver') || ""
var webdavpath = localStorage.getItem('webdavpath') || "/" var webdavpath = localStorage.getItem('webdavpath') || "/"
var webdavusername = localStorage.getItem('webdavusername') || "" var webdavusername = localStorage.getItem('webdavusername') || ""
var webdavpassword =localStorage.getItem('webdavpassword') || "" var webdavpassword = localStorage.getItem('webdavpassword') || ""
var webDavHtml = $('<div>' + var webDavHtml = $('<div>' +
'<table>' + '<table>' +
'<tr>' + '<tr>' +
'<td>Server URL:</td>' + '<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>' + '<td></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td>Path:</td>' + '<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>' + '<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td>Username:</td>' + '<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>' + '<td style="font-size: 0.7em;"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
'<td>Password:</td>' + '<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>' + '<td style="font-size: 0.7em;"></td>' +
'</tr>' + '</tr>' +
'<tr>' + '<tr>' +
@ -468,7 +468,7 @@ function isValidImageUrl(url, callback) {
// handle pasting from clipboard // handle pasting from clipboard
window.addEventListener("paste", function (e) { window.addEventListener("paste", function (e) {
if($(".basicalert").length>0) { if ($(".basicalert").length > 0) {
return; return;
} }
if (e.clipboardData) { if (e.clipboardData) {

11
public/js/whiteboard.js
View File

@ -543,7 +543,7 @@ var whiteboard = {
}, },
addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) { addTextBox(textcolor, fontsize, left, top, txId, newLocalBox) {
var _this = this; 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 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="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>' + '<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 () { 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] }); _this.sendFunction({ "t": "setTextboxText", "d": [txId, text] });
}); });
textBox.find(".removeIcon").click(function (e) { textBox.find(".removeIcon").click(function (e) {
@ -597,7 +597,7 @@ var whiteboard = {
} }
}, },
setTextboxText(txId, text) { 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) { removeTextbox(txId) {
$("#" + txId).remove(); $("#" + txId).remove();
@ -727,7 +727,7 @@ var whiteboard = {
} else { } 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"] + '">' + _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>' + '<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 { } else {
_this.cursorContainer.find("." + content["username"]).remove(); _this.cursorContainer.find("." + content["username"]).remove();
@ -780,7 +780,7 @@ var whiteboard = {
var left = Math.round(p.left * 100) / 100; var left = Math.round(p.left * 100) / 100;
var top = Math.round(p.top * 100) / 100; var top = Math.round(p.top * 100) / 100;
top += 25; //Fix top position top += 25; //Fix top position
ctx.font = fontSize + " monospace"; ctx.font = fontSize + " Monospace";
ctx.fillStyle = fontColor; ctx.fillStyle = fontColor;
ctx.fillText(text, left, top); ctx.fillText(text, left, top);
}); });
@ -808,6 +808,7 @@ var whiteboard = {
}, },
loadDataInSteps(content, isNewData, callAfterEveryStep) { loadDataInSteps(content, isNewData, callAfterEveryStep) {
var _this = this; var _this = this;
function lData(index) { function lData(index) {
for (var i = index; i < content.length; i++) { for (var i = index; i < content.length; i++) {
if (content[i]["t"] === "addImgBG" && content[i]["draw"] == "1") { if (content[i]["t"] === "addImgBG" && content[i]["draw"] == "1") {

31
s_whiteboard.js
View File

@ -2,19 +2,19 @@
var savedBoards = {}; var savedBoards = {};
module.exports = { module.exports = {
handleEventsAndData : function(content) { handleEventsAndData: function (content) {
var tool = content["t"]; //Tool witch is used var tool = content["t"]; //Tool witch is used
var wid = content["wid"]; //whiteboard ID var wid = content["wid"]; //whiteboard ID
var username = content["username"]; var username = content["username"];
if(tool==="clear") { //Clear the whiteboard if (tool === "clear") { //Clear the whiteboard
delete savedBoards[wid]; delete savedBoards[wid];
} else if(tool==="undo") { //Undo an action } else if (tool === "undo") { //Undo an action
if(savedBoards[wid]) { if (savedBoards[wid]) {
for(var i=savedBoards[wid].length-1;i>=0;i--){ for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
if(savedBoards[wid][i]["username"]==username) { if (savedBoards[wid][i]["username"] == username) {
var drawId = savedBoards[wid][i]["drawId"]; var drawId = savedBoards[wid][i]["drawId"];
for(var i=savedBoards[wid].length-1;i>=0;i--){ for (var i = savedBoards[wid].length - 1; i >= 0; i--) {
if(savedBoards[wid][i]["drawId"]==drawId && savedBoards[wid][i]["username"]==username) { if (savedBoards[wid][i]["drawId"] == drawId && savedBoards[wid][i]["username"] == username) {
savedBoards[wid].splice(i, 1); 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 } 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]) { if (!savedBoards[wid]) {
savedBoards[wid] = []; savedBoards[wid] = [];
} }
delete content["wid"]; //Delete id from content so we don't store it twice delete content["wid"]; //Delete id from content so we don't store it twice
if(tool==="setTextboxText") { if (tool === "setTextboxText") {
for(var i=savedBoards[wid].length-1;i>=0;i--){ //Remove old textbox tex -> dont store it twice 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]) { if (savedBoards[wid][i]["t"] === "setTextboxText" && savedBoards[wid][i]["d"][0] === content["d"][0]) {
savedBoards[wid].splice(i,1); savedBoards[wid].splice(i, 1);
} }
} }
} }
console.log(content)
savedBoards[wid].push(content); savedBoards[wid].push(content);
} }
}, },
loadStoredData : function(wid) { //Load saved whiteboard loadStoredData: function (wid) { //Load saved whiteboard
return savedBoards[wid] ? savedBoards[wid] : []; return savedBoards[wid] ? savedBoards[wid] : [];
} }
} }