Merge branch 'dev'

1 files changed, 195 insertions, 129 deletions

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 63620dc6..db14a43c 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -25,6 +25,9 @@ class Display {
         this.audioCache = {};
         this.responseCache = {};
         this.sequence = 0;
+        this.index = 0;
+
+        $(document).keydown(this.onKeyDown.bind(this));
     }
 
     definitionAdd(definition, mode) {
@@ -47,9 +50,17 @@ class Display {
         throw 'override me';
     }
 
+    clearSearch() {
+        throw 'override me';
+    }
+
     showTermDefs(definitions, options, context) {
+        window.focus();
+
         this.spinner.hide();
         this.definitions = definitions;
+        this.options = options;
+        this.context = context;
 
         const sequence = ++this.sequence;
         const params = {
@@ -68,43 +79,23 @@ class Display {
 
         this.templateRender('terms.html', params).then(content => {
             this.container.html(content);
+            this.entryScroll(context && context.index || 0);
 
-            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);
-
-            $('.action-add-note').click(this.onActionAddNote.bind(this));
-            $('.action-play-audio').click(e => {
-                e.preventDefault();
-                const index = Display.entryIndexFind($(e.currentTarget));
-                this.audioPlay(this.definitions[index]);
-            });
-            $('.kanji-link').click(e => {
-                e.preventDefault();
-
-                const link = $(e.target);
-                context = context || {};
-                context.source = {
-                    definitions,
-                    index: Display.entryIndexFind(link)
-                };
-
-                this.kanjiFind(link.text()).then(kanjiDefs => {
-                    this.showKanjiDefs(kanjiDefs, options, context);
-                }).catch(this.handleError.bind(this));
-            });
+            $('.action-add-note').click(this.onAddNote.bind(this));
+            $('.action-play-audio').click(this.onPlayAudio.bind(this));
+            $('.kanji-link').click(this.onKanjiLookup.bind(this));
 
             return this.adderButtonsUpdate(['term-kanji', 'term-kana'], sequence);
         }).catch(this.handleError.bind(this));
     }
 
     showKanjiDefs(definitions, options, context) {
+        window.focus();
+
         this.spinner.hide();
         this.definitions = definitions;
+        this.options = options;
+        this.context = context;
 
         const sequence = ++this.sequence;
         const params = {
@@ -122,17 +113,10 @@ class Display {
 
         this.templateRender('kanji.html', params).then(content => {
             this.container.html(content);
-            window.scrollTo(0, 0);
+            this.entryScroll(context && context.index || 0);
 
-            $('.action-add-note').click(this.onActionAddNote.bind(this));
-            $('.source-term').click(e => {
-                e.preventDefault();
-
-                if (context && context.source) {
-                    context.index = context.source.index;
-                    this.showTermDefs(context.source.definitions, options, context);
-                }
-            });
+            $('.action-add-note').click(this.onAddNote.bind(this));
+            $('.source-term').click(this.onSourceTerm.bind(this));
 
             return this.adderButtonsUpdate(['kanji'], sequence);
         }).catch(this.handleError.bind(this));
@@ -159,31 +143,186 @@ class Display {
         });
     }
 
-    onActionAddNote(e) {
+    entryScroll(index, smooth) {
+        index = Math.min(index, this.definitions.length - 1);
+        index = Math.max(index, 0);
+
+        $('.current').hide().eq(index).show();
+
+        const container = $('html,body').stop();
+        const entry = $('.entry').eq(index);
+        const target = index === 0 ? 0 : entry.offset().top;
+
+        if (smooth) {
+            container.animate({scrollTop: target}, 200);
+        } else {
+            container.scrollTop(target);
+        }
+
+        this.index = index;
+    }
+
+    onSourceTerm(e) {
+        e.preventDefault();
+        this.sourceBack();
+    }
+
+    onKanjiLookup(e) {
         e.preventDefault();
-        this.spinner.show();
 
+        const link = $(e.target);
+        const context = {
+            source: {
+                definitions: this.definitions,
+                index: Display.entryIndexFind(link)
+            }
+        };
+
+        if (this.context) {
+            context.sentence = this.context.sentence;
+            context.url = this.context.url;
+        }
+
+        this.kanjiFind(link.text()).then(kanjiDefs => {
+            this.showKanjiDefs(kanjiDefs, this.options, context);
+        }).catch(this.handleError.bind(this));
+    }
+
+    onPlayAudio(e) {
+        e.preventDefault();
+        const index = Display.entryIndexFind($(e.currentTarget));
+        this.audioPlay(this.definitions[index]);
+    }
+
+    onAddNote(e) {
+        e.preventDefault();
         const link = $(e.currentTarget);
-        const mode = link.data('mode');
         const index = Display.entryIndexFind(link);
-        const definition = this.definitions[index];
+        this.noteAdd(this.definitions[index], link.data('mode'));
+    }
 
-        let promise = Promise.resolve();
-        if (mode !== 'kanji') {
-            const filename = Display.audioBuildFilename(definition);
-            if (filename) {
-                promise = this.audioBuildUrl(definition).then(url => definition.audio = {url, filename}).catch(() => {});
+    onKeyDown(e) {
+        const noteTryAdd = mode => {
+            const button = Display.adderButtonFind(this.index, mode);
+            if (button.length !== 0 && !button.hasClass('disabled')) {
+                this.noteAdd(this.definitions[this.index], mode);
             }
-        }
+        };
+
+        const handlers = {
+            27: /* escape */ () => {
+                this.clearSearch();
+                return true;
+            },
 
-        promise.then(() => {
-            return this.definitionAdd(definition, mode).then(success => {
-                if (success) {
-                    Display.adderButtonFind(index, mode).addClass('disabled');
-                } else {
-                    this.handleError('note could not be added');
+            33: /* page up */ () => {
+                if (e.altKey) {
+                    this.entryScroll(this.index - 3, true);
+                    return true;
                 }
-            });
+            },
+
+            34: /* page down */ () => {
+                if (e.altKey) {
+                    this.entryScroll(this.index + 3, true);
+                    return true;
+                }
+            },
+
+            35: /* end */ () => {
+                if (e.altKey) {
+                    this.entryScroll(this.definitions.length - 1, true);
+                    return true;
+                }
+            },
+
+            36: /* home */ () => {
+                if (e.altKey) {
+                    this.entryScroll(0, true);
+                    return true;
+                }
+            },
+
+            38: /* up */ () => {
+                if (e.altKey) {
+                    this.entryScroll(this.index - 1, true);
+                    return true;
+                }
+            },
+
+            40: /* down */ () => {
+                if (e.altKey) {
+                    this.entryScroll(this.index + 1, true);
+                    return true;
+                }
+            },
+
+            66: /* b */ () => {
+                if (e.altKey) {
+                    this.sourceBack();
+                    return true;
+                }
+            },
+
+            69: /* e */ () => {
+                if (e.altKey) {
+                    noteTryAdd('term-kanji');
+                    return true;
+                }
+            },
+
+            75: /* k */ () => {
+                if (e.altKey) {
+                    noteTryAdd('kanji');
+                    return true;
+                }
+            },
+
+            82: /* r */ () => {
+                if (e.altKey) {
+                    noteTryAdd('term-kana');
+                    return true;
+                }
+            },
+
+            80: /* p */ () => {
+                if (e.altKey) {
+                    if ($('.entry').eq(this.index).data('type') === 'term') {
+                        this.audioPlay(this.definitions[this.index]);
+                    }
+
+                    return true;
+                }
+            }
+        };
+
+        const handler = handlers[e.keyCode];
+        if (handler && handler()) {
+            e.preventDefault();
+        }
+    }
+
+    sourceBack() {
+        if (this.context && this.context.source) {
+            const context = {
+                url: this.context.source.url,
+                sentence: this.context.source.sentence,
+                index: this.context.source.index
+            };
+
+            this.showTermDefs(this.context.source.definitions, this.options, context);
+        }
+    }
+
+    noteAdd(definition, mode) {
+        this.spinner.show();
+        return this.definitionAdd(definition, mode).then(success => {
+            if (success) {
+                const index = this.definitions.indexOf(definition);
+                Display.adderButtonFind(index, mode).addClass('disabled');
+            } else {
+                this.handleError('note could not be added');
+            }
         }).catch(this.handleError.bind(this)).then(() => this.spinner.hide());
     }
 
@@ -194,7 +333,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';
             }
@@ -217,79 +356,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);
-                return;
-            }
-
-            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 = dom.getElementsByClassName('dc-vocab').item(0).innerText;
-                    const reading = dom.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'));
     }