Primary audio fixes (#1719)
* Fix case when subIndex is not assigned * Fix incorrect assignment of primary card audio * Improve opacity style * Improve styles for :focus-visible
This commit is contained in:
parent
cca01e85a3
commit
5bf82a5b81
@ -2067,25 +2067,32 @@ button.footer-notification-close-button {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity var(--animation-duration) linear;
|
transition: opacity var(--animation-duration) linear;
|
||||||
}
|
}
|
||||||
.popup-menu-item-group:hover .popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
|
.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
|
||||||
|
.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
|
||||||
|
.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon {
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
|
.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
|
.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
||||||
opacity: 0.375;
|
opacity: 0.375;
|
||||||
}
|
}
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
|
.popup-menu-item-set-primary-audio-button:focus:not(:focus-visible) .popup-menu-item-icon {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
|
.popup-menu-item-audio-button:hover~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
|
||||||
.popup-menu-item-group .popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
|
.popup-menu-item-audio-button:active~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon,
|
||||||
|
.popup-menu-item-audio-button:focus~.popup-menu-item-set-primary-audio-button:not(:focus-visible) .popup-menu-item-icon {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
.popup-menu-item-set-primary-audio-button:hover:not(:focus-visible) .popup-menu-item-icon,
|
||||||
|
.popup-menu-item-set-primary-audio-button:active:not(:focus-visible) .popup-menu-item-icon {
|
||||||
opacity: 0.375;
|
opacity: 0.375;
|
||||||
}
|
}
|
||||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
|
.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button .popup-menu-item-icon,
|
||||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
|
.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon,
|
||||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
|
.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon,
|
||||||
.popup-menu-item-group[data-is-primary-card-audio=true] .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
.popup-menu-item-group[data-is-primary-card-audio=true]>.popup-menu-item-audio-button~.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -352,6 +352,7 @@ class DisplayAudio {
|
|||||||
const headword = this._getHeadword(dictionaryEntryIndex, headwordIndex);
|
const headword = this._getHeadword(dictionaryEntryIndex, headwordIndex);
|
||||||
if (headword === null) { return; }
|
if (headword === null) { return; }
|
||||||
|
|
||||||
|
const {index} = source;
|
||||||
const {term, reading} = headword;
|
const {term, reading} = headword;
|
||||||
const cacheEntry = this._getCacheItem(term, reading, true);
|
const cacheEntry = this._getCacheItem(term, reading, true);
|
||||||
|
|
||||||
@ -359,9 +360,9 @@ class DisplayAudio {
|
|||||||
primaryCardAudio = (
|
primaryCardAudio = (
|
||||||
!canToggleOff ||
|
!canToggleOff ||
|
||||||
primaryCardAudio === null ||
|
primaryCardAudio === null ||
|
||||||
primaryCardAudio.source !== source ||
|
primaryCardAudio.index !== index ||
|
||||||
primaryCardAudio.index !== subIndex
|
primaryCardAudio.subIndex !== subIndex
|
||||||
) ? {index: source.index, subIndex} : null;
|
) ? {index: index, subIndex} : null;
|
||||||
cacheEntry.primaryCardAudio = primaryCardAudio;
|
cacheEntry.primaryCardAudio = primaryCardAudio;
|
||||||
|
|
||||||
if (menu !== null) {
|
if (menu !== null) {
|
||||||
@ -698,8 +699,9 @@ class DisplayAudio {
|
|||||||
const primaryCardAudioSubIndex = (primaryCardAudio !== null ? primaryCardAudio.subIndex : null);
|
const primaryCardAudioSubIndex = (primaryCardAudio !== null ? primaryCardAudio.subIndex : null);
|
||||||
const itemGroups = menuBodyNode.querySelectorAll('.popup-menu-item-group');
|
const itemGroups = menuBodyNode.querySelectorAll('.popup-menu-item-group');
|
||||||
for (const node of itemGroups) {
|
for (const node of itemGroups) {
|
||||||
const index = Number.parseInt(node.dataset.index, 10);
|
let {index, subIndex} = node.dataset;
|
||||||
const subIndex = Number.parseInt(node.dataset.subIndex, 10);
|
index = Number.parseInt(index, 10);
|
||||||
|
subIndex = typeof subIndex === 'string' ? Number.parseInt(subIndex, 10) : null;
|
||||||
const isPrimaryCardAudio = (index === primaryCardAudioIndex && subIndex === primaryCardAudioSubIndex);
|
const isPrimaryCardAudio = (index === primaryCardAudioIndex && subIndex === primaryCardAudioSubIndex);
|
||||||
node.dataset.isPrimaryCardAudio = `${isPrimaryCardAudio}`;
|
node.dataset.isPrimaryCardAudio = `${isPrimaryCardAudio}`;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user