From 418e8a57bf7ea1def3e7b83270742d466e98e8cf Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 29 May 2020 20:25:22 -0400 Subject: Convert dictionaries.js and storage.js to classes (#570) * Convert dictionaries.js to a class * Remove storage spinner * Convert storage.js to a class * Move dataset assignments into main.js --- ext/bg/css/settings.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ext/bg/css') diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index f55082e7..eb11d77e 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -18,7 +18,7 @@ #anki-spinner, #dict-spinner, #dict-import-progress, -.storage-hidden, #storage-spinner { +.storage-hidden { display: none; } -- cgit v1.2.3 From c8810bc92972d14858cdad637eb0a078cae46349 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 30 May 2020 16:22:51 -0400 Subject: Update AnkiController (#581) * Update how fields are populated * Update how fields are modified after a model change * Update how _onFieldsChanged assigns fields * Update how spinner is hidden * Remove jQuery usage * Use non-jQuery events --- ext/bg/css/settings.css | 1 - ext/bg/js/settings/anki.js | 63 +++++++++++++++++++++++----------------------- ext/bg/settings.html | 2 +- 3 files changed, 32 insertions(+), 34 deletions(-) (limited to 'ext/bg/css') diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css index eb11d77e..7659f6f2 100644 --- a/ext/bg/css/settings.css +++ b/ext/bg/css/settings.css @@ -16,7 +16,6 @@ */ -#anki-spinner, #dict-spinner, #dict-import-progress, .storage-hidden { display: none; diff --git a/ext/bg/js/settings/anki.js b/ext/bg/js/settings/anki.js index d099239d..51dabba4 100644 --- a/ext/bg/js/settings/anki.js +++ b/ext/bg/js/settings/anki.js @@ -17,7 +17,6 @@ /* global * api - * utilBackgroundIsolate */ class AnkiController { @@ -26,10 +25,12 @@ class AnkiController { } async prepare() { - $('#anki-fields-container input,#anki-fields-container select,#anki-fields-container textarea').change(this._onFieldsChanged.bind(this)); + for (const element of document.querySelectorAll('#anki-fields-container input,#anki-fields-container select')) { + element.addEventListener('change', this._onFieldsChanged.bind(this), false); + } - for (const node of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) { - node.addEventListener('change', this._onModelChanged.bind(this), false); + for (const element of document.querySelectorAll('#anki-terms-model,#anki-kanji-model')) { + element.addEventListener('change', this._onModelChanged.bind(this), false); } this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this)); @@ -97,8 +98,8 @@ class AnkiController { await this._deckAndModelPopulate(options); await Promise.all([ - this._fieldsPopulate('terms', options), - this._fieldsPopulate('kanji', options) + this._populateFields('terms', options.anki.terms.fields), + this._populateFields('kanji', options.anki.kanji.fields) ]); } @@ -111,12 +112,8 @@ class AnkiController { } _spinnerShow(show) { - const spinner = $('#anki-spinner'); - if (show) { - spinner.show(); - } else { - spinner.hide(); - } + const spinner = document.querySelector('#anki-spinner'); + spinner.hidden = !show; } _setError(error) { @@ -222,15 +219,13 @@ class AnkiController { return content; } - async _fieldsPopulate(tabId, options) { + async _populateFields(tabId, fields) { const tab = document.querySelector(`.tab-pane[data-anki-card-type=${tabId}]`); const container = tab.querySelector('tbody'); const markers = this.getFieldMarkers(tabId); const fragment = document.createDocumentFragment(); - const fields = options.anki[tabId].fields; - for (const name of Object.keys(fields)) { - const value = fields[name]; + for (const [name, value] of Object.entries(fields)) { const html = this._createFieldTemplate(name, value, markers); fragment.appendChild(html); } @@ -249,7 +244,7 @@ class AnkiController { _onMarkerClicked(e) { e.preventDefault(); const link = e.currentTarget; - const input = $(link).closest('.input-group').find('.anki-field-value')[0]; + const input = link.closest('.input-group').querySelector('.anki-field-value'); input.value = `{${link.textContent}}`; input.dispatchEvent(new Event('change')); } @@ -276,23 +271,27 @@ class AnkiController { fields[name] = ''; } - const options = await this._settingsController.getOptionsMutable(); - options.anki[tabId].fields = utilBackgroundIsolate(fields); - await this._settingsController.save(); - - await this._fieldsPopulate(tabId, options); + await this._settingsController.setProfileSetting(`anki["${tabId}"].fields`, fields); + await this._populateFields(tabId, fields); } async _onFieldsChanged() { - const options = await this._settingsController.getOptionsMutable(); - - options.anki.terms.deck = $('#anki-terms-deck').val(); - options.anki.terms.model = $('#anki-terms-model').val(); - options.anki.terms.fields = utilBackgroundIsolate(this._fieldsToDict(document.querySelectorAll('#terms .anki-field-value'))); - options.anki.kanji.deck = $('#anki-kanji-deck').val(); - options.anki.kanji.model = $('#anki-kanji-model').val(); - options.anki.kanji.fields = utilBackgroundIsolate(this._fieldsToDict(document.querySelectorAll('#kanji .anki-field-value'))); - - await this._settingsController.save(); + const termsDeck = document.querySelector('#anki-terms-deck').value; + const termsModel = document.querySelector('#anki-terms-model').value; + const termsFields = this._fieldsToDict(document.querySelectorAll('#terms .anki-field-value')); + const kanjiDeck = document.querySelector('#anki-kanji-deck').value; + const kanjiModel = document.querySelector('#anki-kanji-model').value; + const kanjiFields = this._fieldsToDict(document.querySelectorAll('#kanji .anki-field-value')); + + const targets = [ + {action: 'set', path: 'anki.terms.deck', value: termsDeck}, + {action: 'set', path: 'anki.terms.model', value: termsModel}, + {action: 'set', path: 'anki.terms.fields', value: termsFields}, + {action: 'set', path: 'anki.kanji.deck', value: kanjiDeck}, + {action: 'set', path: 'anki.kanji.model', value: kanjiModel}, + {action: 'set', path: 'anki.kanji.fields', value: kanjiFields} + ]; + + await this._settingsController.modifyProfileSettings(targets); } } diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 1baeeced..b314be80 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -770,7 +770,7 @@
- +

Anki Options

-- cgit v1.2.3 From 4ebee3e17c2d536da7de33d16c2e44c54c4c8e51 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 21 Jun 2020 15:57:18 -0400 Subject: Context popup update (#594) * Add link to the help button * Update context.html to not use bootstrap Styles moved into a separate file Update icons * Update terminology to correspond to new icons --- README.md | 2 +- ext/bg/context.html | 244 +++++++++------------------------------ ext/bg/css/context.css | 282 ++++++++++++++++++++++++++++++++++++++++++++++ ext/bg/guide.html | 2 +- ext/bg/js/context-main.js | 6 +- 5 files changed, 342 insertions(+), 194 deletions(-) create mode 100644 ext/bg/css/context.css (limited to 'ext/bg/css') diff --git a/README.md b/README.md index 14d89845..6231179c 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ primary language is not English, you may consider also importing the English ver [![](https://foosoft.net/projects/yomichan/img/ui-actions-thumb.png)](https://foosoft.net/projects/yomichan/img/ui-actions.png) -2. Click on the *spanner/monkey wrench* icon in the middle to open the options page. +2. Click on the *spanner/cog* icon in the middle to open the options page. 3. Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed (or enabled), Yomichan will warn you that it is not ready for use by displaying an orange exclamation mark over its diff --git a/ext/bg/context.html b/ext/bg/context.html index 89695d0e..1e7e6155 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -1,192 +1,60 @@ - - - - - - - - - - - - - - - -
-
- -
-
- - - -
-
-
-

Yomichan

- - - Options - - - Search - - - Help - + + + + + + + + + + + + + + +
+ +
+ + + +
+
+ +
+

Yomichan

+ + + Options + + + Search + + + Help + +
+ + + + + + + + + + + + diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css new file mode 100644 index 00000000..2d42dd16 --- /dev/null +++ b/ext/bg/css/context.css @@ -0,0 +1,282 @@ +/* + * Copyright (C) 2020 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +body { + padding: 10px; + margin: 0; + font-family: "Segoe UI", Tahoma, sans-serif; + font-size: 14px; +} + +h3 { + margin: 10px 0; + font-family: inherit; + font-weight: 500; + line-height: 1.1; + font-size: 24px; + color: inherit; +} +label { + font-weight: normal; +} + +#mini { + text-align: center; +} +#full { + display: none; +} +:root[data-mode=full] #mini { + display: none; +} +:root[data-mode=full] #full { + display: initial; +} + + +.link-group { + display: block; + line-height: 1.5em; + margin: 0 -10px; + padding: 0.5em 10px; + cursor: pointer; + color: #333; + text-decoration: none; + background-color: transparent; + transition: background-color 0.125s linear 0s; + max-width: none; +} +.link-group:hover, +.link-group:active { + color: #333; + text-decoration: none; +} +.link-group:hover>.link-group-label, +.link-group:active>.link-group-label { + text-decoration: underline; +} +.link-group:hover { + background-color: rgba(0, 0, 0, 0.05); +} +.link-group:active { + background-color: rgba(0, 0, 0, 0.1); +} +.link-group-icon { + width: 16px; + height: 16px; + text-align: center; + vertical-align: middle; + display: inline-block; + margin-right: 0.25em; +} +.link-group-icon>input { + margin: 0; + padding: 0; +} +.link-group-icon[data-icon=chevron]::after { + content: ""; + display: block; + width: 100%; + height: 100%; + background-image: url(/mixed/img/right-chevron.svg); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; +} +.link-group-label { + vertical-align: middle; +} + +/* Toggle */ +.toggle>input[type=checkbox] { + display: none; +} +.toggle>input[type=checkbox]:not(:checked)~.toggle-group { + transform: translateX(-50%); +} +.toggle { + box-sizing: border-box; + width: 60px; + height: 34px; + position: relative; + overflow: hidden; + border: 1px solid #245580; + border-radius: 4px; + display: inline-block; + padding: 6px 12px; +} +.toggle-group { + position: absolute; + width: 200%; + left: 0; + top: 0; + bottom: 0; + user-select: none; +} +body[data-loaded=true] .toggle-group { + transition: transform 0.35s; +} + +.toggle-on, +.toggle-off, +.toggle-handle { + display: block; + padding: 6px 12px; + font-size: 14px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + cursor: pointer; +} +.toggle-on, +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + margin: 0; + border: 0; +} + +.toggle-on { + padding-right: 24px; + left: 0; + right: 50%; + color: #ffffff; + background-color: #337ab7; + border-color: #2e6da4; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0); + background-image: linear-gradient(#337ab7, #265a88); + background-repeat: repeat-x; +} +.toggle-on:focus, +.toggle-on:hover { + background-color: #265a88; + background-image: linear-gradient(#2d65a0, #265a88 50%); +} +.toggle-on:active { + background-color: #204d74; + background-image: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} + +.toggle-off { + padding-left: 24px; + left: 50%; + right: 0; +} + +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0; + padding-bottom: 0; + height: 100%; + width: 0; + border-style: solid; + border-width: 0 1px; + border-radius: 4px; + border-color: #cccccc; +} + +.toggle-off, +.toggle-handle { + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + background-image: linear-gradient(#ffffff, #e0e0e0); + background-repeat: repeat-x; + box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); +} +.toggle-off:focus, +.toggle-off:hover, +.toggle-handle:focus, +.toggle-handle:hover { + background-color: #e6e6e6; + background-image: linear-gradient(#e0e0e0, #e6e6e6 50%); + border-color: #adadad; +} +.toggle-off:active, +.toggle-handle:active { + background-color:#d4d4d4; + background-image: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + border-color: #8c8c8c; +} + + +/* Navigation buttons and icons */ +.nav-button-container { + display: flex; + justify-content: center; + margin-top: 10px; + white-space: nowrap; +} +.nav-button { + background-image: linear-gradient(#f8f8f8, #e0e0e0); + border: 1px solid #cccccc; + margin: 0; + padding: 2px 3px; + margin: 0; + cursor: pointer; +} +.nav-button+.nav-button { + margin-left: -1px; +} +.nav-button::after { + content: ""; + display: block; + width: 16px; + height: 16px; + background-position: center center; + background-size: 16px 16px; + background-repeat: no-repeat; + box-sizing: content-box; +} +.nav-button:hover { + z-index: 1; + border-color: #aaaaaa; + background-image: linear-gradient(#e8e8e8, #d0d0d0); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); +} +.nav-button:active { + z-index: 1; + border-color: #808080; + background-image: linear-gradient(#c8c8c8, #e0e0e0); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); +} +.nav-button:focus { + outline: none; +} +.nav-button[data-icon=magnifying-glass]::after { + background-image: url(/mixed/img/magnifying-glass.svg); +} +.nav-button[data-icon=cog]::after { + background-image: url(/mixed/img/cog.svg); +} +.nav-button[data-icon=question-mark]::after { + background-image: url(/mixed/img/question-mark-circle.svg); +} +.nav-button:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} +.nav-button:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} diff --git a/ext/bg/guide.html b/ext/bg/guide.html index cde520d1..d75a9931 100644 --- a/ext/bg/guide.html +++ b/ext/bg/guide.html @@ -27,7 +27,7 @@
  1. Click on the icon in the browser toolbar to open the Yomichan actions dialog.
    2. -
  2. Click on the monkey wrench icon in the middle to open the options page.
    3. +
  3. Click on the cog icon in the middle to open the options page.
  4. Import the dictionaries you wish to use for term and Kanji searches.
  5. Hold down Shift key or the middle mouse button as you move your mouse over text to display definitions.
  6. Click on the icon to hear the term pronounced by a native speaker.
    7. diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js index e90e7e2e..4a2ea168 100644 --- a/ext/bg/js/context-main.js +++ b/ext/bg/js/context-main.js @@ -66,7 +66,7 @@ async function mainInner() { setupButtonEvents('.action-open-search', 'search', chrome.runtime.getURL('/bg/search.html')); setupButtonEvents('.action-open-options', 'options', chrome.runtime.getURL(manifest.options_ui.page)); - setupButtonEvents('.action-open-help', 'help'); + setupButtonEvents('.action-open-help', 'help', 'https://foosoft.net/projects/yomichan/'); const optionsContext = { depth: 0, @@ -82,9 +82,7 @@ async function mainInner() { toggle2.addEventListener('change', () => api.commandExec('toggle'), false); setTimeout(() => { - for (const n of document.querySelectorAll('.toggle-group')) { - n.classList.add('toggle-group-animated'); - } + document.body.dataset.loaded = 'true'; }, 10); }); } -- cgit v1.2.3