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

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

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

119
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,50 +57,12 @@ class FrameContext {
this.playAudio(this.definitions[index]); this.playAudio(this.definitions[index]);
}); });
$('.action-add-note').click(e => { this.updateAddNoteButtons(['term_kanji', 'term_kana'], sequence);
e.preventDefault();
this.showSpinner(true);
const link = $(e.currentTarget);
const index = link.data('index');
const mode = link.data('mode');
addDefinition(this.definitions[index], mode).then(success => {
if (success) {
const button = this.getAddButton(index, mode);
button.addClass('disabled');
} else {
window.alert('Note could not be added');
}
}).catch(error => {
window.alert('Error: ' + error);
}).then(() => {
this.showSpinner(false);
});
});
canAddDefinitions(definitions, ['term_kanji', 'term_kana']).then(states => {
if (states === null) {
return;
}
states.forEach((state, index) => {
for (const mode in state) {
const button = this.getAddButton(index, mode);
if (state[mode]) {
button.removeClass('disabled');
} else {
button.addClass('disabled');
}
button.removeClass('pending');
}
});
});
}); });
} }
api_showKanjiDefs({definitions, options}) { api_showKanjiDefs({definitions, options}) {
const sequence = ++this.sequence;
const context = { const context = {
definitions, definitions,
addable: options.ankiMethod !== 'disabled' addable: options.ankiMethod !== 'disabled'
@ -104,19 +70,74 @@ class FrameContext {
this.definitions = definitions; this.definitions = definitions;
this.showSpinner(false); this.showSpinner(false);
window.scrollTo(0, 0);
renderText(context, 'kanji-list.html').then(content => { renderText(context, 'kanji-list.html').then(content => {
$('.content').html(content); $('.content').html(content);
$('.action-add-note').click(this.onAddNote.bind(this));
this.updateAddNoteButtons(['kanji'], sequence);
}); });
} }
getAddButton(index, mode) { findAddNoteButton(index, mode) {
return $(`.action-add-note[data-index="${index}"][data-mode="${mode}"]`); return $(`.action-add-note[data-index="${index}"][data-mode="${mode}"]`);
} }
onAddNote(e) {
e.preventDefault();
this.showSpinner(true);
const link = $(e.currentTarget);
const index = link.data('index');
const mode = link.data('mode');
addDefinition(this.definitions[index], mode).then(success => {
if (success) {
const button = this.findAddNoteButton(index, mode);
button.addClass('disabled');
} else {
window.alert('Note could not be added');
}
}).catch(error => {
window.alert('Error: ' + error);
}).then(() => {
this.showSpinner(false);
});
}
updateAddNoteButtons(modes, sequence) {
canAddDefinitions(this.definitions, modes).then(states => {
if (states === null) {
return;
}
if (sequence !== this.sequence) {
return;
}
states.forEach((state, index) => {
for (const mode in state) {
const button = this.findAddNoteButton(index, mode);
if (state[mode]) {
button.removeClass('disabled');
} else {
button.addClass('disabled');
}
button.removeClass('pending');
}
});
});
}
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;
} }
} }