Added basic version of InstantSearch

mainred · Oct 5, 2018 · be2dd07 · be2dd07
1 parent 6a4e507
commit be2dd07
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 15 deletions.
diff --git a/_layouts/docwithnav.html b/_layouts/docwithnav.html
@@ -49,9 +49,11 @@
     <link rel="stylesheet" href="{{site.baseurl}}/css/style.css"/>
     <link rel="stylesheet" href="{{site.baseurl}}/css/search.css"/>
     <link rel="stylesheet" href="{{site.baseurl}}/css/plugins/offcanvas.css"/>
+    <link rel="stylesheet" href="{{site.baseurl}}/css/instantsearch/instantsearch.min.css"/>
     <link href="https://www.projectcalico.org/wp-content/themes/dante/css/font-awesome.min.css" rel="stylesheet">
     <script src="{{site.baseurl}}/js/jquery-2.2.0.min.js"></script>
     <script src="{{site.baseurl}}/js/bootstrap/bootstrap.min.js"></script>
+    <script src="{{site.baseurl}}/js/instantsearch/instantsearch.min.js"></script>
     <script src="{{site.baseurl}}/js/script.js"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -195,12 +197,15 @@
           </p>
           <div class="col-xs-6 col-sm-4 col-md-3 sidebar-offcanvas">
             <div class="row">
-              <input type=text id="search-input">
-              <div class="search-results"></div>
+              <div class="search-input-container"></div>
+              <div class="search-container">
+                <div class="search-container__results"></div>
+                <div class="search-container__pagination"></div>
+              </div>
             </div>
             <div id="sidebar">
             	{% include sidebar.html sidebar=this_pages_navbar.toc prefix="nav" %}
-			</div>
+            </div>
           </div>
           <div class="col-xs-12 col-sm-8 col-md-9">
             <div id="content-main">
@@ -230,7 +235,7 @@ <h1>{{ page.title }}</h1>
 
     <script>
       $(document).ready(function() {
-        window.initializeSearch('{{page.version}}', '#search-input', '.search-results');
+        window.initializeSearch('{{page.version}}', '.search-input-container', '.search-container', '.search-container__results', '.search-container__pagination');
       });
     </script>
   </body>

diff --git a/css/instantsearch/instantsearch.min.css b/css/instantsearch/instantsearch.min.css
diff --git a/css/search.css b/css/search.css
diff --git a/css/search.scss b/css/search.scss
@@ -0,0 +1,27 @@
+.search-container {
+    display: none;
+}
+
+.ais-content {
+    color: #63676d;
+}
+
+.ais-lvl0 {
+    color: black;
+    font-size: 1.1em
+}
+
+.ais-result {
+    margin-bottom: 15px;
+    border-left: solid 1px #ddd;
+    padding-left: 10px;
+}
+
+input:focus {
+    outline: none;
+}
+
+.popover {
+    max-width: unset;
+    width: 500px;
+}
diff --git a/js/instantsearch/instantsearch.min.js b/js/instantsearch/instantsearch.min.js
diff --git a/js/searchConfig.js b/js/searchConfig.js
@@ -1,5 +1,6 @@
-$(document).ready(function () {
-    window.initializeSearch = function (currentDocVersion, searchInputSelector, searchResultsSelector) {
+(function () {
+    window.initializeSearch = function (currentDocVersion, searchInputSelector, searchContentSelector,
+        searchResultsSelector, searchPaginationSelector) {
         if (!!currentDocVersion || typeof (currentDocVersion) !== string) {
             throw new Error('Provide a version');
         }
@@ -8,17 +9,115 @@ $(document).ready(function () {
             throw new Error('Provide a search input selector');
         }
 
+        if (!!searchContentSelector || typeof (searchContentSelector) !== string) {
+            throw new Error('Provide a search content selector');
+        }
+
         if (!!searchResultsSelector || typeof (searchResultsSelector) !== string) {
             throw new Error('Provide a search results selector');
         }
 
-        // Initialize search here. Note the algoliaOptions setting.
-        // docsearch({
-        //     apiKey: '99def7ba73ea2430f7f42383148fe57a',
-        //     indexName: 'projectcalico',
-        //     inputSelector: targetElementSelector,
-        //     debug: false,
-        //     algoliaOptions: { 'facetFilters': ['version:' + currentDocVersion] }
-        // });
+        if (!!searchPaginationSelector || typeof (searchPaginationSelector) !== string) {
+            throw new Error('Provide a search pagination selector');
+        }
+
+        $(document).ready(function () {
+            // Initialize search here. Note the algoliaOptions setting.
+            // docsearch({
+            //     apiKey: '99def7ba73ea2430f7f42383148fe57a',
+            //     indexName: 'projectcalico',
+            //     inputSelector: targetElementSelector,
+            //     debug: false,
+            //     algoliaOptions: { 'facetFilters': ['version:' + currentDocVersion] }
+            // });
+            initializeInstantSearch(searchInputSelector, searchResultsSelector, searchPaginationSelector);
+            initializePopover(searchContentSelector, searchInputSelector);
+            hidePopoversOnClickOutside();
+        });
     };
-});
+
+    var searchResultTemplate = '\
+            <div class="search-result ais-result">\
+                {{#hierarchy.lvl0}}\
+                <h3 class="search-result__category ais-lvl0">\
+                    <a href="{{url}}" >\
+                        {{{_highlightResult.hierarchy.lvl0.value}}}\
+                    </a>\
+                </h3>\
+                {{/hierarchy.lvl0}}\
+                {{#hierarchy.lvl1}}\
+                <h4 class="search-result__subcategory ais-lvl1">\
+                    <a href="{{url}}">\
+                        {{{_highlightResult.hierarchy.lvl1.value}}}\
+                    </a>\
+                </h4>\
+                {{/hierarchy.lvl1}}\
+                {{#hierarchy.lvl2}}\
+                <h5 class="search-result__subsubcategory ais-lvl2">\
+                    <a href="{{url}}">\
+                        {{{_highlightResult.hierarchy.lvl2.value}}}\
+                    </a>\
+                </h5>\
+                {{/hierarchy.lvl2}}\
+                {{#content}}\
+                <div class="search-result__content ais-content">\
+                    <a href="{{url}}" >\
+                        {{{_snippetResult.content.value}}}\
+                    </a>\
+                </div>\
+                {{/content}}\
+            </div>\
+        ';
+
+    function initializeInstantSearch(inputSelector, resultsSelector, paginationSelector) {
+        // TODO:
+        var search = instantsearch({
+            appId: 'BH4D9OD16A',
+            apiKey: 'e574b72c1301f8a28e49ec9644096c79',
+            indexName: 'apereo',
+            routing: true
+        });
+        search.addWidget(instantsearch.widgets.searchBox({
+            container: inputSelector,
+            placeholder: 'Search in the documentation',
+            autofocus: false,
+            poweredBy: true
+        }));
+        search.addWidget(instantsearch.widgets.hits({
+            container: resultsSelector,
+            templates: {
+                empty: 'No results',
+                item: searchResultTemplate
+            },
+            hitsPerPage: 6
+        }));
+        search.addWidget(instantsearch.widgets.pagination({
+            container: paginationSelector,
+            maxPages: 20,
+            scrollTo: false
+        }));
+        search.start();
+    }
+
+    function initializePopover(searchContentSelector, searchInputSelector) {
+        var content = $(searchContentSelector).children();
+        $(searchInputSelector).popover({
+            html: true,
+            content: function () {
+                return content;
+            }
+        });
+    }
+
+    function hidePopoversOnClickOutside() {
+        $('body').on('click', function (e) {
+            $('[data-toggle="popover"]').each(function () {
+                if (!$(this).is(e.target)
+                    && $(this).has(e.target).length === 0
+                    && $('.popover').has(e.target).length === 0) {
+                    $(this).popover('hide');
+                }
+            });
+        });
+    }
+})();