diff options
| author | Alex Yatskov <FooSoft@users.noreply.github.com> | 2019-09-28 09:12:23 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-09-28 09:12:23 -0700 |
| commit | 64eed33e8890df33e3c4acb47c96f0e3c674bd3b (patch) | |
| tree | 04b346150f8e4973a06bf7e0c8f3ec42f69502a8 /ext/bg | |
| parent | 8195e5109b97c284fc1d6c8559de6e5f5941c911 (diff) | |
| parent | e358c94882ba4fea134ca0a21824055d09719143 (diff) | |
Merge pull request #224 from toasted-nutbread/display-jquery-optimizations
Remove jQuery usage from Display.js
Diffstat (limited to 'ext/bg')
| -rw-r--r-- | ext/bg/js/search.js | 52 | ||||
| -rw-r--r-- | ext/bg/search.html | 20 |
2 files changed, 52 insertions, 20 deletions
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 6ff710f0..13ed1e08 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -19,20 +19,27 @@ class DisplaySearch extends Display { constructor() { - super($('#spinner'), $('#content')); + super(document.querySelector('#spinner'), document.querySelector('#content')); this.optionsContext = { depth: 0, url: window.location.href }; - this.search = $('#search').click(this.onSearch.bind(this)); - this.query = $('#query').on('input', this.onSearchInput.bind(this)); - this.intro = $('#intro'); + 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) { @@ -40,23 +47,50 @@ 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.intro.slideUp(); - const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); + this.hideIntro(); + const {length, definitions} = await apiTermsFind(this.query.value, 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..121b477c 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"> @@ -34,7 +32,6 @@ </div> <script src="/mixed/lib/handlebars.min.js"></script> - <script src="/mixed/lib/jquery.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script> <script src="/mixed/js/extension.js"></script> @@ -49,6 +46,7 @@ <script src="/fg/js/source.js"></script> <script src="/mixed/js/display.js"></script> <script src="/mixed/js/japanese.js"></script> + <script src="/mixed/js/scroll.js"></script> <script src="/bg/js/search.js"></script> <script src="/bg/js/search-frontend.js"></script> |