Restyle and refactor popup dialogs
This commit is contained in:
Magnus Hoff
parent
9f5b057266
commit
bc0f8b8046
4 changed files with 90 additions and 74 deletions
|
|
@ -20,88 +20,42 @@ function isEdited(form) {
|
|||
return false;
|
||||
}
|
||||
|
||||
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 instantiate(templateId) {
|
||||
return document.getElementById(templateId).firstElementChild.cloneNode(true);
|
||||
}
|
||||
|
||||
function createPopup(templateId) {
|
||||
const dialog = document.createElement("div");
|
||||
dialog.className = "modal-block";
|
||||
dialog.innerHTML = dialogTemplate[templateId];
|
||||
return dialog;
|
||||
function popup(dialog) {
|
||||
document.body.appendChild(dialog);
|
||||
dialog.querySelector(".primary").focus();
|
||||
|
||||
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 remove = () => document.body.removeChild(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();
|
||||
});
|
||||
});
|
||||
const dialog = instantiate("login");
|
||||
dialog.querySelector("a").setAttribute("href", loginUrl);
|
||||
return popup(dialog);
|
||||
}
|
||||
|
||||
function alertAsync(message) {
|
||||
const dialog = createPopup("alert");
|
||||
const remove = () => document.body.removeChild(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();
|
||||
});
|
||||
});
|
||||
const dialog = instantiate("alert");
|
||||
dialog.querySelector(".message").textContent = message;
|
||||
return popup(dialog);
|
||||
}
|
||||
|
||||
function confirmAsync(message) {
|
||||
const dialog = createPopup("confirm");
|
||||
const remove = () => document.body.removeChild(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);
|
||||
});
|
||||
});
|
||||
const dialog = instantiate("confirm");
|
||||
dialog.querySelector(".message").textContent = message;
|
||||
return popup(dialog);
|
||||
}
|
||||
|
||||
let hasBeenOpen = false;
|
||||
|
|
|
|||
|
|
@ -459,8 +459,33 @@ input[type="search"] {
|
|||
}
|
||||
|
||||
.popup>.btn-row {
|
||||
padding: 16px;
|
||||
background: #ccc;
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -38,3 +38,5 @@
|
|||
></ul>
|
||||
{{>footer/items.html}}
|
||||
</footer>
|
||||
|
||||
{{>dialog_prototypes.html}}
|
||||
|
|
|
|||
35
templates/dialog_prototypes.html
Normal file
35
templates/dialog_prototypes.html
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue