aboutsummaryrefslogtreecommitdiff
path: root/ext/js/pages/settings
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-02-26 18:15:04 -0500
committerGitHub <noreply@github.com>2021-02-26 18:15:04 -0500
commitb994414b14b224c02359b5e31f6994653a3d4458 (patch)
tree64c28b1ea3070af7ba97b253ee3c7ba8fb114719 /ext/js/pages/settings
parent782b945905c948b9a0495aa85524ad1a92c7bd97 (diff)
Improve Anki card type selection (#1445)
* Update separator line styles * Add tabs * Add support for radio select * Remove old select * Move out of scroll region * Fix missing line
Diffstat (limited to 'ext/js/pages/settings')
-rw-r--r--ext/js/pages/settings/anki-controller.js28
1 files changed, 22 insertions, 6 deletions
diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index 509e263c..37ae2cf7 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -43,7 +43,6 @@ class AnkiController {
this._ankiErrorMessageDetailsToggle = null;
this._ankiErrorInvalidResponseInfo = null;
this._ankiCardPrimary = null;
- this._ankiCardPrimaryType = null;
this._validateFieldsToken = null;
}
@@ -61,13 +60,19 @@ class AnkiController {
this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info');
this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]');
this._ankiCardPrimary = document.querySelector('#anki-card-primary');
- this._ankiCardPrimaryType = document.querySelector('#anki-card-primary-type');
+ const ankiCardPrimaryTypeSelect = document.querySelector('#anki-card-primary-type');
+ const ankiCardPrimaryTypeRadios = document.querySelectorAll('input[type=radio][name=anki-card-primary-type]');
this._setupFieldMenus();
this._ankiErrorMessageDetailsToggle.addEventListener('click', this._onAnkiErrorMessageDetailsToggleClick.bind(this), false);
if (this._ankiEnableCheckbox !== null) { this._ankiEnableCheckbox.addEventListener('settingChanged', this._onAnkiEnableChanged.bind(this), false); }
- if (this._ankiCardPrimaryType !== null) { this._ankiCardPrimaryType.addEventListener('change', this._onAnkiCardPrimaryTypeChange.bind(this), false); }
+ if (ankiCardPrimaryTypeSelect !== null) {
+ ankiCardPrimaryTypeSelect.addEventListener('change', this._onAnkiCardPrimaryTypeSelectChange.bind(this), false);
+ }
+ for (const input of ankiCardPrimaryTypeRadios) {
+ input.addEventListener('change', this._onAnkiCardPrimaryTypeRadioChange.bind(this), false);
+ }
const options = await this._settingsController.getOptions();
this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
@@ -179,8 +184,7 @@ class AnkiController {
}
}
- _onAnkiCardPrimaryTypeChange(e) {
- if (this._ankiCardPrimary === null) { return; }
+ _onAnkiCardPrimaryTypeSelectChange(e) {
const node = e.currentTarget;
let ankiCardMenu;
if (node.selectedIndex >= 0) {
@@ -188,7 +192,19 @@ class AnkiController {
ankiCardMenu = option.dataset.ankiCardMenu;
}
- this._ankiCardPrimary.dataset.ankiCardType = node.value;
+ this._setAnkiCardPrimaryType(node.value, ankiCardMenu);
+ }
+
+ _onAnkiCardPrimaryTypeRadioChange(e) {
+ const node = e.currentTarget;
+ if (!node.checked) { return; }
+
+ this._setAnkiCardPrimaryType(node.dataset.value, node.dataset.ankiCardMenu);
+ }
+
+ _setAnkiCardPrimaryType(ankiCardType, ankiCardMenu) {
+ if (this._ankiCardPrimary === null) { return; }
+ this._ankiCardPrimary.dataset.ankiCardType = ankiCardType;
if (typeof ankiCardMenu !== 'undefined') {
this._ankiCardPrimary.dataset.ankiCardMenu = ankiCardMenu;
} else {