Anki field templates suggestions (#1940)

* Remove unused

* Bold the suggested default field value

2 files changed, 23 insertions, 26 deletions

diff --git a/ext/css/material.css b/ext/css/material.css
index 702215bd..92d4fcdb 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -1261,6 +1261,9 @@ button.popup-menu-item {
     font-family: inherit;
     align-items: center;
 }
+button.popup-menu-item.popup-menu-item-bold {
+    font-weight: bold;
+}
 button.popup-menu-item:not([hidden]) {
     display: flex;
 }
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index 1ec14c4b..b713c8dd 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -135,16 +135,6 @@ class AnkiController {
         }
     }
 
-    getFieldMarkersHtml(markers) {
-        const fragment = document.createDocumentFragment();
-        for (const marker of markers) {
-            const markerNode = this._settingsController.instantiateTemplate('anki-card-field-marker');
-            markerNode.querySelector('.marker-link').textContent = marker;
-            fragment.appendChild(markerNode);
-        }
-        return fragment;
-    }
-
     async getAnkiData() {
         let promise = this._getAnkiDataPromise;
         if (promise === null) {
@@ -422,6 +412,23 @@ class AnkiCardController {
         this._validateFieldPermissions(node, index, false);
     }
 
+    _onFieldMenuOpen({currentTarget: button, detail: {menu}}) {
+        let {index, fieldName} = button.dataset;
+        index = Number.parseInt(index, 10);
+
+        const defaultValue = this._getDefaultFieldValue(fieldName, index, this._cardType, null);
+        if (defaultValue === '') { return; }
+
+        const match = /^\{([\w\W]+)\}$/.exec(defaultValue);
+        if (match === null) { return; }
+
+        const defaultMarker = match[1];
+        const item = menu.bodyNode.querySelector(`.popup-menu-item[data-marker="${defaultMarker}"]`);
+        if (item === null) { return; }
+
+        item.classList.add('popup-menu-item-bold');
+    }
+
     _onFieldMenuClose({currentTarget: button, detail: {action, item}}) {
         switch (action) {
             case 'setFieldMarker':
@@ -430,12 +437,6 @@ class AnkiCardController {
         }
     }
 
-    _onFieldMarkerLinkClick(e) {
-        e.preventDefault();
-        const link = e.currentTarget;
-        this._setFieldMarker(link, link.textContent);
-    }
-
     _validateField(node, index) {
         let valid = (node.dataset.hasPermissions !== 'false');
         if (valid && index === 0 && !AnkiUtil.stringContainsAnyFieldMarker(node.value)) {
@@ -461,7 +462,6 @@ class AnkiCardController {
     _setupFields() {
         this._fieldEventListeners.removeAllEventListeners();
 
-        const markers = this._ankiController.getFieldMarkers(this._cardType);
         const totalFragment = document.createDocumentFragment();
         this._fieldEntries = [];
         let index = 0;
@@ -486,15 +486,6 @@ class AnkiCardController {
             this._fieldEventListeners.addEventListener(inputField, 'settingChanged', this._onFieldSettingChanged.bind(this, index), false);
             this._validateField(inputField, index);
 
-            const markerList = content.querySelector('.anki-card-field-marker-list');
-            if (markerList !== null) {
-                const markersFragment = this._ankiController.getFieldMarkersHtml(markers);
-                for (const element of markersFragment.querySelectorAll('.marker-link')) {
-                    this._fieldEventListeners.addEventListener(element, 'click', this._onFieldMarkerLinkClick.bind(this), false);
-                }
-                markerList.appendChild(markersFragment);
-            }
-
             const menuButton = content.querySelector('.anki-card-field-value-menu-button');
             if (menuButton !== null) {
                 if (typeof this._cardMenu !== 'undefined') {
@@ -502,6 +493,9 @@ class AnkiCardController {
                 } else {
                     delete menuButton.dataset.menu;
                 }
+                menuButton.dataset.index = `${index}`;
+                menuButton.dataset.fieldName = fieldName;
+                this._fieldEventListeners.addEventListener(menuButton, 'menuOpen', this._onFieldMenuOpen.bind(this), false);
                 this._fieldEventListeners.addEventListener(menuButton, 'menuClose', this._onFieldMenuClose.bind(this), false);
             }