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 { .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;">

24
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();
}); });
@ -175,31 +175,31 @@ $(document).ready(function () {
if ($(".webdavUploadBtn").length > 0) { if ($(".webdavUploadBtn").length > 0) {
return; return;
} }
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) {

1665
public/js/whiteboard.js
View File

File diff suppressed because it is too large Load Diff

77
s_whiteboard.js
View File

@ -2,42 +2,43 @@
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);
} }
} }
break; break;
} }
} }
} }
} 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);
} }
} }
} }
savedBoards[wid].push(content); console.log(content)
} savedBoards[wid].push(content);
}, }
loadStoredData : function(wid) { //Load saved whiteboard },
return savedBoards[wid] ? savedBoards[wid] : []; loadStoredData: function (wid) { //Load saved whiteboard
} return savedBoards[wid] ? savedBoards[wid] : [];
}
} }