version switch: turn into a custom element #104778

Open
Tobias Heinke wants to merge 3 commits from Tobias/blender-manual:switcher-two into main

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
2 changed files with 8 additions and 8 deletions
Showing only changes of commit beb88b5ced - Show all commits

View File

@ -1,7 +1,7 @@
<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="Document versions"> <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="Document versions">
<ul id="version-menus" role="presentation"> <ul id="version-menus" role="presentation">
<li role="presentation"> <li role="presentation">
<version-switch id="version-popover" class="close"> <version-switch type="version" class="closed">
<button tabindex="0" type="button" aria-label="Versions selector" <button tabindex="0" type="button" aria-label="Versions selector"
aria-haspopup="true" aria-owns="version-dialog-version"> aria-haspopup="true" aria-owns="version-dialog-version">
{{ release }} {{ release }}
@ -15,7 +15,7 @@
</version-switch> </version-switch>
</li> </li>
<li role="presentation"> <li role="presentation">
<version-switch id="lang-popover" class="close"> <version-switch type="lang" class="closed">
<button tabindex="0" type="button" aria-label="Language selector" <button tabindex="0" type="button" aria-label="Language selector"
aria-haspopup="true" aria-owns="version-dialog-lang"> aria-haspopup="true" aria-owns="version-dialog-lang">
{% if language is not none %} {{ language }} {% else %} en {% endif %} {% if language is not none %} {{ language }} {% else %} en {% endif %}

View File

@ -75,7 +75,7 @@ init() {
const version = this.getNamed(release); const version = this.getNamed(release);
this.buildList(version, lang); this.buildList(version, lang);
this.className = "close"; this.className = "closed";
}); });
} }
warnOld(release, all_versions) { warnOld(release, all_versions) {
@ -104,7 +104,7 @@ warnOld(release, all_versions) {
} }
} }
buildList(version, lang) { buildList(version, lang) {
const type = this.id === "version-popover"; const type = this.getAttribute("type") === "version";
const list = this.querySelector("ul"); const list = this.querySelector("ul");
list.firstElementChild.remove(); list.firstElementChild.remove();
const url = new URL(window.location.href); const url = new URL(window.location.href);
@ -160,7 +160,7 @@ getNamed(version) {
return version; return version;
} }
open() { open() {
if(this.className === "close") { if(this.className === "closed") {
this.init() this.init()
.then(() => { .then(() => {
this.className = "open"; this.className = "open";
@ -182,7 +182,7 @@ open() {
} }
close() { close() {
if(this.className === "open") { if(this.className === "open") {
this.className = "close"; this.className = "closed";
const button = this.firstElementChild; const button = this.firstElementChild;
button.setAttribute("aria-pressed", false); button.setAttribute("aria-pressed", false);
this.lastElementChild.setAttribute("aria-hidden", true); this.lastElementChild.setAttribute("aria-hidden", true);
@ -198,7 +198,7 @@ close() {
} }
} }
toggle() { toggle() {
if(this.className === "close") { if(this.className === "closed") {
this.open(); this.open();
} else { } else {
this.close(); this.close();
@ -285,6 +285,6 @@ customElements.define("version-switch", VersionSwitch);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
let lang = DOCUMENTATION_OPTIONS.LANGUAGE; let lang = DOCUMENTATION_OPTIONS.LANGUAGE;
if(!lang || lang === "None") {lang = "en";} if(!lang || lang === "None") {lang = "en";}
if(all_langs.hasOwnProperty(lang)) {document.querySelector("#lang-popover button").innerHTML = all_langs[lang];} if(all_langs.hasOwnProperty(lang)) {document.querySelector("version-switch[type=lang] button").innerHTML = all_langs[lang];}
}); });
})(); })();