From 5bf82a5b81ef172d544da9c5c25492577270e8aa Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 30 May 2021 13:29:55 -0400 Subject: 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 --- ext/css/display.css | 29 ++++++++++++++++++----------- ext/js/display/display-audio.js | 12 +++++++----- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/ext/css/display.css b/ext/css/display.css index b46540c7..ac9dae0a 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -2067,25 +2067,32 @@ button.footer-notification-close-button { opacity: 0; 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; } -.popup-menu-item-group .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-group .popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon { +.popup-menu-item-set-primary-audio-button:hover .popup-menu-item-icon, +.popup-menu-item-set-primary-audio-button:active .popup-menu-item-icon, +.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon { 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; } -.popup-menu-item-group .popup-menu-item-set-primary-audio-button:hover: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:hover~.popup-menu-item-set-primary-audio-button: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; } -.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-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-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 .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-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-audio-button~.popup-menu-item-set-primary-audio-button:focus .popup-menu-item-icon { opacity: 1; } diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js index 6d2504e4..e5c1b135 100644 --- a/ext/js/display/display-audio.js +++ b/ext/js/display/display-audio.js @@ -352,6 +352,7 @@ class DisplayAudio { const headword = this._getHeadword(dictionaryEntryIndex, headwordIndex); if (headword === null) { return; } + const {index} = source; const {term, reading} = headword; const cacheEntry = this._getCacheItem(term, reading, true); @@ -359,9 +360,9 @@ class DisplayAudio { primaryCardAudio = ( !canToggleOff || primaryCardAudio === null || - primaryCardAudio.source !== source || - primaryCardAudio.index !== subIndex - ) ? {index: source.index, subIndex} : null; + primaryCardAudio.index !== index || + primaryCardAudio.subIndex !== subIndex + ) ? {index: index, subIndex} : null; cacheEntry.primaryCardAudio = primaryCardAudio; if (menu !== null) { @@ -698,8 +699,9 @@ class DisplayAudio { const primaryCardAudioSubIndex = (primaryCardAudio !== null ? primaryCardAudio.subIndex : null); const itemGroups = menuBodyNode.querySelectorAll('.popup-menu-item-group'); for (const node of itemGroups) { - const index = Number.parseInt(node.dataset.index, 10); - const subIndex = Number.parseInt(node.dataset.subIndex, 10); + let {index, subIndex} = node.dataset; + index = Number.parseInt(index, 10); + subIndex = typeof subIndex === 'string' ? Number.parseInt(subIndex, 10) : null; const isPrimaryCardAudio = (index === primaryCardAudioIndex && subIndex === primaryCardAudioSubIndex); node.dataset.isPrimaryCardAudio = `${isPrimaryCardAudio}`; } -- cgit v1.2.3