Allow limiting the versions shown by default in the `version-selector` (#3773)
* Allow limiting the versions shown by default in the `version-selector` Signed-off-by: Miki <miki@amazon.com> * Add archived versions * Update versions.json * Add archived versions for version selector.tpl * Switch back to old versions --------- Signed-off-by: Miki <miki@amazon.com> Signed-off-by: Naarcha-AWS <97990722+Naarcha-AWS@users.noreply.github.com> Co-authored-by: Naarcha-AWS <97990722+Naarcha-AWS@users.noreply.github.com>
This commit is contained in:
Miki
GitHub
parent
a32766e765
commit
271a98d669
|
|
@ -2,6 +2,9 @@
|
|||
"current": "2.7",
|
||||
"all": [
|
||||
"2.7",
|
||||
"1.3"
|
||||
],
|
||||
"archived": [
|
||||
"2.6",
|
||||
"2.5",
|
||||
"2.4",
|
||||
|
|
@ -9,10 +12,11 @@
|
|||
"2.2",
|
||||
"2.1",
|
||||
"2.0",
|
||||
"1.3",
|
||||
"1.2",
|
||||
"1.1",
|
||||
"1.0"
|
||||
],
|
||||
],
|
||||
"latest": "2.7"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1418,8 +1418,7 @@ main {
|
|||
version-selector {
|
||||
z-index: 1;
|
||||
font-size: .9rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin: 1.5rem 3px;
|
||||
|
||||
--normal-bg: linear-gradient(#{lighten($blue-300, 5%)}, #{darken($blue-300, 2%)});
|
||||
--hover-bg: linear-gradient(#{lighten($blue-300, 2%)}, #{darken($blue-300, 4%)});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
/* During build, DOC_VERSIONS is prefixed to convey all the versions available, informed by `_data/versions.json`
|
||||
* Example:
|
||||
* const DOC_VERSIONS = ["1.1","1.0"];
|
||||
* const DOC_VERSIONS = ["2.1","1.1"];
|
||||
* const DOC_VERSIONS_ARCHIVED = ["2.0","1.0"];
|
||||
*
|
||||
* DOC_VERSION_LATEST will pick `latest`, or in its absence the `current` version.
|
||||
* const DOC_VERSION_LATEST = "2.0";
|
||||
* const DOC_VERSION_LATEST = "2.1";
|
||||
*/
|
||||
const PREFIX = "OpenSearch ";
|
||||
const tpl = `
|
||||
|
|
@ -108,6 +109,7 @@ const tpl = `
|
|||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
position: relative;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#dropdown > a:last-child {
|
||||
|
|
@ -128,6 +130,38 @@ const tpl = `
|
|||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#spacer > a.archived,
|
||||
#spacer > a.show-archived,
|
||||
#dropdown > a.archived,
|
||||
#dropdown > a.show-archived {
|
||||
font-size: .8em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-weight: 700;
|
||||
line-height: 2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: .375em;
|
||||
padding-bottom: .375em;
|
||||
padding-left: calc(1.25em - 1px);
|
||||
gap: .3em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dropdown > a.show-archived {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#dropdown > a.show-archived ~ a,
|
||||
#dropdown > a.show-archived[aria-expanded="true"] {
|
||||
display: none;
|
||||
cursor: unset;
|
||||
}
|
||||
|
||||
#dropdown > a.show-archived[aria-expanded="true"] ~ a {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<a id="root" role="button" aria-labelledby="selected" aria-controls="dropdown" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6-6"/></g></svg>
|
||||
|
|
@ -158,8 +192,16 @@ class VersionSelector extends HTMLElement {
|
|||
frag.querySelector('#selected').textContent = `${PREFIX}${this.getAttribute('selected')}.x`;
|
||||
|
||||
const pathName = location.pathname.replace(/\/docs(\/((latest|\d+\.\d+)\/?)?)?/, '');
|
||||
const versionsDOMText = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${v === DOC_VERSION_LATEST ? ' class="latest"' : ''}>${PREFIX}${v}.x</a>`)
|
||||
.join('');
|
||||
const versionsDOMNodes = DOC_VERSIONS.map((v, idx) => `<a href="/docs/${v}/${pathName}"${v === DOC_VERSION_LATEST ? ' class="latest"' : ''}>${PREFIX}${v}.x</a>`);
|
||||
if (Array.isArray(DOC_VERSIONS_ARCHIVED) && DOC_VERSIONS_ARCHIVED.length) {
|
||||
versionsDOMNodes.push(
|
||||
`<a class="show-archived"><span>Show archived</span><svg xmlns="http://www.w3.org/2000/svg" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6-6"/></g></svg></a>`,
|
||||
`<a class="archived">Archived</a>`,
|
||||
...DOC_VERSIONS_ARCHIVED.map((v, idx) => `<a href="/docs/${v}/${pathName}">${PREFIX}${v}.x</a>`)
|
||||
);
|
||||
}
|
||||
|
||||
const versionsDOMText = versionsDOMNodes.join('');
|
||||
|
||||
frag.querySelector('#dropdown').appendChild(this._makeFragment(versionsDOMText));
|
||||
frag.querySelector('#spacer').appendChild(this._makeFragment(versionsDOMText));
|
||||
|
|
@ -174,6 +216,11 @@ class VersionSelector extends HTMLElement {
|
|||
this._expand(this.getAttribute('aria-expanded') !== 'true');
|
||||
});
|
||||
|
||||
const showNode = shadowRoot.querySelector('#dropdown .show-archived');
|
||||
showNode?.addEventListener('click', e => {
|
||||
showNode.setAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
/* On some devices, `blur` is fired on the component before navigation occurs when choosing a version from the
|
||||
* dropdown; this ends up hiding the dropdown and preventing the navigation. The `pointerup` on the anchor
|
||||
* element is always fired before the `blur` is dispatched on the component and that is used here to trigger
|
||||
|
|
@ -181,6 +228,7 @@ class VersionSelector extends HTMLElement {
|
|||
*/
|
||||
shadowRoot.querySelector('#dropdown').addEventListener('pointerup', e => {
|
||||
const {target} = e;
|
||||
e.preventDefault();
|
||||
if (target.matches('a[href]') && target.href) document.location.href = target.href;
|
||||
});
|
||||
}
|
||||
|
|
@ -195,4 +243,4 @@ class VersionSelector extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
customElements.define('version-selector', VersionSelector);
|
||||
customElements.define('version-selector', VersionSelector);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,11 @@ permalink: /assets/js/version-selector.js
|
|||
{% assign all_versions = current_array | concat: site.data.versions.all %}
|
||||
{% endif %}
|
||||
const DOC_VERSIONS = {{ all_versions | jsonify }};
|
||||
const DOC_VERSIONS_ARCHIVED = {{ site.data.versions.archived | jsonify }};
|
||||
{% if site.data.versions.latest %}
|
||||
const DOC_VERSION_LATEST = {{ site.data.versions.latest | jsonify }};
|
||||
{% else %}
|
||||
const DOC_VERSION_LATEST = {{ site.data.versions.current | jsonify }};
|
||||
{% endif %}
|
||||
{% include_relative _version-selector.js %}
|
||||
})();
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue