Skip to content

Commit cf5f89d

Browse files
M00nF1shM00nF1sh
authored
add version select capability (#1617)
1 parent 6430807 commit cf5f89d

File tree

6 files changed

+143
-0
lines changed

6 files changed

+143
-0
lines changed

‎docs/theme_overrides/assets/javascripts/version-select.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const verSelDom = document.querySelector('#version-select')
3+
const verSelListDom = verSelDom.querySelector('.mdc-list')
4+
5+
const baseURL = verSelDom.dataset.baseUrl
6+
const absBaseURL = new URL(baseURL, window.location.href)
7+
var curDocVer = absBaseURL.pathname.match(/([^\/]*)\/?$/)[1]
8+
curDocVer = curDocVer || "latest"
9+
10+
function updateVersionSelectDOM(verItems) {
11+
verItems.forEach((verItem) => {
12+
var rippleSpan = document.createElement('span')
13+
rippleSpan.classList.add("mdc-list-item__ripple")
14+
var textSpan = document.createElement('span')
15+
textSpan.classList.add("mdc-list-item__text")
16+
textSpan.innerHTML = verItem.title
17+
18+
var verSelListItem = document.createElement('li');
19+
verSelListItem.setAttribute("role", "option")
20+
verSelListItem.setAttribute("data-value", verItem.version)
21+
verSelListItem.classList.add("mdc-list-item")
22+
if (verItem.version == curDocVer || verItem.aliases.includes(curDocVer)) {
23+
verSelListItem.classList.add("mdc-list-item--selected")
24+
}
25+
verSelListItem.appendChild(rippleSpan)
26+
verSelListItem.appendChild(textSpan)
27+
verSelListDom.appendChild(verSelListItem)
28+
})
29+
}
30+
31+
function setupVersionSelectEventHandlers() {
32+
const verSelMDC = new mdc.select.MDCSelect(verSelDom);
33+
verSelMDC.listen('MDCSelect:change', () => {
34+
const chosenDocVer = verSelMDC.value
35+
const chosenDocURL = new URL("../" + chosenDocVer, absBaseURL)
36+
window.location.href = chosenDocURL
37+
});
38+
}
39+
40+
const verJSONURL = new URL(baseURL + "/../versions.json", window.location.href)
41+
fetch(verJSONURL)
42+
.then(response => response.json())
43+
.then(updateVersionSelectDOM)
44+
.then(setupVersionSelectEventHandlers)
45+
});

‎docs/theme_overrides/assets/stylesheets/version-select.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#version-select .mdc-select__anchor {
2+
display: flex;
3+
align-items: center;
4+
}
5+
6+
#version-select {
7+
width: 120px;
8+
}
9+
10+
#version-select .mdc-select__selected-text {
11+
color: var(--md-primary-bg-color)
12+
}

‎docs/theme_overrides/main.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{% extends "base.html" %}
2+
3+
{% block styles %}
4+
{{ super() }}
5+
<link rel="stylesheet" href="{{ 'assets/stylesheets/version-select.css' | url }}">
6+
{% endblock %}
7+
8+
{% block scripts %}
9+
{{ super() }}
10+
<script src="{{ 'assets/javascripts/version-select.js' | url }}"></script>
11+
{% endblock %}

‎docs/theme_overrides/partials/header.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{% set site_url = config.site_url | default(nav.homepage.url, true) | url %}
2+
{% if not config.use_directory_urls and site_url[0] == site_url[-1] == "." %}
3+
{% set site_url = site_url ~ "/index.html" %}
4+
{% endif %}
5+
<header class="md-header" data-md-component="header">
6+
<nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
7+
<a href="{{ site_url }}" title="{{ config.site_name | e }}" class="md-header-nav__button md-logo"
8+
aria-label="{{ config.site_name }}">
9+
{% include "partials/logo.html" %}
10+
</a>
11+
<label class="md-header-nav__button md-icon" for="__drawer">
12+
{% include ".icons/material/menu" ~ ".svg" %}
13+
</label>
14+
<div class="md-header-nav__title" data-md-component="header-title">
15+
{% if config.site_name == page.title %}
16+
<div class="md-header-nav__ellipsis md-ellipsis">
17+
{{ config.site_name }}
18+
</div>
19+
{% else %}
20+
<div class="md-header-nav__ellipsis">
21+
<span class="md-header-nav__topic md-ellipsis">
22+
{{ config.site_name }}
23+
</span>
24+
<span class="md-header-nav__topic md-ellipsis">
25+
{% if page and page.meta and page.meta.title %}
26+
{{ page.meta.title }}
27+
{% else %}
28+
{{ page.title }}
29+
{% endif %}
30+
</span>
31+
</div>
32+
{% endif %}
33+
</div>
34+
{% include "partials/version-select.html" %}
35+
{% if "search" in config["plugins"] %}
36+
<label class="md-header-nav__button md-icon" for="__search">
37+
{% include ".icons/material/magnify.svg" %}
38+
</label>
39+
{% include "partials/search.html" %}
40+
{% endif %}
41+
{% if config.repo_url %}
42+
<div class="md-header-nav__source">
43+
{% include "partials/source.html" %}
44+
</div>
45+
{% endif %}
46+
</nav>
47+
</header>

‎docs/theme_overrides/partials/version-select.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="version-select" class="mdc-select" data-base-url="{{ base_url }}">
2+
<div class="mdc-select__anchor" role="button">
3+
<span class="mdc-select__ripple"></span>
4+
<span class="mdc-select__selected-text-container">
5+
<span class="mdc-select__selected-text"></span>
6+
</span>
7+
<span class="mdc-select__dropdown-icon">
8+
<svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5" focusable="false">
9+
<polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd"
10+
points="7 10 12 15 17 10">
11+
</polygon>
12+
<polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd"
13+
points="7 15 12 10 17 15">
14+
</polygon>
15+
</svg>
16+
</span>
17+
</div>
18+
19+
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
20+
<ul class="mdc-list" role="listbox">
21+
</ul>
22+
</div>
23+
</div>

‎mkdocs.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ theme:
4242
code: Roboto Mono
4343
features:
4444
- tabs
45+
custom_dir: docs/theme_overrides
4546
# Extensions
4647
markdown_extensions:
4748
- admonition
@@ -53,3 +54,7 @@ markdown_extensions:
5354
- pymdownx.tabbed
5455
- toc:
5556
permalink: true
57+
extra_css:
58+
- https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
59+
extra_javascript:
60+
- https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

0 commit comments

Comments
 (0)