Button5c

Button5c.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 Button example, continued</title>
<!-- New cleaner implementation, not tied to java versions, not OOP,
shows use of HTML5 SVG -->

<script type="text/javascript">

/*
 **************************************************
 * Square
 **************************************************
 */

function makeSquare (n) {
        var sq = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); //*1 Data stored in the scene graph not ivars
        sq.x.baseVal.value = 30 * (n+1); //*1
        sq.y.baseVal.value = 20 * (n+1); //*1
        sq.width.baseVal.value = 50; //*1
        sq.height.baseVal.value = 50; //*1
        sq.setAttributeNS (null, "class", "square unselected"); //*2 Remembers selected via HTML class

	sq.onclick = squareClick; //*4 SVG rect itself has callback

	return sq
}

// Mouse callback for square itself
// "this" = the SVG sq object
function squareClick () { //*4
	// Unselect anybody who was selected
	for (var isel of document.getElementsByClassName("selected")) { //*5 Invokes our style sheet
		isel.setAttributeNS (null, "class", "square unselected"); //*5
	}

	// Then select me
	this.setAttributeNS (null, "class", "square selected"); //*5
}

/*
 **************************************************
 * Button callbacks
 **************************************************
 */
function leftButton () { //*6 Directly changes SVG scene graph data
	// NB works even if there are NO selected's
	for (var isel of document.getElementsByClassName("selected")) {
		isel.x.baseVal.value -= 10; //*6
	}
}

function rightButton () {
	for (var isel of document.getElementsByClassName("selected")) {
		isel.x.baseVal.value += 10; //*6
	}
}

function biggerButton () {
	for (var isel of document.getElementsByClassName("selected")) {
		isel.width.baseVal.value += 10 //*6
		isel.height.baseVal.value += 10 //*6
	}
}

function smallerButton () {
	for (var isel of document.getElementsByClassName("selected")) {
		isel.width.baseVal.value -= 10 //*6
		isel.height.baseVal.value -= 10 //*6
	}
}

function xButton () { //*3 "X" lines remember if turned on or not
	for (var ix of document.getElementsByClassName("x")) { //*3
		if (ix.style.visibility == "visible") { //*3
			ix.style.visibility = "hidden"; //*3
		}
		else {
			fixX()
			ix.style.visibility = "visible"; //*3
		}
	}
}

/*
 * Fix the size of the 'X"
 * would be unnecessary if we had defined a viewbox for our svg
 */
function fixX() {
	var width = document.getElementById("svg").width.baseVal.value
	var height = document.getElementById("svg").height.baseVal.value
		
	var line = document.getElementById("x1")
	line.x1.baseVal.value = 0
	line.y1.baseVal.value = 0
	line.x2.baseVal.value = width
	line.y2.baseVal.value = height

	line = document.getElementById("x2")
	line.x1.baseVal.value = width
	line.y1.baseVal.value = 0
	line.x2.baseVal.value = 0
	line.y2.baseVal.value = height
}

window.onresize = function() {
	if (document.getElementsByClassName("x")[0].style.visibility == "visible") {
		fixX()
	}
}

/*
 **************************************************
 * Initialization
 **************************************************
 */
window.onload = function() {
	// Make the squares and plug them in under our svg
	for (var i=0; i<5; i++) { //*1
		document.getElementById("svg").appendChild (makeSquare (i)); //*1
	}

	// Install the button callbacks
	document.getElementById("leftButton").onclick = leftButton
	document.getElementById("rightButton").onclick = rightButton
	document.getElementById("smallerButton").onclick = smallerButton
	document.getElementById("biggerButton").onclick = biggerButton
	document.getElementById("xButton").onclick = xButton
}

</script> 
</head>

<body>

<svg id="svg" height="300px" width="100%"
	style= "border-style: solid; border-color: blue; border-width: 1px;"
	xmlns="http://www.w3.org/2000/svg">

	<style>
		.square {
			stroke: black;
			fill: black;
			stroke-width: 1;
		}
		.selected { fill-opacity: 1.0; }
		.unselected { fill-opacity: 0; }
	</style>

	<rect id="background" width="100%" height="100%" fill="rgb(240,240,240)" />

	<line class="x" id="x1" stroke="black" visibility="hidden"/>
	<line class="x" id="x2" stroke="black" visibility="hidden"/>
</svg>

<div id="controlSingle" align="center" style="margin-top: 4px; margin-bottom: 4px; border-style: solid; border-color: blue; border-width: 1px;">
  <button id="leftButton"> <img src="../java/Button5/leftArrow.gif"> </button>
  <button id="rightButton"> <img src="../java/Button5/rightArrow.gif"> </button>
  <button id="smallerButton"> Smaller </button>
  <button id="biggerButton"> Bigger </button>
</div>

<div id="controlGlobal" align="center" style="margin-top: 4px; margin-bottom: 4px; border-style: solid; border-color: blue; border-width: 1px;">
  <button id="xButton">X</button>
</div>

</body>
</html>