ElnuDev
/
soudan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve server outage UX

Browse Source
main
Elnu 2 years ago
parent 3238fcb8f3
commit 632ce5efa8
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File

10
demo/soudan.js
Unescape View File

@ -12,7 +12,9 @@ function commentForm(parent) {
function commentDisplay(comment, replies) { function commentDisplay(comment, replies) {
return `<div id="${comment.id}" class="soudan-comment"><img class="soudan-avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div>${typeof replies === "string" ? `<button title="Reply" style="float: right; margin-left: 0.5em" onclick="this.disabled = true; reply(${comment.id})"><svg xmlns="http://www.w3.org/2000/svg" style="width: 20px" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg></button>` : ""}<button title="Share" style="float: right" onclick="navigator.clipboard.writeText('${document.location.origin}${document.location.pathname}#${comment.id}'); alert('Copied comment share link to clipboard!')"><svg xmlns="http://www.w3.org/2000/svg" style="diplay: inline; width: 20px" viewBox="0 0 20 20" fill="currentColor"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /></svg></button><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${md.render(comment.text)}</div>${typeof replies === "string" ? `<div class="soudan-replies">${replies ? replies : ""}</div>` : ""}</div></div>`; return `<div id="${comment.id}" class="soudan-comment"><img class="soudan-avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div>${typeof replies === "string" ? `<button title="Reply" style="float: right; margin-left: 0.5em" onclick="this.disabled = true; reply(${comment.id})"><svg xmlns="http://www.w3.org/2000/svg" style="width: 20px" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /></svg></button>` : ""}<button title="Share" style="float: right" onclick="navigator.clipboard.writeText('${document.location.origin}${document.location.pathname}#${comment.id}'); alert('Copied comment share link to clipboard!')"><svg xmlns="http://www.w3.org/2000/svg" style="diplay: inline; width: 20px" viewBox="0 0 20 20" fill="currentColor"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" /></svg></button><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${md.render(comment.text)}</div>${typeof replies === "string" ? `<div class="soudan-replies">${replies ? replies : ""}</div>` : ""}</div></div>`;
} }
document.getElementById("soudan").innerHTML = `<h3>Make a comment</h3> const container = document.getElementById("soudan");
container.style.display = "none";
container.innerHTML = `<h3>Make a comment</h3>
${commentForm()} ${commentForm()}
<h3 id="soudan-comments-header">Comments</h3> <h3 id="soudan-comments-header">Comments</h3>
<div id="soudan-comments"></div>`; <div id="soudan-comments"></div>`;
@ -41,11 +43,12 @@ function submitForm(form, e) {
}) })
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
return; Promsise.reject();
} }
form.querySelector("textarea").value = ""; form.querySelector("textarea").value = "";
reloadComments(); reloadComments();
}) })
.catch(error => alert("Something went wrong posting your comment!"))
e.preventDefault(); e.preventDefault();
} }
@ -81,6 +84,7 @@ function reloadComments(jump) {
}); });
} }
commentContainer.innerHTML = html; commentContainer.innerHTML = html;
soudan.style.display = "";
if (jump && window.location.hash) { if (jump && window.location.hash) {
const target = document.getElementById(window.location.hash.substring(1)); const target = document.getElementById(window.location.hash.substring(1));
if (target) { if (target) {
@ -88,7 +92,7 @@ function reloadComments(jump) {
target.classList.add("soudan-highlighted"); target.classList.add("soudan-highlighted");
} }
} }
}); })
} }
function reply(id) { function reply(id) {

Write Preview
Loading…
Cancel
Save