Implement feature #1652 google custom search support. (#1667)

Implement feature #1652 google custom search support. For now we only support the look and feel "results only" and the engine must be set to use that layout. Add a google section to the search providers and search_form and search layout.

Close #1652

_config.yml

@@ -60,13 +60,15 @@ atom_feed:
   path                   : # blank (default) uses feed.xml
 search                   : # true, false (default)
 search_full_content      : # true, false (default)
-search_provider          : # lunr (default), algolia
+search_provider          : # lunr (default), algolia, google
 algolia:
   application_id         : # YOUR_APPLICATION_ID
   index_name             : # YOUR_INDEX_NAME
   search_only_api_key    : # YOUR_SEARCH_ONLY_API_KEY
   powered_by             : # true (default), false
-
+google:
+  search_engine_id       : # YOUR_SEARCH_ENGINE_ID
+  instant_search         : # false (default), true
 # SEO Related
 google_site_verification :
 bing_site_verification   :

_includes/scripts.html

@@ -17,10 +17,12 @@
   {%- case search_provider -%}
     {%- when "lunr" -%}
       {% include search/lunr-search-scripts.html %}
+    {%- when "google" -%}
+      {% include search/google-search-scripts.html %}
     {%- when "algolia" -%}
       {% include search/algolia-search-scripts.html %}
   {%- endcase -%}
 {% endif %}
 
 {% include analytics.html %}
-{% include /comments-providers/scripts.html %}
+{% include /comments-providers/scripts.html %}

_includes/search/google-search-scripts.html

@@ -0,0 +1,31 @@
+<script>
+    (function () {
+        var cx = '{{ site.google.search_engine_id }}';
+        var gcse = document.createElement('script');
+        gcse.type = 'text/javascript';
+        gcse.async = true;
+        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(gcse, s);
+    })();
+
+    function googleCustomSearchExecute() {
+        var input = document.getElementById('cse-search-input-box-id');
+        var element = google.search.cse.element.getElement('searchresults-only0');
+        if (input.value == '') {
+            element.clearAllResults();
+        } else {
+            element.execute(input.value);
+        }
+        return false;
+    }
+
+    {% if site.google.instant_search %}
+    $(document).ready(function () {
+        $('input#cse-search-input-box-id').on('keyup', function () {
+            googleCustomSearchExecute();
+        }
+        );
+    });
+    {% endif %}
+</script>

_includes/search/search_form.html

@@ -4,6 +4,13 @@
   {%- when "lunr" -%}
     <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
     <div id="results" class="results"></div>
+  {%- when "google" -%}
+    <form onsubmit="return executeQuery();" id="cse-search-box-form-id">
+    <input type="text" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    </form>
+    <div id="results" class="results">
+        <gcse:searchresults-only></gcse:searchresults-only>    
+    </div>
   {%- when "algolia" -%}
     <div class="search-searchbar"></div>
     <div class="search-hits"></div>

_layouts/search.html

@@ -27,6 +27,13 @@ layout: default
       {%- when "lunr" -%}
         <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
         <div id="results" class="results"></div>
+      {%- when "google" -%}
+        <form onsubmit="return executeQuery();" id="cse-search-box-form-id">
+        <input type="text" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+        </form>
+        <div id="results" class="results">
+            <gcse:searchresults-only></gcse:searchresults-only>    
+        </div>
       {%- when "algolia" -%}
         <div class="search-searchbar"></div>
         <div class="search-hits"></div>