diff options
author | 2024-03-13 18:20:45 +0100 | |
---|---|---|
committer | 2024-03-13 19:35:20 -0700 | |
commit | e0ee28c01316142de40b6db89d645395251a9dcc (patch) | |
tree | 193eacd11bb0f89c7328d7eeb8e4b1027db96709 /internal/ui/static/js | |
parent | d862d86f907dea7a612b3fe9bdfde102f097d3f1 (diff) | |
download | v2-e0ee28c01316142de40b6db89d645395251a9dcc.tar.gz v2-e0ee28c01316142de40b6db89d645395251a9dcc.tar.zst v2-e0ee28c01316142de40b6db89d645395251a9dcc.zip |
More progress towards trusted-types
Create a new function `addIcon` and use it to add icons, instead of
operating on raw html.
Diffstat (limited to 'internal/ui/static/js')
-rw-r--r-- | internal/ui/static/js/app.js | 28 |
1 files changed, 21 insertions, 7 deletions
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js index 51a73e2e..2ce1a1e8 100644 --- a/internal/ui/static/js/app.js +++ b/internal/ui/static/js/app.js @@ -167,6 +167,14 @@ function handleEntryStatus(item, element, setToRead) { } } +// Add a span-icon with a `label` to `element` as a child +function addIcon(element, label) { + const span = document.createElement('span'); + span.classList.add('icon-label'); + span.textContent = label; + element.appendChild(span); +} + // Change the entry status to the opposite value. function toggleEntryStatus(element, toasting) { const entryID = parseInt(element.dataset.id, 10); @@ -193,7 +201,8 @@ function toggleEntryStatus(element, toasting) { } } - link.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>'; + link.innerHTML = iconElement.innerHTML; + addIcon(link, label); link.dataset.value = newStatus; if (element.classList.contains("item-status-" + currentStatus)) { @@ -258,11 +267,13 @@ function saveEntry(element, toasting) { return; } - element.innerHTML = '<span class="icon-label">' + element.dataset.labelLoading + '</span>'; + element.textContent = ""; + addIcon(element, element.dataset.labelLoading); const request = new RequestBuilder(element.dataset.saveUrl); request.withCallback(() => { - element.innerHTML = '<span class="icon-label">' + element.dataset.labelDone + '</span>'; + element.textContent = ""; + addIcon(element, element.dataset.labelDone); element.dataset.completed = true; if (toasting) { const iconElement = document.querySelector("template#icon-save"); @@ -288,7 +299,8 @@ function toggleBookmark(parentElement, toasting) { return; } - element.innerHTML = '<span class="icon-label">' + element.dataset.labelLoading + '</span>'; + element.textContent = ""; + addIcon(element, element.dataset.labelLoading); const request = new RequestBuilder(element.dataset.bookmarkUrl); request.withCallback(() => { @@ -310,7 +322,8 @@ function toggleBookmark(parentElement, toasting) { } } - element.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>'; + element.innerHTML = iconElement.innerHTML; + addIcon(element, label); element.dataset.value = newStarStatus; }); request.execute(); @@ -328,7 +341,7 @@ function handleFetchOriginalContent() { } const previousElement = element.cloneNode(true); - element.innerHTML = '<span class="icon-label">' + element.dataset.labelLoading + '</span>'; + addIcon(element, element.dataset.labelLoading); const request = new RequestBuilder(element.dataset.fetchContentUrl); request.withCallback((response) => { @@ -615,7 +628,8 @@ function showToast(label, iconElement) { const toastMsgElement = document.getElementById("toast-msg"); if (toastMsgElement) { - toastMsgElement.innerHTML = iconElement.innerHTML + '<span class="icon-label">' + label + '</span>'; + toastMsgElement.innerHTML = iconElement.innerHTML; + addIcon(toastMsgElement, label); const toastElementWrapper = document.getElementById("toast-wrapper"); if (toastElementWrapper) { |