Skip to content

Commit

Permalink
Fix HTML lang tags not matching the selected language
Browse files Browse the repository at this point in the history 
* Cleanup and add language tag to renderResult

* Add language switching support to anki card templates scanned text

* Update search page search-textbox lang on language switch

* Set queryparser lang

* Allow updating language for display-generator

* Only use kanji-stroke-orders font for japanese

<rikaitan.link>NDE0MjU2ZjQzMTZiNDgxNWRiMzAyZGYzMTgzYjE2ZGM0OGMxZmIwMgo=</rikaitan.link>
  • Loading branch information
@Kuuuube @tatsumoto-ren
Kuuuube authored and tatsumoto-ren committed May 23, 2024
1 parent 2499563 commit 12457cd
Show file tree
Hide file tree
Showing 8 changed files with 49 additions and 16 deletions.
2 changes: 1 addition & 1 deletion ext/css/display.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1502,7 +1502,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
position: relative;
}
.kanji-glyph {
font-family: kanji-stroke-orders, sans-serif;
font-family: sans-serif;
font-size: 8.5em;
line-height: 1;
padding: 0.01em;
Expand Down
32 changes: 21 additions & 11 deletions ext/js/display/display-generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ export class DisplayGenerator {
this._templates = new HtmlTemplateCollection();
/** @type {StructuredContentGenerator} */
this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document);
/** @type {string} */
this._language = 'ja';
}

/** */
Expand All @@ -46,6 +48,13 @@ export class DisplayGenerator {
this.updateHotkeys();
}

/**
* @param {string} language
*/
updateLanguage(language) {
this._language = language;
}

/** */
updateHotkeys() {
const hotkeyHelpController = this._hotkeyHelpController;
Expand Down Expand Up @@ -162,7 +171,8 @@ export class DisplayGenerator {
const codepointsContainer = this._querySelector(node, '.kanji-codepoints');
const dictionaryIndicesContainer = this._querySelector(node, '.kanji-dictionary-indices');

this._setTextContent(glyphContainer, dictionaryEntry.character, 'ja');
this._setTextContent(glyphContainer, dictionaryEntry.character, this._language);
if (this._language === 'ja') { glyphContainer.style.fontFamily = 'kanji-stroke-orders, sans-serif'; }
const groupedFrequencies = groupKanjiFrequencies(dictionaryEntry.frequencies);

const dictionaryTag = this._createDictionaryTag(dictionaryEntry.dictionary);
Expand Down Expand Up @@ -508,7 +518,7 @@ export class DisplayGenerator {
_createTermDisambiguation(disambiguation) {
const node = this._instantiate('definition-disambiguation');
node.dataset.term = disambiguation;
this._setTextContent(node, disambiguation, 'ja');
this._setTextContent(node, disambiguation, this._language);
return node;
}

Expand All @@ -519,7 +529,7 @@ export class DisplayGenerator {
_createKanjiLink(character) {
const node = document.createElement('a');
node.className = 'headword-kanji-link';
this._setTextContent(node, character, 'ja');
this._setTextContent(node, character, this._language);
return node;
}

Expand All @@ -540,7 +550,7 @@ export class DisplayGenerator {
*/
_createKanjiReading(reading) {
const node = this._instantiate('kanji-reading');
this._setTextContent(node, reading, 'ja');
this._setTextContent(node, reading, this._language);
return node;
}

Expand Down Expand Up @@ -743,7 +753,7 @@ export class DisplayGenerator {

n = this._querySelector(node, '.pronunciation-text-container');

n.lang = 'ja';
n.lang = this._language;
n.appendChild(createPronunciationText(morae, position, nasalPositions, devoicePositions));

n = this._querySelector(node, '.pronunciation-graph-container');
Expand All @@ -762,14 +772,14 @@ export class DisplayGenerator {
for (const term of exclusiveTerms) {
const node = this._instantiate(templateName);
node.dataset.type = 'term';
this._setTextContent(node, term, 'ja');
this._setTextContent(node, term, this._language);
container.appendChild(node);
}

for (const exclusiveReading of exclusiveReadings) {
const node = this._instantiate(templateName);
node.dataset.type = 'reading';
this._setTextContent(node, exclusiveReading, 'ja');
this._setTextContent(node, exclusiveReading, this._language);
container.appendChild(node);
}

Expand Down Expand Up @@ -826,8 +836,8 @@ export class DisplayGenerator {
const frequencyValueList = this._querySelector(node, '.frequency-value-list');

this._setTextContent(tagLabel, dictionary);
this._setTextContent(disambiguationTerm, term, 'ja');
this._setTextContent(disambiguationReading, (reading !== null ? reading : ''), 'ja');
this._setTextContent(disambiguationTerm, term, this._language);
this._setTextContent(disambiguationReading, (reading !== null ? reading : ''), this._language);
this._populateFrequencyValueList(frequencyValueList, values);

node.dataset.term = term;
Expand Down Expand Up @@ -892,7 +902,7 @@ export class DisplayGenerator {
node2.title = frequencyString;
}
}
this._setTextContent(node2, text, 'ja');
this._setTextContent(node2, text, this._language);
node.appendChild(node2);

fullFrequency += text;
Expand Down Expand Up @@ -961,7 +971,7 @@ export class DisplayGenerator {
* @param {(element: HTMLElement, text: string) => void} addText
*/
_appendFurigana(container, term, reading, addText) {
container.lang = 'ja';
container.lang = this._language;
const segments = distributeFurigana(term, reading);
for (const {text, reading: furigana} of segments) {
if (furigana) {
Expand Down
1 change: 1 addition & 0 deletions ext/js/display/display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,7 @@ export class Display extends EventDispatcher {
this._setTheme(options);
this._hotkeyHelpController.setOptions(options);
this._displayGenerator.updateHotkeys();
this._displayGenerator.updateLanguage(options.general.language);
this._hotkeyHelpController.setupNode(document.documentElement);
this._elementOverflowController.setOptions(options);

Expand Down
2 changes: 2 additions & 0 deletions ext/js/display/query-parser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ export class QueryParser extends EventDispatcher {
if (selectedParserChanged && this._parseResults.length > 0) {
this._renderParseResult();
}

this._queryParser.lang = language;
}

/**
Expand Down
1 change: 1 addition & 0 deletions ext/js/display/search-display-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export class SearchDisplayController {
this._clipboardMonitorEnabled = options.clipboard.enableSearchPageMonitor;
this._updateClipboardMonitorEnabled();
this._updateWanakanaCheckbox(options);
this._queryInput.lang = options.general.language;
await this._updateProfileSelect();
}

Expand Down
5 changes: 3 additions & 2 deletions ext/js/pages/settings/anki-deck-generator-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -530,11 +530,12 @@ export class AnkiDeckGeneratorController {

/** */
async _updateExampleText() {
this._languageSummaries = await this._application.api.getLanguageSummaries();
const languageSummaries = await this._application.api.getLanguageSummaries();
const options = await this._settingsController.getOptions();
const activeLanguage = /** @type {import('language').LanguageSummary} */ (this._languageSummaries.find(({iso}) => iso === options.general.language));
const activeLanguage = /** @type {import('language').LanguageSummary} */ (languageSummaries.find(({iso}) => iso === options.general.language));
this._renderTextInput.lang = options.general.language;
this._renderTextInput.value = activeLanguage.exampleText;
this._renderResult.lang = options.general.language;
}

/**
Expand Down
20 changes: 19 additions & 1 deletion ext/js/pages/settings/anki-templates-controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,14 @@ import {TemplateRendererProxy} from '../../templates/template-renderer-proxy.js'

export class AnkiTemplatesController {
/**
* @param {import('../../application.js').Application} application
* @param {import('./settings-controller.js').SettingsController} settingsController
* @param {import('./modal-controller.js').ModalController} modalController
* @param {import('./anki-controller.js').AnkiController} ankiController
*/
constructor(settingsController, modalController, ankiController) {
constructor(application, settingsController, modalController, ankiController) {
/** @type {import('../../application.js').Application} */
this._application = application;
/** @type {import('./settings-controller.js').SettingsController} */
this._settingsController = settingsController;
/** @type {import('./modal-controller.js').ModalController} */
Expand All @@ -52,6 +55,8 @@ export class AnkiTemplatesController {
this._renderTextInput = querySelectorNotNull(document, '#anki-card-templates-test-text-input');
/** @type {HTMLElement} */
this._renderResult = querySelectorNotNull(document, '#anki-card-templates-render-result');
/** @type {HTMLElement} */
this._mainSettingsEntry = querySelectorNotNull(document, '[data-modal-action="show,anki-card-templates"]');
/** @type {?import('./modal.js').Modal} */
this._fieldTemplateResetModal = null;
/** @type {AnkiNoteBuilder} */
Expand Down Expand Up @@ -89,6 +94,9 @@ export class AnkiTemplatesController {
const options = await this._settingsController.getOptions();
const optionsContext = this._settingsController.getOptionsContext();
this._onOptionsChanged({options, optionsContext});

void this._updateExampleText();
this._mainSettingsEntry.addEventListener('click', this._updateExampleText.bind(this), false);
}

// Private
Expand Down Expand Up @@ -173,6 +181,16 @@ export class AnkiTemplatesController {
void this._validate(infoNode, field, 'term-kanji', true, false);
}

/** */
async _updateExampleText() {
const languageSummaries = await this._application.api.getLanguageSummaries();
const options = await this._settingsController.getOptions();
const activeLanguage = /** @type {import('language').LanguageSummary} */ (languageSummaries.find(({iso}) => iso === options.general.language));
this._renderTextInput.lang = options.general.language;
this._renderTextInput.value = activeLanguage.exampleText;
this._renderResult.lang = options.general.language;
}

/**
* @param {import('popup-menu').MenuCloseEvent} event
*/
Expand Down
2 changes: 1 addition & 1 deletion ext/js/pages/settings/settings-main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ await Application.main(true, async (application) => {
const ankiDeckGeneratorController = new AnkiDeckGeneratorController(application, settingsController, modalController, ankiController);
preparePromises.push(ankiDeckGeneratorController.prepare());

const ankiTemplatesController = new AnkiTemplatesController(settingsController, modalController, ankiController);
const ankiTemplatesController = new AnkiTemplatesController(application, settingsController, modalController, ankiController);
preparePromises.push(ankiTemplatesController.prepare());

const popupPreviewController = new PopupPreviewController(settingsController);
Expand Down

0 comments on commit 12457cd

Please sign in to comment.