diff --git a/announcement.css b/announcement.css new file mode 100644 index 0000000..d68d5ff --- /dev/null +++ b/announcement.css @@ -0,0 +1,66 @@ +.betteruptime-announcement { + --betteruptime-announcement-bg: #1f1f20; + --betteruptime-announcement-color: #ffffff; + --betteruptime-annoncement-font-family: "Simvoni", "Roboto", "San Francisco", "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif; + --betteruptime-annoncement-font-size: 14px; + --betteruptime-annoncement-line-height: 1.5; + --betteruptime-announcement-padding-x: 16px; + --betteruptime-announcement-padding-y: 14px; + --betteruptime-announcement-max-width: 970px; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 999999; + background: var(--betteruptime-announcement-bg, #1f1f20); + color: var(--betteruptime-announcement-color, #ffffff); + padding: var(--betteruptime-announcement-padding-y, 14px) var(--betteruptime-announcement-padding-x, 16px); + font-family: var(--betteruptime-annoncement-font-family, "Simvoni", "Roboto", "San Francisco", "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif); + font-size: var(--betteruptime-annoncement-font-size, 14px); + line-height: var(--betteruptime-annoncement-line-height, 1.5); +} +.betteruptime-announcement, +.betteruptime-announcement * { + box-sizing: border-box; +} +.betteruptime-announcement__placeholder { + position: relative; + width: 100%; + z-index: -1; +} +.betteruptime-announcement__placeholder::after { + display: block; + clear: both; + content: ""; +} +.betteruptime-announcement--clickable { + cursor: pointer; +} +.betteruptime-announcement__message { + width: 100%; + max-width: var(--betteruptime-announcement-max-width, 970px); + margin: 0 auto; + text-align: center; + padding-left: 32px; + padding-right: 32px; +} +.betteruptime-announcement__message p { + margin: 0; +} +.betteruptime-announcement__message a { + color: inherit; +} +.betteruptime-announcement__close { + position: absolute; + top: 0; + right: 0; + padding: var(--betteruptime-announcement-padding-y, 14px) var(--betteruptime-announcement-padding-x, 16px); + z-index: 10; + text-decoration: none; + display: block; +} +.betteruptime-announcement__close svg { + width: 20px; + height: 20px; + fill: var(--betteruptime-announcement-color, #ffffff); +} diff --git a/announcement.js b/announcement.js new file mode 100644 index 0000000..7ea054b --- /dev/null +++ b/announcement.js @@ -0,0 +1,142 @@ +// Better Stack announcement bar +// Last Updated 9 December 2023 by JoshAtticus +// For use on Meower sites only + +if (window.BetterUptimeAnnouncementWidget != null) { + window.BetterUptimeAnnouncementWidget.initialize(); +} else { + window.BetterUptimeAnnouncementWidget = { + currentScript: document.currentScript, + cookieName: "betteruptime_announcement_bar_dismissed", + announcementBarWrapper: null, + announcementBar: null, + announcementBarPlaceholder: null, + announcementLink: null, + announcementDigest: null, + initialize() { + if (this.currentScript == null || this.currentScript.dataset == null || this.currentScript.dataset.id == null) { + return; + } + this.loadStylesheet(() => { + this.loadAnnouncementBar(this.currentScript.dataset.id, (err, response) => { + if (response.hidden) { + return; + } + document.querySelectorAll(".betteruptime-announcement").forEach((node) => node.remove()); + this.announcementBarWrapper = this.htmlToElement(response.html); + this.announcementBar = this.announcementBarWrapper.querySelector(".betteruptime-announcement"); + this.announcementDigest = response.digest; + this.announcementLink = response.link; + if (this.announcementDigest === this.getCookie(this.cookieName)) { + return; + } + this.announcementBarPlaceholder = document.createElement("div"); + this.announcementBarPlaceholder.classList.add("betteruptime-announcement__placeholder"); + const firstChild = document.body.firstChild; + document.body.insertBefore(this.announcementBarWrapper, firstChild); + document.body.insertBefore(this.announcementBarPlaceholder, firstChild); + this.resizePlaceholder(); + this.addEventHandlers(); + }); + }); + }, + htmlToElement(html) { + const template = document.createElement("template"); + html = html.trim(); + template.innerHTML = html; + return template.content.firstChild; + }, + loadAnnouncementBar(id, callback) { + if (!callback) { + callback = function () {}; + } + const url = `https://uptime.betterstack.com/widgets/announcement?id=148703`; + this.loadAsync(url, function (responseText) { + const json = JSON.parse(responseText); + if (json.success) { + callback(null, json); + } else { + console.error(`[Better Stack] Error loading Announcement Bar, used id: 148703`); + } + }); + }, + loadAsync(url, callback) { + if (!callback) { + callback = function () {}; + } + const xhr = new XMLHttpRequest(); + xhr.onreadystatechange = function () { + if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { + callback(this.responseText); + } + }; + xhr.open("GET", url); + xhr.send(); + }, + loadStylesheet(callback) { + const linkTag = document.createElement("link"); + linkTag.type = "text/css"; + linkTag.rel = "stylesheet"; + linkTag.href = "https://meower.org/announcement.css"; + this.style = document.head.appendChild(linkTag); + callback(); + }, + addEventHandlers() { + this.announcementBar.querySelector("[data-announcement-dismiss]").addEventListener("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + this.dismissAnnouncementBar(); + }); + this.announcementBar.addEventListener("click", (e) => { + e.preventDefault(); + this.openAnnouncementLink(); + }); + }, + openAnnouncementLink() { + if (!this.announcementLink) { + return; + } + window.open(this.announcementLink, "_blank"); + }, + dismissAnnouncementBar() { + document.cookie = `${this.cookieName}=${this.announcementDigest}`; + this.announcementBar.remove(); + this.announcementBarWrapper.remove(); + this.announcementBarPlaceholder.remove(); + this.style.remove(); + }, + resizePlaceholder() { + this.announcementBarPlaceholder.style.height = `${this.announcementBar.offsetHeight}px`; + }, + getCookie(cname) { + const name = cname + "="; + const decodedCookie = decodeURIComponent(document.cookie); + const ca = decodedCookie.split(";"); + let i = 0; + while (i < ca.length) { + let c = ca[i]; + while (c.charAt(0) === " ") { + c = c.substring(1); + } + if (c.indexOf(name) === 0) { + return c.substring(name.length, c.length); + } + i++; + } + }, + }; + let initialized = false; + const initializeAnnouncementBar = function () { + if (document.readyState === "loading" || initialized) { + return; + } + window.BetterUptimeAnnouncementWidget.initialize(); + initialized = true; + }; + initializeAnnouncementBar(); + document.onreadystatechange = initializeAnnouncementBar; + document.addEventListener("turbo:load", () => { + initialized = false; + initializeAnnouncementBar(); + }); +}