diff options
| -rw-r--r-- | ext/bg/css/settings2.css | 6 | ||||
| -rw-r--r-- | ext/bg/js/settings/anki-controller.js | 37 | ||||
| -rw-r--r-- | ext/bg/settings.html | 2 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 38 |
4 files changed, 49 insertions, 34 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 303b71c4..4015ce79 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -1500,12 +1500,6 @@ button.anki-card-field-value-menu-button { box-sizing: border-box; padding: 0 0.5em; } -#anki-error-message-details-toggle { - display: inline-block; - margin-left: 0.5em; - cursor: pointer; - font-weight: bold; -} #anki-error-message-details { margin-top: 0.25em; font-family: 'Courier New', Courier, monospace; diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js index b382bf26..fe8de3b7 100644 --- a/ext/bg/js/settings/anki-controller.js +++ b/ext/bg/js/settings/anki-controller.js @@ -44,7 +44,9 @@ class AnkiController { this._ankiOptions = null; this._getAnkiDataPromise = null; this._ankiErrorContainer = null; - this._ankiErrorMessageContainer = null; + this._ankiErrorMessageNode = null; + this._ankiErrorMessageNodeDefaultContent = ''; + this._ankiErrorMessageDetailsNode = null; this._ankiErrorMessageDetailsContainer = null; this._ankiErrorMessageDetailsToggle = null; this._ankiErrorInvalidResponseInfo = null; @@ -55,8 +57,10 @@ class AnkiController { async prepare() { this._ankiErrorContainer = document.querySelector('#anki-error'); - this._ankiErrorMessageContainer = document.querySelector('#anki-error-message'); - this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details'); + this._ankiErrorMessageNode = document.querySelector('#anki-error-message'); + this._ankiErrorMessageNodeDefaultContent = this._ankiErrorMessageNode.textContent; + this._ankiErrorMessageDetailsNode = document.querySelector('#anki-error-message-details'); + this._ankiErrorMessageDetailsContainer = document.querySelector('#anki-error-message-details-container'); this._ankiErrorMessageDetailsToggle = document.querySelector('#anki-error-message-details-toggle'); this._ankiErrorInvalidResponseInfo = document.querySelector('#anki-error-invalid-response-info'); this._ankiEnableCheckbox = document.querySelector('[data-setting="anki.enable"]'); @@ -256,6 +260,7 @@ class AnkiController { } async _getAnkiData() { + this._setAnkiStatusChanging(); const [ [deckNames, error1], [modelNames, error2] @@ -295,18 +300,29 @@ class AnkiController { } } + _setAnkiStatusChanging() { + this._ankiErrorMessageNode.textContent = this._ankiErrorMessageNodeDefaultContent; + this._ankiErrorMessageNode.classList.remove('danger-text'); + } + _hideAnkiError() { - this._ankiErrorContainer.hidden = true; + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = true; + } this._ankiErrorMessageDetailsContainer.hidden = true; + this._ankiErrorMessageDetailsToggle.hidden = true; this._ankiErrorInvalidResponseInfo.hidden = true; - this._ankiErrorMessageContainer.textContent = ''; - this._ankiErrorMessageDetailsContainer.textContent = ''; + this._ankiErrorMessageNode.textContent = (this._ankiConnect.enabled ? 'Connected' : 'Not enabled'); + this._ankiErrorMessageNode.classList.remove('danger-text'); + this._ankiErrorMessageDetailsNode.textContent = ''; } _showAnkiError(error) { let errorString = typeof error === 'object' && error !== null ? error.message : null; if (!errorString) { errorString = `${error}`; } - this._ankiErrorMessageContainer.textContent = errorString; + if (!/[.!?]$/.test(errorString)) { errorString += '.'; } + this._ankiErrorMessageNode.textContent = errorString; + this._ankiErrorMessageNode.classList.add('danger-text'); const data = error.data; let details = ''; @@ -314,11 +330,14 @@ class AnkiController { details += `${JSON.stringify(data, null, 4)}\n\n`; } details += `${error.stack}`.trimRight(); - this._ankiErrorMessageDetailsContainer.textContent = details; + this._ankiErrorMessageDetailsNode.textContent = details; - this._ankiErrorContainer.hidden = false; + if (this._ankiErrorContainer !== null) { + this._ankiErrorContainer.hidden = false; + } this._ankiErrorMessageDetailsContainer.hidden = true; this._ankiErrorInvalidResponseInfo.hidden = (errorString.indexOf('Invalid response') < 0); + this._ankiErrorMessageDetailsToggle.hidden = false; } async _requestClipboardReadPermission() { diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 6876701d..c6070baf 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -913,7 +913,7 @@ <div class="alert alert-danger" id="anki-error" hidden> <span id="anki-error-message"></span><a id="anki-error-message-details-toggle">…</a> - <div id="anki-error-message-details" hidden></div> + <div id="anki-error-message-details-container" hidden><div id="anki-error-message-details"></div></div> </div> <div class="alert alert-danger" id="anki-error-invalid-response-info" hidden> diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index 5ea092af..65b5de5a 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -1202,14 +1202,28 @@ </div> </div> <div class="settings-group"> - <div class="settings-item"><div class="settings-item-inner"> - <div class="settings-item-left"> - <div class="settings-item-label">Enable Anki integration</div> + <div class="settings-item"> + <div class="settings-item-inner"> + <div class="settings-item-left"> + <div class="settings-item-label">Enable Anki integration</div> + <div class="settings-item-description"> + <span>Connection status:</span> + <span id="anki-error-message">…</span> <a id="anki-error-message-details-toggle" hidden>Details…</a> + </div> + </div> + <div class="settings-item-right"> + <label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> + </div> </div> - <div class="settings-item-right"> - <label class="toggle"><input type="checkbox" data-setting="anki.enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> + <div class="settings-item-children" id="anki-error-message-details-container" hidden> + <p class="danger-text" id="anki-error-invalid-response-info" hidden> + Attempting to connect to Anki can sometimes return an error message which includes "Invalid response", + which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect. + Resetting it to the default value may fix issues that are occurring. + </p> + <div class="danger-text" id="anki-error-message-details"></div> </div> - </div></div> + </div> <div class="settings-item"> <div class="settings-item-inner settings-item-inner-wrappable"> <div class="settings-item-left"> @@ -2007,18 +2021,6 @@ <div class="anki-card-field-input-header" data-persistent="true">Value</div> </div> </div> - <div class="modal-body-addon" id="anki-error" hidden> - <p class="danger-text"> - <strong>Anki connection error:</strong> - <span id="anki-error-message"></span><a id="anki-error-message-details-toggle">…</a> - </p> - <p class="danger-text" id="anki-error-invalid-response-info" hidden> - Attempting to connect to Anki can sometimes return an error message which includes "Invalid response", - which may indicate that the value of the <em>AnkiConnect server address</em> option is incorrect. - Resetting it to the default value may fix issues that are occurring. - </p> - <div class="danger-text" id="anki-error-message-details" hidden></div> - </div> <div class="modal-footer"> <button class="low-emphasis" data-modal-action="show,anki-cards-info">Help</button> <button data-modal-action="hide">Close</button> |