@@ -2769,7 +2769,7 @@
})
return messageBody
}
- function addNotificationBadge(elem, text, { replace = false }) {
+ function addNotificationBadge(elem, text, { replace = false } = {}) {
const animOptions = {
duration: 200,
fill: 'forwards',
@@ -3792,13 +3792,15 @@
if (markUnread) {
sentCount++
}
- sentMails.querySelector(`[data-ref="${prev}"]`)?.remove()
+ if (sentMails.querySelector(`[data-ref="${prev}"]`))
+ sentMails.querySelector(`[data-ref="${prev}"]`).remove()
} else if (to.includes(floDapps.user.id)) {
inboxMails.prepend(render.mailCard(from, ref, subject, time, content, markUnread))
if (markUnread) {
inboxCount++
}
- inboxMails.querySelector(`[data-ref="${prev}"]`)?.remove()
+ if (inboxMails.querySelector(`[data-ref="${prev}"]`))
+ inboxMails.querySelector(`[data-ref="${prev}"]`).remove()
}
}
if (getRef('mail_type_selector').value === 'inbox' && sentCount) {
@@ -3858,10 +3860,11 @@
})
buttonLoader('send_mail_button', true)
messenger.sendMail(subject, content, recipients).then(result => {
- notify(`Mail(s) sent!`)
+ notify(`Mail sent!`, 'success')
renderMailList(result)
closePopup()
- }).catch(error => notify("Failed to send mail!", "error", error))
+ })
+ .catch(error => notify("Failed to send mail!", "error", error))
.finally(() => buttonLoader('send_mail_button', false))
} catch (error) {
notify(error, "error")
diff --git a/scripts/components.js b/scripts/components.js
index 6e2a992..fb26bd3 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -10,7 +10,7 @@ class Stack { constructor() { this.items = [] } push(t) { this.items.push(t) } p
const smSwitch = document.createElement("template"); smSwitch.innerHTML = '\t
', customElements.define("sm-switch", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSwitch.content.cloneNode(!0)), this.switch = this.shadowRoot.querySelector(".switch"), this.input = this.shadowRoot.querySelector("input"), this.isChecked = !1, this.isDisabled = !1, this.dispatch = this.dispatch.bind(this) } static get observedAttributes() { return ["disabled", "checked"] } get disabled() { return this.isDisabled } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get checked() { return this.isChecked } set checked(e) { e ? this.setAttribute("checked", "") : this.removeAttribute("checked") } get value() { return this.isChecked } reset() { } dispatch() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.isChecked } })) } connectedCallback() { this.addEventListener("keydown", e => { " " !== e.key || this.isDisabled || (e.preventDefault(), this.input.click()) }), this.input.addEventListener("click", e => { this.input.checked ? this.checked = !0 : this.checked = !1, this.dispatch() }) } attributeChangedCallback(e, t, n) { t !== n && ("disabled" === e ? this.hasAttribute("disabled") ? this.disabled = !0 : this.disabled = !1 : "checked" === e && (this.hasAttribute("checked") ? (this.isChecked = !0, this.input.checked = !0) : (this.isChecked = !1, this.input.checked = !1))) } });
const smSelect = document.createElement("template"); smSelect.innerHTML = '
', customElements.define("sm-select", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smSelect.content.cloneNode(!0)), this.focusIn = this.focusIn.bind(this), this.reset = this.reset.bind(this), this.open = this.open.bind(this), this.collapse = this.collapse.bind(this), this.toggle = this.toggle.bind(this), this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this), this.handleOptionSelection = this.handleOptionSelection.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.handleClickOutside = this.handleClickOutside.bind(this), this.selectOption = this.selectOption.bind(this), this.debounce = this.debounce.bind(this), this.availableOptions = [], this.previousOption, this.isOpen = !1, this.label = "", this.defaultSelected = "", this.isUnderViewport = !1, this.animationOptions = { duration: 300, fill: "forwards", easing: "ease" }, this.optionList = this.shadowRoot.querySelector(".options"), this.selection = this.shadowRoot.querySelector(".selection"), this.selectedOptionText = this.shadowRoot.querySelector(".selected-option-text") } static get observedAttributes() { return ["disabled", "label"] } get value() { return this.getAttribute("value") } set value(t) { const e = this.shadowRoot.querySelector("slot").assignedElements().find(e => e.getAttribute("value") === t); e ? (this.setAttribute("value", t), this.selectOption(e)) : console.warn(`There is no option with ${t} as value`) } debounce(t, e) { let n = null; return (...i) => { window.clearTimeout(n), n = window.setTimeout(() => { t.apply(null, i) }, e) } } reset(t = !0) { if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) { const e = this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]; this.value = e.getAttribute("value"), t && this.fireEvent() } } selectOption(t) { this.previousOption !== t && (this.querySelectorAll("[selected]").forEach(t => t.removeAttribute("selected")), this.selectedOptionText.textContent = `${this.label}${t.textContent}`, t.setAttribute("selected", ""), this.previousOption = t) } focusIn() { this.selection.focus() } open() { this.availableOptions.forEach(t => t.setAttribute("tabindex", 0)), this.optionList.classList.remove("hidden"), this.isUnderViewport = this.getBoundingClientRect().bottom + this.optionList.getBoundingClientRect().height > window.innerHeight, this.isUnderViewport ? this.setAttribute("isUnder", "") : this.removeAttribute("isUnder"), this.optionList.animate([{ transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }, { transform: "translateY(0)", opacity: 1 }], this.animationOptions), this.setAttribute("open", ""), this.style.zIndex = 1e3, (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), document.addEventListener("mousedown", this.handleClickOutside), this.isOpen = !0 } collapse() { this.removeAttribute("open"), this.optionList.animate([{ transform: "translateY(0)", opacity: 1 }, { transform: `translateY(${this.isUnderViewport ? "" : "-"}0.5rem)`, opacity: 0 }], this.animationOptions).onfinish = (() => { this.availableOptions.forEach(t => t.removeAttribute("tabindex")), document.removeEventListener("mousedown", this.handleClickOutside), this.optionList.classList.add("hidden"), this.isOpen = !1, this.style.zIndex = "auto" }) } toggle() { this.isOpen || this.hasAttribute("disabled") ? this.collapse() : this.open() } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this.value } })) } handleOptionsNavigation(t) { "ArrowUp" === t.key ? (t.preventDefault(), document.activeElement.previousElementSibling ? document.activeElement.previousElementSibling.focus() : this.availableOptions[this.availableOptions.length - 1].focus()) : "ArrowDown" === t.key && (t.preventDefault(), document.activeElement.nextElementSibling ? document.activeElement.nextElementSibling.focus() : this.availableOptions[0].focus()) } handleOptionSelection(t) { this.previousOption !== document.activeElement && (this.value = document.activeElement.getAttribute("value"), this.fireEvent()) } handleClick(t) { t.target === this ? this.toggle() : (this.handleOptionSelection(), this.collapse()) } handleKeydown(t) { t.target === this ? this.isOpen && "ArrowDown" === t.key ? (t.preventDefault(), (this.availableOptions.find(t => t.hasAttribute("selected")) || this.availableOptions[0]).focus(), this.handleOptionSelection(t)) : " " === t.key && (t.preventDefault(), this.toggle()) : (this.handleOptionsNavigation(t), this.handleOptionSelection(t), ["Enter", " ", "Escape", "Tab"].includes(t.key) && (t.preventDefault(), this.collapse(), this.focusIn())) } handleClickOutside(t) { this.isOpen && !this.contains(t.target) && this.collapse() } connectedCallback() { this.setAttribute("role", "listbox"), this.hasAttribute("disabled") || this.selection.setAttribute("tabindex", "0"); let t = this.shadowRoot.querySelector("slot"); t.addEventListener("slotchange", this.debounce(e => { this.availableOptions = t.assignedElements(), this.reset(!1), this.defaultSelected = this.value }, 100)), new IntersectionObserver((t, e) => { t.forEach(t => { if (t.isIntersecting) { const t = this.selection.getBoundingClientRect().left; t < window.innerWidth / 2 ? this.setAttribute("align-select", "left") : this.setAttribute("align-select", "right") } }) }).observe(this), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeydown) } disconnectedCallback() { this.removeEventListener("click", this.handleClick), this.removeEventListener("click", this.toggle), this.removeEventListener("keydown", this.handleKeydown) } attributeChangedCallback(t) { "disabled" === t ? this.hasAttribute("disabled") ? this.selection.removeAttribute("tabindex") : this.selection.setAttribute("tabindex", "0") : "label" === t && (this.label = this.hasAttribute("label") ? `${this.getAttribute("label")} ` : "") } }); const smOption = document.createElement("template"); smOption.innerHTML = "
", customElements.define("sm-option", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smOption.content.cloneNode(!0)) } connectedCallback() { this.setAttribute("role", "option") } });
const spinner = document.createElement("template"); spinner.innerHTML = '
'; class SpinnerLoader extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(spinner.content.cloneNode(!0)) } } window.customElements.define("sm-spinner", SpinnerLoader);
-const smTextarea = document.createElement("template"); smTextarea.innerHTML = '
', customElements.define("sm-textarea", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smTextarea.content.cloneNode(!0)), this.textarea = this.shadowRoot.querySelector("textarea"), this.textareaBox = this.shadowRoot.querySelector(".textarea"), this.placeholder = this.shadowRoot.querySelector(".placeholder"), this.reflectedAttributes = ["disabled", "required", "readonly", "rows", "minlength", "maxlength"], this.reset = this.reset.bind(this), this.focusIn = this.focusIn.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this) } static get observedAttributes() { return ["disabled", "value", "placeholder", "required", "readonly", "rows", "minlength", "maxlength"] } get value() { return this.textarea.value } set value(e) { this.setAttribute("value", e), this.fireEvent() } get disabled() { return this.hasAttribute("disabled") } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get isValid() { return this.textarea.checkValidity() } reset() { this.setAttribute("value", "") } focusIn() { this.textarea.focus() } fireEvent() { let e = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(e) } checkInput() { this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder") && ("" !== this.textarea.value ? this.placeholder.classList.add("hide") : this.placeholder.classList.remove("hide")) } connectedCallback() { this.textarea.addEventListener("input", e => { this.textareaBox.dataset.value = this.textarea.value, this.checkInput() }) } attributeChangedCallback(e, t, n) { this.reflectedAttributes.includes(e) ? this.hasAttribute(e) ? this.textarea.setAttribute(e, this.getAttribute(e) ? this.getAttribute(e) : "") : this.textContent.removeAttribute(e) : "placeholder" === e ? this.placeholder.textContent = this.getAttribute("placeholder") : "value" === e && (this.textarea.value = n, this.textareaBox.dataset.value = n, this.checkInput()) } });
+const smTextarea = document.createElement("template"); smTextarea.innerHTML = '
', customElements.define("sm-textarea", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smTextarea.content.cloneNode(!0)), this.textarea = this.shadowRoot.querySelector("textarea"), this.textareaBox = this.shadowRoot.querySelector(".textarea"), this.placeholder = this.shadowRoot.querySelector(".placeholder"), this.reflectedAttributes = ["disabled", "required", "readonly", "rows", "minlength", "maxlength"], this.reset = this.reset.bind(this), this.focusIn = this.focusIn.bind(this), this.fireEvent = this.fireEvent.bind(this), this.checkInput = this.checkInput.bind(this) } static get observedAttributes() { return ["disabled", "value", "placeholder", "required", "readonly", "rows", "minlength", "maxlength"] } get value() { return this.textarea.value } set value(e) { this.setAttribute("value", e), this.fireEvent() } get disabled() { return this.hasAttribute("disabled") } set disabled(e) { e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled") } get isValid() { return this.textarea.checkValidity() } reset() { this.setAttribute("value", "") } focusIn() { this.textarea.focus() } fireEvent() { let e = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(e) } checkInput() { this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder") && ("" !== this.textarea.value ? this.placeholder.classList.add("hide") : this.placeholder.classList.remove("hide")) } connectedCallback() { this.textarea.addEventListener("input", e => { this.textareaBox.dataset.value = this.textarea.value, this.checkInput() }) } attributeChangedCallback(e, t, n) { this.reflectedAttributes.includes(e) ? this.hasAttribute(e) ? this.textarea.setAttribute(e, this.getAttribute(e) ? this.getAttribute(e) : "") : this.textContent.removeAttribute(e) : "placeholder" === e ? this.placeholder.textContent = this.getAttribute("placeholder") : "value" === e && (this.textarea.value = n, this.textareaBox.dataset.value = n, this.checkInput()) } });
const textField = document.createElement("template"); textField.innerHTML = '
', customElements.define("text-field", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(textField.content.cloneNode(!0)), this.textField = this.shadowRoot.querySelector(".text-field"), this.textContainer = this.textField.children[0], this.editButton = this.textField.querySelector(".edit-button"), this.isTextEditable = !1, this.isDisabled = !1, this.setEditable = this.setEditable.bind(this), this.setNonEditable = this.setNonEditable.bind(this), this.toggleEditable = this.toggleEditable.bind(this), this.revert = this.revert.bind(this) } static get observedAttributes() { return ["disable"] } get value() { return this.text } set value(t) { this.text = t, this.textContainer.textContent = t, this.setAttribute("value", t) } set disabled(t) { this.isDisabled = t, this.isDisabled ? this.setAttribute("disable", "") : this.removeAttribute("disable") } setEditable() { this.isTextEditable || (this.textContainer.contentEditable = !0, this.setAttribute("editable", ""), this.textContainer.focus(), document.execCommand("selectAll", !1, null), this.editButton.textContent = "Done", this.isTextEditable = !0) } setNonEditable() { this.isTextEditable && (this.textContainer.contentEditable = !1, this.removeAttribute("editable"), this.text !== this.textContainer.textContent.trim() && (this.setAttribute("value", this.textContainer.textContent), this.text = this.textContainer.textContent.trim(), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, cancelable: !0, composed: !0 }))), this.editButton.textContent = "Edit", this.isTextEditable = !1) } toggleEditable() { this.isTextEditable ? this.setNonEditable() : this.setEditable() } revert() { this.textContainer.isContentEditable && (this.value = this.text, this.setNonEditable()) } connectedCallback() { this.text, this.hasAttribute("value") && (this.text = this.getAttribute("value"), this.textContainer.textContent = this.text), this.hasAttribute("disable") ? this.isDisabled = !0 : this.isDisabled = !1, this.isDisabled || (this.textContainer.addEventListener("dblclick", this.setEditable), this.editButton.addEventListener("click", this.toggleEditable)) } attributeChangedCallback(t) { "disable" === t && (this.hasAttribute("disable") ? (this.editButton.classList.add("hide"), this.textContainer.removeEventListener("dblclick", this.setEditable), this.editButton.removeEventListener("click", this.toggleEditable), this.revert()) : (this.editButton.classList.remove("hide"), this.textContainer.addEventListener("dblclick", this.setEditable), this.editButton.addEventListener("click", this.toggleEditable))) } disconnectedCallback() { this.textContainer.removeEventListener("dblclick", this.setEditable), this.editButton.removeEventListener("click", this.toggleEditable) } });
const themeToggle = document.createElement("template"); themeToggle.innerHTML = '
'; class ThemeToggle extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(themeToggle.content.cloneNode(!0)), this.isChecked = !1, this.hasTheme = "light", this.toggleState = this.toggleState.bind(this), this.fireEvent = this.fireEvent.bind(this), this.handleThemeChange = this.handleThemeChange.bind(this) } static get observedAttributes() { return ["checked"] } daylight() { this.hasTheme = "light", document.body.dataset.theme = "light", this.setAttribute("aria-checked", "false") } nightlight() { this.hasTheme = "dark", document.body.dataset.theme = "dark", this.setAttribute("aria-checked", "true") } toggleState() { this.toggleAttribute("checked"), this.fireEvent() } handleKeyDown(e) { " " === e.key && this.toggleState() } handleThemeChange(e) { e.detail.theme !== this.hasTheme && ("dark" === e.detail.theme ? this.setAttribute("checked", "") : this.removeAttribute("checked")) } fireEvent() { this.dispatchEvent(new CustomEvent("themechange", { bubbles: !0, composed: !0, detail: { theme: this.hasTheme } })) } connectedCallback() { this.setAttribute("role", "switch"), this.setAttribute("aria-label", "theme toggle"), "dark" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.nightlight(), this.setAttribute("checked", "")) : "light" === localStorage.getItem(`${window.location.hostname}-theme`) ? (this.daylight(), this.removeAttribute("checked")) : window.matchMedia("(prefers-color-scheme: dark)").matches ? (this.nightlight(), this.setAttribute("checked", "")) : (this.daylight(), this.removeAttribute("checked")), this.addEventListener("click", this.toggleState), this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("themechange", this.handleThemeChange) } disconnectedCallback() { this.removeEventListener("click", this.toggleState), this.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("themechange", this.handleThemeChange) } attributeChangedCallback(e, t, n) { "checked" === e && (this.hasAttribute("checked") ? (this.nightlight(), localStorage.setItem(`${window.location.hostname}-theme`, "dark")) : (this.daylight(), localStorage.setItem(`${window.location.hostname}-theme`, "light"))) } } window.customElements.define("theme-toggle", ThemeToggle);
//Color Grid