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
yomidevs · Jun 3, 2024 · 7955fc8 · 7955fc8
1 parent d2fce50
commit 7955fc8
Show file tree

Hide file tree

Showing 26 changed files with 1,188 additions and 801 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -855,6 +855,9 @@ button.action-button:active {
 .inflection-source-icon[data-inflection-source='both']::after {
     content: '🧩📖';
 }
+.inflection[title] {
+    cursor: pointer;
+}
 
 
 /* Headwords */

diff --git a/ext/data/templates/anki-field-templates-upgrade-v38.handlebars b/ext/data/templates/anki-field-templates-upgrade-v38.handlebars
@@ -0,0 +1,43 @@
+{{<<<<<<<}}
+{{#*inline "conjugation"}}
+    {{~#if (op ">" definition.inflectionRuleChainCandidates.length 0)~}}
+        {{~set "multiple" false~}}
+        {{~#if (op ">" definition.inflectionRuleChainCandidates.length 1)~}}
+            {{~set "multiple" true~}}
+        {{~/if~}}
+        {{~#if (get "multiple")~}}<ul>{{/if~}}
+            {{~#each definition.inflectionRuleChainCandidates~}}
+                {{~#if (op ">" inflectionRules.length 0)~}}
+                    {{~#if (get "multiple")~}}<li>{{/if~}}
+                    {{~#each inflectionRules~}}
+                        {{~#if (op ">" @index 0)}} « {{/if~}}
+                        {{.}}
+                    {{~/each~}}
+                    {{~#if (get "multiple")~}}</li>{{/if~}}
+                {{~/if~}}
+            {{~/each~}}
+        {{~#if (get "multiple")~}}</ul>{{/if~}}
+    {{~/if~}}
+{{/inline}}
+{{=======}}
+{{#*inline "conjugation"}}
+    {{~#if (op ">" definition.inflectionRuleChainCandidates.length 0)~}}
+        {{~set "multiple" false~}}
+        {{~#if (op ">" definition.inflectionRuleChainCandidates.length 1)~}}
+            {{~set "multiple" true~}}
+        {{~/if~}}
+        {{~#if (get "multiple")~}}<ul>{{/if~}}
+            {{~#each definition.inflectionRuleChainCandidates~}}
+                {{~#if (op ">" inflectionRules.length 0)~}}
+                    {{~#if (get "multiple")~}}<li>{{/if~}}
+                    {{~#each inflectionRules~}}
+                        {{~#if (op ">" @index 0)}} « {{/if~}}
+                        {{name}}
+                    {{~/each~}}
+                    {{~#if (get "multiple")~}}</li>{{/if~}}
+                {{~/if~}}
+            {{~/each~}}
+        {{~#if (get "multiple")~}}</ul>{{/if~}}
+    {{~/if~}}
+{{/inline}}
+{{>>>>>>>}}
diff --git a/ext/data/templates/default-anki-field-templates.handlebars b/ext/data/templates/default-anki-field-templates.handlebars
@@ -324,7 +324,7 @@
                     {{~#if (get "multiple")~}}<li>{{/if~}}
                     {{~#each inflectionRules~}}
                         {{~#if (op ">" @index 0)}} « {{/if~}}
-                        {{.}}
+                        {{name}}
                     {{~/each~}}
                     {{~#if (get "multiple")~}}</li>{{/if~}}
                 {{~/if~}}

diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
@@ -545,6 +545,7 @@ export class OptionsUtil {
             this._updateVersion35,
             this._updateVersion36,
             this._updateVersion37,
+            this._updateVersion38,
         ];
         /* eslint-enable @typescript-eslint/unbound-method */
         if (typeof targetVersion === 'number' && targetVersion < result.length) {
@@ -1304,6 +1305,14 @@ export class OptionsUtil {
         await this._applyAnkiFieldTemplatesPatch(options, '/data/templates/anki-field-templates-upgrade-v37.handlebars');
     }
 
+    /**
+     *  - Updated `conjugation` handlebars for new inflection chain format.
+     *  @type {import('options-util').UpdateFunction}
+     */
+    async _updateVersion38(options) {
+        await this._applyAnkiFieldTemplatesPatch(options, '/data/templates/anki-field-templates-upgrade-v38.handlebars');
+    }
+
     /**
      * @param {string} url
      * @returns {Promise<chrome.tabs.Tab>}

diff --git 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
@@ -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);
         }

diff --git a/ext/js/language/de/german-transforms.js b/ext/js/language/de/german-transforms.js
@@ -64,43 +64,43 @@ export const germanTransforms = {
             isDictionaryForm: true,
         },
     },
-    transforms: [
-        {
+    transforms: {
+        'nominalization': {
             name: 'nominalization',
             description: 'Noun formed from a verb',
             rules: [
                 suffixInflection('ung', 'en', [], []),
                 suffixInflection('lung', 'eln', [], []),
             ],
         },
-        {
+        '-bar': {
             name: '-bar',
             description: '-able adjective from a verb',
             rules: [
                 suffixInflection('bar', 'en', [], ['v']),
                 suffixInflection('bar', 'n', [], ['v']), // Lieferbar
             ],
         },
-        {
+        'negative': {
             name: 'negative',
             description: 'Negation',
             rules: [
                 prefixInflection('un', '', [], ['adj']),
             ],
         },
-        {
+        'separated prefix': {
             name: 'separated prefix',
             description: 'Separable prefix',
             rules: [
                 ...separatedPrefixInflections,
             ],
         },
-        {
+        'zu-infinitive': {
             name: 'zu-infinitive',
             description: 'zu-infinitive',
             rules: [
                 ...zuInfinitiveInflections,
             ],
         },
-    ],
+    },
 };
diff --git a/ext/js/language/en/english-transforms.js b/ext/js/language/en/english-transforms.js
@@ -148,8 +148,8 @@ export const englishTransforms = {
             isDictionaryForm: true,
         },
     },
-    transforms: [
-        {
+    transforms: {
+        'plural': {
             name: 'plural',
             description: 'Plural form of a noun',
             rules: [
@@ -160,53 +160,53 @@ export const englishTransforms = {
                 suffixInflection('ves', 'f', ['np'], ['ns']),
             ],
         },
-        {
+        'possessive': {
             name: 'possessive',
             description: 'Possessive form of a noun',
             rules: [
                 suffixInflection('\'s', '', ['n'], ['n']),
                 suffixInflection('s\'', 's', ['n'], ['n']),
             ],
         },
-        {
+        'past': {
             name: 'past',
             description: 'Simple past tense of a verb',
             rules: [
                 ...pastSuffixInflections,
                 ...createPhrasalVerbInflectionsFromSuffixInflections(pastSuffixInflections),
             ],
         },
-        {
+        'ing': {
             name: 'ing',
             description: 'Present participle of a verb',
             rules: [
                 ...ingSuffixInflections,
                 ...createPhrasalVerbInflectionsFromSuffixInflections(ingSuffixInflections),
             ],
         },
-        {
+        '3rd pers. sing. pres': {
             name: '3rd pers. sing. pres',
             description: 'Third person singular present tense of a verb',
             rules: [
                 ...thirdPersonSgPresentSuffixInflections,
                 ...createPhrasalVerbInflectionsFromSuffixInflections(thirdPersonSgPresentSuffixInflections),
             ],
         },
-        {
+        'interposed object': {
             name: 'interposed object',
             description: 'Phrasal verb with interposed object',
             rules: [
                 phrasalVerbInterposedObjectRule,
             ],
         },
-        {
+        'archaic': {
             name: 'archaic',
             description: 'Archaic form of a word',
             rules: [
                 suffixInflection('\'d', 'ed', ['v'], ['v']),
             ],
         },
-        {
+        'adverb': {
             name: 'adverb',
             description: 'Adverb form of an adjective',
             rules: [
@@ -215,7 +215,7 @@ export const englishTransforms = {
                 suffixInflection('ly', 'le', ['adv'], ['adj']), // 'humbly'
             ],
         },
-        {
+        'comparative': {
             name: 'comparative',
             description: 'Comparative form of an adjective',
             rules: [
@@ -225,7 +225,7 @@ export const englishTransforms = {
                 ...doubledConsonantInflection('bdgmnt', 'er', ['adj'], ['adj']),
             ],
         },
-        {
+        'superlative': {
             name: 'superlative',
             description: 'Superlative form of an adjective',
             rules: [
@@ -235,14 +235,14 @@ export const englishTransforms = {
                 ...doubledConsonantInflection('bdgmnt', 'est', ['adj'], ['adj']),
             ],
         },
-        {
+        'dropped g': {
             name: 'dropped g',
             description: 'Dropped g in -ing form of a verb',
             rules: [
                 suffixInflection('in\'', 'ing', ['v'], ['v']),
             ],
         },
-        {
+        '-y': {
             name: '-y',
             description: 'Adjective formed from a verb or noun',
             rules: [
@@ -251,34 +251,34 @@ export const englishTransforms = {
                 ...doubledConsonantInflection('glmnprst', 'y', [], ['n', 'v']), // 'baggy', 'saggy'
             ],
         },
-        {
+        'un-': {
             name: 'un-',
             description: 'Negative form of an adjective, adverb, or verb',
             rules: [
                 prefixInflection('un', '', ['adj', 'adv', 'v'], ['adj', 'adv', 'v']),
             ],
         },
-        {
+        'going-to future': {
             name: 'going-to future',
             description: 'Going-to future tense of a verb',
             rules: [
                 prefixInflection('going to ', '', ['v'], ['v']),
             ],
         },
-        {
+        'will future': {
             name: 'will future',
             description: 'Will-future tense of a verb',
             rules: [
                 prefixInflection('will ', '', ['v'], ['v']),
             ],
         },
-        {
+        'imperative negative': {
             name: 'imperative negative',
             description: 'Negative imperative form of a verb',
             rules: [
                 prefixInflection('don\'t ', '', ['v'], ['v']),
                 prefixInflection('do not ', '', ['v'], ['v']),
             ],
         },
-    ],
+    },
 };