From 1074c33f2074984fe5b21654e944d787408c0a93 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 8 Oct 2019 19:49:08 -0400 Subject: Add support for query parameter in URL on search page --- ext/bg/js/search.js | 99 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 85 insertions(+), 14 deletions(-) (limited to 'ext/bg/js/search.js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 13ed1e08..52adab16 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -29,7 +29,8 @@ class DisplaySearch extends Display { this.search = document.querySelector('#search'); this.query = document.querySelector('#query'); this.intro = document.querySelector('#intro'); - this.introHidden = false; + this.introVisible = true; + this.introAnimationTimer = null; this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); @@ -38,8 +39,17 @@ class DisplaySearch extends Display { } if (this.query !== null) { this.query.addEventListener('input', () => this.onSearchInput(), false); + + const query = DisplaySearch.getSearchQueryFromLocation(window.location.href); + if (query !== null) { + this.query.value = window.wanakana.toKana(query); + this.onSearchQueryUpdated(query, false); + } + window.wanakana.bind(this.query); } + + this.updateSearchButton(); } onError(error) { @@ -56,41 +66,102 @@ class DisplaySearch extends Display { } onSearchInput() { - this.search.disabled = (this.query === null || this.query.value.length === 0); + this.updateSearchButton(); } - async onSearch(e) { + onSearch(e) { if (this.query === null) { return; } + e.preventDefault(); + + const query = this.query.value; + const queryString = query.length > 0 ? `?query=${encodeURIComponent(query)}` : ''; + window.history.replaceState(null, '', `${window.location.pathname}${queryString}`); + this.onSearchQueryUpdated(query, true); + } + + async onSearchQueryUpdated(query, animate) { try { - e.preventDefault(); - this.hideIntro(); - const {length, definitions} = await apiTermsFind(this.query.value, this.optionsContext); - super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); + const valid = (query.length > 0); + this.setIntroVisible(!valid, animate); + this.updateSearchButton(); + if (valid) { + const {definitions} = await apiTermsFind(query, this.optionsContext); + this.termsShow(definitions, await apiOptionsGet(this.optionsContext)); + } else { + this.container.textContent = ''; + } } catch (e) { this.onError(e); } } - hideIntro() { - if (this.introHidden) { + setIntroVisible(visible, animate) { + if (this.introVisible === visible) { return; } - this.introHidden = true; + this.introVisible = visible; 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 + if (this.introAnimationTimer !== null) { + clearTimeout(this.introAnimationTimer); + this.introAnimationTimer = null; + } + + if (visible) { + this.showIntro(animate); + } else { + this.hideIntro(animate); + } + } + + showIntro(animate) { + if (animate) { + const duration = 0.4; + this.intro.style.transition = ''; + this.intro.style.height = ''; + const size = this.intro.getBoundingClientRect(); + this.intro.style.height = `0px`; + this.intro.style.transition = `height ${duration}s ease-in-out 0s`; + window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation + this.intro.style.height = `${size.height}px`; + this.introAnimationTimer = setTimeout(() => { + this.intro.style.height = ''; + this.introAnimationTimer = null; + }, duration * 1000); + } else { + this.intro.style.transition = ''; + this.intro.style.height = ''; + } + } + + hideIntro(animate) { + if (animate) { + const duration = 0.4; + const size = this.intro.getBoundingClientRect(); + this.intro.style.height = `${size.height}px`; + this.intro.style.transition = `height ${duration}s ease-in-out 0s`; + window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation + } else { + this.intro.style.transition = ''; + } this.intro.style.height = '0'; } + + updateSearchButton() { + this.search.disabled = this.introVisible && (this.query === null || this.query.value.length === 0); + } + + static getSearchQueryFromLocation(url) { + let match = /^[^\?#]*\?(?:[^&#]*&)?query=([^&#]*)/.exec(url); + return match !== null ? decodeURIComponent(match[1]) : null; + } } window.yomichan_search = new DisplaySearch(); -- cgit v1.2.3 From c5d6b9452d1bfa51a5fef9a19082d115ef180a9b Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 8 Oct 2019 21:33:10 -0400 Subject: Create utility function for logging errors --- ext/bg/js/search.js | 2 +- ext/fg/js/float.js | 2 +- ext/fg/js/frontend.js | 2 +- ext/mixed/js/extension.js | 18 ++++++++++++++++++ 4 files changed, 21 insertions(+), 3 deletions(-) (limited to 'ext/bg/js/search.js') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 52adab16..ead9ba6f 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -53,7 +53,7 @@ class DisplaySearch extends Display { } onError(error) { - window.alert(`Error: ${error.toString ? error.toString() : error}`); + logError(error, true); } onSearchClear() { diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 88842eef..8fdb6925 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -37,7 +37,7 @@ class DisplayFloat extends Display { if (window.yomichan_orphaned) { this.onOrphaned(); } else { - window.alert(`Error: ${error.toString ? error.toString() : error}`); + logError(error, true); } } diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 39433afb..88cb93a9 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -228,7 +228,7 @@ class Frontend { } onError(error) { - console.log(error); + logError(error, false); } setEnabled(enabled) { diff --git a/ext/mixed/js/extension.js b/ext/mixed/js/extension.js index 5e925124..861e52a5 100644 --- a/ext/mixed/js/extension.js +++ b/ext/mixed/js/extension.js @@ -68,6 +68,24 @@ function jsonToError(jsonError) { return error; } +function logError(error, alert) { + const manifest = chrome.runtime.getManifest(); + let errorMessage = `${manifest.name} v${manifest.version} has encountered an error.\n`; + errorMessage += `Originating URL: ${window.location.href}\n`; + + const errorString = `${error.toString ? error.toString() : error}`; + const stack = `${error.stack}`.trimRight(); + errorMessage += (!stack.startsWith(errorString) ? `${errorString}\n${stack}` : `${stack}`); + + errorMessage += '\n\nIssues can be reported at https://github.com/FooSoft/yomichan/issues'; + + console.error(errorMessage); + + if (alert) { + window.alert(`${errorString}\n\nCheck the developer console for more details.`); + } +} + const EXTENSION_IS_BROWSER_EDGE = ( extensionHasBrowser() && (!extensionHasChrome() || (typeof chrome.runtime === 'undefined' && typeof browser.runtime !== 'undefined')) -- cgit v1.2.3