From 99f58b49f6324441c1abd010a92cd0ceb1f889ea Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 21:56:00 -0400 Subject: [PATCH 1/9] Use data-expression-multi instead of data-multi --- ext/mixed/css/display.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index a4432016..ac17e2ec 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -298,13 +298,13 @@ button.action-button { content: "\3001"; } -.term-expression-list[data-multi=true]>.term-expression:last-of-type:after { +.entry[data-expression-multi=true] .term-expression-list>.term-expression:last-of-type:after { font-size: 2em; content: "\3000"; visibility: hidden; } -.term-expression-list[data-multi=true] .term-expression-details { +.entry[data-expression-multi=true] .term-expression-list .term-expression-details { display: inline-block; position: relative; width: 0; @@ -313,21 +313,21 @@ button.action-button { z-index: 1; } -.term-expression-list[data-multi=true] .term-expression:hover .term-expression-details { +.entry[data-expression-multi=true] .term-expression:hover .term-expression-details { visibility: visible; } -.term-expression-list[data-multi=true] .term-expression-details>.action-play-audio { +.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio { position: absolute; left: 0; bottom: 0.5em; } -.term-expression-list:not([data-multi=true]) .term-expression-details>.action-play-audio { +.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio { display: none; } -.term-expression-list[data-multi=true] .term-expression-details>.tags { +.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags { display: block; position: absolute; left: 0; @@ -335,7 +335,7 @@ button.action-button { white-space: nowrap; } -.term-expression-list[data-multi=true] .term-expression-details>.frequencies { +.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies { display: block; position: absolute; left: 0; From 75c5c7aabc88379b9ba03ea7f0ccdb96bc000af0 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 21:57:07 -0400 Subject: [PATCH 2/9] Remove data-multi assignments --- ext/mixed/js/display-generator.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index f1122e3d..cd76000a 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -361,7 +361,6 @@ class DisplayGenerator { container.appendChild(node); } - container.dataset.multi = 'true'; container.dataset.count = `${exclusiveExpressions.length + exclusiveReadings.length}`; container.dataset.expressionCount = `${exclusiveExpressions.length}`; container.dataset.readingCount = `${exclusiveReadings.length}`; @@ -464,7 +463,6 @@ class DisplayGenerator { ++count; } - container.dataset.multi = `${multi}`; container.dataset.count = `${count}`; return count; From d7e4ff067e8a2c39963b93829cdfea867bde6bf9 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 21:59:02 -0400 Subject: [PATCH 3/9] Remove statics --- ext/mixed/js/display-generator.js | 62 +++++++++++++++---------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index cd76000a..2f1154eb 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -44,7 +44,7 @@ class DisplayGenerator { const debugInfoContainer = node.querySelector('.debug-info'); const bodyContainer = node.querySelector('.term-entry-body'); - const pitches = DisplayGenerator._getPitchInfos(details); + const pitches = this._getPitchInfos(details); const pitchCount = pitches.reduce((i, v) => i + v[1].length, 0); const expressionMulti = Array.isArray(details.expressions); @@ -70,11 +70,11 @@ class DisplayGenerator { let expressions = details.expressions; expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : null; - DisplayGenerator._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]); - DisplayGenerator._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons); - DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); - DisplayGenerator._appendMultiple(pitchesContainer, this.createPitches.bind(this), pitches); - DisplayGenerator._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]); + this._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]); + this._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons); + this._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(pitchesContainer, this.createPitches.bind(this), pitches); + this._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]); if (debugInfoContainer !== null) { debugInfoContainer.textContent = JSON.stringify(details, null, 4); @@ -100,7 +100,7 @@ class DisplayGenerator { // This case should not occur furiganaSegments = [{text: details.expression, furigana: details.reading}]; } - DisplayGenerator._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this)); + this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this)); } if (!Array.isArray(termTags)) { @@ -110,9 +110,9 @@ class DisplayGenerator { const searchQueries = [details.expression, details.reading] .filter((x) => !!x) .map((x) => ({query: x})); - DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), termTags); - DisplayGenerator._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries); - DisplayGenerator._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(tagContainer, this.createTag.bind(this), termTags); + this._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries); + this._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies); return node; } @@ -134,9 +134,9 @@ class DisplayGenerator { node.dataset.dictionary = details.dictionary; - DisplayGenerator._appendMultiple(tagListContainer, this.createTag.bind(this), details.definitionTags); - DisplayGenerator._appendMultiple(onlyListContainer, this.createTermOnly.bind(this), details.only); - DisplayGenerator._appendMultiple(glossaryContainer, this.createTermGlossaryItem.bind(this), details.glossary); + this._appendMultiple(tagListContainer, this.createTag.bind(this), details.definitionTags); + this._appendMultiple(onlyListContainer, this.createTermOnly.bind(this), details.only); + this._appendMultiple(glossaryContainer, this.createTermGlossaryItem.bind(this), details.glossary); return node; } @@ -145,7 +145,7 @@ class DisplayGenerator { const node = this._templateHandler.instantiate('term-glossary-item'); const container = node.querySelector('.term-glossary'); if (container !== null) { - DisplayGenerator._appendMultilineText(container, glossary); + this._appendMultilineText(container, glossary); } return node; } @@ -184,11 +184,11 @@ class DisplayGenerator { glyphContainer.textContent = details.character; } - DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); - DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), details.tags); - DisplayGenerator._appendMultiple(glossaryContainer, this.createKanjiGlossaryItem.bind(this), details.glossary); - DisplayGenerator._appendMultiple(chineseReadingsContainer, this.createKanjiReading.bind(this), details.onyomi); - DisplayGenerator._appendMultiple(japaneseReadingsContainer, this.createKanjiReading.bind(this), details.kunyomi); + this._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(tagContainer, this.createTag.bind(this), details.tags); + this._appendMultiple(glossaryContainer, this.createKanjiGlossaryItem.bind(this), details.glossary); + this._appendMultiple(chineseReadingsContainer, this.createKanjiReading.bind(this), details.onyomi); + this._appendMultiple(japaneseReadingsContainer, this.createKanjiReading.bind(this), details.kunyomi); if (statisticsContainer !== null) { statisticsContainer.appendChild(this.createKanjiInfoTable(details.stats.misc)); @@ -214,7 +214,7 @@ class DisplayGenerator { const node = this._templateHandler.instantiate('kanji-glossary-item'); const container = node.querySelector('.kanji-glossary'); if (container !== null) { - DisplayGenerator._appendMultilineText(container, glossary); + this._appendMultilineText(container, glossary); } return node; } @@ -231,7 +231,7 @@ class DisplayGenerator { const container = node.querySelector('.kanji-info-table-body'); if (container !== null) { - const count = DisplayGenerator._appendMultiple(container, this.createKanjiInfoTableItem.bind(this), details); + const count = this._appendMultiple(container, this.createKanjiInfoTableItem.bind(this), details); if (count === 0) { const n = this.createKanjiInfoTableItemEmpty(); container.appendChild(n); @@ -298,7 +298,7 @@ class DisplayGenerator { node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag); const n = node.querySelector('.term-pitch-accent-list'); - DisplayGenerator._appendMultiple(n, this.createPitch.bind(this), dictionaryPitches); + this._appendMultiple(n, this.createPitch.bind(this), dictionaryPitches); return node; } @@ -316,7 +316,7 @@ class DisplayGenerator { n.textContent = `${position}`; n = node.querySelector('.term-pitch-accent-tag-list'); - DisplayGenerator._appendMultiple(n, this.createTag.bind(this), tags); + this._appendMultiple(n, this.createTag.bind(this), tags); n = node.querySelector('.term-pitch-accent-disambiguation-list'); this.createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings); @@ -445,7 +445,7 @@ class DisplayGenerator { } } - static _appendMultiple(container, createItem, detailsIterable, fallback=[]) { + _appendMultiple(container, createItem, detailsIterable, fallback=[]) { if (container === null) { return 0; } const multi = ( @@ -468,7 +468,7 @@ class DisplayGenerator { return count; } - static _appendFurigana(container, segments, addText) { + _appendFurigana(container, segments, addText) { for (const {text, furigana} of segments) { if (furigana) { const ruby = document.createElement('ruby'); @@ -483,7 +483,7 @@ class DisplayGenerator { } } - static _appendMultilineText(container, text) { + _appendMultilineText(container, text) { const parts = text.split('\n'); container.appendChild(document.createTextNode(parts[0])); for (let i = 1, ii = parts.length; i < ii; ++i) { @@ -492,7 +492,7 @@ class DisplayGenerator { } } - static _getPitchInfos(definition) { + _getPitchInfos(definition) { const results = new Map(); const allExpressions = new Set(); @@ -510,7 +510,7 @@ class DisplayGenerator { } for (const {position, tags} of pitches) { - let pitchInfo = DisplayGenerator._findExistingPitchInfo(reading, position, tags, dictionaryResults); + let pitchInfo = this._findExistingPitchInfo(reading, position, tags, dictionaryResults); if (pitchInfo === null) { pitchInfo = {expressions: new Set(), reading, position, tags}; dictionaryResults.push(pitchInfo); @@ -539,12 +539,12 @@ class DisplayGenerator { return [...results.entries()]; } - static _findExistingPitchInfo(reading, position, tags, pitchInfoList) { + _findExistingPitchInfo(reading, position, tags, pitchInfoList) { for (const pitchInfo of pitchInfoList) { if ( pitchInfo.reading === reading && pitchInfo.position === position && - DisplayGenerator._areTagListsEqual(pitchInfo.tags, tags) + this._areTagListsEqual(pitchInfo.tags, tags) ) { return pitchInfo; } @@ -552,7 +552,7 @@ class DisplayGenerator { return null; } - static _areTagListsEqual(tagList1, tagList2) { + _areTagListsEqual(tagList1, tagList2) { const ii = tagList1.length; if (tagList2.length !== ii) { return false; } From 9bbe35da68b9cdbc49c8f223544bdefad16d66d4 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:02:17 -0400 Subject: [PATCH 4/9] Mark functions as private --- ext/mixed/js/display-generator.js | 92 +++++++++++++++---------------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 2f1154eb..c3817ab2 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -70,11 +70,11 @@ class DisplayGenerator { let expressions = details.expressions; expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : null; - this._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]); - this._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons); - this._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); - this._appendMultiple(pitchesContainer, this.createPitches.bind(this), pitches); - this._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]); + this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions, [[details, termTags]]); + this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), details.reasons); + this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); + this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), details.definitions, [details]); if (debugInfoContainer !== null) { debugInfoContainer.textContent = JSON.stringify(details, null, 4); @@ -83,7 +83,7 @@ class DisplayGenerator { return node; } - createTermExpression([details, termTags]) { + _createTermExpression([details, termTags]) { const node = this._templateHandler.instantiate('term-expression'); const expressionContainer = node.querySelector('.term-expression-text'); @@ -110,14 +110,14 @@ class DisplayGenerator { const searchQueries = [details.expression, details.reading] .filter((x) => !!x) .map((x) => ({query: x})); - this._appendMultiple(tagContainer, this.createTag.bind(this), termTags); - this._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries); - this._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(tagContainer, this._createTag.bind(this), termTags); + this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries); + this._appendMultiple(frequencyContainer, this._createFrequencyTag.bind(this), details.frequencies); return node; } - createTermReason(reason) { + _createTermReason(reason) { const fragment = this._templateHandler.instantiateFragment('term-reason'); const node = fragment.querySelector('.term-reason'); node.textContent = reason; @@ -125,7 +125,7 @@ class DisplayGenerator { return fragment; } - createTermDefinitionItem(details) { + _createTermDefinitionItem(details) { const node = this._templateHandler.instantiate('term-definition-item'); const tagListContainer = node.querySelector('.term-definition-tag-list'); @@ -134,14 +134,14 @@ class DisplayGenerator { node.dataset.dictionary = details.dictionary; - this._appendMultiple(tagListContainer, this.createTag.bind(this), details.definitionTags); - this._appendMultiple(onlyListContainer, this.createTermOnly.bind(this), details.only); - this._appendMultiple(glossaryContainer, this.createTermGlossaryItem.bind(this), details.glossary); + this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags); + this._appendMultiple(onlyListContainer, this._createTermOnly.bind(this), details.only); + this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary); return node; } - createTermGlossaryItem(glossary) { + _createTermGlossaryItem(glossary) { const node = this._templateHandler.instantiate('term-glossary-item'); const container = node.querySelector('.term-glossary'); if (container !== null) { @@ -150,14 +150,14 @@ class DisplayGenerator { return node; } - createTermOnly(only) { + _createTermOnly(only) { const node = this._templateHandler.instantiate('term-definition-only'); node.dataset.only = only; node.textContent = only; return node; } - createKanjiLink(character) { + _createKanjiLink(character) { const node = document.createElement('a'); node.href = '#'; node.className = 'kanji-link'; @@ -184,23 +184,23 @@ class DisplayGenerator { glyphContainer.textContent = details.character; } - this._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); - this._appendMultiple(tagContainer, this.createTag.bind(this), details.tags); - this._appendMultiple(glossaryContainer, this.createKanjiGlossaryItem.bind(this), details.glossary); - this._appendMultiple(chineseReadingsContainer, this.createKanjiReading.bind(this), details.onyomi); - this._appendMultiple(japaneseReadingsContainer, this.createKanjiReading.bind(this), details.kunyomi); + this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags); + this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary); + this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi); + this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi); if (statisticsContainer !== null) { - statisticsContainer.appendChild(this.createKanjiInfoTable(details.stats.misc)); + statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc)); } if (classificationsContainer !== null) { - classificationsContainer.appendChild(this.createKanjiInfoTable(details.stats.class)); + classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class)); } if (codepointsContainer !== null) { - codepointsContainer.appendChild(this.createKanjiInfoTable(details.stats.code)); + codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code)); } if (dictionaryIndicesContainer !== null) { - dictionaryIndicesContainer.appendChild(this.createKanjiInfoTable(details.stats.index)); + dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index)); } if (debugInfoContainer !== null) { @@ -210,7 +210,7 @@ class DisplayGenerator { return node; } - createKanjiGlossaryItem(glossary) { + _createKanjiGlossaryItem(glossary) { const node = this._templateHandler.instantiate('kanji-glossary-item'); const container = node.querySelector('.kanji-glossary'); if (container !== null) { @@ -219,21 +219,21 @@ class DisplayGenerator { return node; } - createKanjiReading(reading) { + _createKanjiReading(reading) { const node = this._templateHandler.instantiate('kanji-reading'); node.textContent = reading; return node; } - createKanjiInfoTable(details) { + _createKanjiInfoTable(details) { const node = this._templateHandler.instantiate('kanji-info-table'); const container = node.querySelector('.kanji-info-table-body'); if (container !== null) { - const count = this._appendMultiple(container, this.createKanjiInfoTableItem.bind(this), details); + const count = this._appendMultiple(container, this._createKanjiInfoTableItem.bind(this), details); if (count === 0) { - const n = this.createKanjiInfoTableItemEmpty(); + const n = this._createKanjiInfoTableItemEmpty(); container.appendChild(n); } } @@ -241,7 +241,7 @@ class DisplayGenerator { return node; } - createKanjiInfoTableItem(details) { + _createKanjiInfoTableItem(details) { const node = this._templateHandler.instantiate('kanji-info-table-item'); const nameNode = node.querySelector('.kanji-info-table-item-header'); const valueNode = node.querySelector('.kanji-info-table-item-value'); @@ -254,11 +254,11 @@ class DisplayGenerator { return node; } - createKanjiInfoTableItemEmpty() { + _createKanjiInfoTableItemEmpty() { return this._templateHandler.instantiate('kanji-info-table-empty'); } - createTag(details) { + _createTag(details) { const node = this._templateHandler.instantiate('tag'); const inner = node.querySelector('.tag-inner'); @@ -270,7 +270,7 @@ class DisplayGenerator { return node; } - createSearchTag(details) { + _createSearchTag(details) { const node = this._templateHandler.instantiate('tag-search'); node.textContent = details.query; @@ -280,7 +280,7 @@ class DisplayGenerator { return node; } - createPitches(details) { + _createPitches(details) { if (!this._termPitchAccentStaticTemplateIsSetup) { this._termPitchAccentStaticTemplateIsSetup = true; const t = this._templateHandler.instantiate('term-pitch-accent-static'); @@ -294,16 +294,16 @@ class DisplayGenerator { node.dataset.pitchesMulti = 'true'; node.dataset.pitchesCount = `${dictionaryPitches.length}`; - const tag = this.createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'}); + const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'}); node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag); const n = node.querySelector('.term-pitch-accent-list'); - this._appendMultiple(n, this.createPitch.bind(this), dictionaryPitches); + this._appendMultiple(n, this._createPitch.bind(this), dictionaryPitches); return node; } - createPitch(details) { + _createPitch(details) { const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details; const morae = jp.getKanaMorae(reading); @@ -316,10 +316,10 @@ class DisplayGenerator { n.textContent = `${position}`; n = node.querySelector('.term-pitch-accent-tag-list'); - this._appendMultiple(n, this.createTag.bind(this), tags); + this._appendMultiple(n, this._createTag.bind(this), tags); n = node.querySelector('.term-pitch-accent-disambiguation-list'); - this.createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings); + this._createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings); n = node.querySelector('.term-pitch-accent-characters'); for (let i = 0, ii = morae.length; i < ii; ++i) { @@ -339,13 +339,13 @@ class DisplayGenerator { } if (morae.length > 0) { - this.populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae); + this._populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae); } return node; } - createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) { + _createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) { const templateName = 'term-pitch-accent-disambiguation'; for (const exclusiveExpression of exclusiveExpressions) { const node = this._templateHandler.instantiate(templateName); @@ -366,7 +366,7 @@ class DisplayGenerator { container.dataset.readingCount = `${exclusiveReadings.length}`; } - populatePitchGraph(svg, position, morae) { + _populatePitchGraph(svg, position, morae) { const svgns = svg.getAttribute('xmlns'); const ii = morae.length; svg.setAttribute('viewBox', `0 0 ${50 * (ii + 1)} 100`); @@ -406,7 +406,7 @@ class DisplayGenerator { path.setAttribute('d', `M${pathPoints.join(' L')}`); } - createFrequencyTag(details) { + _createFrequencyTag(details) { const node = this._templateHandler.instantiate('tag-frequency'); let n = node.querySelector('.term-frequency-dictionary-name'); @@ -434,7 +434,7 @@ class DisplayGenerator { part = ''; } - const link = this.createKanjiLink(c); + const link = this._createKanjiLink(c); container.appendChild(link); } else { part += c; From f9bdf2c66f5eca0ecb1c21f231492be47e40e690 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:03:16 -0400 Subject: [PATCH 5/9] Organize --- ext/mixed/js/display-generator.js | 92 ++++++++++++++++--------------- 1 file changed, 47 insertions(+), 45 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index c3817ab2..951f16ec 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -83,6 +83,53 @@ class DisplayGenerator { return node; } + createKanjiEntry(details) { + const node = this._templateHandler.instantiate('kanji-entry'); + + const glyphContainer = node.querySelector('.kanji-glyph'); + const frequenciesContainer = node.querySelector('.frequencies'); + const tagContainer = node.querySelector('.tags'); + const glossaryContainer = node.querySelector('.kanji-glossary-list'); + const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese'); + const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese'); + const statisticsContainer = node.querySelector('.kanji-statistics'); + const classificationsContainer = node.querySelector('.kanji-classifications'); + const codepointsContainer = node.querySelector('.kanji-codepoints'); + const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices'); + const debugInfoContainer = node.querySelector('.debug-info'); + + if (glyphContainer !== null) { + glyphContainer.textContent = details.character; + } + + this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); + this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags); + this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary); + this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi); + this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi); + + if (statisticsContainer !== null) { + statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc)); + } + if (classificationsContainer !== null) { + classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class)); + } + if (codepointsContainer !== null) { + codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code)); + } + if (dictionaryIndicesContainer !== null) { + dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index)); + } + + if (debugInfoContainer !== null) { + debugInfoContainer.textContent = JSON.stringify(details, null, 4); + } + + return node; + } + + // Private + _createTermExpression([details, termTags]) { const node = this._templateHandler.instantiate('term-expression'); @@ -165,51 +212,6 @@ class DisplayGenerator { return node; } - createKanjiEntry(details) { - const node = this._templateHandler.instantiate('kanji-entry'); - - const glyphContainer = node.querySelector('.kanji-glyph'); - const frequenciesContainer = node.querySelector('.frequencies'); - const tagContainer = node.querySelector('.tags'); - const glossaryContainer = node.querySelector('.kanji-glossary-list'); - const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese'); - const japaneseReadingsContainer = node.querySelector('.kanji-readings-japanese'); - const statisticsContainer = node.querySelector('.kanji-statistics'); - const classificationsContainer = node.querySelector('.kanji-classifications'); - const codepointsContainer = node.querySelector('.kanji-codepoints'); - const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices'); - const debugInfoContainer = node.querySelector('.debug-info'); - - if (glyphContainer !== null) { - glyphContainer.textContent = details.character; - } - - this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); - this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags); - this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary); - this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi); - this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi); - - if (statisticsContainer !== null) { - statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc)); - } - if (classificationsContainer !== null) { - classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class)); - } - if (codepointsContainer !== null) { - codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code)); - } - if (dictionaryIndicesContainer !== null) { - dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index)); - } - - if (debugInfoContainer !== null) { - debugInfoContainer.textContent = JSON.stringify(details, null, 4); - } - - return node; - } - _createKanjiGlossaryItem(glossary) { const node = this._templateHandler.instantiate('kanji-glossary-item'); const container = node.querySelector('.kanji-glossary'); From 6788bb31d241e1b77a6630df3d617de4a9470f26 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:16:55 -0400 Subject: [PATCH 6/9] Update _appendMultiple to not use a fallback --- ext/mixed/js/display-generator.js | 33 ++++++++++++++++--------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 951f16ec..5c4b330d 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -68,13 +68,13 @@ class DisplayGenerator { const termTags = details.termTags; let expressions = details.expressions; - expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : null; + expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : [[details, termTags]]; - this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions, [[details, termTags]]); + this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions); this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), details.reasons); this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); - this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), details.definitions, [details]); + this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitionMulti ? details.definitions : [details]); if (debugInfoContainer !== null) { debugInfoContainer.textContent = JSON.stringify(details, null, 4); @@ -447,22 +447,23 @@ class DisplayGenerator { } } - _appendMultiple(container, createItem, detailsIterable, fallback=[]) { - if (container === null) { return 0; } - - const multi = ( - detailsIterable !== null && - typeof detailsIterable === 'object' && - typeof detailsIterable[Symbol.iterator] !== 'undefined' + _isIterable(value) { + return ( + value !== null && + typeof value === 'object' && + typeof value[Symbol.iterator] !== 'undefined' ); - if (!multi) { detailsIterable = fallback; } + } + _appendMultiple(container, createItem, detailsIterable) { let count = 0; - for (const details of detailsIterable) { - const item = createItem(details); - if (item === null) { continue; } - container.appendChild(item); - ++count; + if (container !== null && this._isIterable(detailsIterable)) { + for (const details of detailsIterable) { + const item = createItem(details); + if (item === null) { continue; } + container.appendChild(item); + ++count; + } } container.dataset.count = `${count}`; From bb37b74288cf0653f42bbb149e3c563adcf2ead5 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:19:58 -0400 Subject: [PATCH 7/9] Rename "only" to "disambiguation" to match naming convention used for pitch accents --- ext/mixed/css/display.css | 10 +++++----- ext/mixed/display-templates.html | 4 ++-- ext/mixed/js/display-generator.js | 12 ++++++------ 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index ac17e2ec..e10c9379 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -365,19 +365,19 @@ button.action-button { list-style-type: circle; } -.term-definition-only-list[data-count="0"] { +.term-definition-disambiguation-list[data-count="0"] { display: none; } -.term-definition-only-list:before { +.term-definition-disambiguation-list:before { content: "("; } -.term-definition-only-list:after { +.term-definition-disambiguation-list:after { content: " only)"; } -.term-definition-only+.term-definition-only:before { +.term-definition-disambiguation+.term-definition-disambiguation:before { content: ", "; } @@ -399,7 +399,7 @@ button.action-button { } :root[data-compact-glossaries=true] .term-definition-tag-list, -:root[data-compact-glossaries=true] .term-definition-only-list:not([data-count="0"]) { +:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) { display: inline; } diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html index b8d52d15..3baa8293 100644 --- a/ext/mixed/display-templates.html +++ b/ext/mixed/display-templates.html @@ -30,10 +30,10 @@ - + diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 5c4b330d..6ae727e0 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -176,13 +176,13 @@ class DisplayGenerator { const node = this._templateHandler.instantiate('term-definition-item'); const tagListContainer = node.querySelector('.term-definition-tag-list'); - const onlyListContainer = node.querySelector('.term-definition-only-list'); + const onlyListContainer = node.querySelector('.term-definition-disambiguation-list'); const glossaryContainer = node.querySelector('.term-glossary-list'); node.dataset.dictionary = details.dictionary; this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags); - this._appendMultiple(onlyListContainer, this._createTermOnly.bind(this), details.only); + this._appendMultiple(onlyListContainer, this._createTermDisambiguation.bind(this), details.only); this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary); return node; @@ -197,10 +197,10 @@ class DisplayGenerator { return node; } - _createTermOnly(only) { - const node = this._templateHandler.instantiate('term-definition-only'); - node.dataset.only = only; - node.textContent = only; + _createTermDisambiguation(disambiguation) { + const node = this._templateHandler.instantiate('term-definition-disambiguation'); + node.dataset.term = disambiguation; + node.textContent = disambiguation; return node; } From 06183ec12442fc127a7f723225bcf1782eb15ebc Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:35:26 -0400 Subject: [PATCH 8/9] Update how termTags is passed to _createTermExpression --- ext/mixed/js/display-generator.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index 6ae727e0..b2d34cfc 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -68,9 +68,9 @@ class DisplayGenerator { const termTags = details.termTags; let expressions = details.expressions; - expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : [[details, termTags]]; + expressions = Array.isArray(expressions) ? expressions : [details]; - this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions); + this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions, termTags); this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), details.reasons); this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); @@ -130,7 +130,7 @@ class DisplayGenerator { // Private - _createTermExpression([details, termTags]) { + _createTermExpression(details, termTags) { const node = this._templateHandler.instantiate('term-expression'); const expressionContainer = node.querySelector('.term-expression-text'); @@ -455,11 +455,11 @@ class DisplayGenerator { ); } - _appendMultiple(container, createItem, detailsIterable) { + _appendMultiple(container, createItem, detailsIterable, ...args) { let count = 0; if (container !== null && this._isIterable(detailsIterable)) { for (const details of detailsIterable) { - const item = createItem(details); + const item = createItem(details, ...args); if (item === null) { continue; } container.appendChild(item); ++count; From 025b1f398b7e498a0a61ebee095498caccb46819 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 9 Apr 2020 22:38:08 -0400 Subject: [PATCH 9/9] Simplify access to details fields in createTermEntry --- ext/mixed/js/display-generator.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index b2d34cfc..19f6a56e 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -44,13 +44,15 @@ class DisplayGenerator { const debugInfoContainer = node.querySelector('.debug-info'); const bodyContainer = node.querySelector('.term-entry-body'); + const {termTags, expressions, definitions} = details; + const pitches = this._getPitchInfos(details); const pitchCount = pitches.reduce((i, v) => i + v[1].length, 0); - const expressionMulti = Array.isArray(details.expressions); - const definitionMulti = Array.isArray(details.definitions); - const expressionCount = expressionMulti ? details.expressions.length : 1; - const definitionCount = definitionMulti ? details.definitions.length : 1; + const expressionMulti = Array.isArray(expressions); + const definitionMulti = Array.isArray(definitions); + const expressionCount = expressionMulti ? expressions.length : 1; + const definitionCount = definitionMulti ? definitions.length : 1; const uniqueExpressionCount = Array.isArray(details.expression) ? new Set(details.expression).size : 1; node.dataset.expressionMulti = `${expressionMulti}`; @@ -66,15 +68,11 @@ class DisplayGenerator { (pitches.length > 0 ? 1 : 0) }`; - const termTags = details.termTags; - let expressions = details.expressions; - expressions = Array.isArray(expressions) ? expressions : [details]; - - this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions, termTags); + this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressionMulti ? expressions : [details], termTags); this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), details.reasons); this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); - this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitionMulti ? details.definitions : [details]); + this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitionMulti ? definitions : [details]); if (debugInfoContainer !== null) { debugInfoContainer.textContent = JSON.stringify(details, null, 4);