First version of a working 'focus selection' plugin

ironfroggy · Sep 8, 2009 · 0758d0b · 0758d0b
commit 0758d0b
Show file tree

Hide file tree

Showing 4 changed files with 3,688 additions and 0 deletions.
diff --git a/focusselection.css b/focusselection.css
@@ -0,0 +1,31 @@
+#focusselection {
+    width: 300px;
+    height: 100px;
+    border: 1px solid black;
+}
+
+.rangelabel {
+    float: left;
+    z-index: 100;
+}
+
+.rangelabelend {
+    z-index: 100;
+}
+
+.rangestop {
+    position: relative;
+    float: right;
+}
+
+.rangestart {
+    position: relative;
+}
+
+.highlight {
+    background: yellow;
+    position: absolute;
+    width: 50px;
+    height: 20px;
+    z-index: -100;
+}
diff --git a/focusselection.html b/focusselection.html
@@ -0,0 +1,34 @@
+<html>
+
+<head>
+<title>Focus Selection Demo</title>
+<link rel="stylesheet" href="focusselection.css"></link>
+<script type="text/javascript" src="jquery_dev.js"></script>
+<script type="text/javascript" src="jquery.focusselection.js"></script>
+<script type="text/javascript">
+<!--
+$(document).ready(function(){
+    $('#focusselection').focusselection(
+    {
+    callback: function(range) { $('#range').html(range.toString()); },
+    num_labels: 10
+    });
+});
+-->
+</script>
+</head>
+
+<body>
+<h1>Focus Selection Demo</h1>
+
+<div id="focusselection">
+  <div class="highlight">
+    <span class="rangestart"><span></span> ...</span>
+    <span class="rangestop">... <span></span></span>
+  </div>
+</div>
+
+<p>range: <span id="range"></span></p>
+
+</body>
+</html>
diff --git a/jquery.focusselection.js b/jquery.focusselection.js
@@ -0,0 +1,74 @@
+(function($){
+
+    var defaults = {
+	selectionrange: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+	num_labels: 5,
+	callback: function (range) {}
+    };
+
+    $.fn.focusselection = function(options) {
+	var element = $(this);
+	if (element.length == 0) {
+	    return;
+	}
+
+	options = $.extend(defaults, options);
+	element.data('options', options);
+
+	addLabels(element, options.selectionrange);
+
+	element.find('.highlight')
+
+	element.mousemove(function(event) {
+		var x = event.clientX - element.position().left;
+		var y = event.clientY - element.position().top;
+		var width = Math.ceil(options.selectionrange.length * (y / element.height()));
+		var center_i = Math.ceil(options.selectionrange.length * (x / element.width()));
+
+		var range_start = Math.max(0, center_i - width / 2);
+		var range_stop;
+		if (element.find('.rangelabel').height() > y) {
+		    range_stop = range_start + 1;
+		} else {
+		    range_stop = Math.min(options.selectionrange.length, center_i + width / 2);
+		}
+		var range = options.selectionrange.slice(range_start, range_stop);
+
+		var highlight_width = Math.min(element.width(), Math.max(30, (y / element.height()) * element.width()));
+		var highlight_left = event.clientX - highlight_width / 2;
+		if (highlight_left + highlight_width > element.width()) {
+		    highlight_width = element.width() - highlight_left + element.position().left;
+		}
+		if (highlight_left < element.position().left) {
+		    highlight_width = highlight_width + (highlight_left - element.position().left);
+		    highlight_left = element.position().left;
+		}
+		element.find('.highlight').css({ height: Math.max(20, y), left: highlight_left, width: highlight_width });
+
+		element.find('.rangestart span').html(Math.ceil(range[0].toString()));
+		element.find('.rangestart').css({ left: element.position().left, top: y-30 });
+		element.find('.rangestop span').html(Math.floor(range[range.length-1].toString()));
+		element.find('.rangestop').css({ top: y-30 });
+
+		options.callback(range);
+	    });
+    };
+
+    function addLabels(element, range) {
+	var options = element.data('options');
+	element.find('.rangelabel').remove();
+	var steps = options.num_labels;
+	var until = steps - 1;
+	var values = [];
+	for (var i=0; i<steps; i++) {
+	    values.push(i/(steps-1));
+	}
+	$.each(values, function(i, x) {
+		element.append('<span class="rangelabel' + (i==values.length-1 ? 'end' : '') + '">' + range[Math.floor((range.length-1) * x)] + '</span>');
+	    });
+	var last_width = element.find('.rangelabelend').width();
+	var others_width = (element.width() - last_width) / until;
+	element.find('.rangelabel').width(Math.floor(others_width));
+    };
+
+})($)