Delay iframe creation for news until it's actually clicked

This commit is contained in:
Dannon Baker
2022-01-04 14:21:54 -05:00
parent e25e2fa81c
commit 0949d3e01a
+42 -49
View File
@@ -1,12 +1,7 @@
function removeNewsOverlay() {
function hideNewsOverlay() {
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");
@@ -22,45 +17,6 @@ function newsUnseen() {
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";
}
const releaseNotes = `https://docs.galaxyproject.org/en/latest/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
@@ -91,13 +47,50 @@ elementReadyNews("#news a").then((el) => {
clean = el.cloneNode(true);
el.parentNode.replaceChild(clean, el);
// This gets added by default.
addNewsIframe();
let 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";
}
const releaseNotes = `https://docs.galaxyproject.org/en/latest/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();
}
clean.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
showNewsOverlay();
// If element doesn't exist, add it.
if (document.getElementById("news-container") == null) {
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", () => {
hideNewsOverlay();
});
}
document.getElementById("news-container").style.visibility = "visible";
newsSeen();
});
});
@@ -105,6 +98,6 @@ elementReadyNews("#news a").then((el) => {
document.addEventListener("keydown", (e) => {
// Check for escape button - "27"
if (e.which === 27 || e.keyCode === 27) {
removeNewsOverlay();
hideNewsOverlay();
}
});