Add Google Custom Search

gulpfile.js

@@ -1,5 +1,9 @@
 var gulp = require('gulp')
   , glob = require("glob")
+  // , browserify = require('browserify')
+  // , buffer = require('vinyl-buffer')
+  // , reactify = require('reactify')
+  // , source = require('vinyl-source-stream')
   , webserver = require('gulp-webserver')
   , Constants = require('./constants.json')
   , minimist = require('minimist')
@@ -24,11 +28,13 @@ env = getEnviroment();
 options = {
   docs: 'parts'
 , dest: 'dest'
-, stylesheets: 'redbooth-theme/assets/stylesheets/**/*.scss'
-, javascripts: 'redbooth-theme/assets/javascripts/**/*.js'
+, stylesheets: './redbooth-theme/assets/stylesheets/**/*.scss'
+, src_javascripts: 'redbooth-theme/assets/javascripts/**/*.js'
+, js_src_folder: './redbooth-theme/assets/javascripts/'
 , jades: 'redbooth-theme/**/*.jade'
 , images: Constants[env].root_url + 'assets/images'
 , src_images: 'redbooth-theme/assets/images/**/*'
+, src_fonts: 'redbooth-theme/assets/fonts/**/*'
 , redbooth_theme: path.resolve(__dirname, 'redbooth-theme', 'redbooth.jade')
 };
 
@@ -115,10 +121,38 @@ gulp.task('copy_images', ['clean'], function () {
     .pipe(gulp.dest(options.dest + '/assets/images'));
 });
 
+gulp.task('copy_fonts', ['clean'], function () {
+  return gulp.src(options.src_fonts)
+    .pipe(watch(options.src_fonts))
+    .pipe(gulp.dest(options.dest + '/assets/fonts'));
+});
+
+// Our JS task. It will Browserify our code and compile React JSX files.
+// gulp.task('browserify', function(){
+//   var is_production = getEnviroment() === 'production' ? true : false
+//     , bundler = browserify();
+
+//   // use the reactify transform
+//   bundler.transform(reactify);
+//   bundler.add(options.jsx_search);
+//   return bundler.bundle()
+//     .pipe(source('bundle.js'))
+//     .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
+//     .pipe(gulpif(is_production, uglify())) // now gulp-uglify works
+//     .pipe(gulp.dest(options.dest + '/assets/javascripts'));
+// });
+
+// gulp.task('watch-browserify', ['clean'], function() {
+//   watch(options.jsx_search, function() {
+//     gulp.start('browserify');
+//   });
+// });
+
 gulp.task('javascripts', ['clean'], function () {
   var is_production = getEnviroment() === 'production' ? true : false;
 
-  return gulp.src(options.javascripts)
+  return gulp.src(options.src_javascripts)
+    .pipe(watch(options.src_javascripts))
     .pipe(gulpif(is_production, concat('main.js')))
     .pipe(gulpif(is_production, uglify()))
     .pipe(gulp.dest(options.dest + '/assets/javascripts'));
@@ -153,7 +187,7 @@ gulp.task('webserver', function() {
 });
 
 // Shared tasks bettwen production and development
-gulp.task('common', ['copy_images', 'javascripts', 'sass', 'generate_docs']);
+gulp.task('common', ['copy_images', 'copy_fonts', 'javascripts', 'sass', 'generate_docs']);
 
 // Development
 gulp.task('default', ['common', 'webserver']);

redbooth-theme/_footer.jade

@@ -1,3 +1,12 @@
+mixin GoogleSearchResults()
+  .js-google-search-results.modal.fade.google-search-results
+    .modal-dialog
+      .modal-content
+        .modal-body
+          h3= 'Search Results'
+        .modal-footer
+          button.btn.btn-default(type='button', 'data-dismiss'='modal')='Close'
+
 mixin RedboothFooter()
   footer.rb-footer
     .container

redbooth-theme/_google_search_input.jade

@@ -0,0 +1,63 @@
+mixin GoogleSearchEngineInput(gcse_code)
+  .js-google-search-box
+    script(type='text/javascript').
+      (function() {
+        var cx = "#{gcse_code}";
+        var gcse = document.createElement('script');
+        gcse.type = 'text/javascript';
+        gcse.async = true;
+        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
+            '//www.google.com/cse/cse.js?cx=' + cx;
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(gcse, s);
+      })();
+
+      function onGoogleSearchLoaded () {
+        $('input.gsc-input').keyup(function (event) {
+          if(event.keyCode === 13 || event.which === 13) {
+            //- TODO: Append search results HERE
+            //- $('#search-dialog').append($('#dialog'));
+            //- $('.js-google-search-results').modal('show')
+
+          }
+        });
+      }
+
+      // Registed callback after Google Custom Search v2 loads
+      window.__gcse = {
+        callback: onGoogleSearchLoaded
+      };
+
+    | <gcse:searchbox></gcse:searchbox>
+
+  //-   google.load('search', '1', {language : 'en'});
+  //-   google.setOnLoadCallback(function() {
+  //-     var customSearchControl = new google.search.CustomSearchControl("#{gcse_code}");
+  //-       , options;
+
+  //-     customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
+  //-     customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
+
+  //-     options = new google.search.DrawOptions();
+  //-     options.setSearchFormRoot('js-google-search-box');
+  //-     options.setAutoComplete(true);
+
+  //-     customSearchControl.draw('dialog', options);
+  //-     customSearchControl.setSearchCompleteCallback(this, CallBackDisplayDialog);
+  //-     customSearchControl.draw('gcs-widget', options);
+
+
+  //-   // establish a keep callback
+  //-   function CallBackDisplayDialog(result) {
+  //-     $('#search-dialog').append($('#dialog'));
+  //-     $('.js-google-search-results').modal('show')
+  //-   }
+
+  //- #js-google-search-box.cse-search-form(style='width: 100%;')
+  //-   form.gsc-search-box
+  //-     .gsc-input
+  //-       input.gsc-input(autocomplete='off', type='text', size='10', name='search')
+
+  //- #dialog(title='Search Results')
+  //-   p
+

redbooth-theme/_header.jade

@@ -1,6 +1,6 @@
 - var base_url = '/api/';
 
-mixin RedboothHeader()
+mixin RedboothHeader(gcse_code)
   header.banner.navbar.navbar-default.navbar-static-top
     .container
       .navbar-header
@@ -12,7 +12,15 @@ mixin RedboothHeader()
         a.navbar-brand.text-hide(href='https://redbooth.com/api/')='Developer Portal'
 
       nav.collapse.navbar-collapse(role='navigation')
-        .navbar-form.with-icon.navbar-right
+        if (gcse_code)
+          .navbar-form.with-icon.navbar-right
+            .form-group
+              i.fa.fa-search.search-icon
+              .js-search-box
+                form.gsc-search-box
+                  .gsc-input
+                    input.gsc-input(autocomplete='off', type='text', size='10', name='search')
+
         ul#menu-top_menu.nav.navbar-nav.navbar-right.navbar-nav--rb-top
           li.active
             a(href= (base_url + 'api-docs/'))= 'Docs'