diff options
| -rw-r--r-- | ext/js/pages/settings/audio-controller.js | 36 | ||||
| -rw-r--r-- | ext/js/pages/settings/settings-main.js | 2 | ||||
| -rw-r--r-- | ext/settings.html | 40 |
3 files changed, 76 insertions, 2 deletions
diff --git a/ext/js/pages/settings/audio-controller.js b/ext/js/pages/settings/audio-controller.js index 6b1ce0b5..dcc5428e 100644 --- a/ext/js/pages/settings/audio-controller.js +++ b/ext/js/pages/settings/audio-controller.js @@ -20,8 +20,9 @@ */ class AudioController { - constructor(settingsController) { + constructor(settingsController, modalController) { this._settingsController = settingsController; + this._modalController = modalController; this._audioSystem = new AudioSystem(); this._audioSourceContainer = null; this._audioSourceAddButton = null; @@ -166,6 +167,7 @@ class AudioController { eventListeners.addEventListener(removeButton, 'click', this._onAudioSourceRemoveClicked.bind(this, entry), false); } if (menuButton !== null) { + eventListeners.addEventListener(menuButton, 'menuOpen', this._onMenuOpen.bind(this, entry), false); eventListeners.addEventListener(menuButton, 'menuClose', this._onMenuClose.bind(this, entry), false); } @@ -222,11 +224,43 @@ class AudioController { this._removeAudioSourceEntry(entry); } + _onMenuOpen(entry, e) { + const {menu} = e.detail; + + let hasHelp = false; + switch (entry.value) { + case 'custom': + case 'custom-json': + hasHelp = true; + break; + } + + menu.bodyNode.querySelector('.popup-menu-item[data-menu-action=help]').hidden = !hasHelp; + } + _onMenuClose(entry, e) { switch (e.detail.action) { + case 'help': + this._showHelp(entry.value); + break; case 'remove': this._removeAudioSourceEntry(entry); break; } } + + _showHelp(type) { + switch (type) { + case 'custom': + this._showModal('audio-source-help-custom'); + break; + case 'custom-json': + this._showModal('audio-source-help-custom-json'); + break; + } + } + + _showModal(name) { + this._modalController.getModal(name).setVisible(true); + } } diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js index 6f3e2a58..e8092112 100644 --- a/ext/js/pages/settings/settings-main.js +++ b/ext/js/pages/settings/settings-main.js @@ -113,7 +113,7 @@ async function setupGenericSettingsController(genericSettingController) { const genericSettingController = new GenericSettingController(settingsController); preparePromises.push(setupGenericSettingsController(genericSettingController)); - const audioController = new AudioController(settingsController); + const audioController = new AudioController(settingsController, modalController); audioController.prepare(); const profileController = new ProfileController(settingsController, modalController); diff --git a/ext/settings.html b/ext/settings.html index f9a2b04a..9f1e688c 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2466,6 +2466,45 @@ </div> </div></div> +<div id="audio-source-help-custom-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> + <div class="modal-header"> + <div class="modal-title">Audio Source - Custom URL</div> + </div> + <div class="modal-body"> + <p> + A custom URL can be used to play audio from any URL. + The replacement tags <code data-select-on-click="">{term}</code> and <code data-select-on-click="">{reading}</code> + can be used to specify which term and reading is being looked up.<br> + </p> + <p> + Example:<br> + <a data-select-on-click="">http://localhost/audio.mp3?term={term}&reading={reading}</a> + </p> + </div> + <div class="modal-footer"> + <button data-modal-action="hide">Close</button> + </div> +</div></div> + +<div id="audio-source-help-custom-json-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content modal-content-small"> + <div class="modal-header"> + <div class="modal-title">Audio Source - Custom URL (JSON)</div> + </div> + <div class="modal-body"> + <p> + A custom URL to a JSON file which lists one or more audio URLs for a given term. + The format of the JSON file is described in <a href="/data/schemas/custom-audio-list-schema.json" target="_blank" rel="noopener noreferrer">this schema file</a>. + </p> + <p> + Example:<br> + <a data-select-on-click="">http://localhost/audio.json?term={term}&reading={reading}</a> + </p> + </div> + <div class="modal-footer"> + <button data-modal-action="hide">Close</button> + </div> +</div></div> + <!-- Audio templates --> <template id="audio-source-template"><div class="audio-source horizontal-flex"> @@ -2483,6 +2522,7 @@ </div></template> <template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"> + <button class="popup-menu-item" data-menu-action="help">Help</button> <button class="popup-menu-item" data-menu-action="remove">Remove</button> </div></div></div></template> |