Make switching site versions smarter.

When you select a different version of the site from the gear menu,
we now try to put you on the same page in the other version if that
page exists. If the same page can't be found, then you land at the
root of the other site, like you did before.
This commit is contained in:
mtail 2019-02-14 21:11:43 -08:00
parent cd16ce360d
commit c8e6f0e285
5 changed files with 49 additions and 28 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -78,15 +78,15 @@
{{ $current := index .Site.Data.releases 1 }}
{{ if .Site.Data.args.archive }}
<a href="https://istio.io" class="dropdown-item">{{ printf (i18n "current_release") $current.name }}</a>
<a href="https://preliminary.istio.io" class="dropdown-item">{{ printf (i18n "next_release") $next.name }}</a>
<a href="https://archive.istio.io" class="dropdown-item">{{ i18n "archived_releases" }}</a>
<a class="dropdown-item" href="#" onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
<a class="dropdown-item" href="#" onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
{{ else if .Site.Data.args.preliminary }}
<a href="https://istio.io" class="dropdown-item">{{ printf (i18n "current_release") $current.name }}</a>
<a href="https://archive.istio.io" class="dropdown-item">{{ i18n "archived_releases" }}</a>
<a class="dropdown-item" href="#" onclick="navigateToUrlOrRoot('https://istio.io/{{.Dir}}');return false;">{{ printf (i18n "current_release") $current.name }}</a>
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
{{ else }}
<a href="https://preliminary.istio.io" class="dropdown-item">{{ printf (i18n "next_release") $next.name }}</a>
<a href="https://archive.istio.io" class="dropdown-item">{{ i18n "archived_releases" }}</a>
<a class="dropdown-item" href="#" onclick="navigateToUrlOrRoot('https://preliminary.istio.io/{{.Dir}}');return false;">{{ printf (i18n "next_release") $next.name }}</a>
<a class="dropdown-item" href="https://archive.istio.io">{{ i18n "archived_releases" }}</a>
{{ end }}
</div>
</li>

View File

@ -116,18 +116,18 @@ function handleDOMLoaded() {
copyButton.className = "copy";
copyButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#copy'/></svg>";
copyButton.setAttribute("aria-label", "Copy to clipboard");
copyButton.addEventListener("mouseenter", (e) => e.currentTarget.classList.add("toolbar-show"));
copyButton.addEventListener("mouseleave", (e) => e.currentTarget.classList.remove("toolbar-show"));
copyButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
copyButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
const downloadButton = document.createElement("BUTTON");
downloadButton.title = buttonDownload;
downloadButton.className = "download";
downloadButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#download'/></svg>";
downloadButton.setAttribute("aria-label", downloadButton.title);
downloadButton.addEventListener("mouseenter", (e) => e.currentTarget.classList.add("toolbar-show"));
downloadButton.addEventListener("mouseleave", (e) => e.currentTarget.classList.remove("toolbar-show"));
downloadButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
downloadButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
downloadButton.addEventListener("click", (e) => {
downloadButton.addEventListener("click", e => {
const div = e.currentTarget.parentElement;
const codes = div.getElementsByTagName("CODE");
if ((codes !== null) && (codes.length > 0)) {
@ -163,10 +163,10 @@ function handleDOMLoaded() {
printButton.className = "print";
printButton.innerHTML = "<svg><use xlink:href='" + iconFile + "#printer'/></svg>";
printButton.setAttribute("aria-label", printButton.title);
printButton.addEventListener("mouseenter", (e) => e.currentTarget.classList.add("toolbar-show"));
printButton.addEventListener("mouseleave", (e) => e.currentTarget.classList.remove("toolbar-show"));
printButton.addEventListener("mouseenter", e => e.currentTarget.classList.add("toolbar-show"));
printButton.addEventListener("mouseleave", e => e.currentTarget.classList.remove("toolbar-show"));
printButton.addEventListener("click", (e) => {
printButton.addEventListener("click", e => {
const div = e.currentTarget.parentElement;
const text = getToolbarDivText(div);
printText(text);
@ -182,13 +182,13 @@ function handleDOMLoaded() {
div.appendChild(downloadButton);
div.appendChild(copyButton);
pre.addEventListener("mouseenter", (e) => {
pre.addEventListener("mouseenter", e => {
e.currentTarget.nextSibling.classList.add("toolbar-show");
e.currentTarget.nextSibling.nextSibling.classList.add("toolbar-show");
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.add("toolbar-show");
});
pre.addEventListener("mouseleave", (e) => {
pre.addEventListener("mouseleave", e => {
e.currentTarget.nextSibling.classList.remove("toolbar-show");
e.currentTarget.nextSibling.nextSibling.classList.remove("toolbar-show");
e.currentTarget.nextSibling.nextSibling.nextSibling.classList.remove("toolbar-show");
@ -318,9 +318,9 @@ function handleDOMLoaded() {
function loadExternal(pre) {
function fetchFile(elem, url) {
fetch(url).then(function (response) {
return response.text();
}).then(function (data) {
fetch(url)
.then(response => response.text())
.then(data => {
elem.firstChild.textContent = data;
Prism.highlightElement(elem.firstChild, false);
});
@ -331,7 +331,7 @@ function handleDOMLoaded() {
}
}
document.querySelectorAll('pre').forEach((pre) => {
document.querySelectorAll('pre').forEach(pre => {
attachToolbar(pre);
applySyntaxColoring(pre);
loadExternal(pre);
@ -447,7 +447,7 @@ function handleDOMLoaded() {
// toggle sidebar on/off
const toggler = document.getElementById('sidebar-toggler');
if (toggler) {
toggler.addEventListener("click", (e) => {
toggler.addEventListener("click", e => {
document.getElementById("sidebar-container").classList.toggle('active');
e.currentTarget.querySelector('svg.icon').classList.toggle('flipped');
});

View File

@ -48,3 +48,24 @@ function printText(text) {
printWin.print();
printWin.close();
}
// Navigate to the given URL if possible. If the page doesn't exist then navigate to the
// root of the target site instead.
function navigateToUrlOrRoot(url) {
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 404) {
const u = new URL(url);
u.pathname = '';
url = u.toString();
} else {
console.log("OK");
}
// go!
window.location.href = url;
};
request.send();
}