Elementary audio playback support

This commit is contained in:
Alex Yatskov 2016-06-13 22:09:39 -07:00
parent 96dd2d45f9
commit e0f91b9a8a
6 changed files with 41 additions and 13 deletions

View File

@ -93,25 +93,33 @@ templates['kanji-list.html'] = template({"1":function(container,depth0,helpers,p
+ ((stack1 = container.invokePartial(partials["footer.html"],depth0,{"name":"footer.html","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : ""); + ((stack1 = container.invokePartial(partials["footer.html"],depth0,{"name":"footer.html","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
},"usePartial":true,"useData":true,"useDepths":true}); },"usePartial":true,"useData":true,"useDepths":true});
templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) { templates['term.html'] = template({"1":function(container,depth0,helpers,partials,data,blockParams,depths) {
var stack1; var stack1, helper, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : {};
return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.enableAnkiConnect : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : ""); return " <div class=\"action-bar\">\n <a href=\"#\" title=\"Pronounce\" class=\"action-pronounce\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/pronounce.png\"></a>\n"
+ ((stack1 = helpers["if"].call(alias3,(depth0 != null ? depth0.enableAnkiConnect : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+ " </div>\n";
},"2":function(container,depth0,helpers,partials,data,blockParams,depths) { },"2":function(container,depth0,helpers,partials,data,blockParams,depths) {
var helper, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : {}, alias4=helpers.helperMissing, alias5="function"; var helper, alias1=container.lambda, alias2=container.escapeExpression, alias3=depth0 != null ? depth0 : {}, alias4=helpers.helperMissing, alias5="function";
return " <div class=\"action-bar\">\n <a href=\"#\" title=\"Add term as expression\" class=\"action-link disabled\" data-sequence=\"" return " <a href=\"#\" title=\"Add term as expression\" class=\"action-learn disabled\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0)) + alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-mode=\"vocab_kanji\" data-index=\"" + "\" data-mode=\"vocab_kanji\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper))) + alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\"" + "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0)) + alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/add_vocab_kanji.png\"></a>\n <a href=\"#\" title=\"Add term as reading\" class=\"action-link disabled\" data-sequence=\"" + "/img/add_vocab_kanji.png\"></a>\n <a href=\"#\" title=\"Add term as reading\" class=\"action-learn disabled\" data-sequence=\""
+ alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0)) + alias2(alias1((depths[1] != null ? depths[1].sequence : depths[1]), depth0))
+ "\" data-mode=\"vocab_kana\" data-index=\"" + "\" data-mode=\"vocab_kana\" data-index=\""
+ alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper))) + alias2(((helper = (helper = helpers.index || (data && data.index)) != null ? helper : alias4),(typeof helper === alias5 ? helper.call(alias3,{"name":"index","hash":{},"data":data}) : helper)))
+ "\"><img src=\"" + "\"><img src=\""
+ alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0)) + alias2(alias1((depths[1] != null ? depths[1].root : depths[1]), depth0))
+ "/img/add_vocab_kana.png\"></a>\n </div>\n"; + "/img/add_vocab_kana.png\"></a>\n";
},"4":function(container,depth0,helpers,partials,data) { },"4":function(container,depth0,helpers,partials,data) {
var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer =
" <div class=\"term-expression\"><ruby>"; " <div class=\"term-expression\"><ruby>";

BIN
ext/fg/img/pronounce.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 B

View File

@ -167,6 +167,13 @@ class Client {
}); });
} }
api_pronounce(index) {
const dfn = this.definitions[index];
const url = `http://assets.languagepod101.com/dictionary/japanese/audiomp3.php?kana=${dfn.reading}&kanji=${dfn.expression}`;
const audio = new Audio(url);
audio.play();
}
api_displayKanji(kanji) { api_displayKanji(kanji) {
bgFindKanji(kanji, (definitions) => { bgFindKanji(kanji, (definitions) => {
const sequence = ++this.sequence; const sequence = ++this.sequence;

View File

@ -26,8 +26,8 @@ function registerKanjiLinks() {
} }
} }
function registerActionLinks() { function registerLearnLinks() {
for (const link of [].slice.call(document.getElementsByClassName('action-link'))) { for (const link of [].slice.call(document.getElementsByClassName('action-learn'))) {
link.addEventListener('click', (e) => { link.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
const ds = e.currentTarget.dataset; const ds = e.currentTarget.dataset;
@ -36,9 +36,20 @@ function registerActionLinks() {
} }
} }
function registerPronounceLinks() {
for (const link of [].slice.call(document.getElementsByClassName('action-pronounce'))) {
link.addEventListener('click', (e) => {
e.preventDefault();
const ds = e.currentTarget.dataset;
window.parent.postMessage({action: 'pronounce', params: ds.index}, '*');
});
}
}
function onDomContentLoaded() { function onDomContentLoaded() {
registerKanjiLinks(); registerKanjiLinks();
registerActionLinks(); registerLearnLinks();
registerPronounceLinks();
} }
function onMessage(e) { function onMessage(e) {
@ -50,7 +61,7 @@ function onMessage(e) {
function api_setActionState({index, state, sequence}) { function api_setActionState({index, state, sequence}) {
for (const mode in state) { for (const mode in state) {
const matches = document.querySelectorAll(`.action-link[data-sequence="${sequence}"][data-index="${index}"][data-mode="${mode}"]`); const matches = document.querySelectorAll(`.action-learn[data-sequence="${sequence}"][data-index="${index}"][data-mode="${mode}"]`);
if (matches.length === 0) { if (matches.length === 0) {
return; return;
} }

View File

@ -22,6 +22,7 @@
"fg/img/add_kanji.png", "fg/img/add_kanji.png",
"fg/img/add_vocab_kana.png", "fg/img/add_vocab_kana.png",
"fg/img/add_vocab_kanji.png", "fg/img/add_vocab_kanji.png",
"fg/img/pronounce.png",
"fg/js/frame.js", "fg/js/frame.js",
"fg/ttf/kanji-stroke-orders.ttf", "fg/ttf/kanji-stroke-orders.ttf",
"fg/ttf/vl-gothic-regular.ttf" "fg/ttf/vl-gothic-regular.ttf"

View File

@ -1,11 +1,12 @@
<div class="term-definition"> <div class="term-definition">
{{#with options}} {{#with options}}
{{#if enableAnkiConnect}}
<div class="action-bar"> <div class="action-bar">
<a href="#" title="Add term as expression" class="action-link disabled" data-sequence="{{../sequence}}" data-mode="vocab_kanji" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kanji.png"></a> <a href="#" title="Pronounce" class="action-pronounce" data-sequence="{{../sequence}}" data-index="{{@index}}"><img src="{{../root}}/img/pronounce.png"></a>
<a href="#" title="Add term as reading" class="action-link disabled" data-sequence="{{../sequence}}" data-mode="vocab_kana" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kana.png"></a> {{#if enableAnkiConnect}}
</div> <a href="#" title="Add term as expression" class="action-learn disabled" data-sequence="{{../sequence}}" data-mode="vocab_kanji" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kanji.png"></a>
<a href="#" title="Add term as reading" class="action-learn disabled" data-sequence="{{../sequence}}" data-mode="vocab_kana" data-index="{{@index}}"><img src="{{../root}}/img/add_vocab_kana.png"></a>
{{/if}} {{/if}}
</div>
{{/with}} {{/with}}
{{#if reading}} {{#if reading}}