diff --git a/src/ui/scss/main.scss b/src/ui/scss/main.scss index ab20d83..87e3502 100644 --- a/src/ui/scss/main.scss +++ b/src/ui/scss/main.scss @@ -113,7 +113,7 @@ button { margin: 0; } -input[type="checkbox"] { +input[type=checkbox] { background: none; border: none; cursor: pointer; @@ -132,7 +132,8 @@ input[type="checkbox"] { } } -input[type="text"] { +input[type=text], +input:not([type]) { background: none; border: 1px solid var(--color); color: var(--color); @@ -828,7 +829,7 @@ ul { margin-bottom: 0.75em; position: relative; - & input[type="checkbox"] { + & input[type=checkbox] { flex: 16px 0 0; height: 16px; margin: 0 0.75em 0 0; diff --git a/src/ui/shared/app-base.ts b/src/ui/shared/app-base.ts index e94a231..317cfe2 100644 --- a/src/ui/shared/app-base.ts +++ b/src/ui/shared/app-base.ts @@ -45,14 +45,14 @@ export abstract class App { protected initialize() { this.log(`${this._appName}.initializeState`); - for (const el of document.querySelectorAll('input[type="checkbox"].setting')) { + for (const el of document.querySelectorAll('input[type=checkbox].setting')) { const checked = el.dataset.type === 'array' ? (getSettingValue(el.name) || []).includes(el.value) : getSettingValue(el.name) || false; el.checked = checked; } - for (const el of document.querySelectorAll('input[type="text"].setting')) { + for (const el of document.querySelectorAll('input[type=text].setting, input:not([type]).setting')) { el.value = getSettingValue(el.name) || ''; } @@ -71,13 +71,13 @@ export abstract class App { protected bind() { const onInputChecked = this.onInputChecked.bind(this); - DOM.listenAll('input[type="checkbox"].setting', 'change', function(this: HTMLInputElement) { return onInputChecked(this, ...arguments); }); + DOM.listenAll('input[type=checkbox].setting', 'change', function(this: HTMLInputElement) { return onInputChecked(this, ...arguments); }); const onInputBlurred = this.onInputBlurred.bind(this); - DOM.listenAll('input[type="text"].setting', 'blur', function(this: HTMLInputElement) { return onInputBlurred(this, ...arguments); }); + DOM.listenAll('input[type=text].setting, input:not([type]).setting', 'blur', function(this: HTMLInputElement) { return onInputBlurred(this, ...arguments); }); const onInputFocused = this.onInputFocused.bind(this); - DOM.listenAll('input[type="text"].setting', 'focus', function(this: HTMLInputElement) { return onInputFocused(this, ...arguments); }); + DOM.listenAll('input[type=text].setting, input:not([type]).setting', 'focus', function(this: HTMLInputElement) { return onInputFocused(this, ...arguments); }); const onInputSelected = this.onInputSelected.bind(this); DOM.listenAll('select.setting', 'change', function(this: HTMLInputElement) { return onInputSelected(this, ...arguments); }); @@ -181,7 +181,7 @@ export abstract class App { const setting = element.closest('.settings-group__setting'); if (setting == null) return; - const input = setting.querySelector('input[type="text"]'); + const input = setting.querySelector('input[type=text], input:not([type])'); if (input == null) return; input.value += `\${${element.dataset.token}}`;