alex/yomichan
1
Fork 0
Code Releases Activity

Display audio menu refactor (#1404)

Browse Source 
* Update display and generation of the audio menu

* Wrap menu items in a div to allow for horizontal layout groupings
This commit is contained in:
toasted-nutbread 2021-02-15 14:31:16 -05:00 committed by GitHub
parent 74a9c7499c
commit 7027d537a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 102 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ext/css/display.css
View File

@ -1673,13 +1673,13 @@ button.footer-notification-close-button:active {
.audio-button-popup-menu[data-show-icons=false] .popup-menu-item-icon {
display: none;
}
.popup-menu-item-icon[data-icon=checkmark] {
.audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {
background-color: var(--success-color);
}
.popup-menu-item-icon[data-icon=cross] {
.audio-button-popup-menu .popup-menu-item-icon[data-icon=cross] {
background-color: var(--danger-color);
}
.popup-menu-item[data-source-in-options=false][data-valid=null] {
.audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {
color: var(--text-color-light1);
}

5
ext/css/material.css
View File

@ -994,3 +994,8 @@ button.popup-menu-item:disabled {
padding: 0.5em 0.75em;
font-size: var(--font-size-small);
}
.popup-menu-item-group {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}

10
ext/display-templates.html
View File

@ -157,13 +157,7 @@
</label></template>
<!-- Popup menu -->
<template id="audio-button-popup-menu-template"><div class="popup-menu-container scan-disable audio-button-popup-menu" tabindex="-1" role="dialog"><div class="popup-menu popup-menu-auto-size"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="jpod101"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">JapanesePod101</span></button>
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="jpod101-alternate"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">JapanesePod101 (Alternate)</span></button>
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="jisho"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">Jisho.org</span></button>
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="text-to-speech"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">Text-to-speech</span></button>
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="text-to-speech-reading"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">Text-to-speech (Kana reading)</span></button>
<button class="popup-menu-item" data-menu-action="playAudioFromSource" data-source="custom"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label">Custom</span></button>
</div></div></div></template>
<template id="audio-button-popup-menu-template"><div class="popup-menu-container scan-disable audio-button-popup-menu" tabindex="-1" role="dialog"><div class="popup-menu popup-menu-auto-size"><div class="popup-menu-body"></div></div></div></template>
<template id="audio-button-popup-menu-item-template"><div class="popup-menu-item-group"><button class="popup-menu-item" data-menu-action="playAudioFromSource"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label"></span></button></div></template>
</body></html>

188
ext/js/display/display-audio.js
View File

@ -189,7 +189,10 @@ class DisplayAudio {
switch (action) {
case 'playAudioFromSource':
{
const {source, index} = item.dataset;
const group = item.closest('.popup-menu-item-group');
if (group === null) { break; }
const {source, index} = group.dataset;
let sourceDetailsMap = null;
if (typeof index !== 'undefined') {
const index2 = Number.parseInt(index, 10);
@ -405,139 +408,120 @@ class DisplayAudio {
popupMenu.prepare();
}
_createMenu(button, expression, reading) {
// Options
const {sources, textToSpeechVoice, customSourceUrl} = this._getAudioOptions();
_getAudioSources(audioOptions) {
const {sources, textToSpeechVoice, customSourceUrl} = audioOptions;
const ttsSupported = (textToSpeechVoice.length > 0);
const customSupported = (customSourceUrl.length > 0);
const sourceIndexMap = new Map();
for (let i = 0, ii = sources.length; i < ii; ++i) {
const optionsSourcesCount = sources.length;
for (let i = 0; i < optionsSourcesCount; ++i) {
sourceIndexMap.set(sources[i], i);
}
// Create menu
const menuNode = this._display.displayGenerator.createPopupMenu('audio-button');
const rawSources = [
['jpod101', 'JapanesePod101', true],
['jpod101-alternate', 'JapanesePod101 (Alternate)', true],
['jisho', 'Jisho.org', true],
['text-to-speech', 'Text-to-speech', ttsSupported],
['text-to-speech-reading', 'Text-to-speech (Kana reading)', ttsSupported],
['custom', 'Custom', customSupported]
];
// Create menu item metadata
const menuItems = [];
const menuItemNodes = menuNode.querySelectorAll('.popup-menu-item');
for (let i = 0, ii = menuItemNodes.length; i < ii; ++i) {
const node = menuItemNodes[i];
const {source} = node.dataset;
const results = [];
for (const [source, displayName, supported] of rawSources) {
if (!supported) { continue; }
let optionsIndex = sourceIndexMap.get(source);
if (typeof optionsIndex === 'undefined') { optionsIndex = null; }
menuItems.push({node, source, index: i, optionsIndex});
const isInOptions = typeof optionsIndex !== 'undefined';
if (!isInOptions) {
optionsIndex = optionsSourcesCount;
}
results.push({
source,
displayName,
index: results.length,
optionsIndex,
isInOptions
});
}
// Sort according to source order in options
menuItems.sort((a, b) => {
const ai = a.optionsIndex;
const bi = b.optionsIndex;
if (ai !== null) {
if (bi !== null) {
const i = ai - bi;
if (i !== 0) { return i; }
} else {
return -1;
}
} else {
if (bi !== null) {
return 1;
}
}
return a.index - b.index;
results.sort((a, b) => {
const i = a.optionsIndex - b.optionsIndex;
return i !== 0 ? i : a.index - b.index;
});
// Set up items based on cache data
const sourceMap = this._cache.get(this._getExpressionReadingKey(expression, reading));
const menuEntryMap = new Map();
return results;
}
_createMenu(sourceButton, expression, reading) {
// Options
const sources = this._getAudioSources(this._getAudioOptions());
// Create menu
const {displayGenerator} = this._display;
const menuNode = displayGenerator.instantiateTemplate('audio-button-popup-menu');
const menuBody = menuNode.querySelector('.popup-menu-body');
// Set up items based on options and cache data
let showIcons = false;
for (let i = 0, ii = menuItems.length; i < ii; ++i) {
const {node, source, optionsIndex} = menuItems[i];
const entries = this._getMenuItemEntries(node, sourceMap, source);
menuEntryMap.set(source, entries);
for (const {node: node2, valid, index} of entries) {
for (const {source, displayName, isInOptions} of sources) {
const entries = this._getMenuItemEntries(source, expression, reading);
for (let i = 0, ii = entries.length; i < ii; ++i) {
const {valid, index, name} = entries[i];
const node = displayGenerator.instantiateTemplate('audio-button-popup-menu-item');
const labelNode = node.querySelector('.popup-menu-item-label');
let label = displayName;
if (ii > 1) { label = `${label} ${i + 1}`; }
if (typeof name === 'string' && name.length > 0) { label += `: ${name}`; }
labelNode.textContent = label;
if (valid !== null) {
const icon = node2.querySelector('.popup-menu-item-icon');
const icon = node.querySelector('.popup-menu-item-icon');
icon.dataset.icon = valid ? 'checkmark' : 'cross';
showIcons = true;
}
node.dataset.source = source;
if (index !== null) {
node2.dataset.index = `${index}`;
node.dataset.index = `${index}`;
}
node2.dataset.valid = `${valid}`;
node2.dataset.sourceInOptions = `${optionsIndex !== null}`;
node2.style.order = `${i}`;
node.dataset.valid = `${valid}`;
node.dataset.sourceInOptions = `${isInOptions}`;
menuBody.appendChild(node);
}
}
menuNode.dataset.showIcons = `${showIcons}`;
// Hide options
if (textToSpeechVoice.length === 0) {
this._setMenuItemEntriesHidden(menuEntryMap, 'text-to-speech', true);
this._setMenuItemEntriesHidden(menuEntryMap, 'text-to-speech-reading', true);
}
if (customSourceUrl.length === 0) {
this._setMenuItemEntriesHidden(menuEntryMap, 'custom', true);
}
// Create popup menu
this._menuContainer.appendChild(menuNode);
return new PopupMenu(button, menuNode);
return new PopupMenu(sourceButton, menuNode);
}
_getMenuItemEntries(node, sourceMap, source) {
const entries = [{node, valid: null, index: null}];
const nextNode = node.nextSibling;
if (typeof sourceMap === 'undefined') { return entries; }
_getMenuItemEntries(source, expression, reading) {
const sourceMap = this._cache.get(this._getExpressionReadingKey(expression, reading));
if (typeof sourceMap !== 'undefined') {
const sourceInfo = sourceMap.get(source);
if (typeof sourceInfo === 'undefined') { return entries; }
if (typeof sourceInfo !== 'undefined') {
const {infoList} = sourceInfo;
if (infoList === null) { return entries; }
if (infoList.length === 0) {
entries[0].valid = false;
return entries;
if (infoList !== null) {
const ii = infoList.length;
if (ii === 0) {
return [{valid: false, index: null, name: null}];
}
const defaultLabel = node.querySelector('.popup-menu-item-label').textContent;
for (let i = 0, ii = infoList.length; i < ii; ++i) {
// Get/create entry
let entry;
if (i < entries.length) {
entry = entries[i];
} else {
const node2 = node.cloneNode(true);
nextNode.parentNode.insertBefore(node2, nextNode);
entry = {node: node2, valid: null, index: null};
entries.push(entry);
}
// Entry info
entry.index = i;
const results = [];
for (let i = 0; i < ii; ++i) {
const {audio, audioResolved, info: {name}} = infoList[i];
if (audioResolved) { entry.valid = (audio !== null); }
const labelNode = entry.node.querySelector('.popup-menu-item-label');
let label = defaultLabel;
if (ii > 1) { label = `${label} ${i + 1}`; }
if (typeof name === 'string' && name.length > 0) { label += `: ${name}`; }
labelNode.textContent = label;
const valid = audioResolved ? (audio !== null) : null;
const entry = {valid, index: i, name};
results.push(entry);
}
return entries;
}
_setMenuItemEntriesHidden(menuEntryMap, source, hidden) {
const entries = menuEntryMap.get(source);
if (typeof entries === 'undefined') { return; }
for (const {node} of entries) {
node.hidden = hidden;
return results;
}
}
}
return [{valid: null, index: null, name: null}];
}
}

4
ext/js/display/display-generator.js
View File

@ -213,8 +213,8 @@ class DisplayGenerator {
return this._templates.instantiate('profile-list-item');
}
createPopupMenu(name) {
return this._templates.instantiate(`${name}-popup-menu`);
instantiateTemplate(name) {
return this._templates.instantiate(name);
}
// Private