Implement news webhook to handle release announcements

config/plugins/webhooks/news/config.yml

@@ -0,0 +1,7 @@
+id: news
+type:
+  - masthead
+activate: true
+
+icon: fa-bell
+tooltip: See the Galaxy Release Notes

config/plugins/webhooks/news/script.js

@@ -0,0 +1,112 @@
+function removeNewsOverlay() {
+    document.getElementById("news-container").style.visibility = "hidden";
+}
+
+function showNewsOverlay() {
+    document.getElementById("news-container").style.visibility = "visible";
+    newsSeen();
+}
+
+function newsSeen() {
+    // When it's seen, remove fa, add far.
+    const newsIconSpan = document.querySelector("#news .fa-bell");
+    newsIconSpan.classList.remove("fa");
+    newsIconSpan.classList.add("far");
+    window.localStorage.setItem("galaxy-news-seen-release", Galaxy.config.version_major);
+}
+
+function newsUnseen() {
+    // When there is news, remove far, add fa for (default -- same as fas) solid style.
+    const newsIconSpan = document.querySelector("#news .fa-bell");
+    newsIconSpan.classList.remove("far");
+    newsIconSpan.classList.add("fa");
+}
+
+function addNewsIframe() {
+    var currentGalaxyVersion = Galaxy.config.version_major;
+
+    // TODO/@hexylena: By 21.01 we will have a proper solution for this. For
+    // now we'll hardcode the version users 'see'. @hexylena will remove this
+    // code when she writes the user-facing release notes, and then will file
+    // an issue for how we'll fix this properly.
+    if(currentGalaxyVersion == "22.01") {
+        currentGalaxyVersion = "21.09";
+    } else if(currentGalaxyVersion == "21.09") {
+        currentGalaxyVersion = "21.05";
+    }
+
+    const releaseNotes = `https://docs.galaxyproject.org/en/master/releases/${currentGalaxyVersion}_announce_user.html`;
+    const lastSeenVersion = window.localStorage.getItem("galaxy-news-seen-release");
+    // Check that they've seen the current version's release notes.
+    if (lastSeenVersion != currentGalaxyVersion) {
+        newsUnseen();
+    } else {
+        newsSeen();
+    }
+
+    document.querySelector("body.full-content").insertAdjacentHTML(
+        "afterbegin",
+        `
+            <div id="news-container" style="visibility: hidden">
+                <div id="news-screen-overlay"></div>
+                <div id="news-screen">
+                    <div id="news-header">
+                        <iframe id="news-embed" src="${releaseNotes}" width="80%" height="80%"></iframe>
+                    </div>
+                </div>
+            </div>`
+    );
+
+    // Clicking outside of GTN closes it
+    document.getElementById("news-screen").addEventListener("click", () => {
+        removeNewsOverlay();
+    });
+}
+
+/* The masthead icon may not exist yet when this webhook executes; we need this to wait for that to happen.
+ * elementReady function from gist:
+ * https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e
+ */
+function elementReadyNews(selector) {
+    return new Promise((resolve, reject) => {
+        const el = document.querySelector(selector);
+        if (el) {
+            resolve(el);
+        }
+        new MutationObserver((mutationRecords, observer) => {
+            // Query for elements matching the specified selector
+            Array.from(document.querySelectorAll(selector)).forEach((element) => {
+                resolve(element);
+                //Once we have resolved we don't need the observer anymore.
+                observer.disconnect();
+            });
+        }).observe(document.documentElement, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+
+elementReadyNews("#news a").then((el) => {
+    // External stuff may also have attached a click handler here (vue-based masthead)
+    // replace with a clean copy of the node to remove all that cruft.
+    clean = el.cloneNode(true);
+    el.parentNode.replaceChild(clean, el);
+
+    // This gets added by default.
+    addNewsIframe();
+
+    clean.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        showNewsOverlay();
+    });
+});
+
+// Remove the overlay on escape button click
+document.addEventListener("keydown", (e) => {
+    // Check for escape button - "27"
+    if (e.which === 27 || e.keyCode === 27) {
+        removeNewsOverlay();
+    }
+});

config/plugins/webhooks/news/styles.css

@@ -0,0 +1,28 @@
+#news-screen {
+	position: fixed;
+	z-index: 202;
+	width:100%;
+	height:100%;
+}
+
+#news-screen-overlay {
+	position: fixed;
+	top:0;
+	left:0;
+	background: rgba(224, 224, 224, 0.75);
+	z-index: 201;
+	width:100%;
+	height:100%;
+	opacity: 2;
+}
+
+#news-header {
+	position: fixed;
+	height: 100%;
+	width: 100%;
+	z-index: 203;
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+	align-items: center;
+}