alex/yomichan
1
Fork 0
Code Releases Activity

Improve slide up animation

Browse Source
This commit is contained in:
toasted-nutbread 2019-09-15 12:04:21 -04:00
parent 476a5e873a
commit 9a243630a5
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ext/bg/js/search.js
View File

@ -28,7 +28,8 @@ class DisplaySearch extends Display {
this.search = $('#search').click(this.onSearch.bind(this)); this.search = $('#search').click(this.onSearch.bind(this));
this.query = $('#query').on('input', this.onSearchInput.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}); this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
@ -50,13 +51,31 @@ class DisplaySearch extends Display {
async onSearch(e) { async onSearch(e) {
try { try {
e.preventDefault(); e.preventDefault();
this.intro.slideUp(); this.hideIntro();
const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext); const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext);
super.termsShow(definitions, await apiOptionsGet(this.optionsContext)); super.termsShow(definitions, await apiOptionsGet(this.optionsContext));
} catch (e) { } catch (e) {
this.onError(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(); window.yomichan_search = new DisplaySearch();

18
ext/bg/search.html
View File

@ -10,21 +10,19 @@
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<div id="intro"> <div id="intro" style="overflow: hidden;">
<div class="page-header"> <div class="page-header">
<h1>Yomichan Search</h1> <h1>Yomichan Search</h1>
</div> </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> </div>
<p> <form class="input-group" style="padding-top: 10px;">
<form class="input-group"> <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
<input type="text" class="form-control" placeholder="Search for..." id="query" autofocus> <span class="input-group-btn">
<span class="input-group-btn"> <input type="submit" class="btn btn-default form-control" id="search" value="Search" disabled>
<input type="submit" class="btn btn-default form-control" id="search" value="Search" disabled> </span>
</span> </form>
</form>
</p>
<div id="spinner"> <div id="spinner">
<img src="/mixed/img/spinner.gif"> <img src="/mixed/img/spinner.gif">