WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add some btns and functions

Browse Source
This commit is contained in:
rofl256
2018-02-08 20:04:13 +01:00
parent 9b58e572ae
commit 2eb098d627
9 changed files with 378 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/js/jqColorPicker.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
public/js/jquery-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

227
public/js/main.js
View File

@@ -1,3 +1,6 @@
var whiteboardId = "myNewWhiteboard";
var myUsername = "Default";
var io = signaling_socket = io();
io.on('connect', function () {
@@ -9,10 +12,9 @@ io.on('connect', function () {
});
$(document).ready(function() {
var whiteboardId = "myNewWhiteboard";
whiteboard.loadWhiteboard("#whiteboardContainer", {
whiteboard.loadWhiteboard("#whiteboardContainer", { //Load the whiteboard
whiteboardId : whiteboardId,
username : "Username",
username : myUsername,
sendFunction : function(content) {
io.emit('drawToWhiteboard', content);
}
@@ -21,4 +23,223 @@ $(document).ready(function() {
$.get( "/loadwhiteboard", { wid: whiteboardId } ).done(function( data ) {
whiteboard.loadData(data)
});
/*----------------/
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() {
alert("yoyo");
});
$("#saveAsJSONBtn").click(function() {
alert("yoyo");
});
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)) {
var form = $('<form action="#" enctype="multipart/form-data" method="post"></form>');
var formData = new FormData(form[0]);
formData.append("file", e.originalEvent.dataTransfer.files[0]);
formData.append("userId", ownSocketId);
formData.append("uploadType", "singleFileUpload");
formData.append("room", roomImIn["roomName"]);
sendFormData(formData, function(msg) {
//success callback
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
writeToChat("Success", "Upload success!");
}, function(err) {
writeToChat("Error", err);
}, function(progress) {
writeToChat("Uploading", progress+'%');
//Upload progress
}, function(progress) {
//Download progress
});
} else {
writeToChat("Error", "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)) {
whiteboard.addImgToCanvasByUrl(url);
} else {
var date = (+new Date());
$.ajax({
type: 'POST',
url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
data: {
'imagedata': url,
'room' : roomImIn["roomName"],
'name' : "whiteboard",
'date' : date,
'userId' : ownSocketId,
'uploadType' : "singleFileUpload"
},
success: function(msg){
var filename = username+"_whiteboard_"+date+".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
writeToChat("Server", "Image uploaded");
},
error : function(err) {
writeToChat("Error", "Failed to upload frame: "+JSON.stringify(err));
}
});
}
} else {
writeToChat("Error", "Can only upload imagedata!");
}
});
}
});
}
}
dragCounter = 0;
whiteboard.dropIndicator.hide();
});
$('#whiteboardColorpicker').colorPicker({
renderCallback : function(elm) {
whiteboard.drawcolor = elm.val();
}
});
});
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;
}
//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);
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;
var date = (+new Date());
$.ajax({
type: 'POST',
url: document.URL.substr(0,document.URL.lastIndexOf('/'))+'/upload',
data: {
'imagedata': base64data,
'room' : roomImIn["roomName"],
'name' : "whiteboard",
'date' : date,
'userId' : ownSocketId,
'uploadType' : "singleFileUpload"
},
success: function(msg){
var filename = username+"_whiteboard_"+date+".png";
whiteboard.addImgToCanvasByUrl(document.URL.substr(0,document.URL.lastIndexOf('/'))+"/singlefiles/"+filename);
console.log("Image uploaded!");
},
error : function(err) {
console.error("Failed to upload frame: "+JSON.stringify(err));
}
});
}
}
}
}
}
});

8
public/js/whiteboard.js
View File

@@ -49,7 +49,7 @@ var whiteboard = {
_this.cursorContainer = $('<div style="position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="fa fa-plus-square-o" aria-hidden="true"></i></div>')
_this.dropIndicator = $('<div style="position:absolute; height: 100%; width: 100%; border: 7px dashed gray; text-align: center; top: 0px; left: 0px; color: gray; font-size: 23em; display: none;"><i class="far fa-plus-square" aria-hidden="true"></i></div>')
_this.mouseOverlay = $('<div style="cursor:none; position: absolute; left:0px; top:0; height: 100%; width: 100%;"></div>');
@@ -473,7 +473,7 @@ var whiteboard = {
'<button draw="0" style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="addToCanvasBtn btn btn-default">Add to background</button> '+
'<button style="margin: 0px 0px; background: #03a9f4; padding: 5px; margin-top: 3px; color: white;" class="xCanvasBtn btn btn-default">x</button>'+
'</div>'+
'<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fa fa-sort-desc" aria-hidden="true"></i>'+
'<i style="position:absolute; bottom: -4px; right: 2px; font-size: 2em; color: gray; transform: rotate(-45deg);" class="fas fa-sort-down" aria-hidden="true"></i>'+
'</div>');
imgDiv.find(".xCanvasBtn").click(function() {
_this.imgDragActive = false;
@@ -510,9 +510,9 @@ var whiteboard = {
_this.drawId++;
imgDiv.remove();
});
_this.mouseOverlay.append(imgDiv);
imgDiv.draggable();
imgDiv.resizable();
_this.mouseOverlay.append(imgDiv);
},
drawImgToBackground(url,width,height,left,top) {
this.imgContainer.append('<img crossorigin="anonymous" style="width:'+width+'px; height:'+height+'px; position:absolute; top:'+top+'px; left:'+left+'px;" src="'+url+'">')
@@ -528,7 +528,7 @@ var whiteboard = {
}
img.src = url;
},
undoWhiteboard : function(username) {
undoWhiteboard : function(username) { //Not call this directly because you will get out of sync whit others...
var _this = this;
if(!username) {
username = _this.settings.username;