Skip to content

Instantly share code, notes, and snippets.

@giles-cholmondley-durston
Created April 24, 2013 09:33
Show Gist options
  • Save giles-cholmondley-durston/5450946 to your computer and use it in GitHub Desktop.
Save giles-cholmondley-durston/5450946 to your computer and use it in GitHub Desktop.
Toggle Switch
{"description":"Toggle Switch","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.3708333333333332,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false,"fullscreen":false}
var svg = d3.select("svg");
var width = 100;
var height = 40;
var rx = 10;
var textWith = 24;
var defs = g.append('svg:defs');
var pattern = defs.append('pattern')
.attr('id','pattern1')
.attr('pattermTransform','')
.attr('height',height)
.attr('width',height)
.attr('patternUnits','userSpaceOnUse')
var gradient = defs.append('linearGradient')
.attr('id','g320')
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',height/1.5)
gradient.append('stop')
.attr('stop-color','#B3B3B3')
.attr('offset','0');
gradient.append('stop')
.attr('stop-color','#676867')
.attr('offset','1');
//This create an ellipsis shape for the drop shadow texure
defs.append('svg:rect')
.attr("id","rectShape")
.attr("width",width)
.attr("height",height)
.attr("rx",rx)
.attr("ry",rx)
//Creates a clippath for the drop shadow of the ball
var clipPath = g.append('svg:clipPath')
.attr("id","clippy1");
clipPath.append("use")
.attr("xlink:href","#rectShape")
.attr("overflow","visible");
//Create a group for the icon we are about to add to the canvas
var group = g.append("svg:g")
.attr("transform","translate("+[200,220]+")")
.attr("class","group")
.attr("clip-path","url(#clippy1)");
group.append("svg:rect")
.attr("width",width/2)
.attr("height",height)
.attr("fill","#61B672");
group.append("svg:rect")
.attr("width",width/2)
.attr("x",width/2)
.attr("height",height)
.attr("fill","#FF6600");
var paddingX = 10;
group.append('svg:text')
.text("on")
.attr("fill", "#FFFFFF")
.attr("x", paddingX)
.attr("y", textWith+4)
.attr("font-size", textWith)
.attr("font-family", "Arial")
.attr("text-anchor", "start");
group.append('svg:text')
.text("off")
.attr("fill", "#FFFFFF")
.attr("x", (width/2)+paddingX)
.attr("y", textWith+4)
.attr("font-size", textWith)
.attr("font-family", "Arial")
.attr("text-anchor", "start");
var dragBehave= d3.behavior.drag()
.on("drag", function(d,i){
var event = d3.event;
var elem = d3.select(this);
console.log(parseFloat(elem.attr("x")),event.x);
if(parseFloat(elem.attr("x")) >= 0){
elem.attr("x",parseFloat(elem.attr("x")) + event.dx)
if(parseFloat(elem.attr("x")) < 0){
elem.attr("x",0)
}
}
if(parseFloat(elem.attr("x")) <= width/2){
elem.attr("x",parseFloat(elem.attr("x")) + event.dx)
}else{
elem.attr("x",width/2)
}
if(parseFloat(elem.attr("x")) < 0){
elem.attr("x",0)
}
})
.on("dragstart", function(d, i) {
})
.on("dragend", function(d, i) {});
group.append("svg:rect")
.attr("width",width/2)
.attr("x",width/2)
.attr("height",height)
.attr('fill',"url(#g320)")
.call(dragBehave);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment