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

4
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);

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") {

1
s_whiteboard.js
View File

@ -34,6 +34,7 @@ module.exports = {
} }
} }
} }
console.log(content)
savedBoards[wid].push(content); savedBoards[wid].push(content);
} }
}, },