VersaWhiteboard/public/js/main.js
Jean-Benoist Leger 3c92ea5f08 Add redo button
2020-04-17 18:04:29 +00:00

683 lines
26 KiB
JavaScript

var whiteboardId = getQueryVariable("whiteboardid");
var randomid = getQueryVariable("randomid");
if (randomid && !whiteboardId) { //set random whiteboard on empty whiteboardid
whiteboardId = Array(2).fill(null).map(() => Math.random().toString(36).substr(2)).join('');
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('whiteboardid', whiteboardId);
window.location.search = urlParams;
}
whiteboardId = whiteboardId || "myNewWhiteboard";
whiteboardId = unescape(encodeURIComponent(whiteboardId)).replace(/[^a-zA-Z0-9 ]/g, "");
var myUsername = getQueryVariable("username");
var accessToken = getQueryVariable("accesstoken");
myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
accessToken = accessToken || "";
var accessDenied = false;
// Custom Html Title
var title = getQueryVariable("title");
if (!title === false) {
document.title = decodeURIComponent(title);
}
var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
var signaling_socket = null;
var urlSplit = url.split("/");
var subdir = "";
for (var i = 3; i < urlSplit.length; i++) {
subdir = subdir + '/' + urlSplit[i];
}
if (subdir != "") {
signaling_socket = io("", { "path": subdir + "/socket.io" }); //Connect even if we are in a subdir behind a reverse proxy
} else {
signaling_socket = io();
}
signaling_socket.on('connect', function () {
console.log("Websocket connected!");
signaling_socket.on('drawToWhiteboard', function (content) {
whiteboard.handleEventsAndData(content, true);
});
signaling_socket.on('refreshUserBadges', function () {
whiteboard.refreshUserBadges();
});
signaling_socket.on('wrongAccessToken', function () {
if (!accessDenied) {
accessDenied = true;
showBasicAlert("Access denied! Wrong accessToken!")
}
});
signaling_socket.on('updateSmallestScreenResolution', function (widthHeight) {
whiteboard.updateSmallestScreenResolution(widthHeight["w"], widthHeight["h"]);
});
signaling_socket.emit('joinWhiteboard', { wid: whiteboardId, at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
});
$(document).ready(function () {
if (getQueryVariable("webdav") == "true") {
$("#uploadWebDavBtn").show();
}
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId: whiteboardId,
username: btoa(myUsername),
sendFunction: function (content) {
content["at"] = accessToken;
signaling_socket.emit('drawToWhiteboard', content);
}
});
// request whiteboard from server
$.get(subdir + "/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
whiteboard.loadData(data)
});
$(window).resize(function () {
signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
})
/*----------------/
Whiteboard actions
/----------------*/
//Handle key actions
$(document).on("keydown", function (e) {
if (e.which == 16) {
whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
}
//console.log(e.which);
});
$(document).on("keyup", function (e) {
if (e.which == 16) {
whiteboard.pressedKeys["shift"] = false;
}
});
var shortcutFunctions = {
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_pen: function () {
$(".whiteboardTool[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_eraser: function () {
$(".whiteboardTool[tool=eraser]").click();
whiteboard.redrawMouseCursor();
},
thickness_bigger: function () {
var thickness = parseInt($("#whiteboardThicknessSlider").val()) + 1;
$("#whiteboardThicknessSlider").val(thickness);
whiteboard.setStrokeThickness(thickness);
whiteboard.redrawMouseCursor();
},
thickness_smaller: function () {
var thickness = parseInt($("#whiteboardThicknessSlider").val()) - 1;
$("#whiteboardThicknessSlider").val(thickness);
whiteboard.setStrokeThickness(thickness);
whiteboard.redrawMouseCursor();
},
openColorPicker: function () { $("#whiteboardColorpicker").click(); },
saveWhiteboardAsImage: function () { $("#saveAsImageBtn").click(); },
saveWhiteboardAsJson: function () { $("#saveAsJSONBtn").click(); },
uploadWhiteboardToWebDav: function () { $("#uploadWebDavBtn").click(); },
uploadJsonToWhiteboard: function () { $("#uploadJsonBtn").click(); },
shareWhiteboard: function () { $("#shareWhiteboardBtn").click(); },
hideShowControls: function () { $("#minMaxBtn").click(); },
setDrawColorBlack: function () {
whiteboard.setDrawColor("black");
whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "black" });
},
setDrawColorRed: function () {
whiteboard.setDrawColor("red");
whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "red" });
},
setDrawColorGreen: function () {
whiteboard.setDrawColor("green");
whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "green" });
},
setDrawColorBlue: function () {
whiteboard.setDrawColor("blue");
whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "blue" });
},
setDrawColorYellow: function () {
whiteboard.setDrawColor("yellow");
whiteboard.redrawMouseCursor();
$("#whiteboardColorpicker").css({ "background": "yellow" });
},
toggleLineRecCircle: function () {
var activeTool = $(".whiteboardTool.active").attr("tool");
if (activeTool == "line") {
$(".whiteboardTool[tool=rect]").click();
} else if (activeTool == "rect") {
$(".whiteboardTool[tool=circle]").click();
} else {
$(".whiteboardTool[tool=line]").click();
}
},
togglePenEraser: function () {
var activeTool = $(".whiteboardTool.active").attr("tool");
if (activeTool == "pen") {
$(".whiteboardTool[tool=eraser]").click();
} else {
$(".whiteboardTool[tool=pen]").click();
}
},
toggleMainColors: function () {
var bgColor = $("#whiteboardColorpicker")[0].style.backgroundColor;
if (bgColor == "blue") {
shortcutFunctions.setDrawColorGreen();
} else if (bgColor == "green") {
shortcutFunctions.setDrawColorYellow();
} else if (bgColor == "yellow") {
shortcutFunctions.setDrawColorRed();
} else if (bgColor == "red") {
shortcutFunctions.setDrawColorBlack();
} else {
shortcutFunctions.setDrawColorBlue();
}
},
moveDraggableUp: function () {
var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
var p = $(elm).position();
$(elm).css({ top: p.top - 5, left: p.left })
},
moveDraggableDown: function () {
var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
var p = $(elm).position();
$(elm).css({ top: p.top + 5, left: p.left })
},
moveDraggableLeft: function () {
var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
var p = $(elm).position();
$(elm).css({ top: p.top, left: p.left - 5 })
},
moveDraggableRight: function () {
var elm = whiteboard.tool == "text" ? $("#" + whiteboard.latestActiveTextBoxId) : $(".dragMe")[0];
var p = $(elm).position();
$(elm).css({ top: p.top, left: p.left + 5 })
},
dropDraggable: function () {
$($(".dragMe")[0]).find('.addToCanvasBtn').click();
},
addToBackground: function () {
$($(".dragMe")[0]).find('.addToBackgroundBtn').click();
},
cancelAllActions: function () { whiteboard.escKeyAction(); },
deleteSelection: function () { whiteboard.delKeyAction(); },
}
//Load keybindings from keybinds.js to given functions
for (var i in keybinds) {
if (shortcutFunctions[keybinds[i]]) {
keymage(i, shortcutFunctions[keybinds[i]], { preventDefault: true });
} else {
console.error("function you want to keybind on key:", i, "named:", keybinds[i], "is not available!")
}
}
// whiteboard clear button
$("#whiteboardTrashBtn").click(function () {
$("#whiteboardTrashBtnConfirm").show().focus();
$(this).css({ visibility: "hidden" });
});
$("#whiteboardTrashBtnConfirm").mouseout(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
});
$("#whiteboardTrashBtnConfirm").click(function () {
$(this).hide();
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
whiteboard.clearWhiteboard();
});
// undo button
$("#whiteboardUndoBtn").click(function () {
whiteboard.undoWhiteboardClick();
});
// redo button
$("#whiteboardRedoBtn").click(function () {
whiteboard.redoWhiteboardClick();
});
// switch tool
$(".whiteboardTool").click(function () {
$(".whiteboardTool").removeClass("active");
$(this).addClass("active");
var activeTool = $(this).attr("tool");
whiteboard.setTool(activeTool);
if (activeTool == "mouse" || activeTool == "recSelect") {
$(".activeToolIcon").empty();
} else {
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
}
});
// upload image button
$("#addImgToCanvasBtn").click(function () {
showBasicAlert("Please drag the image into the browser.");
});
// save image as png
$("#saveAsImageBtn").click(function () {
var imgData = whiteboard.getImageDataBase64();
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
var a = document.createElement('a');
a.href = imgData;
a.download = 'whiteboard.png';
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () { w.close(); }, 100);
}, 0);
});
// save image to json containing steps
$("#saveAsJSONBtn").click(function () {
var imgData = whiteboard.getImageDataJson();
var w = window.open('about:blank'); //Firefox will not allow downloads without extra window
setTimeout(function () { //FireFox seems to require a setTimeout for this to work.
var a = document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([imgData], { type: 'text/json' }));
a.download = 'whiteboard.json';
w.document.body.appendChild(a);
a.click();
w.document.body.removeChild(a);
setTimeout(function () { w.close(); }, 100);
}, 0);
});
$("#uploadWebDavBtn").click(function () {
if ($(".webdavUploadBtn").length > 0) {
return;
}
var webdavserver = localStorage.getItem('webdavserver') || ""
var webdavpath = localStorage.getItem('webdavpath') || "/"
var webdavusername = localStorage.getItem('webdavusername') || ""
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></td>' +
'</tr>' +
'<tr>' +
'<td>Path:</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 style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td>Password:</td>' +
'<td><input class="webdavpassword" type="password" value="' + webdavpassword + '" placeholder="password"></td>' +
'<td style="font-size: 0.7em;"></td>' +
'</tr>' +
'<tr>' +
'<td style="font-size: 0.7em;" colspan="3">Note: You have to generate and use app credentials if you have 2 Factor Auth activated on your dav/nextcloud server!</td>' +
'</tr>' +
'<tr>' +
'<td></td>' +
'<td colspan="2"><span class="loadingWebdavText" style="display:none;">Saving to webdav, please wait...</span><button class="modalBtn webdavUploadBtn"><i class="fas fa-upload"></i> Start Upload</button></td>' +
'</tr>' +
'</table>' +
'</div>');
webDavHtml.find(".webdavUploadBtn").click(function () {
var webdavserver = webDavHtml.find(".webdavserver").val();
localStorage.setItem('webdavserver', webdavserver);
var webdavpath = webDavHtml.find(".webdavpath").val();
localStorage.setItem('webdavpath', webdavpath);
var webdavusername = webDavHtml.find(".webdavusername").val();
localStorage.setItem('webdavusername', webdavusername);
var webdavpassword = webDavHtml.find(".webdavpassword").val();
localStorage.setItem('webdavpassword', webdavpassword);
var base64data = whiteboard.getImageDataBase64();
var webdavaccess = {
webdavserver: webdavserver,
webdavpath: webdavpath,
webdavusername: webdavusername,
webdavpassword: webdavpassword
}
webDavHtml.find(".loadingWebdavText").show();
webDavHtml.find(".webdavUploadBtn").hide();
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
if (err) {
webDavHtml.find(".loadingWebdavText").hide();
webDavHtml.find(".webdavUploadBtn").show();
} else {
webDavHtml.parents(".basicalert").remove();
}
});
})
showBasicAlert(webDavHtml, {
header: "Save to Webdav",
okBtnText: "cancel",
headercolor: "#0082c9"
})
});
// upload json containing steps
$("#uploadJsonBtn").click(function () {
$("#myFile").click();
});
$("#shareWhiteboardBtn").click(function () {
var url = window.location.href;
var s = url.indexOf("&username=") !== -1 ? "&username=" : "username="; //Remove username from url
var urlSlpit = url.split(s);
var urlStart = urlSlpit[0];
if (urlSlpit.length > 1) {
var endSplit = urlSlpit[1].split("&");
endSplit = endSplit.splice(1, 1);
urlStart += "&" + endSplit.join("&");
}
$("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
document.execCommand('copy');
}).remove();
showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 })
});
var btnsMini = false;
$("#minMaxBtn").click(function () {
if (!btnsMini) {
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
$(this).find("#minBtn").hide();
$(this).find("#maxBtn").show();
} else {
$("#toolbar").find(".btn-group").show();
$(this).find("#minBtn").show();
$(this).find("#maxBtn").hide();
}
btnsMini = !btnsMini;
})
// load json to whiteboard
$("#myFile").on("change", function () {
var file = document.getElementById("myFile").files[0];
var reader = new FileReader();
reader.onload = function (e) {
try {
var j = JSON.parse(e.target.result);
whiteboard.loadJsonData(j);
} catch (e) {
showBasicAlert("File was not a valid JSON!");
}
};
reader.readAsText(file);
$(this).val("");
});
// On thickness slider change
$("#whiteboardThicknessSlider").on("input", function () {
whiteboard.setStrokeThickness($(this).val());
});
// handle drag&drop
var dragCounter = 0;
$('#whiteboardContainer').on("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
dragCounter++;
whiteboard.dropIndicator.show();
});
$('#whiteboardContainer').on("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
dragCounter--;
if (dragCounter === 0) {
whiteboard.dropIndicator.hide();
}
});
$('#whiteboardContainer').on('drop', function (e) { //Handle drop
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
e.preventDefault();
e.stopPropagation();
var filename = e.originalEvent.dataTransfer.files[0]["name"];
if (isImageFileName(filename)) {
var blob = e.originalEvent.dataTransfer.files[0];
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data);
}
} else {
showBasicAlert("File must be an image!");
}
} else { //File from other browser
var fileUrl = e.originalEvent.dataTransfer.getData('URL');
var imageUrl = e.originalEvent.dataTransfer.getData('text/html');
var rex = /src="?([^"\s]+)"?\s*/;
var url = rex.exec(imageUrl);
if (url && url.length > 1) {
url = url[1];
} else {
url = "";
}
isValidImageUrl(fileUrl, function (isImage) {
if (isImage && isImageFileName(url)) {
whiteboard.addImgToCanvasByUrl(fileUrl);
} else {
isValidImageUrl(url, function (isImage) {
if (isImage) {
if (isImageFileName(url) || url.startsWith("http")) {
whiteboard.addImgToCanvasByUrl(url);
} else {
uploadImgAndAddToWhiteboard(url); //Last option maybe its base64
}
} else {
showBasicAlert("Can only upload Imagedata!");
}
});
}
});
}
}
dragCounter = 0;
whiteboard.dropIndicator.hide();
});
$('#whiteboardColorpicker').colorPicker({
renderCallback: function (elm) {
whiteboard.setDrawColor(elm.val());
}
});
});
//Prevent site from changing tab on drag&drop
window.addEventListener("dragover", function (e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
e = e || event;
e.preventDefault();
}, false);
function uploadImgAndAddToWhiteboard(base64data) {
var date = (+new Date());
$.ajax({
type: 'POST',
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
data: {
'imagedata': base64data,
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken
},
success: function (msg) {
var filename = whiteboardId + "_" + date + ".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
console.log("Image uploaded!");
},
error: function (err) {
showBasicAlert("Failed to upload frame: " + JSON.stringify(err));
}
});
}
function saveWhiteboardToWebdav(base64data, webdavaccess, callback) {
var date = (+new Date());
$.ajax({
type: 'POST',
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
data: {
'imagedata': base64data,
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken,
'webdavaccess': JSON.stringify(webdavaccess)
},
success: function (msg) {
showBasicAlert("Whiteboard was saved to Webdav!", {
headercolor: "#5c9e5c"
});
console.log("Image uploaded for webdav!");
callback();
},
error: function (err) {
if (err.status == 403) {
showBasicAlert("Could not connect to Webdav folder! Please check the credentials and paths and try again!");
} else {
showBasicAlert("Unknown Webdav error! ", err);
}
callback(err);
}
});
}
// verify if filename refers to an image
function isImageFileName(filename) {
var extension = filename.split(".")[filename.split(".").length - 1];
var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "webp"];
return known_extensions.includes(extension.toLowerCase());
}
// verify if given url is url to an image
function isValidImageUrl(url, callback) {
var img = new Image();
var timer = null;
img.onerror = img.onabort = function () {
clearTimeout(timer);
callback(false);
};
img.onload = function () {
clearTimeout(timer);
callback(true);
};
timer = setTimeout(function () {
callback(false);
}, 2000);
img.src = url;
}
// handle pasting from clipboard
window.addEventListener("paste", function (e) {
if ($(".basicalert").length > 0) {
return;
}
if (e.clipboardData) {
var items = e.clipboardData.items;
var imgItemFound = false;
if (items) {
// Loop through all items, looking for any kind of image
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) {
imgItemFound = true;
// We need to represent the image as a file,
var blob = items[i].getAsFile();
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
console.log("Uploading image!");
base64data = reader.result;
uploadImgAndAddToWhiteboard(base64data);
}
}
}
}
if (!imgItemFound && whiteboard.tool != "text") {
showBasicAlert("Please Drag&Drop the image into the Whiteboard. (Browsers don't allow copy+past from the filesystem directly)");
}
}
});
function showBasicAlert(html, newOptions) {
var options = {
header: "INFO MESSAGE",
okBtnText: "Ok",
headercolor: "#d25d5d",
hideAfter: false
}
if (newOptions) {
for (var i in newOptions) {
options[i] = newOptions[i];
}
}
var alertHtml = $('<div class="basicalert" style="position:absolute; top:0px; left:0px; width:100%; top:70px; font-family: monospace;">' +
'<div style="width: 30%; margin: auto; background: #aaaaaa; border-radius: 5px; font-size: 1.2em; border: 1px solid gray;">' +
'<div style="border-bottom: 1px solid #676767; background: ' + options["headercolor"] + '; padding-left: 5px; font-size: 0.8em;">' + options["header"] + '</div>' +
'<div style="padding: 10px;" class="htmlcontent"></div>' +
'<div style="height: 20px; padding: 10px;"><button class="modalBtn okbtn" style="float: right;">' + options["okBtnText"] + '</button></div>' +
'</div>' +
'</div>');
alertHtml.find(".htmlcontent").append(html);
$("body").append(alertHtml);
alertHtml.find(".okbtn").click(function () {
alertHtml.remove();
})
if (options.hideAfter) {
setTimeout(function () {
alertHtml.find(".okbtn").click();
}, 1000 * options.hideAfter)
}
}
// get 'GET' parameter by variable name
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}