serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor popups a little

Browse source
This commit is contained in:
Magnus Hoff 2017-12-01 16:52:39 +01:00
parent ebef585c9c
commit 259c884045
1 changed files with 17 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
assets/script.js
View file

@ -20,12 +20,22 @@ function isEdited(form) {
return false; return false;
} }
function loginDialog(loginUrl) { const dialogTemplate = {
const loginDialogHtml = "<div class=popup><div class=message><p>Your changes could not be saved</p><p>Log in and try again</p></div><div class=btn-row><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>"; login: "<div class=popup><div class=message><p>Your changes could not be saved</p><p>Log in and try again</p></div><div class=btn-row><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>",
alert: "<div class=popup><div class=message></div><div class=btn-row><button>OK</button></div></div>",
confirm:"<div class=popup><div class=message></div><div class=btn-row><button name=no>No</button> <button name=yes>Yes</button></div></div>"
};
function createPopup(templateId) {
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.className = "modal-block"; dialog.className = "modal-block";
dialog.innerHTML = loginDialogHtml; dialog.innerHTML = dialogTemplate[templateId];
return dialog;
}
function loginDialog(loginUrl) {
const dialog = createPopup("login");
const remove = () => document.body.removeChild(dialog);
const loginLink = dialog.querySelector("a"); const loginLink = dialog.querySelector("a");
const dismiss = dialog.querySelector("button"); const dismiss = dialog.querySelector("button");
@ -35,10 +45,6 @@ function loginDialog(loginUrl) {
document.body.appendChild(dialog); document.body.appendChild(dialog);
loginLink.focus(); loginLink.focus();
function remove() {
document.body.removeChild(dialog);
}
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loginLink.addEventListener("click", () => { loginLink.addEventListener("click", () => {
remove(); remove();
@ -53,11 +59,8 @@ function loginDialog(loginUrl) {
} }
function alertAsync(message) { function alertAsync(message) {
const dialogHtml = "<div class=popup><div class=message></div><div class=btn-row><button>OK</button></div></div>"; const dialog = createPopup("alert");
const remove = () => document.body.removeChild(dialog);
const dialog = document.createElement("div");
dialog.className = "modal-block";
dialog.innerHTML = dialogHtml;
const messageNode = dialog.querySelector(".message"); const messageNode = dialog.querySelector(".message");
const dismiss = dialog.querySelector("button"); const dismiss = dialog.querySelector("button");
@ -67,10 +70,6 @@ function alertAsync(message) {
document.body.appendChild(dialog); document.body.appendChild(dialog);
dismiss.focus(); dismiss.focus();
function remove() {
document.body.removeChild(dialog);
}
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
dismiss.addEventListener("click", () => { dismiss.addEventListener("click", () => {
remove(); remove();
@ -80,11 +79,8 @@ function alertAsync(message) {
} }
function confirmAsync(message) { function confirmAsync(message) {
const dialogHtml = "<div class=popup><div class=message></div><div class=btn-row><button name=no>No</button> <button name=yes>Yes</button></div></div>"; const dialog = createPopup("confirm");
const remove = () => document.body.removeChild(dialog);
const dialog = document.createElement("div");
dialog.className = "modal-block";
dialog.innerHTML = dialogHtml;
const messageNode = dialog.querySelector(".message"); const messageNode = dialog.querySelector(".message");
const btnNo = dialog.querySelector('button[name="no"]'); const btnNo = dialog.querySelector('button[name="no"]');
@ -95,10 +91,6 @@ function confirmAsync(message) {
document.body.appendChild(dialog); document.body.appendChild(dialog);
btnNo.focus(); btnNo.focus();
function remove() {
document.body.removeChild(dialog);
}
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
btnNo.addEventListener("click", () => { btnNo.addEventListener("click", () => {
remove(); remove();