From 7955fc85ac089d856b44bdea78eccd26ffbd690c Mon Sep 17 00:00:00 2001
From: StefanVukovic99 <stefanvukovic44@gmail.com>
Date: Mon, 3 Jun 2024 19:25:51 +0200
Subject: display inflection rule descriptions (#1000)
* load descriptions in deinflector
* description functions in deinflectors
* show descriptions in title
* use toaster
* use names without internal
* css lint
* reformat transform descriptors
* fix merge errors
* done?
* rename method
---
ext/js/display/display-generator.js | 8 +++++---
ext/js/display/display.js | 30 ++++++++++++++++++++++++++++++
2 files changed, 35 insertions(+), 3 deletions(-)
(limited to 'ext/js/display')
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 6236f749..be87761b 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -401,14 +401,16 @@ export class DisplayGenerator {
}
/**
- * @param {string} inflection
+ * @param {import('dictionary').InflectionRule} inflection
* @returns {DocumentFragment}
*/
_createTermInflection(inflection) {
+ const {name, description} = inflection;
const fragment = this._templates.instantiateFragment('inflection');
const node = this._querySelector(fragment, '.inflection');
- this._setTextContent(node, inflection);
- node.dataset.reason = inflection;
+ this._setTextContent(node, name);
+ if (description) { node.title = description; }
+ node.dataset.reason = name;
return fragment;
}
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index dc6b4713..82d84979 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -162,6 +162,8 @@ export class Display extends EventDispatcher {
this._contentTextScanner = null;
/** @type {?import('./display-notification.js').DisplayNotification} */
this._tagNotification = null;
+ /** @type {?import('./display-notification.js').DisplayNotification} */
+ this._inflectionNotification = null;
/** @type {HTMLElement} */
this._footerNotificationContainer = querySelectorNotNull(document, '#content-footer');
/** @type {OptionToggleHotkeyHandler} */
@@ -181,6 +183,8 @@ export class Display extends EventDispatcher {
/** @type {(event: MouseEvent) => void} */
this._onTagClickBind = this._onTagClick.bind(this);
/** @type {(event: MouseEvent) => void} */
+ this._onInflectionClickBind = this._onInflectionClick.bind(this);
+ /** @type {(event: MouseEvent) => void} */
this._onMenuButtonClickBind = this._onMenuButtonClick.bind(this);
/** @type {(event: import('popup-menu').MenuCloseEvent) => void} */
this._onMenuButtonMenuCloseBind = this._onMenuButtonMenuClose.bind(this);
@@ -1023,6 +1027,14 @@ export class Display extends EventDispatcher {
this._showTagNotification(node);
}
+ /**
+ * @param {MouseEvent} e
+ */
+ _onInflectionClick(e) {
+ const node = /** @type {HTMLElement} */ (e.currentTarget);
+ this._showInflectionNotification(node);
+ }
+
/**
* @param {MouseEvent} e
*/
@@ -1085,6 +1097,21 @@ export class Display extends EventDispatcher {
this._tagNotification.open();
}
+ /**
+ * @param {HTMLSpanElement} inflectionNode
+ */
+ _showInflectionNotification(inflectionNode) {
+ const description = inflectionNode.title;
+ if (!description || !(inflectionNode instanceof HTMLSpanElement)) { return; }
+
+ if (this._inflectionNotification === null) {
+ this._inflectionNotification = this.createNotification(true);
+ }
+
+ this._inflectionNotification.setContent(description);
+ this._inflectionNotification.open();
+ }
+
/**
* @param {boolean} animate
*/
@@ -1797,6 +1824,9 @@ export 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('.inflection[data-reason]')) {
+ eventListeners.addEventListener(node, 'click', this._onInflectionClickBind);
+ }
for (const node of entry.querySelectorAll('.tag-label')) {
eventListeners.addEventListener(node, 'click', this._onTagClickBind);
}
--
cgit v1.2.3