alex/yomichan
1
Fork 0
Code Releases Activity

Display updates (#1024)

Browse Source 
* Update display generation to use new format assumptions

* Simplify how debug information is presented
This commit is contained in:
toasted-nutbread 2020-11-13 19:48:22 -05:00 committed by GitHub
parent 3dd05eb400
commit 3edc35691b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ext/mixed/css/display.css
View File

@ -138,6 +138,12 @@ h2 {
border-bottom: 0.05714285714285714em solid var(--light-border-color); /* 14px * 1.25em => 1px */
}
a {
color: var(--popuplar-kanji-text-color);
text-decoration: underline;
cursor: pointer;
}
/*
* Navigation
@ -524,14 +530,10 @@ button.action-button {
content: ", ";
}
.debug-info {
:root:not([data-debug=true]) .debug-info {
display: none;
}
:root[data-debug=true] .debug-info {
display: block;
}
:root[data-anki-enabled=false] .action-view-note,
:root[data-anki-enabled=false] .action-add-note {
display: none;

2
ext/mixed/display-templates.html
View File

@ -21,7 +21,7 @@
<div class="term-entry-body-section term-pitch-accent-container"><ol class="term-entry-body-section-content term-pitch-accent-group-list"></ol></div>
<div class="term-entry-body-section term-definition-container"><ol class="term-entry-body-section-content term-definition-list"></ol></div>
</div>
<pre class="debug-info"></pre>
<div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template>
<template id="term-expression-template"><div class="term-expression"><span class="term-expression-text source-text"></span><div class="term-expression-details">
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>

35
ext/mixed/js/display-generator.js
View File

@ -49,42 +49,31 @@ class DisplayGenerator {
const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
const frequenciesContainer = node.querySelector('.frequencies');
const definitionsContainer = node.querySelector('.term-definition-list');
const debugInfoContainer = node.querySelector('.debug-info');
const bodyContainer = node.querySelector('.term-entry-body');
const {termTags, expressions, definitions, type} = details;
const {termTags, expressions, type, reasons, frequencies} = details;
const definitions = (type === 'term' ? [details] : details.definitions);
const merged = (type === 'termMerged' || type === 'termMergedByGlossary');
const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
const expressionMulti = (type === 'termMerged' || type === 'termMergedByGlossary');
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}`;
node.dataset.definitionMulti = `${definitionMulti}`;
node.dataset.expressionCount = `${expressionCount}`;
node.dataset.definitionCount = `${definitionCount}`;
node.dataset.uniqueExpressionCount = `${uniqueExpressionCount}`;
node.dataset.format = type;
node.dataset.expressionMulti = `${merged}`;
node.dataset.expressionCount = `${expressions.length}`;
node.dataset.definitionCount = `${definitions.length}`;
node.dataset.pitchAccentDictionaryCount = `${pitches.length}`;
node.dataset.pitchAccentCount = `${pitchCount}`;
bodyContainer.dataset.sectionCount = `${
(definitionCount > 0 ? 1 : 0) +
(definitions.length > 0 ? 1 : 0) +
(pitches.length > 0 ? 1 : 0)
}`;
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(expressionsContainer, this._createTermExpression.bind(this), expressions, termTags);
this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons);
this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), frequencies);
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitionMulti ? definitions : [details]);
if (debugInfoContainer !== null) {
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
}
this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions);
return node;
}

9
ext/mixed/js/display.js
View File

@ -721,6 +721,14 @@ class Display extends EventDispatcher {
}
}
_onDebugLogClick(e) {
const link = e.currentTarget;
const index = this._entryIndexFind(link);
if (index < 0 || index >= this._definitions.length) { return; }
const definition = this._definitions[index];
console.log(definition);
}
_updateDocumentOptions(options) {
const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`;
@ -771,6 +779,7 @@ class Display extends EventDispatcher {
this.addMultipleEventListeners('.action-view-note', 'click', this._onNoteView.bind(this));
this.addMultipleEventListeners('.action-play-audio', 'click', this._onAudioPlay.bind(this));
this.addMultipleEventListeners('.kanji-link', 'click', this._onKanjiLookup.bind(this));
this.addMultipleEventListeners('.debug-log-link', 'click', this._onDebugLogClick.bind(this));
if (this._options !== null && this._options.scanning.enablePopupSearch) {
this.addMultipleEventListeners('.term-glossary-item, .tag', 'mouseup', this._onGlossaryMouseUp.bind(this));
this.addMultipleEventListeners('.term-glossary-item, .tag', 'mousedown', this._onGlossaryMouseDown.bind(this));