diff options
-rw-r--r-- | ext/bg/js/templates.js | 18 | ||||
-rw-r--r-- | ext/fg/img/pronounce.png | bin | 0 -> 610 bytes | |||
-rw-r--r-- | ext/fg/js/client.js | 7 | ||||
-rw-r--r-- | ext/fg/js/frame.js | 19 | ||||
-rw-r--r-- | ext/manifest.json | 1 | ||||
-rw-r--r-- | tmpl/term.html | 9 |
6 files changed, 41 insertions, 13 deletions
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js index 29e86c89..3408b334 100644 --- a/ext/bg/js/templates.js +++ b/ext/bg/js/templates.js @@ -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 : ""); },"usePartial":true,"useData":true,"useDepths":true}); 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) { 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)) + "\" 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))) + "\"><img src=\"" + 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)) + "\" 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))) + "\"><img src=\"" + 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) { var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = " <div class=\"term-expression\"><ruby>"; diff --git a/ext/fg/img/pronounce.png b/ext/fg/img/pronounce.png Binary files differnew file mode 100644 index 00000000..6056d234 --- /dev/null +++ b/ext/fg/img/pronounce.png diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js index ec2ea630..4ac40b65 100644 --- a/ext/fg/js/client.js +++ b/ext/fg/js/client.js @@ -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) { bgFindKanji(kanji, (definitions) => { const sequence = ++this.sequence; diff --git a/ext/fg/js/frame.js b/ext/fg/js/frame.js index a61bb9ee..376d4826 100644 --- a/ext/fg/js/frame.js +++ b/ext/fg/js/frame.js @@ -26,8 +26,8 @@ function registerKanjiLinks() { } } -function registerActionLinks() { - for (const link of [].slice.call(document.getElementsByClassName('action-link'))) { +function registerLearnLinks() { + for (const link of [].slice.call(document.getElementsByClassName('action-learn'))) { link.addEventListener('click', (e) => { e.preventDefault(); 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() { registerKanjiLinks(); - registerActionLinks(); + registerLearnLinks(); + registerPronounceLinks(); } function onMessage(e) { @@ -50,7 +61,7 @@ function onMessage(e) { function api_setActionState({index, state, sequence}) { 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) { return; } diff --git a/ext/manifest.json b/ext/manifest.json index e6f65a8f..3cb13480 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -22,6 +22,7 @@ "fg/img/add_kanji.png", "fg/img/add_vocab_kana.png", "fg/img/add_vocab_kanji.png", + "fg/img/pronounce.png", "fg/js/frame.js", "fg/ttf/kanji-stroke-orders.ttf", "fg/ttf/vl-gothic-regular.ttf" diff --git a/tmpl/term.html b/tmpl/term.html index 3fb75c98..b6861b03 100644 --- a/tmpl/term.html +++ b/tmpl/term.html @@ -1,11 +1,12 @@ <div class="term-definition"> {{#with options}} - {{#if enableAnkiConnect}} <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="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> + <a href="#" title="Pronounce" class="action-pronounce" data-sequence="{{../sequence}}" data-index="{{@index}}"><img src="{{../root}}/img/pronounce.png"></a> + {{#if enableAnkiConnect}} + <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}} </div> - {{/if}} {{/with}} {{#if reading}} |