<!DOCTYPE html> <html> <head> <title>Comp 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 { 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.setAttributeNS (null, "class", "square 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", "square unselected"); //*5 } // Then select me this.setAttributeNS (null, "class", "square 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> .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/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>