aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/display.css72
-rw-r--r--ext/mixed/js/display.js38
2 files changed, 103 insertions, 7 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index cdc1be8c..eadb9dae 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -46,6 +46,10 @@ hr {
display: none;
}
+.invisible {
+ visibility: hidden;
+}
+
/*
* Entries
@@ -88,6 +92,10 @@ hr {
background-color: #5cb85c;
}
+.tag-partOfSpeech {
+ background-color: #565656;
+}
+
.actions .disabled {
pointer-events: none;
cursor: default;
@@ -118,21 +126,79 @@ hr {
font-size: 24px;
}
-.expression a {
+.expression .kanji-link {
border-bottom: 1px #777 dashed;
color: #333;
text-decoration: none;
}
+.expression-popular, .expression-popular .kanji-link {
+ color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+ color: #999;
+}
+
+.expression .peek-wrapper {
+ font-size: 14px;
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ width: 0px;
+ height: 0px;
+ visibility: hidden;
+}
+
+.expression .peek-wrapper .action-play-audio {
+ position: absolute;
+ left: 0px;
+ bottom: 10px;
+}
+
+.expression .peek-wrapper .tags {
+ position: absolute;
+ left: 0px;
+ bottom: -10px;
+}
+
+.expression .peek-wrapper .frequencies {
+ position: absolute;
+ left: 0px;
+ bottom: -30px;
+}
+
+.expression:hover .peek-wrapper {
+ visibility: visible;
+}
+
.reasons {
color: #777;
display: inline-block;
}
+.compact-info {
+ display: inline-block;
+}
+
.glossary ol, .glossary ul {
padding-left: 1.4em;
}
+.glossary ul.compact-glossary {
+ display: inline;
+ list-style: none;
+ padding-left: 0px;
+}
+
+.glossary .compact-glossary li {
+ display: inline;
+}
+
+.glossary .compact-glossary li:not(:first-child):before {
+ content: " | ";
+}
+
.glossary li {
color: #777;
}
@@ -141,6 +207,10 @@ hr {
color: #000;
}
+div.glossary-item.compact-glossary {
+ display: inline;
+}
+
.glyph {
font-family: kanji-stroke-orders;
font-size: 120px;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 75ee339a..5d3c4f2e 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -29,6 +29,7 @@ class Display {
this.audioCache = {};
$(document).keydown(this.onKeyDown.bind(this));
+ $(document).on('wheel', this.onWheel.bind(this));
}
onError(error) {
@@ -70,8 +71,10 @@ class Display {
onAudioPlay(e) {
e.preventDefault();
- const index = Display.entryIndexFind($(e.currentTarget));
- this.audioPlay(this.definitions[index]);
+ const link = $(e.currentTarget);
+ const definitionIndex = Display.entryIndexFind(link);
+ const expressionIndex = link.closest('.entry').find('.expression .action-play-audio').index(link);
+ this.audioPlay(this.definitions[definitionIndex], expressionIndex);
}
onNoteAdd(e) {
@@ -182,7 +185,8 @@ class Display {
80: /* p */ () => {
if (e.altKey) {
if ($('.entry').eq(this.index).data('type') === 'term') {
- this.audioPlay(this.definitions[this.index]);
+ const expressionIndex = this.options.general.resultOutputMode === 'merge' ? 0 : -1;
+ this.audioPlay(this.definitions[this.index], expressionIndex);
}
return true;
@@ -202,6 +206,25 @@ class Display {
}
}
+ onWheel(e) {
+ const event = e.originalEvent;
+ const handler = () => {
+ if (event.altKey) {
+ if (event.deltaY < 0) { // scroll up
+ this.entryScrollIntoView(this.index - 1, true);
+ return true;
+ } else if (event.deltaY > 0) { // scroll down
+ this.entryScrollIntoView(this.index + 1, true);
+ return true;
+ }
+ }
+ };
+
+ if (handler()) {
+ event.preventDefault();
+ }
+ }
+
async termsShow(definitions, options, context) {
try {
window.focus();
@@ -214,8 +237,10 @@ class Display {
const params = {
definitions,
addable: options.anki.enable,
- grouped: options.general.groupResults,
+ grouped: options.general.resultOutputMode === 'group',
+ merged: options.general.resultOutputMode === 'merge',
playback: options.general.audioSource !== 'disabled',
+ compactGlossaries: options.general.compactGlossaries,
debug: options.general.debugInfo
};
@@ -359,11 +384,12 @@ class Display {
}
}
- async audioPlay(definition) {
+ async audioPlay(definition, expressionIndex) {
try {
this.spinner.show();
- let url = await apiAudioGetUrl(definition, this.options.general.audioSource);
+ const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
+ let url = await apiAudioGetUrl(expression, this.options.general.audioSource);
if (!url) {
url = '/mixed/mp3/button.mp3';
}