alex/yomichan
1
Fork 0
Code Releases Activity

WIP

Browse Source
This commit is contained in:
Alex Yatskov 2017-01-07 18:07:15 -08:00
parent 519f48c7ff
commit dc4162eeed
2 changed files with 73 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/fg/css/frame.css
View File

@ -101,9 +101,9 @@ body {
.spinner { .spinner {
bottom: 5px; bottom: 5px;
display: none;
position: fixed; position: fixed;
right: 5px; right: 5px;
visibility: hidden;
} }
/* term styles */ /* term styles */

85
ext/fg/js/frame.js
View File

@ -19,7 +19,8 @@
class FrameContext { class FrameContext {
constructor() { constructor() {
this.definitions = []; this.definitions = [];
this.audio = {}; this.audioCache = {};
this.sequence = 0;
$(window).on('message', e => { $(window).on('message', e => {
const {action, params} = e.originalEvent.data, method = this['api_' + action]; const {action, params} = e.originalEvent.data, method = this['api_' + action];
@ -30,6 +31,7 @@ class FrameContext {
} }
api_showTermDefs({definitions, options}) { api_showTermDefs({definitions, options}) {
const sequence = ++this.sequence;
const context = { const context = {
definitions, definitions,
addable: options.ankiMethod !== 'disabled', addable: options.ankiMethod !== 'disabled',
@ -38,13 +40,15 @@ class FrameContext {
this.definitions = definitions; this.definitions = definitions;
this.showSpinner(false); this.showSpinner(false);
window.scrollTo(0, 0);
renderText(context, 'term-list.html').then(content => { renderText(context, 'term-list.html').then(content => {
$('.content').html(content); $('.content').html(content);
$('.action-add-note').click(this.onAddNote.bind(this));
$('.kanji-link').click(e => { $('.kanji-link').click(e => {
e.preventDefault(); e.preventDefault();
findKanji($(e.target).text()).then(defs => this.api_showKanjiDefs({options, definitions: defs})); findKanji($(e.target).text()).then(kdefs => this.api_showKanjiDefs({options, definitions: kdefs}));
}); });
$('.action-play-audio').click(e => { $('.action-play-audio').click(e => {
@ -53,7 +57,34 @@ class FrameContext {
this.playAudio(this.definitions[index]); this.playAudio(this.definitions[index]);
}); });
$('.action-add-note').click(e => { this.updateAddNoteButtons(['term_kanji', 'term_kana'], sequence);
});
}
api_showKanjiDefs({definitions, options}) {
const sequence = ++this.sequence;
const context = {
definitions,
addable: options.ankiMethod !== 'disabled'
};
this.definitions = definitions;
this.showSpinner(false);
window.scrollTo(0, 0);
renderText(context, 'kanji-list.html').then(content => {
$('.content').html(content);
$('.action-add-note').click(this.onAddNote.bind(this));
this.updateAddNoteButtons(['kanji'], sequence);
});
}
findAddNoteButton(index, mode) {
return $(`.action-add-note[data-index="${index}"][data-mode="${mode}"]`);
}
onAddNote(e) {
e.preventDefault(); e.preventDefault();
this.showSpinner(true); this.showSpinner(true);
@ -63,7 +94,7 @@ class FrameContext {
addDefinition(this.definitions[index], mode).then(success => { addDefinition(this.definitions[index], mode).then(success => {
if (success) { if (success) {
const button = this.getAddButton(index, mode); const button = this.findAddNoteButton(index, mode);
button.addClass('disabled'); button.addClass('disabled');
} else { } else {
window.alert('Note could not be added'); window.alert('Note could not be added');
@ -73,16 +104,21 @@ class FrameContext {
}).then(() => { }).then(() => {
this.showSpinner(false); this.showSpinner(false);
}); });
}); }
canAddDefinitions(definitions, ['term_kanji', 'term_kana']).then(states => { updateAddNoteButtons(modes, sequence) {
canAddDefinitions(this.definitions, modes).then(states => {
if (states === null) { if (states === null) {
return; return;
} }
if (sequence !== this.sequence) {
return;
}
states.forEach((state, index) => { states.forEach((state, index) => {
for (const mode in state) { for (const mode in state) {
const button = this.getAddButton(index, mode); const button = this.findAddNoteButton(index, mode);
if (state[mode]) { if (state[mode]) {
button.removeClass('disabled'); button.removeClass('disabled');
} else { } else {
@ -93,30 +129,15 @@ class FrameContext {
} }
}); });
}); });
});
}
api_showKanjiDefs({definitions, options}) {
const context = {
definitions,
addable: options.ankiMethod !== 'disabled'
};
this.definitions = definitions;
this.showSpinner(false);
renderText(context, 'kanji-list.html').then(content => {
$('.content').html(content);
});
}
getAddButton(index, mode) {
return $(`.action-add-note[data-index="${index}"][data-mode="${mode}"]`);
} }
showSpinner(show) { showSpinner(show) {
const spinner = document.querySelector('.spinner'); const spinner = $('.spinner');
spinner.style.visibility = show ? 'visible' : 'hidden'; if (show) {
spinner.show();
} else {
spinner.hide();
}
} }
playAudio(definition) { playAudio(definition) {
@ -125,15 +146,13 @@ class FrameContext {
url += `&kana=${encodeURIComponent(definition.reading)}`; url += `&kana=${encodeURIComponent(definition.reading)}`;
} }
for (const key in this.audio) { for (const key in this.audioCache) {
this.audio[key].pause(); this.audioCache[key].pause();
} }
const audio = this.audio[url] || new Audio(url); const audio = this.audioCache[url] || new Audio(url);
audio.currentTime = 0; audio.currentTime = 0;
audio.play(); audio.play();
this.audio[url] = audio;
} }
} }