blender/blender-manual
20
22
Fork 93
Code Issues 68 Pull Requests 5 Projects 1 Releases Wiki Activity

version switch: turn into a custom element #104778

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

When changing the target branch, be careful to rebase the branch in your fork to match. See documentation.
Conversation 3 Commits 3 Files Changed 3 +15 -15
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7409670ef6 - Show all commits

4
build_files/templates/sidebar/variant-selector.html
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" data-state="close"> <version-switch id="version-popover" class="close">
<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" data-state="close"> <version-switch id="lang-popover" class="close">
<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 %}

10
build_files/theme/css/version_switch.css
View File

@ -34,7 +34,7 @@ version-switch button {
z-index: 400; z-index: 400;
} }
version-switch[data-state="open"] button::after { version-switch.open button::after {
color: gray; color: gray;
} }
@ -43,16 +43,16 @@ version-switch button:focus {
border-color: #525252; border-color: #525252;
} }
version-switch[data-state="open"] button { version-switch.open button {
color: gray; color: gray;
border: solid 1px var(--color-sidebar-background-border); border: solid 1px var(--color-sidebar-background-border);
} }
version-switch[data-state="wait"] button { version-switch.wait button {
cursor: wait; cursor: wait;
} }
version-switch[data-state="disabled"] button { version-switch.disabled button {
cursor: not-allowed; cursor: not-allowed;
color: dimgray; color: dimgray;
} }
@ -74,7 +74,7 @@ version-switch .version-dialog {
cursor: default; cursor: default;
} }
version-switch[data-state="open"] .version-dialog { version-switch.open .version-dialog {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: visibility 0s linear 0s, opacity 200ms; transition: visibility 0s linear 0s, opacity 200ms;

16
build_files/theme/js/version_switch.js
View File

@ -45,7 +45,7 @@ connectedCallback() {
init() { init() {
return new Promise((resolve) => { return new Promise((resolve) => {
if(all_versions === undefined) { if(all_versions === undefined) {
this.setAttribute("data-state", "wait"); this.className = "wait";
fetch(versionsFileUrl) fetch(versionsFileUrl)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
@ -53,7 +53,7 @@ init() {
resolve(); resolve();
}) })
.catch((err) => { .catch((err) => {
this.setAttribute("data-state", "disabled"); this.className = "disabled";
console.error(err); console.error(err);
}); });
} else { } else {
@ -75,7 +75,7 @@ init() {
const version = this.getNamed(release); const version = this.getNamed(release);
this.buildList(version, lang); this.buildList(version, lang);
this.setAttribute("data-state", "close"); this.className = "close";
}); });
} }
warnOld(release, all_versions) { warnOld(release, all_versions) {
@ -160,10 +160,10 @@ getNamed(version) {
return version; return version;
} }
open() { open() {
if(this.getAttribute("data-state") === "close") { if(this.className === "close") {
this.init() this.init()
.then(() => { .then(() => {
this.setAttribute("data-state", "open"); this.className = "open";
this.firstElementChild.setAttribute("aria-pressed", true); this.firstElementChild.setAttribute("aria-pressed", true);
this.lastElementChild.setAttribute("aria-hidden", false); this.lastElementChild.setAttribute("aria-hidden", false);
const s = this.querySelector(".selected"); const s = this.querySelector(".selected");
@ -181,8 +181,8 @@ open() {
} }
} }
close() { close() {
if(this.getAttribute("data-state") === "open") { if(this.className === "open") {
this.setAttribute("data-state", "close"); this.className = "close";
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.getAttribute("data-state") === "close") { if(this.className === "close") {
this.open(); this.open();
} else { } else {
this.close(); this.close();