diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-09-15 12:04:21 -0400 |
|---|---|---|
| committer | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2019-09-27 21:16:10 -0400 |
| commit | 9a243630a55a6a99fa4dca415a3dfa534585c10c (patch) | |
| tree | 78c57355af087b213c1606326f328bf1a8994ae0 | |
| parent | 476a5e873a3825d760110a09c6e9b01ec34b4104 (diff) | |
Improve slide up animation
| -rw-r--r-- | ext/bg/js/search.js | 23 | ||||
| -rw-r--r-- | ext/bg/search.html | 18 |
2 files changed, 29 insertions, 12 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(); diff --git a/ext/bg/search.html b/ext/bg/search.html index 38c5a4e9..3c78122d 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -10,21 +10,19 @@ </head> <body> <div class="container-fluid"> - <div id="intro"> + <div id="intro" style="overflow: hidden;"> <div class="page-header"> <h1>Yomichan Search</h1> </div> - <p>Search your installed dictionaries by entering a Japanese expression into the field below.</p> + <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p> </div> - <p> - <form class="input-group"> - <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus> - <span class="input-group-btn"> - <input type="submit" class="btn btn-default form-control" id="search" value="Search" disabled> - </span> - </form> - </p> + <form class="input-group" style="padding-top: 10px;"> + <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus> + <span class="input-group-btn"> + <input type="submit" class="btn btn-default form-control" id="search" value="Search" disabled> + </span> + </form> <div id="spinner"> <img src="/mixed/img/spinner.gif"> |