VersaWhiteboard/public/js/main.js

374 lines
13 KiB
JavaScript
Raw Normal View History

var whiteboardId = getQueryVariable("whiteboardid");
whiteboardId = whiteboardId || "myNewWhiteboard";
var myUsername = getQueryVariable("username");
var accessToken = getQueryVariable("accesstoken");
2018-09-08 19:15:23 +02:00
myUsername = myUsername || "unknown" + (Math.random() + "").substring(2, 6);
accessToken = accessToken || "";
2018-02-08 17:45:07 +01:00
2018-09-08 19:15:23 +02:00
var url = document.URL.substr(0, document.URL.lastIndexOf('/'));
var signaling_socket = null;
var urlSplit = url.split("/");
var subdir = "";
2018-09-08 19:15:23 +02:00
for (var i = 3; i < urlSplit.length; i++) {
subdir = subdir + '/' + urlSplit[i];
}
2018-09-08 19:15:23 +02:00
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 () {
2018-09-08 19:15:23 +02:00
console.log("Websocket connected!");
2018-02-08 17:45:07 +01:00
signaling_socket.on('drawToWhiteboard', function (content) {
whiteboard.handleEventsAndData(content, true);
});
signaling_socket.on('refreshUserBadges', function () {
whiteboard.refreshUserBadges();
});
2018-02-09 02:04:50 +01:00
signaling_socket.on('wrongAccessToken', function () {
alert("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() } });
2018-02-08 17:45:07 +01:00
});
2018-09-08 19:15:23 +02:00
$(document).ready(function () {
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId: whiteboardId,
username: myUsername,
sendFunction: function (content) {
content["at"] = accessToken;
2018-09-08 19:15:23 +02:00
signaling_socket.emit('drawToWhiteboard', content);
2018-02-08 17:45:07 +01:00
}
});
2019-01-11 11:24:04 +01:00
// request whiteboard from server
$.get(subdir + "/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(function (data) {
2018-02-08 17:45:07 +01:00
whiteboard.loadData(data)
});
2018-02-08 20:04:13 +01:00
$(window).resize(function () {
signaling_socket.emit('updateScreenResolution', { at: accessToken, windowWidthHeight: { w: $(window).width(), h: $(window).height() } });
})
2018-02-08 20:04:13 +01:00
/*----------------/
Whiteboard actions
/----------------*/
//Handle key actions
$(document).on("keydown", function (e) {
if (e.which == 17) {
whiteboard.pressedKeys["strg"] = true;
} else if (e.which == 90) { //z key
if (whiteboard.pressedKeys["strg"] && !whiteboard.pressedKeys["z"]) {
whiteboard.undoWhiteboardClick();
}
whiteboard.pressedKeys["z"] = true;
} else if (e.which == 16) {
whiteboard.pressedKeys["shift"] = true; //Used for straight lines...
} else if (e.which == 27) { //Esc
whiteboard.escKeyAction();
} else if (e.which == 46) { //Remove / Entf
whiteboard.entfKeyAction();
}
//console.log(e.which);
});
$(document).on("keyup", function (e) {
if (e.which == 17) {
whiteboard.pressedKeys["strg"] = false;
} else if (e.which == 90) {
whiteboard.pressedKeys["z"] = false;
} else if (e.which == 16) {
whiteboard.pressedKeys["shift"] = false;
}
});
2019-01-11 11:24:04 +01:00
// whiteboard clear button
2018-09-08 19:15:23 +02:00
$("#whiteboardTrashBtn").click(function () {
$("#whiteboardTrashBtnConfirm").show().focus();
});
$("#whiteboardTrashBtnConfirm").focusout(function () {
$(this).hide();
});
$("#whiteboardTrashBtnConfirm").click(function () {
$(this).hide();
2018-09-08 19:15:23 +02:00
whiteboard.clearWhiteboard();
2018-02-08 20:04:13 +01:00
});
2019-01-11 11:24:04 +01:00
// undo button
2018-09-08 19:15:23 +02:00
$("#whiteboardUndoBtn").click(function () {
whiteboard.undoWhiteboardClick();
2018-02-08 20:04:13 +01:00
});
2018-09-08 19:15:23 +02:00
2019-01-11 11:24:04 +01:00
// switch tool
2018-09-08 19:15:23 +02:00
$(".whiteboardTool").click(function () {
2018-02-08 20:04:13 +01:00
$(".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
}
2018-02-08 20:04:13 +01:00
});
2019-01-11 11:24:04 +01:00
// upload image button
2018-09-08 19:15:23 +02:00
$("#addImgToCanvasBtn").click(function () {
2019-01-11 11:24:04 +01:00
alert("Please drag the image into the browser.");
2018-02-08 20:04:13 +01:00
});
// save image as png
2018-09-08 19:15:23 +02:00
$("#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);
2018-02-08 20:04:13 +01:00
});
2019-01-11 11:24:04 +01:00
// save image to json containing steps
2018-09-08 19:15:23 +02:00
$("#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);
2018-09-08 19:15:23 +02:00
});
2018-02-08 23:25:57 +01:00
2019-01-11 11:24:04 +01:00
// upload json containing steps
2018-09-08 19:15:23 +02:00
$("#uploadJsonBtn").click(function () {
$("#myFile").click();
2018-02-08 23:25:57 +01:00
});
2019-03-04 19:50:38 +01:00
$("#shareWhiteboardBtn").click(function () {
var url = window.location.href;
var s = url.indexOf("&username=") !== -1 ? "&username=" : "username="; //Remove username from url
2019-03-04 19:50:38 +01:00
var urlSlpit = url.split(s);
var urlStart = urlSlpit[0];
if (urlSlpit.length > 1) {
2019-03-04 19:50:38 +01:00
var endSplit = urlSlpit[1].split("&");
endSplit = endSplit.splice(1, 1);
urlStart += "&" + endSplit.join("&");
2019-03-04 19:50:38 +01:00
}
$("<textarea/>").appendTo("body").val(urlStart).select().each(function () {
document.execCommand('copy');
}).remove();
alert("Copied Whiteboard-URL to clipboard.")
});
2018-02-08 23:25:57 +01:00
2019-01-11 11:24:04 +01:00
// load json to whiteboard
2018-09-08 19:15:23 +02:00
$("#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) {
alert("File was not a valid JSON!");
}
};
reader.readAsText(file);
$(this).val("");
2018-02-08 23:25:57 +01:00
});
2018-02-08 20:04:13 +01:00
2019-01-11 11:24:04 +01:00
// On thickness slider change
$("#whiteboardThicknessSlider").on("input", function () {
whiteboard.setStrokeThickness($(this).val());
2019-01-11 11:24:04 +01:00
});
// handle drag&drop
2018-02-08 20:04:13 +01:00
var dragCounter = 0;
2018-09-08 19:15:23 +02:00
$('#whiteboardContainer').on("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
2018-02-08 20:04:13 +01:00
dragCounter++;
whiteboard.dropIndicator.show();
});
2018-09-08 19:15:23 +02:00
$('#whiteboardContainer').on("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
dragCounter--;
if (dragCounter === 0) {
whiteboard.dropIndicator.hide();
}
});
2019-01-11 11:24:04 +01:00
$('#whiteboardContainer').on('drop', function (e) { //Handle drop
2018-09-08 19:15:23 +02:00
if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
2018-02-08 20:04:13 +01:00
e.preventDefault();
e.stopPropagation();
var filename = e.originalEvent.dataTransfer.files[0]["name"];
2018-09-08 19:15:23 +02:00
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 {
console.error("File must be an image!");
}
2018-02-08 20:04:13 +01:00
} else { //File from other browser
2018-09-08 19:15:23 +02:00
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 = "";
}
2018-02-08 20:04:13 +01:00
2018-09-08 19:15:23 +02:00
isValidImageUrl(fileUrl, function (isImage) {
if (isImage && isImageFileName(url)) {
whiteboard.addImgToCanvasByUrl(fileUrl);
} else {
isValidImageUrl(url, function (isImage) {
if (isImage) {
if (isImageFileName(url)) {
whiteboard.addImgToCanvasByUrl(url);
} else {
uploadImgAndAddToWhiteboard(url);
}
} else {
console.error("Can only upload imagedata!");
}
});
}
});
}
2018-02-08 20:04:13 +01:00
}
dragCounter = 0;
whiteboard.dropIndicator.hide();
});
2018-09-08 19:15:23 +02:00
2018-02-08 20:04:13 +01:00
$('#whiteboardColorpicker').colorPicker({
2018-09-08 19:15:23 +02:00
renderCallback: function (elm) {
whiteboard.setDrawColor(elm.val());
2018-09-08 19:15:23 +02:00
}
2018-02-08 20:04:13 +01:00
});
});
2018-02-08 21:53:48 +01:00
//Prevent site from changing tab on drag&drop
2018-09-08 19:15:23 +02:00
window.addEventListener("dragover", function (e) {
e = e || event;
e.preventDefault();
}, false);
window.addEventListener("drop", function (e) {
e = e || event;
e.preventDefault();
}, false);
2018-02-08 21:53:48 +01:00
2018-02-08 23:16:28 +01:00
function uploadImgAndAddToWhiteboard(base64data) {
2018-09-08 19:15:23 +02:00
var date = (+new Date());
$.ajax({
2018-02-08 23:16:28 +01:00
type: 'POST',
2018-09-08 19:15:23 +02:00
url: document.URL.substr(0, document.URL.lastIndexOf('/')) + '/upload',
data: {
2018-02-08 23:16:28 +01:00
'imagedata': base64data,
2018-09-08 19:15:23 +02:00
'whiteboardId': whiteboardId,
'date': date,
'at': accessToken
2018-09-08 19:15:23 +02:00
},
success: function (msg) {
var filename = whiteboardId + "_" + date + ".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0, document.URL.lastIndexOf('/')) + "/uploads/" + filename); //Add image to canvas
2018-02-08 23:16:28 +01:00
console.log("Image uploaded!");
},
2018-09-08 19:15:23 +02:00
error: function (err) {
console.error("Failed to upload frame: " + JSON.stringify(err));
2018-02-08 23:16:28 +01:00
}
});
}
2019-01-11 11:24:04 +01:00
// verify if filename refers to an image
2018-02-08 20:04:13 +01:00
function isImageFileName(filename) {
2019-01-11 11:24:04 +01:00
var extension = filename.split(".")[filename.split(".").length - 1];
2019-04-05 14:31:59 +02:00
var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff", "bmp"];
2019-01-11 11:24:04 +01:00
return known_extensions.includes(extension.toLowerCase());
2018-02-08 20:04:13 +01:00
}
2019-01-11 11:24:04 +01:00
// verify if given url is url to an image
function isValidImageUrl(url, callback) {
2018-02-08 20:04:13 +01:00
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;
}
2019-01-11 11:24:04 +01:00
// handle pasting from clipboard
window.addEventListener("paste", function (e) {
2018-09-08 19:15:23 +02:00
if (e.clipboardData) {
var items = e.clipboardData.items;
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) {
// 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);
}
}
}
2018-02-08 20:04:13 +01:00
}
2018-09-08 19:15:23 +02:00
}
});
2019-01-11 11:24:04 +01:00
// get 'GET' parameter by variable name
function getQueryVariable(variable) {
2018-09-08 19:15:23 +02:00
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];
}
}
2018-09-08 19:15:23 +02:00
return false;
}