- -

Yomichan Updated!

- The Yomichan extension has been updated to a new version! In order to continue - viewing definitions on this page you must reload this tab or restart your browser. -

- - - - - +

Yomichan Updated!

+ The Yomichan extension has been updated to a new version! In order to continue + viewing definitions on this page you must reload this tab or restart your browser. +

+ + + + + + -- cgit v1.2.3 From ad17b0603bfcbb6be54fd4941b6a7ca4195947fc Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Sat, 18 Mar 2017 17:40:48 -0700 Subject: scrolling --- ext/fg/frame.html | 3 ++- ext/mixed/css/frame.css | 5 +++++ ext/mixed/js/display.js | 53 +++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 52 insertions(+), 9 deletions(-) (limited to 'ext/fg/frame.html') diff --git a/ext/fg/frame.html b/ext/fg/frame.html index d915281c..c593db8d 100644 --- a/ext/fg/frame.html +++ b/ext/fg/frame.html @@ -8,7 +8,8 @@ diff --git a/ext/mixed/css/frame.css b/ext/mixed/css/frame.css index 78108dd5..a425aca8 100644 --- a/ext/mixed/css/frame.css +++ b/ext/mixed/css/frame.css @@ -51,6 +51,11 @@ hr { * Entries */ +.entry { + padding-top: 10px; + padding-bottom: 10px; +} + .tag-default { background-color: #8a8a91; } diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index d90cf897..11df7208 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -24,6 +24,9 @@ class Display { this.definitions = []; this.audioCache = {}; this.sequence = 0; + this.index = 0; + + $(document).keydown(this.onKeyDown.bind(this)); } definitionAdd(definition, mode) { @@ -47,6 +50,8 @@ class Display { } showTermDefs(definitions, options, context) { + window.focus(); + this.spinner.hide(); this.definitions = definitions; @@ -68,13 +73,8 @@ class Display { this.templateRender('terms.html', params).then(content => { this.container.html(content); - let offset = 0; - if (context && context.hasOwnProperty('index') && context.index < definitions.length) { - const entry = $('.entry').eq(context.index); - offset = entry.offset().top; - } - - window.scrollTo(0, offset); + const index = context && context.hasOwnProperty('index') ? context.index : 0; + this.entryScroll(index); $('.action-add-note').click(this.onActionAddNote.bind(this)); $('.action-play-audio').click(e => { @@ -102,6 +102,8 @@ class Display { } showKanjiDefs(definitions, options, context) { + window.focus(); + this.spinner.hide(); this.definitions = definitions; @@ -121,7 +123,9 @@ class Display { this.templateRender('kanji.html', params).then(content => { this.container.html(content); - window.scrollTo(0, 0); + + const index = context && context.hasOwnProperty('index') ? context.index : 0; + this.entryScroll(index); $('.action-add-note').click(this.onActionAddNote.bind(this)); $('.source-term').click(e => { @@ -158,6 +162,23 @@ class Display { }); } + entryScroll(index, smooth) { + if (index < 0 || index >= this.definitions.length) { + return; + } + + const body = $('body').stop(); + const entry = $('.entry').eq(index); + + if (smooth) { + body.animate({scrollTop: entry.offset().top}, 200); + } else { + body.scrollTop(entry.offset().top); + } + + this.index = index; + } + onActionAddNote(e) { e.preventDefault(); this.spinner.show(); @@ -184,6 +205,22 @@ class Display { }).catch(this.handleError.bind(this)).then(() => this.spinner.hide()); } + onKeyDown(e) { + if (e.keyCode === 36 /* home */) { + e.preventDefault(); + this.entryScroll(0, true); + } else if (e.keyCode === 35 /* end */) { + e.preventDefault(); + this.entryScroll(this.definitions.length - 1, true); + } if (e.keyCode === 38 /* up */) { + e.preventDefault(); + this.entryScroll(this.index - 1, true); + } else if (e.keyCode === 40 /* down */) { + e.preventDefault(); + this.entryScroll(this.index + 1, true); + } + } + static audioPlay(definition, cache) { for (const key in cache) { const audio = cache[key]; -- cgit v1.2.3 From 6d55767191f50bceef86bf78df7d340f9c5971c7 Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Sat, 18 Mar 2017 18:21:02 -0700 Subject: wip --- ext/bg/js/templates.js | 12 ++++++------ ext/fg/frame.html | 12 +++++++----- ext/mixed/js/display.js | 4 ++++ tmpl/kanji.html | 6 +++--- tmpl/terms.html | 8 ++++---- 5 files changed, 24 insertions(+), 18 deletions(-) (limited to 'ext/fg/frame.html') diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js index 333147ba..f267da80 100644 --- a/ext/bg/js/templates.js +++ b/ext/bg/js/templates.js @@ -284,7 +284,7 @@ templates['fields.html'] = template({"1":function(container,depth0,helpers,parti templates['kanji.html'] = template({"1":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : {}; - return "

\n $\"Current$ \n" + return "

\n $\"Current$ \n" + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "

\n\n

" @@ -299,9 +299,9 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.program(15, data, 0),"data":data})) != null ? stack1 : "") + "

\n"; },"2":function(container,depth0,helpers,partials,data) { - return "

\n"; + return " $\"Add$ \n"; },"4":function(container,depth0,helpers,partials,data) { - return "

\n"; + return " $\"Source$ \n"; },"6":function(container,depth0,helpers,partials,data) { var stack1; @@ -442,7 +442,7 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia },"12":function(container,depth0,helpers,partials,data) { var stack1, alias1=depth0 != null ? depth0 : {}; - return "

\n $\"Current$ \n" + return "

\n $\"Current$ \n" + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.playback : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "") + "

\n\n" @@ -453,9 +453,9 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.grouped : depth0),{"name":"if","hash":{},"fn":container.program(26, data, 0),"inverse":container.program(32, data, 0),"data":data})) != null ? stack1 : "") + "

\n"; },"13":function(container,depth0,helpers,partials,data) { - return "

\n"; + return " $\"Add$ \n $\"Add$ \n"; },"15":function(container,depth0,helpers,partials,data) { - return "

\n"; + return " $\"Play$ \n"; },"17":function(container,depth0,helpers,partials,data) { var stack1, helper, options, alias1=depth0 != null ? depth0 : {}, alias2=helpers.helperMissing, alias3="function", buffer = "

"; diff --git a/ext/fg/frame.html b/ext/fg/frame.html index c593db8d..09d1689e 100644 --- a/ext/fg/frame.html +++ b/ext/fg/frame.html @@ -21,11 +21,13 @@

Yomichan Updated!

- The Yomichan extension has been updated to a new version! In order to continue - viewing definitions on this page you must reload this tab or restart your browser. -

Yomichan Updated!

+ The Yomichan extension has been updated to a new version! In order to continue + viewing definitions on this page you must reload this tab or restart your browser. +

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 2ceef282..707d70ee 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -236,6 +236,10 @@ class Display { 220: /* \ */ () => { this.audioPlay(this.definitions[this.index]); + }, + + 8: /* backspace */ () => { + } }; diff --git a/tmpl/kanji.html b/tmpl/kanji.html index 3cc7f966..be5e8541 100644 --- a/tmpl/kanji.html +++ b/tmpl/kanji.html @@ -1,12 +1,12 @@ {{#*inline "kanji"}}

{{#if addable}} -

{{/if}} {{#if source}} -

diff --git a/tmpl/terms.html b/tmpl/terms.html index 6212cb21..f108da26 100644 --- a/tmpl/terms.html +++ b/tmpl/terms.html @@ -20,13 +20,13 @@ {{#*inline "term"}}

{{#if addable}} -

{{/if}} {{#if playback}} -

+ $Play audio (\)$ {{/if}}

-- cgit v1.2.3 From 0e167876923ba6f20c8b84e518436f2b523e06f9 Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Sat, 25 Mar 2017 10:05:03 -0700 Subject: refactor --- ext/bg/search.html | 1 + ext/fg/frame.html | 1 + ext/mixed/js/display.js | 76 ++-------------------------------------------- ext/mixed/js/util.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 84 insertions(+), 74 deletions(-) create mode 100644 ext/mixed/js/util.js (limited to 'ext/fg/frame.html') diff --git a/ext/bg/search.html b/ext/bg/search.html index 2fd44fc7..b8ab21b0 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -34,6 +34,7 @@ + diff --git a/ext/fg/frame.html b/ext/fg/frame.html index 09d1689e..35bc0284 100644 --- a/ext/fg/frame.html +++ b/ext/fg/frame.html @@ -33,6 +33,7 @@ + diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index c7f20a92..29a292c1 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -256,7 +256,7 @@ class Display { if (mode !== 'kanji') { const filename = Display.audioBuildFilename(definition); if (filename) { - promise = this.audioBuildUrl(definition).then(url => definition.audio = {url, filename}).catch(() => {}); + promise = audioBuildUrl(definition, this.responseCache).then(url => definition.audio = {url, filename}).catch(() => {}); } } @@ -279,7 +279,7 @@ class Display { this.audioCache[key].pause(); } - this.audioBuildUrl(definition).then(url => { + audioBuildUrl(definition, this.responseCache).then(url => { if (!url) { url = '/mixed/mp3/button.mp3'; } @@ -302,78 +302,6 @@ class Display { }).catch(this.handleError.bind(this)).then(() => this.spinner.hide()); } - audioBuildUrl(definition) { - return new Promise((resolve, reject) => { - const response = this.responseCache[definition.expression]; - if (response) { - resolve(response); - } else { - const data = { - post: 'dictionary_reference', - match_type: 'exact', - search_query: definition.expression - }; - - const params = []; - for (const key in data) { - params.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`); - } - - const xhr = new XMLHttpRequest(); - xhr.open('POST', 'https://www.japanesepod101.com/learningcenter/reference/dictionary_post'); - xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - xhr.addEventListener('error', () => reject('failed to scrape audio data')); - xhr.addEventListener('load', () => { - this.responseCache[definition.expression] = xhr.responseText; - resolve(xhr.responseText); - }); - - xhr.send(params.join('&')); - } - }).then(response => { - const dom = new DOMParser().parseFromString(response, 'text/html'); - const entries = []; - - for (const row of dom.getElementsByClassName('dc-result-row')) { - try { - const url = row.getElementsByClassName('ill-onebuttonplayer').item(0).getAttribute('data-url'); - const expression = row.getElementsByClassName('dc-vocab').item(0).innerText; - const reading = row.getElementsByClassName('dc-vocab_kana').item(0).innerText; - - if (url && expression && reading) { - entries.push({url, expression, reading}); - } - } catch (e) { - // NOP - } - } - - return entries; - }).then(entries => { - for (const entry of entries) { - if (!definition.reading || definition.reading === entry.reading) { - return entry.url; - } - } - }); - } - - static audioBuildFilename(definition) { - if (!definition.reading && !definition.expression) { - return; - } - - let filename = 'yomichan'; - if (definition.reading) { - filename += `_${definition.reading}`; - } - if (definition.expression) { - filename += `_${definition.expression}`; - } - - return filename += '.mp3'; - } - static entryIndexFind(element) { return $('.entry').index(element.closest('.entry')); } diff --git a/ext/mixed/js/util.js b/ext/mixed/js/util.js new file mode 100644 index 00000000..13f124a0 --- /dev/null +++ b/ext/mixed/js/util.js @@ -0,0 +1,80 @@ +/* + * Copyright (C) 2017 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +/* + * Audio + */ + +function audioBuildUrl(definition, cache) { + return new Promise((resolve, reject) => { + const response = cache[definition.expression]; + if (response) { + resolve(response); + } else { + const data = { + post: 'dictionary_reference', + match_type: 'exact', + search_query: definition.expression + }; + + const params = []; + for (const key in data) { + params.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`); + } + + const xhr = new XMLHttpRequest(); + xhr.open('POST', 'https://www.japanesepod101.com/learningcenter/reference/dictionary_post'); + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.addEventListener('error', () => reject('failed to scrape audio data')); + xhr.addEventListener('load', () => { + cache[definition.expression] = xhr.responseText; + resolve(xhr.responseText); + }); + + xhr.send(params.join('&')); + } + }).then(response => { + const dom = new DOMParser().parseFromString(response, 'text/html'); + for (const row of dom.getElementsByClassName('dc-result-row')) { + try { + const url = row.getElementsByClassName('ill-onebuttonplayer').item(0).getAttribute('data-url'); + const reading = row.getElementsByClassName('dc-vocab_kana').item(0).innerText; + if (url && reading && (!definition.reading || definition.reading === reading)) { + return url; + } + } catch (e) { + // NOP + } + } + }); +} + +function audioBuildFilename(definition) { + if (definition.reading && definition.expression) { + let filename = 'yomichan'; + if (definition.reading) { + filename += `_${definition.reading}`; + } + if (definition.expression) { + filename += `_${definition.expression}`; + } + + return filename += '.mp3'; + } +} -- cgit v1.2.3