Make switcher JavaScript unparsed and reduce elements (#1539)

Avoid the need to parse the main version switching menu creation and
handling code by moving the site constants to a separate file.

Additionally move more of the element construction into the JavaScript
code to make it closer to a web component and facilitate more control by
a common script to be loaded by all published versions.
This commit is contained in:
Darragh Bailey 2022-08-12 18:30:57 +01:00 committed by GitHub
parent a60836e260
commit 442ef24e64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 24 deletions

View File

@ -1,22 +1,9 @@
{%- comment %}handle development serving site on root{% endcomment %}
{%- if site.baseurl.size == 0 %}
const basePath = '';
{%- else %}
const basePath = '/{{ site.github.repository_name }}';
{%- endif %}
{%- if site.repository_nwo != nil %}
const repository_nwo = '{{ site.repository_nwo }}';
{%- else %}
const repository_nwo = '{{ site.github.repository_nwo }}';
{%- endif %}
const { buildWebStorage, setupCache } = window.AxiosCacheInterceptor;
const storage = buildWebStorage(sessionStorage, 'axios-cache:');
const axiosCached = setupCache(axios.create(), { storage });
changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
async function loadOptions(select) {
async function loadOptions(selectElement) {
const defaultBranchPromise = axiosCached.get(
`https://api.github.com/repos/${repository_nwo}`,
).then(res => {
@ -62,7 +49,7 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
opt.value = item.value;
opt.innerHTML = item.text;
select.appendChild(opt);
selectElement.appendChild(opt);
});
const path = window.location.pathname.toLowerCase();
@ -70,9 +57,9 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
if (path.startsWith(versionPath)) {
const start = versionPath.length;
const end = path.indexOf('/', start);
select.value = path.substring(start, end);
selectElement.value = path.substring(start, end);
} else {
select.value = 'latest';
selectElement.value = 'latest';
}
};
@ -90,7 +77,14 @@ changeVersion = function handleVersionedDocs(repository_nwo, basePath) {
window.location.pathname = targetPath;
};
loadOptions(document.getElementById("plugin-version"));
var pluginVersionMenuElement = document.getElementById("plugin-version-menu")
pluginVersionMenuElement.innerHTML = "Plugin Version: "
var selectElement = document.createElement('select');
selectElement.id = "plugin-version"
selectElement.addEventListener('change', function() {changeVersion(this); });
pluginVersionMenuElement.appendChild(selectElement);
loadOptions(selectElement);
return changeVersion;
}(repository_nwo, basePath);

View File

@ -0,0 +1,14 @@
{%- comment %}handle development serving site on root{% endcomment %}
{%- if site.baseurl.size == 0 %}
const basePath = '';
{%- else %}
const basePath = '/{{ site.github.repository_name }}';
{%- endif %}
{%- if site.repository_nwo != nil %}
const repository_nwo = '{{ site.repository_nwo }}';
{%- else %}
const repository_nwo = '{{ site.github.repository_nwo }}';
{%- endif %}

View File

@ -1,6 +1,3 @@
<div class="plugin-version-select site-footer">
Plugin Version:
<select id="plugin-version" onChange="changeVersion(this)">
</select>
</div>
<script src="{% asset "js/version_switcher.js" @path %}"></script>
<script src="{% asset "js/site_constants.js" @path %}"></script>
<div id="plugin-version-menu" class="site-footer"></div>
<script src="{% asset "js/plugin_versions_menu.js" @path %}"></script>