chore(front): remove click events before adding them
* Helps with hot reloading in dev env * Prevents the same event handlers from being registered twice * Shouldn't break things
This commit is contained in:
Florent Chehab
parent
e7725e30d5
commit
a78bb8a0d7
536
src/js/main.js
536
src/js/main.js
@ -117,15 +117,21 @@ function showBasicAlert(html, newOptions) {
|
|||||||
);
|
);
|
||||||
alertHtml.find(".htmlcontent").append(html);
|
alertHtml.find(".htmlcontent").append(html);
|
||||||
$("body").append(alertHtml);
|
$("body").append(alertHtml);
|
||||||
alertHtml.find(".okbtn").click(function () {
|
alertHtml
|
||||||
if (options.onOkClick) {
|
.find(".okbtn")
|
||||||
options.onOkClick();
|
.off("click")
|
||||||
}
|
.click(function () {
|
||||||
alertHtml.remove();
|
if (options.onOkClick) {
|
||||||
});
|
options.onOkClick();
|
||||||
alertHtml.find(".closeAlert").click(function () {
|
}
|
||||||
alertHtml.remove();
|
alertHtml.remove();
|
||||||
});
|
});
|
||||||
|
alertHtml
|
||||||
|
.find(".closeAlert")
|
||||||
|
.off("click")
|
||||||
|
.click(function () {
|
||||||
|
alertHtml.remove();
|
||||||
|
});
|
||||||
|
|
||||||
if (options.hideAfter) {
|
if (options.hideAfter) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
@ -236,272 +242,309 @@ function initWhiteboard() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// whiteboard clear button
|
// whiteboard clear button
|
||||||
$("#whiteboardTrashBtn").click(function () {
|
$("#whiteboardTrashBtn")
|
||||||
$("#whiteboardTrashBtnConfirm").show().focus();
|
.off("click")
|
||||||
$(this).css({ visibility: "hidden" });
|
.click(function () {
|
||||||
});
|
$("#whiteboardTrashBtnConfirm").show().focus();
|
||||||
|
$(this).css({ visibility: "hidden" });
|
||||||
|
});
|
||||||
|
|
||||||
$("#whiteboardTrashBtnConfirm").mouseout(function () {
|
$("#whiteboardTrashBtnConfirm").mouseout(function () {
|
||||||
$(this).hide();
|
$(this).hide();
|
||||||
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
|
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#whiteboardTrashBtnConfirm").click(function () {
|
$("#whiteboardTrashBtnConfirm")
|
||||||
$(this).hide();
|
.off("click")
|
||||||
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
|
.click(function () {
|
||||||
whiteboard.clearWhiteboard();
|
$(this).hide();
|
||||||
});
|
$("#whiteboardTrashBtn").css({ visibility: "inherit" });
|
||||||
|
whiteboard.clearWhiteboard();
|
||||||
|
});
|
||||||
|
|
||||||
// undo button
|
// undo button
|
||||||
$("#whiteboardUndoBtn").click(function () {
|
$("#whiteboardUndoBtn")
|
||||||
whiteboard.undoWhiteboardClick();
|
.off("click")
|
||||||
});
|
.click(function () {
|
||||||
|
whiteboard.undoWhiteboardClick();
|
||||||
|
});
|
||||||
|
|
||||||
// redo button
|
// redo button
|
||||||
$("#whiteboardRedoBtn").click(function () {
|
$("#whiteboardRedoBtn")
|
||||||
whiteboard.redoWhiteboardClick();
|
.off("click")
|
||||||
});
|
.click(function () {
|
||||||
|
whiteboard.redoWhiteboardClick();
|
||||||
|
});
|
||||||
|
|
||||||
// view only
|
// view only
|
||||||
$("#whiteboardLockBtn").click(() => {
|
$("#whiteboardLockBtn")
|
||||||
ReadOnlyService.deactivateReadOnlyMode();
|
.off("click")
|
||||||
});
|
.click(() => {
|
||||||
$("#whiteboardUnlockBtn").click(() => {
|
ReadOnlyService.deactivateReadOnlyMode();
|
||||||
ReadOnlyService.activateReadOnlyMode();
|
});
|
||||||
});
|
$("#whiteboardUnlockBtn")
|
||||||
|
.off("click")
|
||||||
|
.click(() => {
|
||||||
|
ReadOnlyService.activateReadOnlyMode();
|
||||||
|
});
|
||||||
$("#whiteboardUnlockBtn").hide();
|
$("#whiteboardUnlockBtn").hide();
|
||||||
$("#whiteboardLockBtn").show();
|
$("#whiteboardLockBtn").show();
|
||||||
|
|
||||||
// switch tool
|
// switch tool
|
||||||
$(".whiteboard-tool").click(function () {
|
$(".whiteboard-tool")
|
||||||
$(".whiteboard-tool").removeClass("active");
|
.off("click")
|
||||||
$(this).addClass("active");
|
.click(function () {
|
||||||
var activeTool = $(this).attr("tool");
|
$(".whiteboard-tool").removeClass("active");
|
||||||
whiteboard.setTool(activeTool);
|
$(this).addClass("active");
|
||||||
if (activeTool == "mouse" || activeTool == "recSelect") {
|
var activeTool = $(this).attr("tool");
|
||||||
$(".activeToolIcon").empty();
|
whiteboard.setTool(activeTool);
|
||||||
} else {
|
if (activeTool == "mouse" || activeTool == "recSelect") {
|
||||||
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
|
$(".activeToolIcon").empty();
|
||||||
}
|
} else {
|
||||||
});
|
$(".activeToolIcon").html($(this).html()); //Set Active icon the same as the button icon
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// upload image button
|
// upload image button
|
||||||
$("#addImgToCanvasBtn").click(function () {
|
$("#addImgToCanvasBtn")
|
||||||
if (ReadOnlyService.readOnlyActive) return;
|
.off("click")
|
||||||
showBasicAlert("Please drag the image into the browser.");
|
.click(function () {
|
||||||
});
|
if (ReadOnlyService.readOnlyActive) return;
|
||||||
|
showBasicAlert("Please drag the image into the browser.");
|
||||||
|
});
|
||||||
|
|
||||||
// save image as imgae
|
// save image as imgae
|
||||||
$("#saveAsImageBtn").click(function () {
|
$("#saveAsImageBtn")
|
||||||
whiteboard.getImageDataBase64(
|
.off("click")
|
||||||
{
|
.click(function () {
|
||||||
imageFormat: ConfigService.imageDownloadFormat,
|
|
||||||
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
|
|
||||||
},
|
|
||||||
function (imgData) {
|
|
||||||
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." + ConfigService.imageDownloadFormat;
|
|
||||||
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);
|
|
||||||
whiteboard.getImageDataBase64(
|
whiteboard.getImageDataBase64(
|
||||||
{
|
{
|
||||||
imageFormat: ConfigService.imageDownloadFormat,
|
imageFormat: ConfigService.imageDownloadFormat,
|
||||||
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
|
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
|
||||||
},
|
},
|
||||||
function (base64data) {
|
function (imgData) {
|
||||||
var webdavaccess = {
|
var w = window.open("about:blank"); //Firefox will not allow downloads without extra window
|
||||||
webdavserver: webdavserver,
|
setTimeout(function () {
|
||||||
webdavpath: webdavpath,
|
//FireFox seems to require a setTimeout for this to work.
|
||||||
webdavusername: webdavusername,
|
var a = document.createElement("a");
|
||||||
webdavpassword: webdavpassword,
|
a.href = imgData;
|
||||||
};
|
a.download = "whiteboard." + ConfigService.imageDownloadFormat;
|
||||||
webDavHtml.find(".loadingWebdavText").show();
|
w.document.body.appendChild(a);
|
||||||
webDavHtml.find(".webdavUploadBtn").hide();
|
a.click();
|
||||||
saveWhiteboardToWebdav(base64data, webdavaccess, function (err) {
|
w.document.body.removeChild(a);
|
||||||
if (err) {
|
setTimeout(function () {
|
||||||
webDavHtml.find(".loadingWebdavText").hide();
|
w.close();
|
||||||
webDavHtml.find(".webdavUploadBtn").show();
|
}, 100);
|
||||||
} else {
|
}, 0);
|
||||||
webDavHtml.parents(".basicalert").remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
showBasicAlert(webDavHtml, {
|
|
||||||
header: "Save to Webdav",
|
// save image to json containing steps
|
||||||
okBtnText: "cancel",
|
$("#saveAsJSONBtn")
|
||||||
headercolor: "#0082c9",
|
.off("click")
|
||||||
|
.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);
|
||||||
});
|
});
|
||||||
// render newly added icons
|
|
||||||
dom.i2svg();
|
|
||||||
});
|
|
||||||
|
|
||||||
// upload json containing steps
|
$("#uploadWebDavBtn")
|
||||||
$("#uploadJsonBtn").click(function () {
|
.off("click")
|
||||||
$("#myFile").click();
|
.click(function () {
|
||||||
});
|
if ($(".webdavUploadBtn").length > 0) {
|
||||||
|
return;
|
||||||
$("#shareWhiteboardBtn").click(() => {
|
|
||||||
function urlToClipboard(whiteboardId = null) {
|
|
||||||
const { protocol, host, pathname, search } = window.location;
|
|
||||||
const basePath = `${protocol}//${host}${pathname}`;
|
|
||||||
const getParams = new URLSearchParams(search);
|
|
||||||
|
|
||||||
// Clear ursername from get parameters
|
|
||||||
getParams.delete("username");
|
|
||||||
|
|
||||||
if (whiteboardId) {
|
|
||||||
// override whiteboardId value in URL
|
|
||||||
getParams.set("whiteboardid", whiteboardId);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = `${basePath}?${getParams.toString()}`;
|
var webdavserver = localStorage.getItem("webdavserver") || "";
|
||||||
$("<textarea/>")
|
var webdavpath = localStorage.getItem("webdavpath") || "/";
|
||||||
.appendTo("body")
|
var webdavusername = localStorage.getItem("webdavusername") || "";
|
||||||
.val(url)
|
var webdavpassword = localStorage.getItem("webdavpassword") || "";
|
||||||
.select()
|
var webDavHtml = $(
|
||||||
.each(() => {
|
"<div>" +
|
||||||
document.execCommand("copy");
|
"<table>" +
|
||||||
})
|
"<tr>" +
|
||||||
.remove();
|
"<td>Server URL:</td>" +
|
||||||
}
|
'<td><input class="webdavserver" type="text" value="' +
|
||||||
|
webdavserver +
|
||||||
// UI related
|
'" placeholder="https://yourserver.com/remote.php/webdav/"></td>' +
|
||||||
// clear message
|
"<td></td>" +
|
||||||
$("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
|
"</tr>" +
|
||||||
|
"<tr>" +
|
||||||
$("#shareWhiteboardDialog").toggleClass("displayNone", false);
|
"<td>Path:</td>" +
|
||||||
$("#shareWhiteboardDialogGoBack").click(() => {
|
'<td><input class="webdavpath" type="text" placeholder="folder" value="' +
|
||||||
$("#shareWhiteboardDialog").toggleClass("displayNone", true);
|
webdavpath +
|
||||||
});
|
'"></td>' +
|
||||||
|
'<td style="font-size: 0.7em;"><i>path always have to start & end with "/"</i></td>' +
|
||||||
$("#shareWhiteboardDialogCopyReadOnlyLink").click(() => {
|
"</tr>" +
|
||||||
urlToClipboard(ConfigService.correspondingReadOnlyWid);
|
"<tr>" +
|
||||||
|
"<td>Username:</td>" +
|
||||||
$("#shareWhiteboardDialogMessage")
|
'<td><input class="webdavusername" type="text" value="' +
|
||||||
.toggleClass("displayNone", false)
|
webdavusername +
|
||||||
.text("Read-only link copied to clipboard ✓");
|
'" placeholder="username"></td>' +
|
||||||
});
|
'<td style="font-size: 0.7em;"></td>' +
|
||||||
|
"</tr>" +
|
||||||
$("#shareWhiteboardDialogCopyReadWriteLink")
|
"<tr>" +
|
||||||
.toggleClass("displayNone", ConfigService.isReadOnly)
|
"<td>Password:</td>" +
|
||||||
.click(() => {
|
'<td><input class="webdavpassword" type="password" value="' +
|
||||||
$("#shareWhiteboardDialogMessage")
|
webdavpassword +
|
||||||
.toggleClass("displayNone", false)
|
'" placeholder="password"></td>' +
|
||||||
.text("Read/write link copied to clipboard ✓");
|
'<td style="font-size: 0.7em;"></td>' +
|
||||||
urlToClipboard();
|
"</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")
|
||||||
|
.off("click")
|
||||||
|
.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);
|
||||||
|
whiteboard.getImageDataBase64(
|
||||||
|
{
|
||||||
|
imageFormat: ConfigService.imageDownloadFormat,
|
||||||
|
drawBackgroundGrid: ConfigService.drawBackgroundGrid,
|
||||||
|
},
|
||||||
|
function (base64data) {
|
||||||
|
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",
|
||||||
});
|
});
|
||||||
});
|
// render newly added icons
|
||||||
|
dom.i2svg();
|
||||||
|
});
|
||||||
|
|
||||||
$("#displayWhiteboardInfoBtn").click(() => {
|
// upload json containing steps
|
||||||
InfoService.toggleDisplayInfo();
|
$("#uploadJsonBtn")
|
||||||
});
|
.off("click")
|
||||||
|
.click(function () {
|
||||||
|
$("#myFile").click();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#shareWhiteboardBtn")
|
||||||
|
.off("click")
|
||||||
|
.click(() => {
|
||||||
|
function urlToClipboard(whiteboardId = null) {
|
||||||
|
const { protocol, host, pathname, search } = window.location;
|
||||||
|
const basePath = `${protocol}//${host}${pathname}`;
|
||||||
|
const getParams = new URLSearchParams(search);
|
||||||
|
|
||||||
|
// Clear ursername from get parameters
|
||||||
|
getParams.delete("username");
|
||||||
|
|
||||||
|
if (whiteboardId) {
|
||||||
|
// override whiteboardId value in URL
|
||||||
|
getParams.set("whiteboardid", whiteboardId);
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${basePath}?${getParams.toString()}`;
|
||||||
|
$("<textarea/>")
|
||||||
|
.appendTo("body")
|
||||||
|
.val(url)
|
||||||
|
.select()
|
||||||
|
.each(() => {
|
||||||
|
document.execCommand("copy");
|
||||||
|
})
|
||||||
|
.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI related
|
||||||
|
// clear message
|
||||||
|
$("#shareWhiteboardDialogMessage").toggleClass("displayNone", true);
|
||||||
|
|
||||||
|
$("#shareWhiteboardDialog").toggleClass("displayNone", false);
|
||||||
|
$("#shareWhiteboardDialogGoBack")
|
||||||
|
.off("click")
|
||||||
|
.click(() => {
|
||||||
|
$("#shareWhiteboardDialog").toggleClass("displayNone", true);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#shareWhiteboardDialogCopyReadOnlyLink")
|
||||||
|
.off("click")
|
||||||
|
.click(() => {
|
||||||
|
urlToClipboard(ConfigService.correspondingReadOnlyWid);
|
||||||
|
|
||||||
|
$("#shareWhiteboardDialogMessage")
|
||||||
|
.toggleClass("displayNone", false)
|
||||||
|
.text("Read-only link copied to clipboard ✓");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#shareWhiteboardDialogCopyReadWriteLink")
|
||||||
|
.toggleClass("displayNone", ConfigService.isReadOnly)
|
||||||
|
.click(() => {
|
||||||
|
$("#shareWhiteboardDialogMessage")
|
||||||
|
.toggleClass("displayNone", false)
|
||||||
|
.text("Read/write link copied to clipboard ✓");
|
||||||
|
urlToClipboard();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#displayWhiteboardInfoBtn")
|
||||||
|
.off("click")
|
||||||
|
.click(() => {
|
||||||
|
InfoService.toggleDisplayInfo();
|
||||||
|
});
|
||||||
|
|
||||||
var btnsMini = false;
|
var btnsMini = false;
|
||||||
$("#minMaxBtn").click(function () {
|
$("#minMaxBtn")
|
||||||
if (!btnsMini) {
|
.off("click")
|
||||||
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
|
.click(function () {
|
||||||
$(this).find("#minBtn").hide();
|
if (!btnsMini) {
|
||||||
$(this).find("#maxBtn").show();
|
$("#toolbar").find(".btn-group:not(.minGroup)").hide();
|
||||||
} else {
|
$(this).find("#minBtn").hide();
|
||||||
$("#toolbar").find(".btn-group").show();
|
$(this).find("#maxBtn").show();
|
||||||
$(this).find("#minBtn").show();
|
} else {
|
||||||
$(this).find("#maxBtn").hide();
|
$("#toolbar").find(".btn-group").show();
|
||||||
}
|
$(this).find("#minBtn").show();
|
||||||
btnsMini = !btnsMini;
|
$(this).find("#maxBtn").hide();
|
||||||
});
|
}
|
||||||
|
btnsMini = !btnsMini;
|
||||||
|
});
|
||||||
|
|
||||||
// load json to whiteboard
|
// load json to whiteboard
|
||||||
$("#myFile").on("change", function () {
|
$("#myFile").on("change", function () {
|
||||||
@ -590,12 +633,15 @@ function initWhiteboard() {
|
|||||||
showPDFPageAsImage(parseInt($(this).val()));
|
showPDFPageAsImage(parseInt($(this).val()));
|
||||||
});
|
});
|
||||||
|
|
||||||
modalDiv.find("button").click(function () {
|
modalDiv
|
||||||
if (currentDataUrl) {
|
.find("button")
|
||||||
$(".basicalert").remove();
|
.off("click")
|
||||||
uploadImgAndAddToWhiteboard(currentDataUrl);
|
.click(function () {
|
||||||
}
|
if (currentDataUrl) {
|
||||||
});
|
$(".basicalert").remove();
|
||||||
|
uploadImgAndAddToWhiteboard(currentDataUrl);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
for (var i = 1; i < pdf.numPages + 1; i++) {
|
for (var i = 1; i < pdf.numPages + 1; i++) {
|
||||||
modalDiv
|
modalDiv
|
||||||
|
|||||||
@ -375,27 +375,33 @@ const whiteboard = {
|
|||||||
width,
|
width,
|
||||||
height
|
height
|
||||||
);
|
);
|
||||||
imgDiv.find(".xCanvasBtn").click(function () {
|
imgDiv
|
||||||
_this.imgDragActive = false;
|
.find(".xCanvasBtn")
|
||||||
_this.refreshCursorAppearance();
|
.off("click")
|
||||||
imgDiv.remove();
|
.click(function () {
|
||||||
dragOutOverlay.remove();
|
_this.imgDragActive = false;
|
||||||
});
|
_this.refreshCursorAppearance();
|
||||||
imgDiv.find(".addToCanvasBtn").click(function () {
|
imgDiv.remove();
|
||||||
_this.imgDragActive = false;
|
dragOutOverlay.remove();
|
||||||
_this.refreshCursorAppearance();
|
});
|
||||||
const p = imgDiv.position();
|
imgDiv
|
||||||
const leftT = Math.round(p.left * 100) / 100;
|
.find(".addToCanvasBtn")
|
||||||
const topT = Math.round(p.top * 100) / 100;
|
.off("click")
|
||||||
_this.drawId++;
|
.click(function () {
|
||||||
_this.sendFunction({
|
_this.imgDragActive = false;
|
||||||
t: _this.tool,
|
_this.refreshCursorAppearance();
|
||||||
d: [left, top, leftT, topT, width, height],
|
const p = imgDiv.position();
|
||||||
|
const leftT = Math.round(p.left * 100) / 100;
|
||||||
|
const topT = Math.round(p.top * 100) / 100;
|
||||||
|
_this.drawId++;
|
||||||
|
_this.sendFunction({
|
||||||
|
t: _this.tool,
|
||||||
|
d: [left, top, leftT, topT, width, height],
|
||||||
|
});
|
||||||
|
_this.dragCanvasRectContent(left, top, leftT, topT, width, height);
|
||||||
|
imgDiv.remove();
|
||||||
|
dragOutOverlay.remove();
|
||||||
});
|
});
|
||||||
_this.dragCanvasRectContent(left, top, leftT, topT, width, height);
|
|
||||||
imgDiv.remove();
|
|
||||||
dragOutOverlay.remove();
|
|
||||||
});
|
|
||||||
imgDiv.draggable();
|
imgDiv.draggable();
|
||||||
_this.svgContainer.find("rect").remove();
|
_this.svgContainer.find("rect").remove();
|
||||||
}
|
}
|
||||||
@ -766,43 +772,49 @@ const whiteboard = {
|
|||||||
'<div class="rotationHandle" style="position:absolute; bottom: -30px; left: 0px; width:100%; text-align:center; cursor:ew-resize;"><i class="fa fa-undo"></i></div>' +
|
'<div class="rotationHandle" style="position:absolute; bottom: -30px; left: 0px; width:100%; text-align:center; cursor:ew-resize;"><i class="fa fa-undo"></i></div>' +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
imgDiv.find(".xCanvasBtn").click(function () {
|
imgDiv
|
||||||
_this.imgDragActive = false;
|
.find(".xCanvasBtn")
|
||||||
_this.refreshCursorAppearance();
|
.off("click")
|
||||||
imgDiv.remove();
|
.click(function () {
|
||||||
_this.setTool(oldTool);
|
_this.imgDragActive = false;
|
||||||
});
|
_this.refreshCursorAppearance();
|
||||||
|
imgDiv.remove();
|
||||||
|
_this.setTool(oldTool);
|
||||||
|
});
|
||||||
var rotationAngle = 0;
|
var rotationAngle = 0;
|
||||||
var recoupLeft = 0;
|
var recoupLeft = 0;
|
||||||
var recoupTop = 0;
|
var recoupTop = 0;
|
||||||
var p = imgDiv.position();
|
var p = imgDiv.position();
|
||||||
var left = 200;
|
var left = 200;
|
||||||
var top = 200;
|
var top = 200;
|
||||||
imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
|
imgDiv
|
||||||
var draw = $(this).attr("draw");
|
.find(".addToCanvasBtn,.addToBackgroundBtn")
|
||||||
_this.imgDragActive = false;
|
.off("click")
|
||||||
|
.click(function () {
|
||||||
|
var draw = $(this).attr("draw");
|
||||||
|
_this.imgDragActive = false;
|
||||||
|
|
||||||
var width = imgDiv.width();
|
var width = imgDiv.width();
|
||||||
var height = imgDiv.height();
|
var height = imgDiv.height();
|
||||||
|
|
||||||
if (draw == "1") {
|
if (draw == "1") {
|
||||||
//draw image to canvas
|
//draw image to canvas
|
||||||
_this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
|
_this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
|
||||||
} else {
|
} else {
|
||||||
//Add image to background
|
//Add image to background
|
||||||
_this.drawImgToBackground(url, width, height, left, top, rotationAngle);
|
_this.drawImgToBackground(url, width, height, left, top, rotationAngle);
|
||||||
}
|
}
|
||||||
_this.sendFunction({
|
_this.sendFunction({
|
||||||
t: "addImgBG",
|
t: "addImgBG",
|
||||||
draw: draw,
|
draw: draw,
|
||||||
url: url,
|
url: url,
|
||||||
d: [width, height, left, top, rotationAngle],
|
d: [width, height, left, top, rotationAngle],
|
||||||
|
});
|
||||||
|
_this.drawId++;
|
||||||
|
imgDiv.remove();
|
||||||
|
_this.refreshCursorAppearance();
|
||||||
|
_this.setTool(oldTool);
|
||||||
});
|
});
|
||||||
_this.drawId++;
|
|
||||||
imgDiv.remove();
|
|
||||||
_this.refreshCursorAppearance();
|
|
||||||
_this.setTool(oldTool);
|
|
||||||
});
|
|
||||||
_this.mouseOverlay.append(imgDiv);
|
_this.mouseOverlay.append(imgDiv);
|
||||||
|
|
||||||
imgDiv.draggable({
|
imgDiv.draggable({
|
||||||
@ -930,12 +942,15 @@ const whiteboard = {
|
|||||||
var text = btoa(unescape(encodeURIComponent($(this).html()))); //Get html and make encode base64 also take care of the charset
|
var text = btoa(unescape(encodeURIComponent($(this).html()))); //Get html and make encode base64 also take care of the charset
|
||||||
_this.sendFunction({ t: "setTextboxText", d: [txId, text] });
|
_this.sendFunction({ t: "setTextboxText", d: [txId, text] });
|
||||||
});
|
});
|
||||||
textBox.find(".removeIcon").click(function (e) {
|
textBox
|
||||||
$("#" + txId).remove();
|
.find(".removeIcon")
|
||||||
_this.sendFunction({ t: "removeTextbox", d: [txId] });
|
.off("click")
|
||||||
e.preventDefault();
|
.click(function (e) {
|
||||||
return false;
|
$("#" + txId).remove();
|
||||||
});
|
_this.sendFunction({ t: "removeTextbox", d: [txId] });
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
if (newLocalBox) {
|
if (newLocalBox) {
|
||||||
textBox.find(".textContent").focus();
|
textBox.find(".textContent").focus();
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user