aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-09-15 12:04:21 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-09-27 21:16:10 -0400
commit9a243630a55a6a99fa4dca415a3dfa534585c10c (patch)
tree78c57355af087b213c1606326f328bf1a8994ae0 /ext/bg/js
parent476a5e873a3825d760110a09c6e9b01ec34b4104 (diff)
Improve slide up animation
Diffstat (limited to 'ext/bg/js')
-rw-r--r--ext/bg/js/search.js23
1 files changed, 21 insertions, 2 deletions
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();