Skip to content

Instantly share code, notes, and snippets.

@AndrewStaroscik

AndrewStaroscik/index.html

Created February 3, 2016 21:06
Show Gist options
  • Save AndrewStaroscik/6cd072b09a909f8ac7c5 to your computer and use it in GitHub Desktop.
Save AndrewStaroscik/6cd072b09a909f8ac7c5 to your computer and use it in GitHub Desktop.
Download ZIP
svg switch with d3 - no scaling
Raw
readme.md

Demonstration of svg switch made with a custom set of functions built on top of d3.

This example does not use pym.js for resizing, but the sP.swtch functions will take scaling information and resize based on the svg container size

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#mainFrame
{
position: relative;
width: 550px;
height: 550px;
margin: 0 auto;
}
.noselect {
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
</style>
<body>
<div id="mainFrame"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
// AMS sciPri Library:
var sP=function(){var t={};return t.niceExp=function(t,e){var n={},e=e||3;return n.raw=1*t,n.rawShort=parseFloat(n.raw.toFixed(e)),n.exp=Math.floor(Math.log(t)/Math.log(10)),n.nForExp=t/Math.pow(10,n.exp),n.nForExpShort=parseFloat(n.nForExp.toFixed(e)),n.nNice=n.nForExpShort+"&#215;10<sup>"+n.exp+"</sup>",n},t.rndToX=function(t,e){return Math.round(t*Math.pow(10,e))/Math.pow(10,e)},t.swtch={renderSwtch:function(t,e){var n,o,r,a=t.append("g").attr("id",e.id).attr("class",e["class"]).attr("swpos",e.swpos).attr("transform","translate("+e.gtX+","+e.gtY+")");for(o=e.elements.length,n=0;o>n;n+=1)r=e.elements[n],"text"===r.type?a.append(r.type).attr(r.attr).style(r.style).text(r.text):a.append(r.type).attr(r.attr).style(r.style)},newSwtch:function(t,e){var e=e||{oW:1,aR:1,oH:1,nW:1,nH:1},n="left"===t.swpos?0:45*e.nW/e.oW,o={"class":"noselect",elements:[{name:"bkgrnd",type:"rect",id:t.id+"bkgrnd",attr:{x:0,y:0,ry:6*e.nH/e.oH,height:30*e.nH/e.oH,width:90*e.nW/e.oW},style:{fill:"#ffffff",stroke:"#232323","stroke-width":1.5*e.nW/e.oW}},{name:"txtleft",type:"text",id:t.id+"txtleft",attr:{x:80*e.nW/e.oW,y:17.5*e.nH/e.oH,"text-anchor":"end","alignment-baseline":"middle","font-size":20*e.nW/e.oW+"px"},style:{},text:t.rightTxt},{name:"txtRight",type:"text",id:t.id+"txtRight",attr:{x:10*e.nW/e.oW,y:17.5*e.nH/e.oH,"text-anchor":"start","alignment-baseline":"middle","font-size":20*e.nW/e.oW+"px"},style:{},text:t.leftTxt},{name:"tglswtch",type:"rect",id:t.id+"tglswtch",attr:{id:t.id+"swtgl",x:n,y:0,ry:6*e.nH/e.oH,height:30*e.nH/e.oH,width:45*e.nW/e.oW},style:{fill:"#3bb084",stroke:"#232323","stroke-width":1.5*e.nW/e.oW}},{name:"label",type:"text",id:t.id+"label",attr:{x:0,y:-7*e.nH/e.oH,"text-anchor":"start","alignment-baseline":"middle","font-size":14*e.nW/e.oW+"px"},style:{},text:t.label}],gtX:e.nW*t.gtX/e.oW,gtY:e.nH*t.gtY/e.oH,id:t.id,swpos:"left"};return o},toggleSwitch:function(t,e,n){var o=0,n=n||{oW:1,aR:1,oH:1,nW:1,nH:1};"left"===e.swpos?(e.swpos="right",o=45):(e.swpos="left",o=0);t.select("#"+e.id+"swtgl").attr("x",n.nW*o/n.oW)}},t}();
var svg = d3.select("#mainFrame").append("svg")
.attr("width", 500)
.attr("height", 500),
demoSwitch = {
gtX: 50,
gtY: 50,
id: "deomswitch",
swpos: "left",
leftTxt: "On",
rightTxt: "Off",
label: "Label for switch"
},
switchElement = sP.swtch.newSwtch(demoSwitch); // not passing anything in for pym will default to 1.
sP.swtch.renderSwtch(svg, switchElement);
var switchListener = svg.select("#" + demoSwitch.id)
.on("click", function() {
sP.swtch.toggleSwitch(svg,demoSwitch) // again not passing any pym info in will default to 1.
// Other response elements go here.
// The swtch.toggleSwitch call takes care of the state of the switch, but the link between the state of the switch and the rest of the illustration
// needs to be tracked separately.
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment