diff options
Diffstat (limited to 'ext')
| -rw-r--r-- | ext/css/display.css | 2 | ||||
| -rw-r--r-- | ext/display-templates.html | 10 | ||||
| -rw-r--r-- | ext/js/display/display.js | 39 | ||||
| -rw-r--r-- | ext/settings.html | 2 |
4 files changed, 46 insertions, 7 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index c8996f10..73e08eef 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -1881,7 +1881,7 @@ button.footer-notification-close-button { display: none; } -:root:not([data-debug=true]) .debug-info { +:root:not([data-debug=true]) .action-button[data-action=menu] { display: none; } :root[data-anki-enabled=false] .action-button[data-action=view-note], diff --git a/ext/display-templates.html b/ext/display-templates.html index 04c0b5d6..8b2e4450 100644 --- a/ext/display-templates.html +++ b/ext/display-templates.html @@ -25,6 +25,9 @@ <span class="entry-current-indicator-icon" title="Current entry"> <span class="icon color-icon" data-icon="entry-current"></span> </span> + <button class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover"> + <span class="action-icon icon" data-icon="kebab-menu"></span> + </button> </div> <div class="headword-list"></div> <div class="headword-list-details"> @@ -43,7 +46,6 @@ <ol class="entry-body-section-content definition-list"></ol> </div> </div> - <div class="debug-info"><a tabindex="0" class="debug-log-link">Log debug info to console</a></div> </div></template> <template id="headword-template" data-remove-whitespace-text="true"><div class="headword"> <div class="headword-text-container"> @@ -117,6 +119,9 @@ <span class="entry-current-indicator-icon" title="Current entry"> <span class="icon color-icon" data-icon="entry-current"></span> </span> + <button class="action-button action-button-collapsible" data-action="menu" data-menu-position="left below h-cover v-cover"> + <span class="action-icon icon" data-icon="kebab-menu"></span> + </button> </div> <div class="kanji-glyph-container"> <span class="headword-current-indicator"></span> @@ -147,7 +152,6 @@ <tr><th colspan="3">Dictionary Indices</th></tr> <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr> </tbody></table> - <div class="debug-info"><a tabindex="0" class="debug-log-link">Log debug info to console</a></div> </div></template> <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template> <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template> @@ -188,5 +192,7 @@ </div></template> <template id="view-note-button-popup-menu-template"><div class="popup-menu-container scan-disable view-note-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="view-note-button-popup-menu-item-template"><button class="popup-menu-item"><span class="popup-menu-item-label"></span></button></template> +<template id="dictionary-entry-popup-menu-template"><div class="popup-menu-container scan-disable dictionary-entry-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="dictionary-entry-popup-menu-item-template"><button class="popup-menu-item"><span class="popup-menu-item-label"></span></button></template> </body></html> diff --git a/ext/js/display/display.js b/ext/js/display/display.js index a5c3f980..ba7ebd91 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -107,10 +107,13 @@ class Display extends EventDispatcher { this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); this._elementOverflowController = new ElementOverflowController(); this._frameVisible = (pageType === 'search'); + this._menuContainer = document.querySelector('#popup-menus'); this._onEntryClickBind = this._onEntryClick.bind(this); this._onKanjiLookupBind = this._onKanjiLookup.bind(this); this._onDebugLogClickBind = this._onDebugLogClick.bind(this); this._onTagClickBind = this._onTagClick.bind(this); + this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this); + this._onMenuButtonMenuCloseBind = this._onMenuButtonMenuClose.bind(this); this._hotkeyHandler.registerActions([ ['close', () => { this._onHotkeyClose(); }], @@ -762,6 +765,35 @@ class Display extends EventDispatcher { this._showTagNotification(e.currentTarget); } + _onMenuButtonClick(e) { + const node = e.currentTarget; + + const menuContainerNode = this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu'); + const menuBodyNode = menuContainerNode.querySelector('.popup-menu-body'); + + const addItem = (menuAction, label) => { + const item = this._displayGenerator.instantiateTemplate('dictionary-entry-popup-menu-item'); + item.querySelector('.popup-menu-item-label').textContent = label; + item.dataset.menuAction = menuAction; + menuBodyNode.appendChild(item); + }; + + addItem('log-debug-info', 'Log debug info'); + + this._menuContainer.appendChild(menuContainerNode); + const popupMenu = new PopupMenu(node, menuContainerNode); + popupMenu.prepare(); + } + + _onMenuButtonMenuClose(e) { + const {currentTarget: node, detail: {action}} = e; + switch (action) { + case 'log-debug-info': + this._logDictionaryEntryData(this.getElementDictionaryEntryIndex(node)); + break; + } + } + _showTagNotification(tagNode) { tagNode = tagNode.parentNode; if (tagNode === null) { return; } @@ -1363,12 +1395,13 @@ class Display extends EventDispatcher { for (const node of entry.querySelectorAll('.headword-kanji-link')) { eventListeners.addEventListener(node, 'click', this._onKanjiLookupBind); } - for (const node of entry.querySelectorAll('.debug-log-link')) { - eventListeners.addEventListener(node, 'click', this._onDebugLogClickBind); - } for (const node of entry.querySelectorAll('.tag-label')) { eventListeners.addEventListener(node, 'click', this._onTagClickBind); } + for (const node of entry.querySelectorAll('.action-button[data-action=menu]')) { + eventListeners.addEventListener(node, 'click', this._onMenuButtonClickBind); + eventListeners.addEventListener(node, 'menuClose', this._onMenuButtonMenuCloseBind); + } } _updateContentTextScanner(options) { diff --git a/ext/settings.html b/ext/settings.html index 1c3dd065..d5020b18 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -732,7 +732,7 @@ <div class="settings-item advanced-only"><div class="settings-item-inner"> <div class="settings-item-left"> <div class="settings-item-label">Show debug information</div> - <div class="settings-item-description">A link to log debugging information will be shown in the search results.</div> + <div class="settings-item-description">A menu option to log debugging information will be shown in the search results.</div> </div> <div class="settings-item-right"> <label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> |