From 36edd383bd37bee6290e359ee75493dfb825d646 Mon Sep 17 00:00:00 2001 From: tora-pan Date: Sat, 18 Mar 2023 22:31:59 -0700 Subject: [PATCH 1/3] refactor: Use template strings to read like HTML --- extension/data.ts | 127 +++++++++++++++++++++------------------------- 1 file changed, 57 insertions(+), 70 deletions(-) diff --git a/extension/data.ts b/extension/data.ts index 8460c97ec..9d75f937a 100644 --- a/extension/data.ts +++ b/extension/data.ts @@ -670,9 +670,10 @@ class RcxDict { const b = []; + // kanji view if (entry.kanji) { let yomi; - let box; + let boxHtml; let k; let nums; @@ -704,62 +705,49 @@ class RcxDict { k = isNaN(k) ? '-' : 'grade
' + k; break; } - box = - '' + - '' + - '' + - '' + - '' + - '' + - '
radical
' + - this.radData[bn].charAt(0) + - ' ' + - (bn + 1) + - '		' + - k + - '
freq
' + - (entry.misc.F ? entry.misc.F : '-') + - '		strokes
' + - entry.misc.S + - '
'; + boxHtml = ` + + + + + + + + + +
+ radical +
+ ${this.radData[bn].charAt(0)} ${bn + 1} + 		${k}
+ freq +
${entry.misc.F ? entry.misc.F : '-'} + 		strokes
${entry.misc.S}
`; + if (this.config.kanjicomponents) { k = this.radData[bn].split('\t'); - box += - '' + - '' + - '' + - ''; + boxHtml += ` +
' + - k[0] + - '' + - k[2] + - '' + - k[3] + - '
+ + + + + `; j = 1; for (i = 0; i < this.radData.length; ++i) { s = this.radData[i]; if (bn !== i && s.indexOf(entry.kanji) !== -1) { k = s.split('\t'); c = ' class="k-bbox-' + (j ^= 1); - box += - '' + - k[0] + - '' + - '' + - k[2] + - '' + - '' + - k[3] + - ''; + boxHtml += ` + + ${k[0]} + ${k[2]} + ${k[3]} + `; } } - box += '
${k[0]}${k[2]}${k[3]}
'; + boxHtml += ''; } nums = ''; @@ -772,33 +760,32 @@ class RcxDict { } c = info.code; s = entry.misc[c]; - c = ' class="k-mix-td' + (j ^= 1) + '"'; - nums += - '' + - info.name + - '' + - (s || '-') + - ''; - } - if (nums.length) { - nums = '' + nums + '
'; + c = ` class="k-mix-td${(j ^= 1)}"`; + nums += ` + + ${info.name} + ${s || '-'} + `; } - - b.push('
'); - b.push(box); - b.push('' + entry.kanji + '
'); - b.push('
' + entry.eigo + '
'); - b.push('
' + yomi + '
'); - b.push('
' + nums + '
'); - return b.join(''); + b.push(` + + + + + + + +
+ ${boxHtml} + ${entry.kanji}
+
${entry.eigo}
+
${yomi}
+
${nums.length && `${nums}
`}
+ `); } s = t = ''; - + // nanori view if (entry.hasNames) { c = []; From 1fc044e721768314a92fde15343cc701e43e80b5 Mon Sep 17 00:00:00 2001 From: tora-pan Date: Sun, 19 Mar 2023 05:51:03 -0700 Subject: [PATCH 2/3] refactor: Rename variables and more cleanup --- extension/data.ts | 179 +++++++++++++++++++++++++--------------------- 1 file changed, 97 insertions(+), 82 deletions(-) diff --git a/extension/data.ts b/extension/data.ts index 9d75f937a..e4c695fec 100644 --- a/extension/data.ts +++ b/extension/data.ts @@ -656,10 +656,10 @@ class RcxDict { // TODO: Entry should be extracted as separate type. makeHtml(entry: DictEntryData | null) { - let e; - let c; - let s; - let t; + let deinflectedWordData; + let nameHtmlData; + let translationData; + let displayedTranslation; let i; let j; let n; @@ -668,7 +668,7 @@ class RcxDict { return ''; } - const b = []; + const htmlToRender = []; // kanji view if (entry.kanji) { @@ -735,15 +735,15 @@ class RcxDict { `; j = 1; for (i = 0; i < this.radData.length; ++i) { - s = this.radData[i]; - if (bn !== i && s.indexOf(entry.kanji) !== -1) { - k = s.split('\t'); - c = ' class="k-bbox-' + (j ^= 1); + translationData = this.radData[i]; + if (bn !== i && translationData.indexOf(entry.kanji) !== -1) { + k = translationData.split('\t'); + nameHtmlData = ' class="k-bbox-' + (j ^= 1); boxHtml += ` - ${k[0]} - ${k[2]} - ${k[3]} + ${k[0]} + ${k[2]} + ${k[3]} `; } } @@ -758,16 +758,16 @@ class RcxDict { if (!info.shouldDisplay) { continue; } - c = info.code; - s = entry.misc[c]; - c = ` class="k-mix-td${(j ^= 1)}"`; + nameHtmlData = info.code; + translationData = entry.misc[nameHtmlData]; + nameHtmlData = ` class="k-mix-td${(j ^= 1)}"`; nums += ` - ${info.name} - ${s || '-'} + ${info.name} + ${translationData || '-'} `; } - b.push(` + htmlToRender.push(`
@@ -784,81 +784,85 @@ class RcxDict { `); } - s = t = ''; + translationData = displayedTranslation = ''; // nanori view if (entry.hasNames) { - c = []; + nameHtmlData = []; - b.push( + htmlToRender.push( '
Names Dictionary
' ); for (i = 0; i < entry.data.length; ++i) { - e = entry.data[i].entry.match(/^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\//); - if (!e) { + deinflectedWordData = entry.data[i].entry.match( + /^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\// + ); + if (!deinflectedWordData) { continue; } // the next two lines re-process the entries that contain separate // search key and spelling due to mixed hiragana/katakana spelling - const e3 = e[3].match(/^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\//); + const e3 = deinflectedWordData[3].match( + /^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\// + ); if (e3) { - e = e3; + deinflectedWordData = e3; } - if (s !== e[3]) { - c.push(t); - t = ''; + if (translationData !== deinflectedWordData[3]) { + nameHtmlData.push(displayedTranslation); + displayedTranslation = ''; } - if (e[2]) { - c.push( - '' + - e[1] + - ' ' + - e[2] + - '
' + if (deinflectedWordData[2]) { + nameHtmlData.push( + `${deinflectedWordData[1]} + ${deinflectedWordData[2]}
` ); } else { - c.push('' + e[1] + '
'); + nameHtmlData.push( + `${deinflectedWordData[1]}
` + ); } - s = e[3]; - console.log('e[1]: ' + e[1]); - console.log('e[2]: ' + e[2]); - console.log('e[3]: ' + e[3]); - t = '' + s.replace(/\//g, '; ') + '
'; + translationData = deinflectedWordData[3]; + console.log('e[1]: ' + deinflectedWordData[1]); + console.log('e[2]: ' + deinflectedWordData[2]); + console.log('e[3]: ' + deinflectedWordData[3]); + displayedTranslation = ` + ${translationData.replace(/\//g, '; ')}
`; } - c.push(t); - if (c.length > 4) { - n = (c.length >> 1) + 1; - b.push(c.slice(0, n + 1).join('')); - - t = c[n]; - c = c.slice(n, c.length); - for (i = 0; i < c.length; ++i) { - if (c[i].indexOf('w-def') !== -1) { - if (t !== c[i]) { - b.push(c[i]); + nameHtmlData.push(displayedTranslation); + if (nameHtmlData.length > 4) { + n = (nameHtmlData.length >> 1) + 1; + htmlToRender.push(nameHtmlData.slice(0, n + 1).join('')); + + displayedTranslation = nameHtmlData[n]; + nameHtmlData = nameHtmlData.slice(n, nameHtmlData.length); + for (i = 0; i < nameHtmlData.length; ++i) { + if (nameHtmlData[i].indexOf('w-def') !== -1) { + if (displayedTranslation !== nameHtmlData[i]) { + htmlToRender.push(nameHtmlData[i]); } if (i === 0) { - c.shift(); + nameHtmlData.shift(); } break; } } - b.push('		'); - b.push(c.join('')); + htmlToRender.push(''); + htmlToRender.push(nameHtmlData.join('')); } else { - b.push(c.join('')); + htmlToRender.push(nameHtmlData.join('')); } if (entry.hasMore) { - b.push('...
'); + htmlToRender.push('...
'); } - b.push('
'); + htmlToRender.push('
'); } else { if (entry.title) { - b.push('
' + entry.title + '
'); + htmlToRender.push(`
${entry.title}
`); } let pK = ''; @@ -869,7 +873,9 @@ class RcxDict { } if (entry.index !== 0) { - b.push('... (\'j\' for more)
'); + htmlToRender.push( + '... (\'j\' for more)
' + ); } for ( @@ -878,8 +884,10 @@ class RcxDict { Math.min(this.config.maxDictEntries + entry.index, entry.data.length); ++i ) { - e = entry.data[i].entry.match(/^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\//); - if (!e) { + deinflectedWordData = entry.data[i].entry.match( + /^(.+?)\s+(?:\[(.*?)\])?\s*\/(.+)\// + ); + if (!deinflectedWordData) { continue; } @@ -889,54 +897,61 @@ class RcxDict { e[3] = definition */ - if (s !== e[3]) { - b.push(t); + if (translationData !== deinflectedWordData[3]) { + htmlToRender.push(displayedTranslation); pK = k = ''; } else { - k = t.length ? '
' : ''; + k = displayedTranslation.length ? '
' : ''; } - if (e[2]) { - if (pK === e[1]) { - k = '\u3001 ' + e[2] + ''; + if (deinflectedWordData[2]) { + if (pK === deinflectedWordData[1]) { + k = + '\u3001 ' + + deinflectedWordData[2] + + ''; } else { k += '' + - e[1] + + deinflectedWordData[1] + ' ' + - e[2] + + deinflectedWordData[2] + ''; } - pK = e[1]; + pK = deinflectedWordData[1]; } else { - k += '' + e[1] + ''; + k += '' + deinflectedWordData[1] + ''; pK = ''; } - b.push(k); + htmlToRender.push(k); if (entry.data[i].reason) { - b.push(' (' + entry.data[i].reason + ')'); + htmlToRender.push( + ' (' + entry.data[i].reason + ')' + ); } - s = e[3]; - t = s.replace(/\//g, '; '); + translationData = deinflectedWordData[3]; + displayedTranslation = translationData.replace(/\//g, '; '); if (!this.config.onlyreading) { - t = '
' + t + '
'; + displayedTranslation = + `
${displayedTranslation}
`; } else { - t = '
'; + displayedTranslation = '
'; } } - b.push(t); + htmlToRender.push(displayedTranslation); if ( entry.hasMore && entry.index < entry.data.length - this.config.maxDictEntries ) { - b.push('... (\'k\' for more)
'); + htmlToRender.push( + '... (\'k\' for more)
' + ); } } - - return b.join(''); + return htmlToRender.join(''); } makeHtmlForRuby(entry: DictEntryData | null) { From 52467cb43972d0136261d4e5e73a8f73c8fd36b0 Mon Sep 17 00:00:00 2001 From: tora-pan Date: Sun, 19 Mar 2023 06:00:03 -0700 Subject: [PATCH 3/3] fix: Fix typescript error on template literal --- extension/data.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/extension/data.ts b/extension/data.ts index e4c695fec..f8ae70b6f 100644 --- a/extension/data.ts +++ b/extension/data.ts @@ -668,7 +668,7 @@ class RcxDict { return ''; } - const htmlToRender = []; + const htmlToRender: string[] = []; // kanji view if (entry.kanji) { @@ -743,7 +743,7 @@ class RcxDict { ${k[0]} ${k[2]} - ${k[3]} + ${k[3]} `; } } @@ -935,8 +935,7 @@ class RcxDict { displayedTranslation = translationData.replace(/\//g, '; '); if (!this.config.onlyreading) { - displayedTranslation = - `
${displayedTranslation}
`; + displayedTranslation = `
${displayedTranslation}
`; } else { displayedTranslation = '
'; }