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>