ButtonApp4: ButtonApp4.html

<!DOCTYPE html>

<html>
<head>

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

<script>

/*
 **************************************************
 * Main
 **************************************************
 */
class Main { //*1 Data stored in the scene graph not ivars
    constructor () { //*1
        // Make the squares and plug them in under our svg
        for (let i=0; i<5; i++) { //*1
	    new Square (i) //*1
        }

        // Install the button callbacks
	leftButton.addEventListener ("click", this.leftButton)
        rightButton.addEventListener ("click", this.rightButton)
        smallerButton.addEventListener ("click", this.smallerButton)
        biggerButton.addEventListener ("click", this.biggerButton)
        xButton.addEventListener ("click", this.xButton)

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

    /* 
     * Button callbacks
     */
    leftButton () { //*6 Directly changes SVG scene graph data
	// NB works even if there are NO selected's
	for (let isel of document.getElementsByClassName("selected")) { //*6
	    isel.setAttribute ("x", String (Number (isel.getAttribute ("x")) - 10)); //*6
	}
    }

    rightButton () {
	for (let isel of document.getElementsByClassName("selected")) {
	    isel.setAttribute ("x", String (Number (isel.getAttribute ("x")) + 10)); //*6
	}
    }

    biggerButton () {
	for (let isel of document.getElementsByClassName("selected")) {
	    isel.setAttribute ("width", String (Number (isel.getAttribute ("width")) + 10)); //*6
	    isel.setAttribute ("height", String (Number (isel.getAttribute ("height")) + 10)); //*6
	}
    }

    smallerButton () {
	for (let isel of document.getElementsByClassName("selected")) {
	    isel.setAttribute ("width", String (Number (isel.getAttribute ("width")) - 10)); //*6
	    isel.setAttribute ("height", String (Number (isel.getAttribute ("height")) - 10)); //*6
	}
    }

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

/*
 **************************************************
 * Square
 **************************************************
 */
class Square { //*1
    constructor (n) { //*1
	let sq = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); //*1
	sq.setAttribute ("x", String (30 * (n+1))); //*1
	sq.setAttribute ("y", String (20 * (n+1))); //*1
	sq.setAttribute ("width", "50"); //*1
	sq.setAttribute ("height", "50"); //*1
	sq.setAttribute ("stroke", "black"); //*1 
	sq.setAttribute ("fill", "black"); //*1 
	sq.setAttribute ("stroke-width", "1"); //*1 

	sq.setAttributeNS (null, "class", "unselected"); //*2 Remembers selected via HTML class

	sq.addEventListener ("click", this.squareClick) //*4 SVG rect itself has callback

	svg.appendChild (sq) //*1
    }

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

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

/*
 * Fix the size of the 'X"
 * as a global function
 */
function fixX() {
    let width = svg.getAttribute ("width")
    let height = svg.getAttribute ("height")

    x1.setAttribute ("x1", "0")
    x1.setAttribute ("y1", "0")
    x1.setAttribute ("x2", width)
    x1.setAttribute ("y2", height)

    x2.setAttribute ("x1", width)
    x2.setAttribute ("y1", "0")
    x2.setAttribute ("x2", "0")
    x2.setAttribute ("y2", height)
}

/*
 **************************************************
 * Initialization
 **************************************************
 */
window.onload = function() { new Main() }

</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>
		.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/ButtonApp4/leftArrow.gif"> </button>
  <button id="rightButton"> <img src="../java/ButtonApp4/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>
[download file]