version switch: turn into a custom element #104778
@ -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 %}
|
||||||
|
@ -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;
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user