From 9a243630a55a6a99fa4dca415a3dfa534585c10c Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 12:04:21 -0400 Subject: Improve slide up animation --- ext/bg/js/search.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 6ff710f0..45714a02 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -28,7 +28,8 @@ class DisplaySearch extends Display { this.search = $('#search').click(this.onSearch.bind(this)); this.query = $('#query').on('input', this.onSearchInput.bind(this)); - this.intro = $('#intro'); + this.intro = document.querySelector('#intro'); + this.introHidden = false; this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); @@ -50,13 +51,31 @@ class DisplaySearch extends Display { async onSearch(e) { try { e.preventDefault(); - this.intro.slideUp(); + this.hideIntro(); const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); } catch (e) { this.onError(e); } } + + hideIntro() { + if (this.introHidden) { + return; + } + + this.introHidden = true; + + if (this.intro === null) { + return; + } + + const size = this.intro.getBoundingClientRect(); + this.intro.style.height = `${size.height}px`; + this.intro.style.transition = 'height 0.4s ease-in-out 0s'; + window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation + this.intro.style.height = '0'; + } } window.yomichan_search = new DisplaySearch(); -- cgit v1.2.3 From b61fc810127ae3cf54e6f4ca84ea95301f9ba2a5 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 12:12:30 -0400 Subject: Remove jQuery usage from search.js --- ext/bg/js/search.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 45714a02..693e7938 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -26,14 +26,20 @@ class DisplaySearch extends Display { url: window.location.href }; - this.search = $('#search').click(this.onSearch.bind(this)); - this.query = $('#query').on('input', this.onSearchInput.bind(this)); + this.search = document.querySelector('#search'); + this.query = document.querySelector('#query'); this.intro = document.querySelector('#intro'); this.introHidden = false; this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); - window.wanakana.bind(this.query.get(0)); + if (this.search !== null) { + this.search.addEventListener('click', (e) => this.onSearch(e), false); + } + if (this.query !== null) { + this.query.addEventListener('input', () => this.onSearchInput(), false); + window.wanakana.bind(this.query); + } } onError(error) { @@ -41,18 +47,27 @@ class DisplaySearch extends Display { } onSearchClear() { - this.query.focus().select(); + if (this.query === null) { + return; + } + + this.query.focus(); + this.query.select(); } onSearchInput() { - this.search.prop('disabled', this.query.val().length === 0); + this.search.disabled = (this.query === null || this.query.value.length === 0); } async onSearch(e) { + if (this.query === null) { + return; + } + try { e.preventDefault(); this.hideIntro(); - const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); + const {length, definitions} = await apiTermsFind(this.query.value, this.optionsContext); super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); } catch (e) { this.onError(e); -- cgit v1.2.3 From 95a7fd81f5ff3773618ad697dc4385d40ba6fb54 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 14:16:23 -0400 Subject: Use raw element references for container and spinner --- ext/bg/js/search.js | 2 +- ext/fg/js/float.js | 2 +- ext/mixed/js/display.js | 18 +++++++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'ext/bg/js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 693e7938..13ed1e08 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -19,7 +19,7 @@ class DisplaySearch extends Display { constructor() { - super($('#spinner'), $('#content')); + super(document.querySelector('#spinner'), document.querySelector('#content')); this.optionsContext = { depth: 0, diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index f75b35b8..2e952efb 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -19,7 +19,7 @@ class DisplayFloat extends Display { constructor() { - super($('#spinner'), $('#definitions')); + super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; this.styleNode = null; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 1ce997a1..e0f80b51 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -310,7 +310,7 @@ class Display { } const content = await apiTemplateRender('terms.html', params); - this.container.html(content); + this.container.innerHTML = content; const {index, scroll} = context || {}; this.entryScrollIntoView(index || 0, scroll); @@ -362,7 +362,7 @@ class Display { } const content = await apiTemplateRender('kanji.html', params); - this.container.html(content); + this.container.innerHTML = content; const {index, scroll} = context || {}; this.entryScrollIntoView(index || 0, scroll); @@ -446,7 +446,7 @@ class Display { async noteAdd(definition, mode) { try { - this.spinner.show(); + this.setSpinnerVisible(true); const context = {}; if (this.noteUsesScreenshot()) { @@ -467,13 +467,13 @@ class Display { } catch (e) { this.onError(e); } finally { - this.spinner.hide(); + this.setSpinnerVisible(false); } } async audioPlay(definition, expressionIndex) { try { - this.spinner.show(); + this.setSpinnerVisible(true); const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex]; let url = await apiAudioGetUrl(expression, this.options.general.audioSource); @@ -505,7 +505,7 @@ class Display { } catch (e) { this.onError(e); } finally { - this.spinner.hide(); + this.setSpinnerVisible(false); } } @@ -542,6 +542,10 @@ class Display { return apiForward('popupSetVisible', {visible}); } + setSpinnerVisible(visible) { + this.spinner.style.display = visible ? 'block' : ''; + } + static clozeBuild(sentence, source) { const result = { sentence: sentence.text.trim() @@ -558,7 +562,7 @@ class Display { entryIndexFind(element) { const entry = element.closest('.entry'); - return entry !== null ? Display.indexOf(this.container.get(0).querySelectorAll('.entry'), entry) : -1; + return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1; } static adderButtonFind(index, mode) { -- cgit v1.2.3