summaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
authorAlex Yatskov <FooSoft@users.noreply.github.com>2019-09-28 09:12:23 -0700
committerGitHub <noreply@github.com>2019-09-28 09:12:23 -0700
commit64eed33e8890df33e3c4acb47c96f0e3c674bd3b (patch)
tree04b346150f8e4973a06bf7e0c8f3ec42f69502a8 /ext/bg
parent8195e5109b97c284fc1d6c8559de6e5f5941c911 (diff)
parente358c94882ba4fea134ca0a21824055d09719143 (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.js52
-rw-r--r--ext/bg/search.html20
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>