simple style changer

This commit is contained in:
Nils Schneider 2012-06-08 03:50:14 +02:00
parent 218d05e8d5
commit e94d7922a9
2 changed files with 31 additions and 1 deletions

View file

@ -1,3 +1,17 @@
function switch_style(s) {
var el = document.getElementsByTagName("link")
for (var i = 0; i < el.length; i++ ) {
if (el[i].getAttribute("rel").indexOf("style") != -1
&& el[i].getAttribute("title")) {
if (el[i].getAttribute("title") == s) {
style_btn.text(s)
el[i].disabled = false
} else
el[i].disabled = true
}
}
}
function getOffset( el ) { function getOffset( el ) {
var _x = 0, _y = 0 var _x = 0, _y = 0
@ -14,6 +28,15 @@ var offset = getOffset(document.getElementById('chart'))
var w = window.innerWidth - offset.left, var w = window.innerWidth - offset.left,
h = window.innerHeight - offset.top - 1 h = window.innerHeight - offset.top - 1
function next_style() {
var s = d3.select("head link[title]:not([disabled]) + link[title][disabled]")
if (s[0][0] == null)
s = d3.select("head link[title][disabled]")
switch_style(s[0][0].getAttribute("title"))
}
var cp = d3.select("header").append("div") var cp = d3.select("header").append("div")
.attr("id", "controlpanel") .attr("id", "controlpanel")
@ -25,6 +48,12 @@ cp.append("button")
.text("Aktualisieren") .text("Aktualisieren")
.on("click", reload) .on("click", reload)
var style_btn = cp.append("button")
.attr("class", "btn")
.attr("value", "reload")
.text("Farbwechsler")
.on("click", next_style)
var btns = cp.append("div") var btns = cp.append("div")
.attr("class", "btn-group") .attr("class", "btn-group")

View file

@ -5,7 +5,8 @@
<title>Freifunk Lübeck - Knotengraph</title> <title>Freifunk Lübeck - Knotengraph</title>
<link href='style.css' rel='stylesheet' type='text/css' /> <link href='style.css' rel='stylesheet' type='text/css' />
<link href='force.css' rel='stylesheet' type='text/css' /> <link href='force.css' rel='stylesheet' type='text/css' />
<link href='force-light.css' rel='stylesheet' type='text/css' /> <link href='force-big.css' rel='stylesheet' type='text/css' title='big' disabled/>
<link href='force-light.css' rel='stylesheet' type='text/css' title='light'/>
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="d3.v2.js"></script> <script type="text/javascript" src="d3.v2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="http://maps.google.com/maps/api/js?sensor=true"></script>