Homepage

Gemfile

@@ -48,9 +48,7 @@ group :development do
   gem 'spring'
 end
 
-group :test do
-  gem 'webmock'
-end
+gem 'webmock', group: :test
 
 gem 'blacklight', '>= 5.3.0'
 gem 'jettywrapper', '>= 2.0'
@@ -62,6 +60,7 @@ gem 'blacklight-marc', '~> 5.0'
 gem 'config', '~> 1.0.0.beta3'
 gem 'mods_display', '0.3.4'
 gem 'coderay'
+gem 'blacklight_range_limit'
 
 group :deployment do
   gem 'capistrano', '~> 3.0'

Gemfile.lock

@@ -55,6 +55,10 @@ GEM
       blacklight (~> 5.10)
       marc (>= 0.4.3, < 1.1)
       rails
+    blacklight_range_limit (5.2.0)
+      blacklight (~> 5.15)
+      jquery-rails
+      rails (>= 3.0, < 5.0)
     bootstrap-sass (3.3.5.1)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.3.0)
@@ -325,6 +329,7 @@ PLATFORMS
 DEPENDENCIES
   blacklight (>= 5.3.0)
   blacklight-marc (~> 5.0)
+  blacklight_range_limit
   byebug
   capistrano (~> 3.0)
   capistrano-bundler

Rakefile

@@ -14,6 +14,7 @@ task ci: [:environment] do
     Rake::Task['db:migrate'].invoke
     Rake::Task['jetty:download'].invoke
     Rake::Task['jetty:unzip'].invoke
+    Rake::Task['colligo:copy_solr_configs'].invoke
     Jettywrapper.wrap(Jettywrapper.load_config) do
       Rake::Task['spec'].invoke
     end

app/assets/javascripts/application.js

@@ -15,5 +15,9 @@
 //= require turbolinks//
 // Required by Blacklight
 //= require blacklight/blacklight
-
 //= require_tree .
+//
+// For blacklight_range_limit built-in JS, if you don't want it you don't need
+// this:
+//= require 'blacklight_range_limit'
+

app/assets/javascripts/browse_century.js

@@ -0,0 +1,200 @@
+window.onload = function () {
+  // Vertical slider
+  var century_slider = $("#century_slider");
+  var boundaries = century_slider.data('boundaries');
+  // var slider_ticks = century_slider.data('ticks');
+  var min = boundaries[0];
+  var max = boundaries[1];
+  //*******Century HORIZONTAL BAR CHART
+  //http://www.jqueryflottutorial.com/how-to-make-jquery-flot-horizontal-bar-chart.html
+  var century_panel = $('#century_panel');
+  var rawData = century_panel.data('rawdata');
+  var ticks = century_panel.data('ticks');
+  var pointer_lookup = century_panel.data('pointerlookup');
+  // var display_ratio = 1/(1.618 * 2);
+  century_panel.height( century_panel.width() * 2 );
+  var dataSet = [{ label: "", data: rawData, color: "#009933" }];
+  var options = {
+    series: {
+      bars: {
+        show: true
+      }
+    },
+    bars: {
+      align: "center",
+      barWidth: 80,
+      horizontal: true,
+      fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
+      lineWidth: 1
+    },
+    yaxis: {
+      //axisLabel: "Precious Metals",
+      //axisLabelUseCanvas: true,
+      //axisLabelFontSizePixels: 12,
+      //axisLabelFontFamily: 'Verdana, Arial',
+      //axisLabelPadding: 3,
+      //tickColor: "#5E5E5E",
+      ticks: ticks,
+      color: "white",
+      tickDecimals: 0
+    },
+    //legend: {
+    //  noColumns: 0,
+    //  labelBoxBorderColor: "#858585",
+    //  position: "ne"
+    //},
+    grid: {
+      hoverable: true,
+      borderWidth: 0,
+      backgroundColor: { colors: ["#ffffff", "#ffffff"] },
+      autoHighlight: true,
+      clickable: true
+    }
+  };
+  //******Plot the graph, draw the slider, and define event handlers
+  $(document).ready(function () {
+    var plot;
+    var browse_century = $("#browse_century");
+    var form = $("#century").find("form.range_limit");
+    var begin_el = form.find("input.range_begin");
+    var end_el = form.find("input.range_end");
+    // Plot the graph
+    plot = $.plot(browse_century, dataSet, options);
+    var find_segment_for = function_for_find_segment(pointer_lookup);
+    var last_segment = null;
+    // plothover event
+    browse_century.bind("plothover", function (event, pos, item) {
+      if (item) {
+        var segment = find_segment_for(pos.y);
+        var msg = segment.label  + ' (' + segment.count + ')';
+        if (segment == last_segment) {
+          $("#tooltip").remove();
+          last_segment = null;
+        } else {
+          $("#tooltip").remove();
+          showTooltip(item.pageX, item.pageY, '#000000', msg);
+          last_segment = segment;
+        }
+      }
+    });
+    // define the slider
+    var placeholder_input = $('<input type="text" data-slider-placeholder="true">').appendTo(century_slider);
+    if (placeholder_input.slider !== undefined) {
+      placeholder_input.slider({
+        min: min,
+        max: max,
+        value: [min, max],
+        tooltip_position: "left",
+        orientation: 'vertical',
+        reversed: true,
+        //step: 100,
+        //ticks: slider_ticks,
+        handle: 'custom'
+      });
+    }
+    // Match slider height to plot
+    var slider_body = $(".slider.slider-vertical");
+    slider_body.height( plot.height()-35 );
+    slider_body.css('margin-top',"25px");
+    // set values of form elements to min and max
+    begin_el.val(min);
+    end_el.val(max);
+    // on plot click
+    browse_century.bind("plotclick", function (event, pos, item) {
+      if ( plot.getSelection() == null) {
+        var segment = find_segment_for(pos.y);
+        plot.setSelection( normalized_selection(segment.from, segment.to));
+        begin_el.val(segment.from);
+        end_el.val(segment.to);
+        var slider_placeholder = century_slider.find("[data-slider-placeholder]");
+        if (slider_placeholder) {
+		  slider_placeholder.slider("setValue", [segment.from, segment.to]);
+        }
+      }
+    });
+    // on plot select
+    browse_century.bind("plotselected plotselecting", function(event, ranges) {
+      if (ranges != null ) {
+        var from = Math.floor(ranges.yaxis.from);
+        var to = Math.floor(ranges.yaxis.to);
+        begin_el.val(from);
+        end_el.val(to);
+        var slider_placeholder = century_slider.find("[data-slider-placeholder]");
+        if (slider_placeholder) {
+		  slider_placeholder.slider("setValue", [from, to+1]);
+        }
+      }
+    });
+    // on form input fields value change
+    form.find("input.range_begin, input.range_end").change(function () {
+      plot.setSelection( form_selection(form, min, max) , true );
+    });
+    begin_el.change( function() {
+      var val = BlacklightRangeLimit.parseNum($(this).val());
+      if ( isNaN(val)  || val < min) {
+        //for weird data, set slider at min
+        val = min;
+      }
+      var values = placeholder_input.data("slider").getValue();
+      values[0] = val;
+      placeholder_input.slider("setValue", values);
+    });
+    end_el.change( function() {
+      var val = BlacklightRangeLimit.parseNum($(this).val());
+      if ( isNaN(val) || val > max ) {
+        //weird entry, set slider to max
+        val = max;
+      }
+      var values = placeholder_input.data("slider").getValue();
+      values[1] = val;
+      placeholder_input.slider("setValue", values);
+    });
+    // on slider value change
+    var slider_placeholder = century_slider.find("[data-slider-placeholder]");
+    slider_placeholder.on("change", function(event) {
+      var values = $(event.target).data("slider").getValue();
+      begin_el.val(values[0]);
+      end_el.val(values[1]);
+      plot.setSelection( normalized_selection(values[0], Math.max(values[0], values[1]-1)), true);
+    });
+  });
+
+  function showTooltip(x, y, color, contents) {
+    $('<div id="tooltip">' + contents + '</div>').css({
+      position: 'absolute',
+      display: 'none',
+      top: y - 10,
+      left: x + 10,
+      border: '2px solid ' + color,
+      padding: '3px',
+      'font-size': '12px',
+      'border-radius': '5px',
+      'background-color': '#fff',
+      'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
+      opacity: 0.9
+    }).appendTo("body").fadeIn(200);
+  }
+
+  function function_for_find_segment(pointer_lookup_arr) {
+    return function(y_coord) {
+      for (var i = pointer_lookup_arr.length-1 ; i >= 0 ; i--) {
+        var hash = pointer_lookup_arr[i];
+        if (y_coord >= hash.from) {
+            return hash;
+        }
+      }
+      return pointer_lookup_arr[0];
+    };
+  }
+
+  function normalized_selection(min, max) {
+    max += 0.99999;
+    return {xaxis: { 'from':min, 'to':max}}
+  }
+
+  /*
+  function isInt(n) {
+    return n % 1 === 0;
+  }
+  */
+};

app/assets/javascripts/colligo.js

@@ -0,0 +1,7 @@
+// Tabs on homepage
+$(document).on('click', '.nav-tabs li', function() {
+  $(".nav-tabs li").removeClass("active");
+  $(this).addClass("active");
+  $("#main_search_field").val($(this).data("field"));
+  $("#q" ).focus();
+});

app/assets/stylesheets/application.css

@@ -10,6 +10,11 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
+ * Used by blacklight_range_limit
+ *= require  'blacklight_range_limit'
+ *
  *= require_tree .
  *= require_self
- */
+ *
+ *
+*/

app/assets/stylesheets/colligo.css.scss

@@ -0,0 +1,81 @@
+#header-navbar .navbar-brand {
+    width: 300px;
+    height: 50px;
+    background: transparent none no-repeat scroll left top;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-right: 0px;
+    margin-right: 20px;
+    padding-left: 5px;
+    text-indent: 50px;
+    font-size: 2.5em;
+}
+
+/* Home page search */
+.navbar-form .nav-tabs {
+  border-bottom: 0px;
+}
+
+.navbar-form .nav-tabs > li {
+  border-bottom: 1px solid #cccccc;
+}
+
+.navbar-form .nav-tabs > li:active {
+  border-bottom: 0px;
+}
+
+.navbar-form .input-group {
+  width: 100%;
+  border-top: 0px;
+  height: 35px;
+  border-top: 0px;
+}
+
+.navbar-form .input-group > input {
+  border-top: 0px;
+}
+
+h2, h3  {
+  color: #999;
+  font-weight: bold;
+}
+
+.panel-body .btn-secondary {
+  margin: 3px;
+  padding: 3px;
+  border: 1px solid #cccccc;
+  width: 100%;
+  text-align: left;
+}
+
+.panel-body .btn > img {
+  padding-right: 5px;
+}
+
+.panel-body .btn-primary-outline {
+  color: #0275D8;
+  background-color: transparent;
+  background-image: none;
+  border-color: #0275D8;
+}
+
+.panel-body .btn-primary {
+  margin: 0 5px 5px 0;
+}
+
+#century_panel {
+  height: 400px;
+  text-align: center;
+  float:left;
+  position: relative;
+  padding-left: 0px;
+}
+
+#century_slider {
+  height: auto;
+  width: 50px;
+  float: left;
+  position: relative;
+  padding-right: 0px;
+}