summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/css/display.css2
-rw-r--r--ext/display-templates.html10
-rw-r--r--ext/js/display/display.js39
-rw-r--r--ext/settings.html2
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>