milkbread/RKToolbox.js

## index.html
<!DOCTYPE html>
<html>
<head>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="RKToolbox.js"></script>

 <style>
  @import url(RKToolbox_0.1.css);


 </style>
</head>
<body>
<div id=timeline></div>


<script>
var timeline = new timeLine(d3.select("#timeline"),900,200);
timeline.addScalebar([new Date(2012, 0, 1), new Date(2013, 0, 1)]);

var indicatorPositions = []
function clickAction(){

	indicatorPositions=timeline.getIndicPosition()
	//return "hallohohooo"
}


//console.log(test.getListener())
timeline.addClickListener(clickAction);
//timeline.reDefineIndicators(40)
timeline.reDefineIndicators(4, 2)
//console.log(test.getListener())


</script>

</body>
</html>

## RKToolbox.js
//should be able to define: indicWidth, indicSideWidth

function timeLine(container,width,height){
 //initialize some variables
 var indicWidth = 12, indicSideWidth = 4, indicatorGroup, indicatorLeftpart, indicatorRightpart, indicatorLeft, indicatorRight;

 var axisScale = d3.time.scale();

 var timelineSVG = container.append("svg")
	.attr("width", width)
	.attr("height", height);
 var timelineGroup = timelineSVG.append("g");

 //this is the background of the timeline
 timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
			.attr("id","_background")

 var xAxisGroup = timelineGroup.append("g");


 //this is the interactive area of the timeline
 var timeline = timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
			.attr("id","timelineSVG")
			.on("mousemove",overAction);
 defineIndicators();

 //add the scalebar...has to be done from 'outside'...returns the 'xAxisGroup'
 this.addScalebar=addScalebar;
 function addScalebar(domain_){
	//add the text and something like a 'scalebar'
	axisScale.domain(domain_).range([0,width]);  //tutorial for the time scale: http://bl.ocks.org/mbostock/4149176

	var xAxis = d3.svg.axis()
		          .scale(axisScale);
	xAxisGroup.call(xAxis).attr("class", "axis");
	xAxisGroup.selectAll("text").attr("transform","rotate(-90, 0, 0)");

	xAxisGroup.attr("transform","translate(0,"+(height/2)+")");

	return xAxisGroup;
 }

 //variables of the functions
 var indicBools = [false,false],
 	indicPos = [0,width];
 //identic for left and right...just call the 'downAction'
 function leftDownAction(){
	var value = (d3.mouse(this)[0]);
	downAction(value, 'left')
 }
 function rightDownAction(){
	var value = (d3.mouse(this)[0]);
	downAction(value, 'right')
 }
 //check which side called me and check if indicator is currently static or dynamic
 function downAction(value, side){
  if(side=='left'){
	if(indicBools[0]==false)indicBools[0]=true;
	else {indicPos[0]=value;indicBools[0]=false;indicatorLeftpart.transition().duration(1000).attr("x",value+indicWidth);indicatorLeft.transition().attr("x",value)}
  }
  else if(side=='right'){
	if(indicBools[1]==false)indicBools[1]=true;
	else {indicPos[1]=value;indicBools[1]=false;indicatorRightpart.transition().duration(1000).attr("x",value-indicSideWidth);indicatorRight.transition().attr("x",value)}
  }
  //execute the user defined function for a click event...when there is one
  if(clickListenerTest==true && ((indicBools[1]==false && side=='right')|| (indicBools[0]==false && side=='left')))clickListener();
 }
 //check if and which side was clicked and transition its position
 function overAction(){
	var dur = 100;
	if(indicBools[0]==true){
	var value = (d3.mouse(this)[0]);
	if(indicPos[1]>value){
		indicatorLeft.attr("x",value)
		indicatorLeftpart.attr("x",value-indicSideWidth)
	}
	}
	else if(indicBools[1]==true){
	var value = (d3.mouse(this)[0]);
	if(indicPos[0]<value){
		indicatorRight.attr("x",value)
		indicatorRightpart.attr("x",value+indicWidth)
	}
	}
 }
 this.getIndicPosition=getIndicPosition;
 function getIndicPosition(){
		return [axisScale(indicPos[0]),axisScale(indicPos[1])];
 }

 var clickListenerTest = false;
 this.addClickListener=addClickListener;
 function addClickListener(listener_){
        clickListener = listener_;
	clickListenerTest = true;
 }
 this.getClickListener=getClickListener;
 function getClickListener(){
        return clickListener();
 }
 this.defineIndicators=defineIndicators;
 function defineIndicators(){
	 //add some indicators
	 //short side of the main left indicator
	 indicatorGroup = timelineGroup.append("g")
	 indicatorLeftpart = indicatorGroup.append("rect").attr("x", indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height)
		.attr("id","indiSide");
	 //short side of the main right indicator
	 indicatorRightpart = indicatorGroup.append("rect").attr("x", width-indicSideWidth-indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height).attr("id","indiSide");
	 //left main indicator
	 indicatorLeft = indicatorGroup.append("rect").attr("x", 0).attr("y", 0) .attr("width", indicWidth).attr("height", height)
				.attr("id","indicatorLeft")
				.on("mousedown",leftDownAction);
	 //right main indicator
	 indicatorRight = indicatorGroup.append("rect").attr("x", width-indicWidth).attr("y", 0).attr("width", indicWidth).attr("height", height)
				.attr("id","indicatorLeft")
				.on("mousedown",rightDownAction);
 }
 this.reDefineIndicators=reDefineIndicators;
 function reDefineIndicators(width, side){
		if(side!=undefined)indicSideWidth = side;
		indicWidth = width;
		indicatorGroup.selectAll("rect").remove()
		defineIndicators();

 }

}


function dummyFunction(this_){
	console.log("This is the 'mousedown'...add a function to the '.downAction()' for action!")
	var value = (d3.mouse(this_)[0]);
	console.log("Currently, I can offer you the mouseposition: ",value)
}

## RKToolbox_0.1.css
 #timeline{
   fill:rgba(0,0,0,0.7);
  }
  #indicatorLeft{
   fill:rgba(255,255,255,0.4);
  }
  #indiSide{
   fill:rgba(255,0,0,0.3);
  }
  #_background{
   fill:rgba(100,100,100,1);
  }
  .axis path,
  .axis line{
   fill: none;
   stroke: white;
   stroke-width:4;
   shape-rendering: crispEdges;
   opacity:0.2;
  }
  .axis text {
   font-family: sans-serif;
   font-size: 30px;
   text-anchor:left;
   fill:#0f0;
   opacity:0.8;

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="RKToolbox.js"></script>

	<style>
	@import url(RKToolbox_0.1.css);


	</style>
	</head>
	<body>
	<div id=timeline></div>


	<script>
	var timeline = new timeLine(d3.select("#timeline"),900,200);
	timeline.addScalebar([new Date(2012, 0, 1), new Date(2013, 0, 1)]);

	var indicatorPositions = []
	function clickAction(){

	indicatorPositions=timeline.getIndicPosition()
	//return "hallohohooo"
	}


	//console.log(test.getListener())
	timeline.addClickListener(clickAction);
	//timeline.reDefineIndicators(40)
	timeline.reDefineIndicators(4, 2)
	//console.log(test.getListener())




	</script>

	</body>
	</html>
	//should be able to define: indicWidth, indicSideWidth

	function timeLine(container,width,height){
	//initialize some variables
	var indicWidth = 12, indicSideWidth = 4, indicatorGroup, indicatorLeftpart, indicatorRightpart, indicatorLeft, indicatorRight;

	var axisScale = d3.time.scale();

	var timelineSVG = container.append("svg")
	.attr("width", width)
	.attr("height", height);
	var timelineGroup = timelineSVG.append("g");

	//this is the background of the timeline
	timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
	.attr("id","_background")

	var xAxisGroup = timelineGroup.append("g");


	//this is the interactive area of the timeline
	var timeline = timelineGroup.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)
	.attr("id","timelineSVG")
	.on("mousemove",overAction);
	defineIndicators();

	//add the scalebar...has to be done from 'outside'...returns the 'xAxisGroup'
	this.addScalebar=addScalebar;
	function addScalebar(domain_){
	//add the text and something like a 'scalebar'
	axisScale.domain(domain_).range([0,width]); //tutorial for the time scale: http://bl.ocks.org/mbostock/4149176

	var xAxis = d3.svg.axis()
	.scale(axisScale);
	xAxisGroup.call(xAxis).attr("class", "axis");
	xAxisGroup.selectAll("text").attr("transform","rotate(-90, 0, 0)");

	xAxisGroup.attr("transform","translate(0,"+(height/2)+")");

	return xAxisGroup;
	}

	//variables of the functions
	var indicBools = [false,false],
	indicPos = [0,width];
	//identic for left and right...just call the 'downAction'
	function leftDownAction(){
	var value = (d3.mouse(this)[0]);
	downAction(value, 'left')
	}
	function rightDownAction(){
	var value = (d3.mouse(this)[0]);
	downAction(value, 'right')
	}
	//check which side called me and check if indicator is currently static or dynamic
	function downAction(value, side){
	if(side=='left'){
	if(indicBools[0]==false)indicBools[0]=true;
	else {indicPos[0]=value;indicBools[0]=false;indicatorLeftpart.transition().duration(1000).attr("x",value+indicWidth);indicatorLeft.transition().attr("x",value)}
	}
	else if(side=='right'){
	if(indicBools[1]==false)indicBools[1]=true;
	else {indicPos[1]=value;indicBools[1]=false;indicatorRightpart.transition().duration(1000).attr("x",value-indicSideWidth);indicatorRight.transition().attr("x",value)}
	}
	//execute the user defined function for a click event...when there is one
	if(clickListenerTest==true && ((indicBools[1]==false && side=='right')\|\| (indicBools[0]==false && side=='left')))clickListener();
	}
	//check if and which side was clicked and transition its position
	function overAction(){
	var dur = 100;
	if(indicBools[0]==true){
	var value = (d3.mouse(this)[0]);
	if(indicPos[1]>value){
	indicatorLeft.attr("x",value)
	indicatorLeftpart.attr("x",value-indicSideWidth)
	}
	}
	else if(indicBools[1]==true){
	var value = (d3.mouse(this)[0]);
	if(indicPos[0]<value){
	indicatorRight.attr("x",value)
	indicatorRightpart.attr("x",value+indicWidth)
	}
	}
	}
	this.getIndicPosition=getIndicPosition;
	function getIndicPosition(){
	return [axisScale(indicPos[0]),axisScale(indicPos[1])];
	}

	var clickListenerTest = false;
	this.addClickListener=addClickListener;
	function addClickListener(listener_){
	clickListener = listener_;
	clickListenerTest = true;
	}
	this.getClickListener=getClickListener;
	function getClickListener(){
	return clickListener();
	}
	this.defineIndicators=defineIndicators;
	function defineIndicators(){
	//add some indicators
	//short side of the main left indicator
	indicatorGroup = timelineGroup.append("g")
	indicatorLeftpart = indicatorGroup.append("rect").attr("x", indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height)
	.attr("id","indiSide");
	//short side of the main right indicator
	indicatorRightpart = indicatorGroup.append("rect").attr("x", width-indicSideWidth-indicWidth).attr("y", 0).attr("width", indicSideWidth).attr("height", height).attr("id","indiSide");
	//left main indicator
	indicatorLeft = indicatorGroup.append("rect").attr("x", 0).attr("y", 0) .attr("width", indicWidth).attr("height", height)
	.attr("id","indicatorLeft")
	.on("mousedown",leftDownAction);
	//right main indicator
	indicatorRight = indicatorGroup.append("rect").attr("x", width-indicWidth).attr("y", 0).attr("width", indicWidth).attr("height", height)
	.attr("id","indicatorLeft")
	.on("mousedown",rightDownAction);
	}
	this.reDefineIndicators=reDefineIndicators;
	function reDefineIndicators(width, side){
	if(side!=undefined)indicSideWidth = side;
	indicWidth = width;
	indicatorGroup.selectAll("rect").remove()
	defineIndicators();

	}

	}


	function dummyFunction(this_){
	console.log("This is the 'mousedown'...add a function to the '.downAction()' for action!")
	var value = (d3.mouse(this_)[0]);
	console.log("Currently, I can offer you the mouseposition: ",value)
	}
	#timeline{
	fill:rgba(0,0,0,0.7);
	}
	#indicatorLeft{
	fill:rgba(255,255,255,0.4);
	}
	#indiSide{
	fill:rgba(255,0,0,0.3);
	}
	#_background{
	fill:rgba(100,100,100,1);
	}
	.axis path,
	.axis line{
	fill: none;
	stroke: white;
	stroke-width:4;
	shape-rendering: crispEdges;
	opacity:0.2;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 30px;
	text-anchor:left;
	fill:#0f0;
	opacity:0.8;