aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ext/bg/css/settings2.css17
-rw-r--r--ext/bg/js/settings/anki-controller.js38
-rw-r--r--ext/bg/settings.html2
-rw-r--r--ext/bg/settings2.html2
4 files changed, 54 insertions, 5 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index e15fa080..d25004bc 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -2088,9 +2088,22 @@ select.profile-condition-operator {
.anki-card-field-input-header {
font-weight: bold;
}
-.anki-card-field-name {
- margin-right: 1em;
+.anki-card-field-name-container {
+ display: flex;
+ flex-flow: row nowrap;
+ align-self: stretch;
+ align-items: center;
margin-top: 0.25em;
+ margin-right: 0.25em;
+ padding: 0 0.25em;
+}
+.anki-card-field-name-container[data-is-valid=false],
+.anki-card-field-name-container[data-order-matches=false][data-index='0'] {
+ background-color: var(--danger-color-lightest);
+ border-radius: var(--text-input-border-radius);
+}
+.anki-card-field-name {
+ flex: 1 1 auto;
}
.anki-card-field-value-container {
display: flex;
diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index 957f86d9..541916b7 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -46,6 +46,7 @@ class AnkiController {
this._ankiErrorInvalidResponseInfo = null;
this._ankiCardPrimary = null;
this._ankiCardPrimaryType = null;
+ this._validateFieldsToken = null;
}
async prepare() {
@@ -464,10 +465,19 @@ class AnkiCardController {
const markers = this._ankiController.getFieldMarkers(this._cardType);
const totalFragment = document.createDocumentFragment();
+ const fieldMap = new Map();
+ let index = 0;
for (const [fieldName, fieldValue] of Object.entries(this._fields)) {
const content = this._settingsController.instantiateTemplateFragment('anki-card-field');
- content.querySelector('.anki-card-field-name').textContent = fieldName;
+ const fieldNameContainerNode = content.querySelector('.anki-card-field-name-container');
+ fieldNameContainerNode.dataset.index = `${index}`;
+ const fieldNameNode = content.querySelector('.anki-card-field-name');
+ fieldNameNode.textContent = fieldName;
+ fieldMap.set(fieldName, {fieldNameContainerNode});
+
+ const valueContainer = content.querySelector('.anki-card-field-value-container');
+ valueContainer.dataset.index = `${index}`;
const inputField = content.querySelector('.anki-card-field-value');
inputField.value = fieldValue;
@@ -494,6 +504,8 @@ class AnkiCardController {
}
totalFragment.appendChild(content);
+
+ ++index;
}
const ELEMENT_NODE = Node.ELEMENT_NODE;
@@ -503,6 +515,30 @@ class AnkiCardController {
container.removeChild(node);
}
container.appendChild(totalFragment);
+
+ this._validateFields(fieldMap);
+ }
+
+ async _validateFields(fieldMap) {
+ const token = {};
+ this._validateFieldsToken = token;
+
+ let fieldNames;
+ try {
+ fieldNames = await this._ankiController.getModelFieldNames(this._model);
+ } catch (e) {
+ return;
+ }
+
+ if (token !== this._validateFieldsToken) { return; }
+
+ const fieldNamesSet = new Set(fieldNames);
+ let index = 0;
+ for (const [fieldName, {fieldNameContainerNode}] of fieldMap.entries()) {
+ fieldNameContainerNode.dataset.isValid = `${fieldNamesSet.has(fieldName)}`;
+ fieldNameContainerNode.dataset.orderMatches = `${index < fieldNames.length && fieldName === fieldNames[index]}`;
+ ++index;
+ }
}
async _setDeck(value) {
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index acb07a60..6876701d 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -1083,7 +1083,7 @@
</div>
<template id="anki-card-field-template"><tr>
- <td class="col-sm-2 anki-card-field-name"></td>
+ <td class="col-sm-2 anki-card-field-name-container"><span class="anki-card-field-name"></span></td>
<td class="col-sm-10">
<div class="input-group anki-card-field-value-container">
<input type="text" class="anki-card-field-value form-control" data-field="" value="">
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 8ff0f14e..b5846c80 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -2366,7 +2366,7 @@
<!-- Anki templates -->
-<template id="anki-card-field-template"><div class="anki-card-field-name"></div>
+<template id="anki-card-field-template"><div class="anki-card-field-name-container"><span class="anki-card-field-name"></span></div>
<div class="anki-card-field-value-container">
<input type="text" class="anki-card-field-value input-with-suffix-button" autocomplete="off">
<button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below,left"><span class="icon-button-icon icon-button-icon-light" data-icon="material-down-arrow"></span></button>