VersaWhiteboard/public/js/main.js

266 lines
7.8 KiB
JavaScript
Raw Normal View History

var whiteboardId = getQueryVariable("whiteboardid");
whiteboardId = whiteboardId || "myNewWhiteboard";
var myUsername = getQueryVariable("username");
myUsername = myUsername || "unkonwn";
2018-02-08 17:45:07 +01:00
var io = signaling_socket = io();
io.on('connect', function () {
console.log("Websocket connected!");
signaling_socket.on('drawToWhiteboard', function (content) {
whiteboard.handleEventsAndData(content, true);
});
signaling_socket.on('refreshUserBadges', function () {
whiteboard.refreshUserBadges();
});
2018-02-08 17:45:07 +01:00
});
$(document).ready(function() {
2018-02-08 20:04:13 +01:00
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
2018-02-08 17:45:07 +01:00
whiteboardId : whiteboardId,
2018-02-08 20:04:13 +01:00
username : myUsername,
2018-02-08 17:45:07 +01:00
sendFunction : function(content) {
io.emit('drawToWhiteboard', content);
}
});
$.get( "/loadwhiteboard", { wid: whiteboardId } ).done(function( data ) {
whiteboard.loadData(data)
});
2018-02-08 20:04:13 +01:00
/*----------------/
Whiteboard actions
/----------------*/
$("#whiteboardTrashBtn").click(function() {
whiteboard.clearWhiteboard();
});
$("#whiteboardUndoBtn").click(function() {
whiteboard.undoWhiteboardClick();
});
$(".whiteboardTool").click(function() {
$(".whiteboardTool").removeClass("active");
$(this).addClass("active");
whiteboard.setTool($(this).attr("tool"));
});
$("#addImgToCanvasBtn").click(function() {
alert("Just drag and drop images in!");
});
$("#saveAsImageBtn").click(function() {
2018-02-08 21:53:48 +01:00
var imgData = whiteboard.getImageDataBase64();
var a = document.createElement('a');
a.href = imgData;
a.download = 'whiteboard.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
2018-02-08 20:04:13 +01:00
});
$("#saveAsJSONBtn").click(function() {
2018-02-08 21:53:48 +01:00
var imgData = whiteboard.getImageDataJson();
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([imgData], {type: 'text/json'}));
a.download = 'whiteboard.json';
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);
2018-02-08 23:25:57 +01:00
});
$("#uploadJsonBtn").click(function() {
$("#myFile").click();
});
$("#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 20:04:13 +01:00
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();
}
});
$("#whiteboardThicknessSlider").on("change", function() {
whiteboard.thickness = $(this).val();
});
$('#whiteboardContainer').on('drop', function(e) { //Handle drag & 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)) {
2018-02-08 23:16:28 +01:00
var blob = e.originalEvent.dataTransfer.files[0];
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
} else {
2018-02-08 23:16:28 +01:00
console.error("File must be an image!");
2018-02-08 20:04:13 +01:00
}
} 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)) {
whiteboard.addImgToCanvasByUrl(url);
} else {
2018-02-08 23:16:28 +01:00
var blob = items[i].getAsFile();
uploadImgAndAddToWhiteboard(url);
2018-02-08 20:04:13 +01:00
}
} else {
2018-02-08 23:16:28 +01:00
console.error("Can only upload imagedata!");
2018-02-08 20:04:13 +01:00
}
});
}
});
}
}
dragCounter = 0;
whiteboard.dropIndicator.hide();
});
$('#whiteboardColorpicker').colorPicker({
renderCallback : function(elm) {
whiteboard.drawcolor = elm.val();
}
});
});
2018-02-08 21:53:48 +01:00
//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);
2018-02-08 23:16:28 +01:00
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
},
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) {
console.error("Failed to upload frame: "+JSON.stringify(err));
}
});
}
2018-02-08 20:04:13 +01:00
function isImageFileName(filename) {
var ending = filename.split(".")[filename.split(".").length-1];
if(ending.toLowerCase()=="png" || ending.toLowerCase()=="jpg" || ending.toLowerCase()=="jpeg" || ending.toLowerCase()=="gif" || ending.toLowerCase()=="tiff") {
return true;
}
return false;
}
function isValidImageUrl(url, callback) { //Check if given url it is a vaild img url
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;
}
window.addEventListener("paste", function(e) { //Even do copy & paste from clipboard
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;
2018-02-08 23:16:28 +01:00
uploadImgAndAddToWhiteboard(base64data);
2018-02-08 20:04:13 +01:00
}
}
}
}
}
});
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;
}