Fixed search results not showing up in Firefox/Safari (SimpleJekyllSearch was not being run as script within component template)

Author: jtebert

app/_layouts/default.html

@@ -74,8 +74,6 @@
 
 </template>
 
-<script src="{{ site.baseurl }}/scripts/jekyll-search.min.js" type="text/javascript"></script>
-
 <!-- MathJax -->
 <script type="text/javascript"
         src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

app/elements/my-search-bar/my-search-bar.html

@@ -5,7 +5,6 @@
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 
 <dom-module id="my-search-bar">
-<!-- TODO: Fix title showing up above this -->
 
     <style>
 
@@ -53,10 +52,10 @@
             display: block;
         }
 
-        #search #back-icon {
+        #search #backIcon {
             display: none;
         }
-        #search #search-icon {
+        #search #searchIcon {
             display: block;
         }
 
@@ -77,7 +76,7 @@
             -webkit-appearance: none;
         }
 
-        #results-container {
+        #resultsContainer {
             display: none;
             @apply(--paper-font-body1);
             color: var(--primary-text-color);
@@ -92,7 +91,7 @@
         }
 
         @media (max-width: 639px) {
-            #results-container {
+            #resultsContainer {
                 top: 56px;
                 height: calc(100vh - 56px);
             }
@@ -103,35 +102,18 @@
 
     <template>
         <div id="search" opened$="{{opened}}" on-click="toggleSearch">
-            <paper-icon-button icon="search" id="search-icon"></paper-icon-button>
-            <paper-icon-button icon="arrow-back" id="back-icon"></paper-icon-button>
+            <paper-icon-button icon="search" id="searchIcon"></paper-icon-button>
+            <paper-icon-button icon="arrow-back" id="backIcon"></paper-icon-button>
             <input is="iron-input" bind-value="{{searchInput}}" type="search" id="input" autocomplete="off">
         </div>
-        <div class="list" opened$="{{opened}}" id="results-container"></div>
-
-        <script type="text/javascript">
-            /*jshint multistr: true */
-            // Do search with json file and make results appear
-            SimpleJekyllSearch({
-                searchInput: document.getElementById('search-input'),
-                resultsContainer: document.getElementById('results-container'),
-                json: '{{searchjson}}',
-                searchResultTemplate:
-                        '<a href="{url}" class="test"><paper-item> \
-                          <paper-item-body two-line> \
-                            <div>{title}</div> \
-                            <div secondary>{date}</div> \
-                            <paper-ripple></paper-ripple>\
-                          </paper-item-body> \
-                        </paper-item></a><hr/>',
-                noResultsText: '<p>No posts found</p>',
-                limit: 20,
-                fuzzy: true
-            });
-        </script>
+        <div class="list" opened$="{{opened}}" id="resultsContainer"></div>
     </template>
 
+    <script src="../../bower_components/simple-jekyll-search/dest/jekyll-search.js" type="text/javascript"></script>
     <script>
+        /*jshint multistr: true */
+        // Do search with json file and make results appear
+
         Polymer({
             is: 'my-search-bar',
 
@@ -148,6 +130,10 @@
                     type: String,
                     value: ''
                 },
+                searchjson: {
+                    type: String,
+                    value: 'search.json'
+                },
 
                 animationConfig: {
                     type: Object,
@@ -192,9 +178,9 @@
             },
 
             _onAnimationFinish: function() {
-                var results = document.querySelector('#results-container');
-                var searchIcon = document.querySelector('#search-icon');
-                var backIcon = document.querySelector('#back-icon');
+                var results = this.$.resultsContainer;
+                var searchIcon = this.$.searchIcon;
+                var backIcon = this.$.backIcon;
                 var middleBar = document.querySelector('#middleBar');
                 var bottomBar = document.querySelector('#bottomBar');
                 if (!this.opened) {
@@ -214,14 +200,33 @@
             },
 
             show: function() {
-                var results = document.querySelector('#results-container');
+                var results = this.$.resultsContainer;
                 results.style.display = 'block';
                 this.playAnimation('entry');
             },
 
             hide: function() {
                 this.playAnimation('exit');
                 this.opened = false;
+            },
+
+            ready: function () {
+                SimpleJekyllSearch({
+                    searchInput: this.$.input,
+                    resultsContainer: this.$.resultsContainer,
+                    json: this.searchjson,
+                    searchResultTemplate:
+                     '<a href="{url}" class="test"><paper-item> \
+                     <paper-item-body two-line> \
+                     <div>{title}</div> \
+                     <div secondary>{date}</div> \
+                     <paper-ripple></paper-ripple>\
+                     </paper-item-body> \
+                     </paper-item></a><hr/>',
+                    noResultsText: '<p>No posts found</p>',
+                    limit: 20,
+                    fuzzy: true
+                });
             }
         });
     </script>

app/scripts/jekyll-search.min.js

@@ -66,7 +66,7 @@
     @apply(--paper-font-body1);
   }
 
-  p, ul {
+  p, ul, ol {
     line-height: 24px;
     margin: 0 0 20px 0;
   }

app/styles/app-theme.html

@@ -17,6 +17,7 @@
     "polymer": "Polymer/polymer#^1.2.4",
     "fontawesome-iconset": "diego-d5000/fontawesome-iconset#~4.3.0",
     "iron-elements": "polymerelements/iron-elements#^1.0.8",
-    "paper-elements": "polymerelements/paper-elements#^1.0.7"
+    "paper-elements": "polymerelements/paper-elements#^1.0.7",
+    "simple-jekyll-search": "^1.1.1"
   }
 }