diff options
| -rw-r--r-- | ext/fg/frame.html | 3 | ||||
| -rw-r--r-- | ext/mixed/css/frame.css | 5 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 53 |
3 files changed, 52 insertions, 9 deletions
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 @@ <link rel="stylesheet" href="/mixed/css/frame.css"> <style type="text/css"> .entry { - padding: 10px; + padding-left: 10px; + padding-right: 10px; } </style> </head> 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]; |