Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
149 lines (143 sloc) 7.33 KB
<html>
<head>
<title>Live Components</title>
<link type="text/css" href="css/defaults.css" rel="stylesheet" />
<script type="application/javascript" src="js/utils.js"></script>
<script type="application/javascript" src="js/control.js"></script>
<script type="application/javascript" src="js/control_extensions.js"></script>
<script type="application/javascript" src="js/spinner.js"></script>
<script type="application/javascript" src="js/toggler.js"></script>
<script type="application/javascript" src="js/selector.js"></script>
<script type="application/javascript" src="js/slider.js"></script>
<script type="application/javascript">
var longItemArray = [ "a 1", "b 2", "c 3", "e 4", "f 5", "g 6", "h 7", "i 8", "j 9", "k 10",
"l 11", "m 12", "n 13", "o 14", "p 15", "q 16", "r 17", "s 18", "t 19", "u 20",
"v 21", "w 22", "x 23", "y 24", "z 25", "long long long 26", "27", "28", "29", "30" ];
function printLine(text) {
var pElement = document.getElementById("output");
pElement.insertBefore(document.createElement("br"), pElement.firstChild);
pElement.insertBefore(document.createTextNode(text), pElement.firstChild);
}
function initialize() {
new Spinner('spinner_one', {
title: "Small with long title",
stateCount: 5,
markerPosition: 3,
keyEventFilter: function(event) {
return (event.keyCode >= 65 && event.keyCode <= 69) || event.keyCode == 13;
},
externalMapping: {
toDisplay: function(state) {
return String.fromCharCode(state + 65);
},
fromDisplay: function(display) {
return display.charCodeAt(0) - 65;
}
},
onchange: function(internalValue, externalValue, state) {
printLine("Spinner 1: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Spinner('spinner_two', {
mouseScale: 2,
keyStep: 2,
disabled: true,
markerVisible: false,
onchange: function(internalValue, externalValue, state) {
printLine("Spinner 2: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Spinner('spinner_three', {
title: "Long title",
state: 101,
externalMapping: {
toDisplay: function(state) {
return Math.round(state / 100.0 * 400.0 - 200.0);
},
fromDisplay: function(display) {
return Math.round((parseInt(display) + 200.0) / 400.0 * 100.0);
}
},
onchange: function(internalValue, externalValue, state) {
printLine("Spinner 3: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
}, {
radiusDifference: 5,
highArcRadius: 35
});
new Toggler("toggler_one", {
title: "Large",
items: [ "Off", "On" ],
state: 1,
internalMapping: {
toValue: function(state) { return state ? true : false },
fromValue: function(value) { return value ? 1 : 0 }
},
onchange: function(internalValue, externalValue, state) {
printLine("Toggler 1: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Toggler("toggler_two", {
disabled: true,
onchange: function(internalValue, externalValue, state) {
printLine("Toggler 2: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Toggler("toggler_three", {
items: [ "image:image/off.png", "image:image/on.png" ],
state: 1,
internalMapping: {
toValue: function(state) { return state ? true : false },
fromValue: function(value) { return value ? 1 : 0 }
},
onchange: function(internalValue, externalValue, state) {
printLine("Toggler 1: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Selector("selector_one", {
title: "Select 1",
items: [ "one", "two", "three" ],
disabled: true,
onchange: function(internalValue, externalValue, state) {
printLine("Selector 1: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Selector("selector_two", {
items: longItemArray,
onchange: function(internalValue, externalValue, state) {
printLine("Selector 2: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Slider("slider_one", {
title: "Slide 1",
stateCount: 101,
state: 50,
onchange: function(internalValue, externalValue, state) {
printLine("Slider 1: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
new Slider("slider_two", {
disabled: true,
onchange: function(internalValue, externalValue, state) {
printLine("Slider 2: internal = " + internalValue + " / external = " + externalValue + " / state = " + state);
}
});
}
</script>
</head>
<body onload="initialize();">
<input />
<button id="spinner_one" style="display: inline; font-size: 8px; margin: 0px; width: 60px; height: 50px;" class="control spinner"></button>
<button id="spinner_two" style="display: inline;" class="control spinner"></button>
<button id="spinner_three" style="display: inline; padding-top: 5px;" class="control spinner"></button>
<button id="toggler_one" style="display: inline; width: 150px; height: 80px; font-size: 30px;" class="control toggler"></button>
<button id="toggler_two" style="display: inline; width: 60px; height: 24px;" class="control toggler"></button><br/>
<button id="toggler_three" style="display: inline; width: 150px; height: 80px;" class="control toggler"></button>
<button id="selector_one" style="display: inline;" class="control selector"></button>
<button id="selector_two" style="display: inline;" class="control selector"></button>
<button id="slider_one" style="display: inline;" class="control slider"></button>
<button id="slider_two" style="display: inline;" class="control slider"></button>
<input />
<p id="output"></p>
</body>
</html>