Display menu button (#1992)
* Implement new menu which includes a debug log option * Update wording
This commit is contained in:
toasted-nutbread
GitHub
parent
ca4ed0300b
commit
9ae38bd8e9
@ -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],
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user