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

add code comments and improve code

Browse Source
This commit is contained in:
raphael 2019-01-11 11:24:04 +01:00
parent cba74147ec
commit 8bd4bef6f6
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/js/main.js
View File

@ -39,6 +39,7 @@ $(document).ready(function () {
} }
}); });
// request whiteboard from server
$.get(subdir + "/loadwhiteboard", { wid: whiteboardId }).done(function (data) { $.get(subdir + "/loadwhiteboard", { wid: whiteboardId }).done(function (data) {
whiteboard.loadData(data) whiteboard.loadData(data)
}); });
@ -47,24 +48,29 @@ $(document).ready(function () {
Whiteboard actions Whiteboard actions
/----------------*/ /----------------*/
// whiteboard clear button
$("#whiteboardTrashBtn").click(function () { $("#whiteboardTrashBtn").click(function () {
whiteboard.clearWhiteboard(); whiteboard.clearWhiteboard();
}); });
// undo button
$("#whiteboardUndoBtn").click(function () { $("#whiteboardUndoBtn").click(function () {
whiteboard.undoWhiteboardClick(); whiteboard.undoWhiteboardClick();
}); });
// switch tool
$(".whiteboardTool").click(function () { $(".whiteboardTool").click(function () {
$(".whiteboardTool").removeClass("active"); $(".whiteboardTool").removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
whiteboard.setTool($(this).attr("tool")); whiteboard.setTool($(this).attr("tool"));
}); });
// upload image button
$("#addImgToCanvasBtn").click(function () { $("#addImgToCanvasBtn").click(function () {
alert("Just drag and drop images in!"); alert("Please drag the image into the browser.");
}); });
// save image to png
$("#saveAsImageBtn").click(function () { $("#saveAsImageBtn").click(function () {
var imgData = whiteboard.getImageDataBase64(); var imgData = whiteboard.getImageDataBase64();
var a = document.createElement('a'); var a = document.createElement('a');
@ -75,6 +81,7 @@ $(document).ready(function () {
document.body.removeChild(a); document.body.removeChild(a);
}); });
// save image to json containing steps
$("#saveAsJSONBtn").click(function () { $("#saveAsJSONBtn").click(function () {
var imgData = whiteboard.getImageDataJson(); var imgData = whiteboard.getImageDataJson();
var a = window.document.createElement('a'); var a = window.document.createElement('a');
@ -87,10 +94,12 @@ $(document).ready(function () {
document.body.removeChild(a); document.body.removeChild(a);
}); });
// upload json containing steps
$("#uploadJsonBtn").click(function () { $("#uploadJsonBtn").click(function () {
$("#myFile").click(); $("#myFile").click();
}); });
// load json to whiteboard
$("#myFile").on("change", function () { $("#myFile").on("change", function () {
var file = document.getElementById("myFile").files[0]; var file = document.getElementById("myFile").files[0];
var reader = new FileReader(); var reader = new FileReader();
@ -106,6 +115,12 @@ $(document).ready(function () {
$(this).val(""); $(this).val("");
}); });
// On thickness slider change
$("#whiteboardThicknessSlider").on("change", function () {
whiteboard.thickness = $(this).val();
});
// handle drag&drop
var dragCounter = 0; var dragCounter = 0;
$('#whiteboardContainer').on("dragenter", function (e) { $('#whiteboardContainer').on("dragenter", function (e) {
e.preventDefault(); e.preventDefault();
@ -123,11 +138,7 @@ $(document).ready(function () {
} }
}); });
$("#whiteboardThicknessSlider").on("change", function () { $('#whiteboardContainer').on('drop', function (e) { //Handle drop
whiteboard.thickness = $(this).val();
});
$('#whiteboardContainer').on('drop', function (e) { //Handle drag & drop
if (e.originalEvent.dataTransfer) { if (e.originalEvent.dataTransfer) {
if (e.originalEvent.dataTransfer.files.length) { //File from harddisc if (e.originalEvent.dataTransfer.files.length) { //File from harddisc
e.preventDefault(); e.preventDefault();
@ -218,15 +229,15 @@ function uploadImgAndAddToWhiteboard(base64data) {
}); });
} }
// verify if filename refers to an image
function isImageFileName(filename) { function isImageFileName(filename) {
var ending = filename.split(".")[filename.split(".").length - 1]; var extension = filename.split(".")[filename.split(".").length - 1];
if (ending.toLowerCase() == "png" || ending.toLowerCase() == "jpg" || ending.toLowerCase() == "jpeg" || ending.toLowerCase() == "gif" || ending.toLowerCase() == "tiff") { var known_extensions = ["png", "jpg", "jpeg", "gif", "tiff"];
return true; return known_extensions.includes(extension.toLowerCase());
}
return false;
} }
function isValidImageUrl(url, callback) { //Check if given url it is a vaild img url // verify if given url is url to an image
function isValidImageUrl(url, callback) {
var img = new Image(); var img = new Image();
var timer = null; var timer = null;
img.onerror = img.onabort = function () { img.onerror = img.onabort = function () {
@ -243,7 +254,8 @@ function isValidImageUrl(url, callback) { //Check if given url it is a vaild img
img.src = url; img.src = url;
} }
window.addEventListener("paste", function (e) { //Even do copy & paste from clipboard // handle pasting from clipboard
window.addEventListener("paste", function (e) {
if (e.clipboardData) { if (e.clipboardData) {
var items = e.clipboardData.items; var items = e.clipboardData.items;
if (items) { if (items) {
@ -266,6 +278,7 @@ window.addEventListener("paste", function (e) { //Even do copy & paste from clip
} }
}); });
// get 'GET' parameter by variable name
function getQueryVariable(variable) { function getQueryVariable(variable) {
var query = window.location.search.substring(1); var query = window.location.search.substring(1);
var vars = query.split("&"); var vars = query.split("&");