blacklight_range_limit 1.0.0pre1

data/lib/generators/blacklight_range_limit/templates/public/javascripts/flot/jquery.flot.selection.js

@@ -0,0 +1,328 @@
+/*
+Flot plugin for selecting regions.
+
+The plugin defines the following options:
+
+  selection: {
+    mode: null or "x" or "y" or "xy",
+    color: color
+  }
+
+Selection support is enabled by setting the mode to one of "x", "y" or
+"xy". In "x" mode, the user will only be able to specify the x range,
+similarly for "y" mode. For "xy", the selection becomes a rectangle
+where both ranges can be specified. "color" is color of the selection.
+
+When selection support is enabled, a "plotselected" event will be
+emitted on the DOM element you passed into the plot function. The
+event handler gets a parameter with the ranges selected on the axes,
+like this:
+
+  placeholder.bind("plotselected", function(event, ranges) {
+    alert("You selected " + ranges.xaxis.from + " to " + ranges.xaxis.to)
+    // similar for yaxis - with multiple axes, the extra ones are in
+    // x2axis, x3axis, ...
+  });
+
+The "plotselected" event is only fired when the user has finished
+making the selection. A "plotselecting" event is fired during the
+process with the same parameters as the "plotselected" event, in case
+you want to know what's happening while it's happening,
+
+A "plotunselected" event with no arguments is emitted when the user
+clicks the mouse to remove the selection.
+
+The plugin allso adds the following methods to the plot object:
+
+- setSelection(ranges, preventEvent)
+
+  Set the selection rectangle. The passed in ranges is on the same
+  form as returned in the "plotselected" event. If the selection mode
+  is "x", you should put in either an xaxis range, if the mode is "y"
+  you need to put in an yaxis range and both xaxis and yaxis if the
+  selection mode is "xy", like this:
+
+    setSelection({ xaxis: { from: 0, to: 10 }, yaxis: { from: 40, to: 60 } });
+
+  setSelection will trigger the "plotselected" event when called. If
+  you don't want that to happen, e.g. if you're inside a
+  "plotselected" handler, pass true as the second parameter. If you
+  are using multiple axes, you can specify the ranges on any of those,
+  e.g. as x2axis/x3axis/... instead of xaxis, the plugin picks the
+  first one it sees.
+  
+- clearSelection(preventEvent)
+
+  Clear the selection rectangle. Pass in true to avoid getting a
+  "plotunselected" event.
+
+- getSelection()
+
+  Returns the current selection in the same format as the
+  "plotselected" event. If there's currently no selection, the
+  function returns null.
+
+*/
+
+(function ($) {
+    function init(plot) {
+        var selection = {
+                first: { x: -1, y: -1}, second: { x: -1, y: -1},
+                show: false,
+                active: false
+            };
+
+        // FIXME: The drag handling implemented here should be
+        // abstracted out, there's some similar code from a library in
+        // the navigation plugin, this should be massaged a bit to fit
+        // the Flot cases here better and reused. Doing this would
+        // make this plugin much slimmer.
+        var savedhandlers = {};
+
+        function onMouseMove(e) {
+            if (selection.active) {
+                plot.getPlaceholder().trigger("plotselecting", [ getSelection() ]);
+
+                updateSelection(e);
+            }
+        }
+
+        function onMouseDown(e) {
+            if (e.which != 1)  // only accept left-click
+                return;
+            
+            // cancel out any text selections
+            document.body.focus();
+
+            // prevent text selection and drag in old-school browsers
+            if (document.onselectstart !== undefined && savedhandlers.onselectstart == null) {
+                savedhandlers.onselectstart = document.onselectstart;
+                document.onselectstart = function () { return false; };
+            }
+            if (document.ondrag !== undefined && savedhandlers.ondrag == null) {
+                savedhandlers.ondrag = document.ondrag;
+                document.ondrag = function () { return false; };
+            }
+
+            setSelectionPos(selection.first, e);
+
+            selection.active = true;
+            
+            $(document).one("mouseup", onMouseUp);
+        }
+
+        function onMouseUp(e) {
+            // revert drag stuff for old-school browsers
+            if (document.onselectstart !== undefined)
+                document.onselectstart = savedhandlers.onselectstart;
+            if (document.ondrag !== undefined)
+                document.ondrag = savedhandlers.ondrag;
+
+            // no more draggy-dee-drag
+            selection.active = false;
+            updateSelection(e);
+
+            if (selectionIsSane())
+                triggerSelectedEvent();
+            else {
+                // this counts as a clear
+                plot.getPlaceholder().trigger("plotunselected", [ ]);
+                plot.getPlaceholder().trigger("plotselecting", [ null ]);
+            }
+
+            return false;
+        }
+
+        function getSelection() {
+            if (!selectionIsSane())
+                return null;
+
+            var r = {}, c1 = selection.first, c2 = selection.second;
+            $.each(plot.getAxes(), function (name, axis) {
+                if (axis.used) {
+                    var p1 = axis.c2p(c1[axis.direction]), p2 = axis.c2p(c2[axis.direction]); 
+                    r[name] = { from: Math.min(p1, p2), to: Math.max(p1, p2) };
+                }
+            });
+            return r;
+        }
+
+        function triggerSelectedEvent() {
+            var r = getSelection();
+
+            plot.getPlaceholder().trigger("plotselected", [ r ]);
+
+            // backwards-compat stuff, to be removed in future
+            if (r.xaxis && r.yaxis)
+                plot.getPlaceholder().trigger("selected", [ { x1: r.xaxis.from, y1: r.yaxis.from, x2: r.xaxis.to, y2: r.yaxis.to } ]);
+        }
+
+        function clamp(min, value, max) {
+            return value < min ? min: (value > max ? max: value);
+        }
+
+        function setSelectionPos(pos, e) {
+            var o = plot.getOptions();
+            var offset = plot.getPlaceholder().offset();
+            var plotOffset = plot.getPlotOffset();
+            pos.x = clamp(0, e.pageX - offset.left - plotOffset.left, plot.width());
+            pos.y = clamp(0, e.pageY - offset.top - plotOffset.top, plot.height());
+
+            if (o.selection.mode == "y")
+                pos.x = pos == selection.first ? 0 : plot.width();
+
+            if (o.selection.mode == "x")
+                pos.y = pos == selection.first ? 0 : plot.height();
+        }
+
+        function updateSelection(pos) {
+            if (pos.pageX == null)
+                return;
+
+            setSelectionPos(selection.second, pos);
+            if (selectionIsSane()) {
+                selection.show = true;
+                plot.triggerRedrawOverlay();
+            }
+            else
+                clearSelection(true);
+        }
+
+        function clearSelection(preventEvent) {
+            if (selection.show) {
+                selection.show = false;
+                plot.triggerRedrawOverlay();
+                if (!preventEvent)
+                    plot.getPlaceholder().trigger("plotunselected", [ ]);
+            }
+        }
+
+        // taken from markings support
+        function extractRange(ranges, coord) {
+            var axis, from, to, axes, key;
+
+            axes = plot.getUsedAxes();
+            for (i = 0; i < axes.length; ++i) {
+                axis = axes[i];
+                if (axis.direction == coord) {
+                    key = coord + axis.n + "axis";
+                    if (!ranges[key] && axis.n == 1)
+                        key = coord + "axis"; // support x1axis as xaxis
+                    if (ranges[key]) {
+                        from = ranges[key].from;
+                        to = ranges[key].to;
+                        break;
+                    }
+                }
+            }
+
+            // backwards-compat stuff - to be removed in future
+            if (!ranges[key]) {
+                axis = coord == "x" ? plot.getXAxes()[0] : plot.getYAxes()[0];
+                from = ranges[coord + "1"];
+                to = ranges[coord + "2"];
+            }
+
+            // auto-reverse as an added bonus
+            if (from != null && to != null && from > to) {
+                var tmp = from;
+                from = to;
+                to = tmp;
+            }
+            
+            return { from: from, to: to, axis: axis };
+        }
+        
+        
+        function setSelection(ranges, preventEvent) {
+            var axis, range, o = plot.getOptions();
+
+            if (o.selection.mode == "y") {
+                selection.first.x = 0;
+                selection.second.x = plot.width();
+            }
+            else {
+                range = extractRange(ranges, "x");
+
+                selection.first.x = range.axis.p2c(range.from);
+                selection.second.x = range.axis.p2c(range.to);
+            }
+
+            if (o.selection.mode == "x") {
+                selection.first.y = 0;
+                selection.second.y = plot.height();
+            }
+            else {
+                range = extractRange(ranges, "y");
+
+                selection.first.y = range.axis.p2c(range.from);
+                selection.second.y = range.axis.p2c(range.to);
+            }
+
+            selection.show = true;
+            plot.triggerRedrawOverlay();
+            if (!preventEvent && selectionIsSane())
+                triggerSelectedEvent();
+        }
+
+        function selectionIsSane() {
+            var minSize = 5;
+            return Math.abs(selection.second.x - selection.first.x) >= minSize &&
+                Math.abs(selection.second.y - selection.first.y) >= minSize;
+        }
+
+        plot.clearSelection = clearSelection;
+        plot.setSelection = setSelection;
+        plot.getSelection = getSelection;
+
+        plot.hooks.bindEvents.push(function(plot, eventHolder) {
+            var o = plot.getOptions();
+            if (o.selection.mode != null)
+                eventHolder.mousemove(onMouseMove);
+
+            if (o.selection.mode != null)
+                eventHolder.mousedown(onMouseDown);
+        });
+
+
+        plot.hooks.drawOverlay.push(function (plot, ctx) {
+            // draw selection
+            if (selection.show && selectionIsSane()) {
+                var plotOffset = plot.getPlotOffset();
+                var o = plot.getOptions();
+
+                ctx.save();
+                ctx.translate(plotOffset.left, plotOffset.top);
+
+                var c = $.color.parse(o.selection.color);
+
+                ctx.strokeStyle = c.scale('a', 0.8).toString();
+                ctx.lineWidth = 1;
+                ctx.lineJoin = "round";
+                ctx.fillStyle = c.scale('a', 0.4).toString();
+
+                var x = Math.min(selection.first.x, selection.second.x),
+                    y = Math.min(selection.first.y, selection.second.y),
+                    w = Math.abs(selection.second.x - selection.first.x),
+                    h = Math.abs(selection.second.y - selection.first.y);
+
+                ctx.fillRect(x, y, w, h);
+                ctx.strokeRect(x, y, w, h);
+
+                ctx.restore();
+            }
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: {
+            selection: {
+                mode: null, // one of null, "x", "y" or "xy"
+                color: "#e8cfac"
+            }
+        },
+        name: 'selection',
+        version: '1.0'
+    });
+})(jQuery);

data/lib/generators/blacklight_range_limit/templates/public/javascripts/range_limit_distro_facets.js

@@ -0,0 +1,211 @@
+jQuery(document).ready(function($) {
+  // Facets already on the page? Turn em into a chart. 
+  $(".range_limit .profile .distribution.chart_js ul").each(function() {
+      turnIntoPlot($(this).parent());        
+  });
+    
+    
+  // Add AJAX fetched range facets if needed, and add a chart to em
+  $(".range_limit .profile .distribution a.load_distribution").each(function() {
+      var container = $(this).parent('div.distribution');
+  
+      $(container).load($(this).attr('href'), function(response, status) {
+          if ($(container).hasClass("chart_js") && status == "success" ) {
+            turnIntoPlot(container);
+          }
+      });     
+  });
+
+  function turnIntoPlot(container) {
+    wrapPrepareForFlot($(container), 
+      $(container).closest(".range_limit.limit_content"),
+      1/(1.618 * 2), // half a golden rectangle, why not. 
+      function(container) {
+        areaChart($(container));
+      });
+  }
+   
+     // Takes a div holding a ul of distribution segments produced by 
+    // blacklight_range_limit/_range_facets and makes it into
+    // a flot area chart. 
+    function areaChart(container) {      
+      //flot loaded? And canvas element supported.       
+      if (  domDependenciesMet()  ) {
+               
+        // Grab the data from the ul div
+        var series_data = new Array();
+        var pointer_lookup = new Array();
+        var x_ticks = new Array();
+        var min = parseInt($(container).find("ul li:first-child span.from").text());
+        var max = parseInt($(container).find("ul li:last-child span.to").text());
+        
+        $(container).find("ul li").each(function() {
+            var from = parseInt($(this).find("span.from").text());
+            var to = parseInt($(this).find("span.to").text());
+            var count = parseInt($(this).find("span.count").text());
+            var avg = (count / (to - from + 1));
+            
+            
+            //We use the avg as the y-coord, to make the area of each
+            //segment proportional to how many documents it holds. 
+            series_data.push( [from, avg ] );
+            series_data.push( [to+1, avg] );
+            
+            x_ticks.push(from);
+            
+            pointer_lookup.push({'from': from, 'to': to, 'count': count, 'label': $(this).find(".facet_select").text() });
+        });
+        var max_plus_one = parseInt($(container).find("ul li:last-child span.to").text())+1; 
+        x_ticks.push( max_plus_one );
+        
+
+
+        var plot;
+        var config = $(container).closest('.facet_limit').data('plot-config') || {};
+
+        try {
+          plot = $.plot($(container), [series_data],
+              $.extend(true, config, { 
+              yaxis: {  ticks: [], min: 0, autoscaleMargin: 0.1},
+            //xaxis: { ticks: x_ticks },
+            xaxis: { tickDecimals: 0 }, // force integer ticks
+            series: { lines: { fill: true, steps: true }},
+            grid: {clickable: true, hoverable: true, autoHighlight: false},
+            selection: {mode: "x"}
+          }));
+        }
+        catch(err) {
+          alert(err); 
+        }
+        
+        // Div initially hidden to show hover mouseover legend for
+        // each segment. 
+        $('<div class="subsection hover_legend ui-corner-all"></div>').css('display', 'none').insertAfter(container);
+        
+        find_segment_for = function_for_find_segment(pointer_lookup);
+        $(container).bind("plothover", function (event, pos, item) {
+            segment = find_segment_for(pos.x);
+            showHoverLegend(container, '<span class="label">' + segment.label + '</span> <span class="count">(' + segment.count + ')</span>');            
+        });
+        $(container).bind("mouseout", function() {
+          $(container).next(".hover_legend").hide();
+        });
+        $(container).bind("plotclick", function (event, pos, item) {
+            if ( plot.getSelection() == null) {
+              segment = find_segment_for(pos.x);
+              plot.setSelection( normalized_selection(segment.from, segment.to));
+            }
+        });
+        $(container).bind("plotselected plotselecting", function(event, ranges) {
+            if (ranges != null ) {
+              var from = Math.floor(ranges.xaxis.from); 
+              var to = Math.floor(ranges.xaxis.to);
+              
+              var form = $(container).closest(".limit_content").find("form.range_limit");
+              form.find("input.range_begin").val(from);
+              form.find("input.range_end").val(to);
+              
+              var slider_container = $(container).closest(".limit_content").find(".profile .range");           
+              slider_container.slider("values", 0, from);
+              slider_container.slider("values", 1, to+1);
+            }
+        });
+        
+        var form = $(container).closest(".limit_content").find("form.range_limit");        
+        form.find("input.range_begin, input.range_end").change(function () {
+           plot.setSelection( form_selection(form, min, max) , true );
+        });        
+        $(container).closest(".limit_content").find(".profile .range").bind("slide", function(event, ui) {
+           plot.setSelection( normalized_selection(ui.values[0], Math.max(ui.values[0], ui.values[1]-1)), true);
+        });
+       
+        // initially entirely selected, to match slider
+        plot.setSelection( {xaxis: { from:min, to:max+0.9999}}  );
+        
+        // try to make slider width/orientation match chart's
+        var slider_container = $(container).closest(".limit_content").find(".profile .range");
+        slider_container.width(plot.width());
+        slider_container.css('margin-right', 'auto');
+        slider_container.css('margin-left', 'auto');   
+        // And set slider min/max to match charts, for sure
+        slider_container.slider("option", "min", min);
+        slider_container.slider("option", "max", max+1);        
+      }
+    }
+    
+    
+    // Send endpoint to endpoint+0.99999 to have display
+    // more closely approximate limiting behavior esp
+    // at small resolutions. (Since we search on whole numbers,
+    // inclusive, but flot chart is decimal.)
+    function normalized_selection(min, max) {
+      max += 0.99999;
+      
+      return {xaxis: { 'from':min, 'to':max}}
+    }
+    
+    function form_selection(form, min, max) {
+      var begin_val = parseInt($(form).find("input.range_begin").val());
+      if (isNaN(begin_val) || begin_val < min) {
+        begin_val = min;
+      }        
+      var end_val = parseInt($(form).find("input.range_end").val());
+      if (isNaN(end_val) || end_val > max) {
+        end_val = max;
+      }
+      
+      return normalized_selection(begin_val, end_val);
+    }
+    
+    function function_for_find_segment(pointer_lookup_arr) {
+      return function(x_coord) {
+        for (var i = pointer_lookup_arr.length-1 ; i >= 0 ; i--) {
+          var hash = pointer_lookup_arr[i];
+          if (x_coord >= hash.from)
+            return hash;
+        }
+        return pointer_lookup_arr[0];
+      };
+    }
+        
+    function showHoverLegend(container, contents) {
+      var el = $(container).next(".hover_legend");
+
+      el.html(contents);                   
+      el.show();
+    }
+    
+    // Check if Flot is loaded, and if browser has support for
+    // canvas object, either natively or via IE excanvas. 
+    function domDependenciesMet() {    
+      var flotLoaded = (typeof $.plot != "undefined");
+      var canvasAvailable = ((typeof(document.createElement('canvas').getContext) != "undefined") || (typeof  window.CanvasRenderingContext2D != 'undefined' || typeof G_vmlCanvasManager != 'undefined'));
+
+      return (flotLoaded && canvasAvailable);
+    }
+
+   /* Set up dom for flot rendering: flot needs to render in a non-hidden
+     div with explicitly set width and height. The non-hidden thing
+     is annoying to us, since it might be in a hidden facet limit. 
+     Can we get away with moving it off-screen? Not JUST the flot
+     container, or it will render weird. But the whole parent
+     limit content, testing reveals we can. */    
+    function wrapPrepareForFlot(container, parent_section, widthToHeight, call_block) {                
+        var parent_originally_hidden = $(parent_section).css("display") == "none";
+        if (parent_originally_hidden) {
+          $(parent_section).show();       
+        }
+        $(container).width( $(parent_section).width() );
+        $(container).height( $(parent_section).width() * widthToHeight );
+        if (parent_originally_hidden) {
+          parent_section.addClass("ui-helper-hidden-accessible");
+        }
+        
+        call_block(container);
+        
+        if (parent_originally_hidden) {
+          $(parent_section).removeClass("ui-helper-hidden-accessible");
+          $(parent_section).hide();
+        }
+    }
+});