From 259c8840452d7162c85059dd745fb23a6007fe7c Mon Sep 17 00:00:00 2001
From: Magnus Hoff <maghoff@gmail.com>
Date: Fri, 1 Dec 2017 16:52:39 +0100
Subject: [PATCH] Refactor popups a little

---
 assets/script.js | 42 +++++++++++++++++-------------------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/assets/script.js b/assets/script.js
index d9992da..ef9704d 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -20,12 +20,22 @@ function isEdited(form) {
     return false;
 }
 
-function loginDialog(loginUrl) {
-    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>";
+const dialogTemplate = {
+    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");
     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 dismiss = dialog.querySelector("button");
@@ -35,10 +45,6 @@ function loginDialog(loginUrl) {
     document.body.appendChild(dialog);
     loginLink.focus();
 
-    function remove() {
-        document.body.removeChild(dialog);
-    }
-
     return new Promise((resolve, reject) => {
         loginLink.addEventListener("click", () => {
             remove();
@@ -53,11 +59,8 @@ function loginDialog(loginUrl) {
 }
 
 function alertAsync(message) {
-    const dialogHtml = "<div class=popup><div class=message></div><div class=btn-row><button>OK</button></div></div>";
-
-    const dialog = document.createElement("div");
-    dialog.className = "modal-block";
-    dialog.innerHTML = dialogHtml;
+    const dialog = createPopup("alert");
+    const remove = () => document.body.removeChild(dialog);
 
     const messageNode = dialog.querySelector(".message");
     const dismiss = dialog.querySelector("button");
@@ -67,10 +70,6 @@ function alertAsync(message) {
     document.body.appendChild(dialog);
     dismiss.focus();
 
-    function remove() {
-        document.body.removeChild(dialog);
-    }
-
     return new Promise((resolve, reject) => {
         dismiss.addEventListener("click", () => {
             remove();
@@ -80,11 +79,8 @@ function alertAsync(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 = document.createElement("div");
-    dialog.className = "modal-block";
-    dialog.innerHTML = dialogHtml;
+    const dialog = createPopup("confirm");
+    const remove = () => document.body.removeChild(dialog);
 
     const messageNode = dialog.querySelector(".message");
     const btnNo = dialog.querySelector('button[name="no"]');
@@ -95,10 +91,6 @@ function confirmAsync(message) {
     document.body.appendChild(dialog);
     btnNo.focus();
 
-    function remove() {
-        document.body.removeChild(dialog);
-    }
-
     return new Promise((resolve, reject) => {
         btnNo.addEventListener("click", () => {
             remove();