| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ |
| <!ATTLIST svg |
| xmlns:attrib CDATA #IMPLIED |
| xmlns:batik CDATA #IMPLIED |
| > |
| <!ATTLIST text |
| attrib:buttonText CDATA #IMPLIED |
| > |
| ]> |
| <?AdobeSVGViewer save="snapshot"?> |
| <svg width="100%" height="100%" viewBox="0 0 1024 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:attrib="http://www.carto.net/attrib" xmlns:batik="http://xml.apache.org/batik/ext" onload="runRepaintTest()"> |
| <script type="text/ecmascript" xlink:href="../../fast/repaint/resources/repaint.js"></script> |
| <script type="text/ecmascript" xlink:href="resources/helper_functions.js"/> |
| <script type="text/ecmascript" xlink:href="resources/mapApp.js"/> |
| <script type="text/ecmascript" xlink:href="resources/timer.js"/> |
| <script type="text/ecmascript" xlink:href="resources/window.js"/> |
| <script type="text/ecmascript"><![CDATA[ |
| // WebKit modification: do not terminate before all create functions |
| // have been called. This call, the notifyDone() below, and all calls |
| // to createCalled() were added to prevent a race in which the test may |
| // terminate before the final window decoration is added. |
| // See <https://bugs.webkit.org/show_bug.cgi?id=21531>. |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var numberOfWindows = 7; |
| var createCalls = 0; |
| |
| function createCalled() { |
| if (++createCalls == numberOfWindows && window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| //global variables for map application and navigation |
| var myMapApp = new mapApp(false,undefined); |
| function repaintTest() { |
| //start a new window array in myMapApp |
| myMapApp.Windows = new Array(); |
| //first a few styles |
| var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5}; |
| var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1}; |
| var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1}; |
| var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1}; |
| var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"}; |
| var statustextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"}; |
| var buttonStyles = {"fill":"none","stroke":"dimgray","stroke-width":1}; |
| var titlebarHeight = 17; |
| var statusbarHeight = 13; |
| //create new window instance and add it to the Windows array with the windowId as a key |
| myMapApp.Windows["navWindow"] = new Window("navWindow","Windows",220,200,800,85,true,0,80,1024,700,true,winPlaceholderStyles,windowStyles,3,false,true,"Navigation Window","Statusbar",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange); |
| myMapApp.Windows["bigWindow"] = new Window("bigWindow","Windows",700,500,50,150,true,0,80,1024,700,false,winPlaceholderStyles,windowStyles,3,true,true,"Big Window","This is a big movable window",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange); |
| myMapApp.Windows["nestedWindow"] = new Window("nestedWindow","windowMainGroupbigWindow",400,300,50,50,true,0,17,700,487,false,winPlaceholderStyles,windowStyles,3,true,true,"Nested middlesize Window","This window contains other windows",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange); |
| myMapApp.Windows["smallWindow"] = new Window("smallWindow","windowMainGroupbigWindow",200,180,350,300,true,0,17,700,487,true,winPlaceholderStyles,windowStyles,3,true,true,"Small Window","Callback function is active",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,windowEvents); |
| myMapApp.Windows["colourPickerWindow"] = new Window("colourPickerWindow","windowMainGroupnestedWindow",220,180,0,17,true,0,17,400,287,true,winPlaceholderStyles,windowStyles,3,true,true,"Colour Picker","Changing a colour changes background",true,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,buttonTextChange); |
| myMapApp.Windows["statusWindow"] = new Window("statusWindow","windowMainGroupnestedWindow",180,80,220,207,false,0,17,400,287,true,winPlaceholderStyles,windowStyles,3,true,false,"Status Window","This window is non-moveable",false,true,true,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,createCalled); |
| myMapApp.Windows["minimalWindow"] = new Window("minimalWindow","windowMainGroupbigWindow",150,60,1,426,false,0,0,700,500,true,winPlaceholderStyles,windowStyles,3,false,false,"","",false,false,false,titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,titletextStyles,statustextStyles,buttonStyles,createCalled); |
| myMapApp.Windows["navWindow"].appendContent("textNavWindow",true); |
| myMapApp.Windows["statusWindow"].appendContent("textStatusWindow",true); |
| myMapApp.Windows["smallWindow"].appendContent("textSmallWindow",true); |
| myMapApp.Windows["minimalWindow"].appendContent("textMinimalWindow",true); |
| } |
| |
| function windowEvents(id,evtType) { |
| if (evtType == "removed") { |
| alert("window with id " + id + " was removed"); |
| } |
| if (evtType == "closed") { |
| buttonTextChange(id,evtType); |
| alert("window with id " + id + " was closed"); |
| } |
| if (evtType == "opened") { |
| buttonTextChange(id,evtType); |
| alert("window with id " + id + " was opened"); |
| } |
| if (evtType == "minimized") { |
| alert("window with id " + id + " was minimized"); |
| } |
| if (evtType == "maximized") { |
| alert("window with id " + id + " was maximized"); |
| } |
| if (evtType == "movedTo") { |
| alert("window with id " + id + " was moved to a new position"); |
| } |
| if (evtType == "moved") { |
| statusChange("window with id " + id + " was moved to "+Math.round(myMapApp.Windows[id].transX) + ", " + Math.round(myMapApp.Windows[id].transY)); |
| } |
| if (evtType == "moveStart") { |
| statusChange("window with id " + id + " just started movement"); |
| } |
| if (evtType == "moveEnd") { |
| statusChange("window with id " + id + " just stopped movement"); |
| } |
| if (evtType == "created") { |
| createCalled(); |
| } |
| } |
| function openCloseWindow(id) { |
| if (myMapApp.Windows[id].closed) { |
| myMapApp.Windows[id].open(true); |
| } |
| else { |
| myMapApp.Windows[id].close(true); |
| } |
| } |
| function buttonTextChange(id,status) { |
| if (status == "closed" || status == "opened") { |
| var buttonText = document.getElementById("buttonText"+id); |
| butText = buttonText.getAttributeNS(attribNS,"buttonText"); |
| if (myMapApp.Windows[id].closed) { |
| buttonText.firstChild.nodeValue = "Open " + butText; |
| } |
| else { |
| buttonText.firstChild.nodeValue = "Close " + butText; |
| } |
| } |
| if (id == "navWindow") { |
| if (status == "created" || status == "resized") { |
| addOrUpdateWindowDecoration(id); |
| } |
| } |
| if (status == "created") { |
| createCalled(); |
| } |
| } |
| function resizeNavWindow() { |
| var width = 220 + Math.round(Math.random() * 100); |
| var height = 220 + Math.round(Math.random() * 100); |
| myMapApp.Windows["navWindow"].resize(width,height,true); |
| } |
| function addOrUpdateWindowDecoration(id) { |
| var myWindow = myMapApp.Windows[id]; |
| var group = document.createElementNS(svgNS,"g"); |
| var rect1 = document.createElementNS(svgNS,"rect"); |
| rect1.setAttributeNS(null,"x",-15); |
| rect1.setAttributeNS(null,"y",-15); |
| rect1.setAttributeNS(null,"width",20); |
| rect1.setAttributeNS(null,"height",(myWindow.height+2)); |
| rect1.setAttributeNS(null,"fill","lightsteelblue"); |
| rect1.setAttributeNS(null,"stroke","none"); |
| group.appendChild(rect1); |
| var rect2 = document.createElementNS(svgNS,"rect"); |
| rect2.setAttributeNS(null,"x",-15); |
| rect2.setAttributeNS(null,"y",-15); |
| rect2.setAttributeNS(null,"width",(myWindow.width + 16)); |
| rect2.setAttributeNS(null,"height",20); |
| rect2.setAttributeNS(null,"fill","lightsteelblue"); |
| rect2.setAttributeNS(null,"stroke","none"); |
| rect2.setAttributeNS(null,"id","decoGroupMinimized"+myWindow.id); |
| group.appendChild(rect2); |
| var text = document.createElementNS(svgNS,"text"); |
| text.setAttributeNS(null,"x",0); |
| text.setAttributeNS(null,"y",myWindow.height-20); |
| text.setAttributeNS(null,"font-family","Arial,Helvetica"); |
| text.setAttributeNS(null,"font-size",12); |
| text.setAttributeNS(null,"fill","dimgray"); |
| text.setAttributeNS(null,"transform","rotate(-90,0,"+(myWindow.height-20)+")"); |
| text.setAttributeNS(null,"pointer-events","none"); |
| var textNode = document.createTextNode(myWindow.titleText); |
| text.appendChild(textNode); |
| group.appendChild(text); |
| //move buttons |
| var x = -5; |
| var curY = -5; |
| if (myWindow.closeButton) { |
| myWindow.closeButtonInstance.setAttributeNS(null,"x",x); |
| myWindow.closeButtonInstance.setAttributeNS(null,"y",curY); |
| curY += 20; |
| } |
| if (myWindow.maximizeButton) { |
| myWindow.maximizeButtonInstance.setAttributeNS(null,"x",x); |
| myWindow.maximizeButtonInstance.setAttributeNS(null,"y",curY); |
| curY += 20; |
| } |
| if (myWindow.minimizeButton) { |
| myWindow.minimizeButtonInstance.setAttributeNS(null,"x",x); |
| myWindow.minimizeButtonInstance.setAttributeNS(null,"y",curY); |
| } |
| myWindow.addWindowDecoration(group,true,"top"); |
| } |
| ]]></script> |
| <defs> |
| <!-- this symbol is used for the primitive button widgets --> |
| <symbol id="buttonRect" overflow="visible"> |
| <rect x="-70" y="-10" width="140" height="20" fill="gainsboro" stroke="dimgray" stroke-width="1" /> |
| </symbol> |
| </defs> |
| <rect id="background" fill="lightgray" stroke="none" x="-5000" y="-5000" width="15000" height="15000" /> |
| <rect id="titlerect" fill="white" stroke="none" x="-5000" y="0" width="15000" height="80" /> |
| <!-- rects for indicating boundaries --> |
| <rect fill="white" stroke="none" x="-5000" y="-5000" width="5000" height="15000" /> |
| <rect fill="white" stroke="none" x="1024" y="-5000" width="5000" height="15000" /> |
| <rect fill="white" stroke="none" x="-5000" y="700" width="15000" height="5000" /> |
| <text id="titleText" font-family="Arial,Helvetica" fill="dimgray" font-size="20px" x="10" y="30">Demonstration of the Window object</text> |
| <text id="statusText" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" x="10" y="50">Statustext</text> |
| <text id="textNavWindow" x="10" y="25" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This window should<tspan x="10" dy="16">contain navigation tools</tspan><tspan x="10" dy="22">Click on button</tspan><tspan x="10" dy="16">'Resize Navigation Window' for a</tspan><tspan x="10" dy="16">random resize of this Window</tspan><tspan x="10" dy="22">Note that this window also</tspan><tspan x="10" dy="16">features a window decoration</tspan></text> |
| <text id="textStatusWindow" x="10" y="40" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This is a none-moveable<tspan x="10" dy="16">none-closeable status</tspan><tspan x="10" dy="16">window</tspan></text> |
| <text id="textSmallWindow" x="10" y="40" font-family="Arial,Helvetica" fill="dimgray" font-size="14px" pointer-events="none" display="none">This window has a callback<tspan x="10" dy="16">function indicating mouse</tspan><tspan x="10" dy="16">movements in the statusbar</tspan><tspan x="10" dy="16">and alerting window</tspan><tspan x="10" dy="16">events</tspan></text> |
| <text id="textMinimalWindow" x="5" y="16" font-family="Arial,Helvetica" fill="dimgray" font-size="12px" pointer-events="none" display="none">This is a minimal window<tspan x="5" dy="16">without title and status bar.</tspan><tspan x="5" dy="16">it is also not moveable</tspan></text> |
| <!-- primitive buttons for opening and closing windows --> |
| <use x="480" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('navWindow')"/> |
| <text id="buttonTextnavWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Navigation Window" x="480" y="25" pointer-events="none">Close Navigation Window</text> |
| <use x="630" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('bigWindow')"/> |
| <text id="buttonTextbigWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Big Window" x="630" y="25" pointer-events="none">Close Big Window</text> |
| <use x="780" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('nestedWindow')"/> |
| <text id="buttonTextnestedWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Middlesize Window" x="780" y="25" pointer-events="none">Close Middlesize Window</text> |
| <use x="930" y="20" xlink:href="#buttonRect" onclick="openCloseWindow('colourPickerWindow')"/> |
| <text id="buttonTextcolourPickerWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Colour Picker" x="930" y="25" pointer-events="none">Close Colour Picker</text> |
| <use x="930" y="50" xlink:href="#buttonRect" onclick="openCloseWindow('smallWindow')"/> |
| <text id="buttonTextsmallWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Small Window" x="930" y="55" pointer-events="none">Close Small Window</text> |
| <use x="480" y="50" xlink:href="#buttonRect" onclick="resizeNavWindow()"/> |
| <text id="buttonTextResizeNavWindow" font-family="Arial,Helvetica" fill="dimgray" text-anchor="middle" font-size="11px" attrib:buttonText="Resize Navigation Window" x="480" y="55" pointer-events="none">Resize Navigation Window</text> |
| </svg> |
