Restyle and refactor popup dialogs

assets/script.js

@@ -20,88 +20,42 @@ function isEdited(form) {
     return false;
 }
 
-const dialogTemplate = {
+function instantiate(templateId) {
-    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>",
+    return document.getElementById(templateId).firstElementChild.cloneNode(true);
-    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) {
+function popup(dialog) {
-    const dialog = document.createElement("div");
+    document.body.appendChild(dialog);
-    dialog.className = "modal-block";
+    dialog.querySelector(".primary").focus();
-    dialog.innerHTML = dialogTemplate[templateId];
+
-    return dialog;
+    return new Promise((resolve, reject) => {
+        function handler(ev) {
+            document.body.removeChild(dialog);
+            resolve(ev.target.getAttribute("data-value"));
+        }
+
+        const buttons = dialog.querySelectorAll('.btn-row>*');
+        for (let i = 0; i < buttons.length; ++i)
+            buttons[i].addEventListener("click", handler);
+    });
 }
 
 function loginDialog(loginUrl) {
-    const dialog = createPopup("login");
+    const dialog = instantiate("login");
-    const remove = () => document.body.removeChild(dialog);
+    dialog.querySelector("a").setAttribute("href", loginUrl);
-
+    return popup(dialog);
-    const loginLink = dialog.querySelector("a");
-    const dismiss = dialog.querySelector("button");
-
-    loginLink.setAttribute("href", loginUrl);
-
-    document.body.appendChild(dialog);
-    loginLink.focus();
-
-    return new Promise((resolve, reject) => {
-        loginLink.addEventListener("click", () => {
-            remove();
-            resolve();
-        });
-
-        dismiss.addEventListener("click", () => {
-            remove();
-            resolve();
-        });
-    });
 }
 
 function alertAsync(message) {
-    const dialog = createPopup("alert");
+    const dialog = instantiate("alert");
-    const remove = () => document.body.removeChild(dialog);
+    dialog.querySelector(".message").textContent = message;
-
+    return popup(dialog);
-    const messageNode = dialog.querySelector(".message");
-    const dismiss = dialog.querySelector("button");
-
-    messageNode.textContent = message;
-
-    document.body.appendChild(dialog);
-    dismiss.focus();
-
-    return new Promise((resolve, reject) => {
-        dismiss.addEventListener("click", () => {
-            remove();
-            resolve();
-        });
-    });
 }
 
 function confirmAsync(message) {
-    const dialog = createPopup("confirm");
+    const dialog = instantiate("confirm");
-    const remove = () => document.body.removeChild(dialog);
+    dialog.querySelector(".message").textContent = message;
-
+    return popup(dialog);
-    const messageNode = dialog.querySelector(".message");
-    const btnNo = dialog.querySelector('button[name="no"]');
-    const btnYes = dialog.querySelector('button[name="yes"]');
-
-    messageNode.textContent = message;
-
-    document.body.appendChild(dialog);
-    btnNo.focus();
-
-    return new Promise((resolve, reject) => {
-        btnNo.addEventListener("click", () => {
-            remove();
-            resolve(false);
-        });
-
-        btnYes.addEventListener("click", () => {
-            remove();
-            resolve(true);
-        });
-    });
 }
 
 let hasBeenOpen = false;

assets/style.css

@@ -459,8 +459,33 @@ input[type="search"] {
 }
 
 .popup>.btn-row {
-    padding: 16px;
+    display: flex;
-    background: #ccc;
+    flex-direction: row;
+
+    font-family: -apple-system, BlinkMacSystemFont,
+        "Segoe UI", "Roboto", "Oxygen",
+        "Ubuntu", "Cantarell", "Fira Sans",
+        "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.btn-row>* {
+    padding: 8px 16px;
+    margin: 0;
+    background: white;
+    color: black;
+    border: none;
+    flex: 1;
+
+    font-family: inherit;
+    cursor: pointer;
+}
+.btn-row>*:hover {
+    text-decoration: underline;
+}
+
+.primary {
+    background: #337ab7;
+    color: white;
 }
 
 @media print {

templates/article.html

@@ -38,3 +38,5 @@
 ></ul>
 {{>footer/items.html}}
 </footer>
+
+{{>dialog_prototypes.html}}

templates/dialog_prototypes.html

@@ -0,0 +1,35 @@
+<div class=prototype id=login>
+    <div class=modal-block>
+        <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 class=primary href='' target=login>Open login page</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class=prototype id=alert>
+    <div class=modal-block>
+        <div class=popup>
+            <div class=message></div>
+            <div class=btn-row><button class=primary>OK</button></div>
+        </div>
+    </div>
+</div>
+
+<div class=prototype id=confirm>
+    <div class=modal-block>
+        <div class=popup>
+            <div class=message></div>
+            <div class=btn-row>
+                <button class=primary>No</button>
+                <button data-value=true>Yes</button>
+            </div>
+        </div>
+    </div>
+</div>