LayoutTests/svg/carto.net/scrollbar.svg - WebKit - Git at Google

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
 <!ATTLIST svg
 	xmlns:attrib CDATA #IMPLIED
 	xmlns:batik CDATA #IMPLIED
 	>
 	<!ATTLIST g
 	batik:static CDATA #IMPLIED
 	>
 ]>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:batik="http://xml.apache.org/batik/ext" width="100%" height="100%" viewBox="0 0 1000 700" onload="init()">
     <title>Example of SVG Scrollbars</title>
 	<script type="text/ecmascript" xlink:href="resources/mapApp.js"></script>
 	<script type="text/ecmascript" xlink:href="resources/helper_functions.js"></script>
 	<script type="text/ecmascript" xlink:href="resources/timer.js"></script>
 	<script type="text/ecmascript" xlink:href="resources/button.js"></script>
 	<script type="text/ecmascript" xlink:href="resources/scrollbar.js"></script>
 	<script type="text/ecmascript">
 		<![CDATA[
 			var mapApp;
 			var scrolledObject1;
 			var scrolledObject2;
 			function init() {
 				myMapApp = new mapApp(false,undefined);
 				//scrollbar styles
 				var scrollbarStyles = {"fill":"whitesmoke","stroke":"dimgray","stroke-width":1};
 				var scrollerStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1};
 				var triangleStyles = {"fill":"dimgray"};
 				var highlightStyles = {"fill":"dimgray","stroke":"dimgray","stroke-width":1};
 				//button styles
 				var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
 				var buttonStyles = {"fill":"gainsboro"};
 				var shadeLightStyles = {"fill":"white"};
 				var shadeDarkStyles = {"fill":"dimgray"};
 				//create scrolledObjects to react on scrollbar
 				scrolledObject1 = new scrolledObject("content1",0,-2707,0,-220.5,"sb1horiz","sb1vert");
 				scrolledObject2 = new scrolledObject("content2",0,-2660.75,0,-489,"sb2horiz","sb2vert");
 				//id,parentNode,x,y,width,height,startValue,endValue,initialWidthPerc,initialOffset,scrollButtonLocations,scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,functionToCall
 				myMapApp.scrollbars["sb1horiz"] = new scrollbar("sb1horiz","scrollbars1",50.5,250.5,899,15,scrolledObject1.maxX,scrolledObject1.minX,0.2495,0,0.005,"top_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject1);
 				myMapApp.scrollbars["sb1vert"] = new scrollbar("sb1vert","scrollbars1",950.5,50.5,15,199,scrolledObject1.maxY,scrolledObject1.minY,0.4756,0,0.025,"top_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject1);
 				myMapApp.scrollbars["sb2horiz"] = new scrollbar("sb2horiz","scrollbars2",50.5,550.5,899,10,scrolledObject2.maxX,scrolledObject2.minX,0.2528,0,0.005,"bottom_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject2);
 				myMapApp.scrollbars["sb2vert"] = new scrollbar("sb2vert","scrollbars2",950.5,350.5,10,199,scrolledObject2.maxY,scrolledObject2.minY,0.2903,0,0.02,"bottom_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject2);
 				//create buttons
 				myMapApp.buttons["showHideButton2"] = new button("showHideButton2","buttons",scrolledObject2,"rect","Hide Scrollbar",undefined,50,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 				myMapApp.buttons["removeButton2"] = new button("removeButton2","buttons",scrolledObject2,"rect","Remove Scrollbar",undefined,170,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
 		}
 			//this object controls the panning and scrolling of the svg elements (panoramas)
 			function scrolledObject(contentId,maxX,minX,maxY,minY,sbXId,sbYId) {
 				this.content = document.getElementById(contentId);
 				this.transX = 0;
 				this.transY = 0;
 				this.maxX = maxX;
 				this.minX = minX;
 				this.maxY = maxY;
 				this.minY = minY;
 				this.sbXId = sbXId;
 				this.sbYId = sbYId;
 				this.panActive = false;
 				this.parent = this.content.parentNode;
 			}
 			scrolledObject.prototype.scrollbarChanged = function(id,changeType,valueAbs,valuePerc) {
 				if (changeType == "scrollChange" || "scrolledStep") {
 					if (id.match(/horiz/gi)) {
 						this.transX = valueAbs;
 					}
 					if (id.match(/vert/gi)) {
 						this.transY = valueAbs;
 					}
 					this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
 				}
 			}
 			scrolledObject.prototype.handleEvent = function(evt) {
 				if (evt.type == "mousedown") {
 					this.coords = myMapApp.calcCoord(evt,this.parent);
 					this.panActive = true;
 				}
 				if (evt.type == "mousemove" && this.panActive) {
 					var coords = myMapApp.calcCoord(evt,this.parent);
 					this.transX += coords.x - this.coords.x;
 					this.transY += coords.y - this.coords.y;
 					if (this.transX < this.minX) {
 						this.transX = this.minX;
 					}
 					if (this.transX > this.maxX) {
 						this.transX = this.maxX;
 					}
 					if (this.transY < this.minY) {
 						this.transY = this.minY;
 					}
 					if (this.transY > this.maxY) {
 						this.transY = this.maxY;
 					}
 					this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
 					//set scrollbars
 					if (myMapApp.scrollbars[this.sbXId]) {
 						myMapApp.scrollbars[this.sbXId].scrollToValue(this.transX);
 					}
 					if (myMapApp.scrollbars[this.sbYId]) {
 						myMapApp.scrollbars[this.sbYId].scrollToValue(this.transY);
 					}
 					this.coords = coords;
 				}
 				if (evt.type == "mouseup" || evt.type == "mouseout") {
 					this.panActive = false;
 				}
 			}
 			scrolledObject.prototype.buttonPressed = function(id,evt,buttonText) {
 				if (id.match(/removeButton/)) {
 						myMapApp.scrollbars[this.sbXId].remove();
 						myMapApp.scrollbars[this.sbXId] = undefined;
 						myMapApp.scrollbars[this.sbYId].remove();
 						myMapApp.scrollbars[this.sbYId] = undefined;
 						myMapApp.buttons[id].deactivate();
 						//get id number
 						var sbId = id.substr(id.length-1);
 						myMapApp.buttons["showHideButton"+sbId].deactivate();
 				}
 				else {
 					if (buttonText == "Hide Scrollbar") {
 						myMapApp.buttons[id].setTextValue("Show Scrollbar");
 						myMapApp.scrollbars[this.sbXId].hide();
 						myMapApp.scrollbars[this.sbYId].hide();
 					}
 					else {
 						myMapApp.buttons[id].setTextValue("Hide Scrollbar");
 						myMapApp.scrollbars[this.sbXId].show();
 						myMapApp.scrollbars[this.sbYId].show();
 					}
 				}
 			}
     	]]>
 	</script>
 	<rect id="bgRect" x="-1000" y="-1000" width="5000" height="5000" pointer-events="fill" fill="none" stroke="none" />
 	<text x="50" y="30" font-weight="bold" font-size="20" font-family="Arial,Helvetica">Demonstration of the SVG Scrollbar</text>
 	<text font-size="15" font-family="Arial,Helvetica" text-anchor="end" x="950" y="30">One can also drag the images and the scrollbars will adopt.</text>
 	<svg id="svg1" x="50" y="50" width="900" height="200" viewBox="0 0 900 200">
 		<g id="content1" cursor="move" batik:static="true" onmousedown="scrolledObject1.handleEvent(evt)" onmousemove="scrolledObject1.handleEvent(evt)" onmouseup="scrolledObject1.handleEvent(evt)" onmouseout="scrolledObject1.handleEvent(evt)">
 			<image id="image1" x="0" y="0" width="3607" height="420.5" xlink:href="images/zervreilasee_vals_panorama_low_res.jpg" />
 			<g id="labeling" pointer-events="none" font-size="15" font-family="Arial,Helvetica" fill="white">
 				<text text-anchor="middle" x="456" y="88.8">Furggeltihorn</text>
 				<text text-anchor="middle" x="593.8" y="98.8">P 2821</text>
 				<text text-anchor="middle" x="635" y="79.8">Zervreilahorn</text>
 				<text text-anchor="middle" x="805" y="112.8">Plattenberg</text>
 				<text text-anchor="middle" x="2220.9" y="178.8">Piz Fess</text>
 				<text text-anchor="middle" x="2291.4" y="162.6">Crap Grisch</text>
 				<text text-anchor="middle" x="2412.7" y="149.6">Piz Tomül</text>
 				<text text-anchor="middle" x="1762.6" y="112.6" fill="black">Fruntalp</text>
 				<text text-anchor="middle" x="1003.8" y="386.5" fill="black">Zervreilasee</text>
 			</g>
 		</g>
 	</svg>
 	<g id="scrollbars1" />
 	<text font-size="12" font-family="Arial,Helvetica" text-anchor="end" x="950" y="280">Panorama Zervreilastausee, Vals, Graubünden, Switzerland, taken 2006-02-04 (&#169; A. Neumann)</text>
 	<svg id="svg2" x="50" y="350" width="900" height="200" viewBox="0 0 900 200">
 		<g id="content2" cursor="move" batik:static="true" onmousedown="scrolledObject2.handleEvent(evt)" onmousemove="scrolledObject2.handleEvent(evt)" onmouseup="scrolledObject2.handleEvent(evt)" onmouseout="scrolledObject2.handleEvent(evt)">
 			<image id="image2" x="0" y="0" width="3560.75" height="689" xlink:href="images/chalchtrittli_tierfed_panorama_low_res.jpg" />
 		</g>
 	</svg>
 	<g id="scrollbars2" />
 	<text font-size="12" font-family="Arial,Helvetica" text-anchor="end" x="950" y="575">Panorama Chalchtrittli, Tierfed, Linthal, Glarus, Switzerland, taken 2005-09-03 (&#169; A. Neumann)</text>
 	<g id="buttons" />
 </svg>
	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
	<!ATTLIST svg
	xmlns:attrib CDATA #IMPLIED
	xmlns:batik CDATA #IMPLIED
	>
	<!ATTLIST g
	batik:static CDATA #IMPLIED
	>
	]>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:batik="http://xml.apache.org/batik/ext" width="100%" height="100%" viewBox="0 0 1000 700" onload="init()">
	<title>Example of SVG Scrollbars</title>
	<script type="text/ecmascript" xlink:href="resources/mapApp.js"></script>
	<script type="text/ecmascript" xlink:href="resources/helper_functions.js"></script>
	<script type="text/ecmascript" xlink:href="resources/timer.js"></script>
	<script type="text/ecmascript" xlink:href="resources/button.js"></script>
	<script type="text/ecmascript" xlink:href="resources/scrollbar.js"></script>
	<script type="text/ecmascript">
	<![CDATA[
	var mapApp;
	var scrolledObject1;
	var scrolledObject2;
	function init() {
	myMapApp = new mapApp(false,undefined);
	//scrollbar styles
	var scrollbarStyles = {"fill":"whitesmoke","stroke":"dimgray","stroke-width":1};
	var scrollerStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1};
	var triangleStyles = {"fill":"dimgray"};
	var highlightStyles = {"fill":"dimgray","stroke":"dimgray","stroke-width":1};
	//button styles
	var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
	var buttonStyles = {"fill":"gainsboro"};
	var shadeLightStyles = {"fill":"white"};
	var shadeDarkStyles = {"fill":"dimgray"};
	//create scrolledObjects to react on scrollbar
	scrolledObject1 = new scrolledObject("content1",0,-2707,0,-220.5,"sb1horiz","sb1vert");
	scrolledObject2 = new scrolledObject("content2",0,-2660.75,0,-489,"sb2horiz","sb2vert");
	//id,parentNode,x,y,width,height,startValue,endValue,initialWidthPerc,initialOffset,scrollButtonLocations,scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,functionToCall
	myMapApp.scrollbars["sb1horiz"] = new scrollbar("sb1horiz","scrollbars1",50.5,250.5,899,15,scrolledObject1.maxX,scrolledObject1.minX,0.2495,0,0.005,"top_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject1);
	myMapApp.scrollbars["sb1vert"] = new scrollbar("sb1vert","scrollbars1",950.5,50.5,15,199,scrolledObject1.maxY,scrolledObject1.minY,0.4756,0,0.025,"top_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject1);
	myMapApp.scrollbars["sb2horiz"] = new scrollbar("sb2horiz","scrollbars2",50.5,550.5,899,10,scrolledObject2.maxX,scrolledObject2.minX,0.2528,0,0.005,"bottom_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject2);
	myMapApp.scrollbars["sb2vert"] = new scrollbar("sb2vert","scrollbars2",950.5,350.5,10,199,scrolledObject2.maxY,scrolledObject2.minY,0.2903,0,0.02,"bottom_bottom",scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,scrolledObject2);
	//create buttons
	myMapApp.buttons["showHideButton2"] = new button("showHideButton2","buttons",scrolledObject2,"rect","Hide Scrollbar",undefined,50,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	myMapApp.buttons["removeButton2"] = new button("removeButton2","buttons",scrolledObject2,"rect","Remove Scrollbar",undefined,170,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
	}
	//this object controls the panning and scrolling of the svg elements (panoramas)
	function scrolledObject(contentId,maxX,minX,maxY,minY,sbXId,sbYId) {
	this.content = document.getElementById(contentId);
	this.transX = 0;
	this.transY = 0;
	this.maxX = maxX;
	this.minX = minX;
	this.maxY = maxY;
	this.minY = minY;
	this.sbXId = sbXId;
	this.sbYId = sbYId;
	this.panActive = false;
	this.parent = this.content.parentNode;
	}
	scrolledObject.prototype.scrollbarChanged = function(id,changeType,valueAbs,valuePerc) {
	if (changeType == "scrollChange" \|\| "scrolledStep") {
	if (id.match(/horiz/gi)) {
	this.transX = valueAbs;
	}
	if (id.match(/vert/gi)) {
	this.transY = valueAbs;
	}
	this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
	}
	}
	scrolledObject.prototype.handleEvent = function(evt) {
	if (evt.type == "mousedown") {
	this.coords = myMapApp.calcCoord(evt,this.parent);
	this.panActive = true;
	}
	if (evt.type == "mousemove" && this.panActive) {
	var coords = myMapApp.calcCoord(evt,this.parent);
	this.transX += coords.x - this.coords.x;
	this.transY += coords.y - this.coords.y;
	if (this.transX < this.minX) {
	this.transX = this.minX;
	}
	if (this.transX > this.maxX) {
	this.transX = this.maxX;
	}
	if (this.transY < this.minY) {
	this.transY = this.minY;
	}
	if (this.transY > this.maxY) {
	this.transY = this.maxY;
	}
	this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
	//set scrollbars
	if (myMapApp.scrollbars[this.sbXId]) {
	myMapApp.scrollbars[this.sbXId].scrollToValue(this.transX);
	}
	if (myMapApp.scrollbars[this.sbYId]) {
	myMapApp.scrollbars[this.sbYId].scrollToValue(this.transY);
	}
	this.coords = coords;
	}
	if (evt.type == "mouseup" \|\| evt.type == "mouseout") {
	this.panActive = false;
	}
	}
	scrolledObject.prototype.buttonPressed = function(id,evt,buttonText) {
	if (id.match(/removeButton/)) {
	myMapApp.scrollbars[this.sbXId].remove();
	myMapApp.scrollbars[this.sbXId] = undefined;
	myMapApp.scrollbars[this.sbYId].remove();
	myMapApp.scrollbars[this.sbYId] = undefined;
	myMapApp.buttons[id].deactivate();
	//get id number
	var sbId = id.substr(id.length-1);
	myMapApp.buttons["showHideButton"+sbId].deactivate();
	}
	else {
	if (buttonText == "Hide Scrollbar") {
	myMapApp.buttons[id].setTextValue("Show Scrollbar");
	myMapApp.scrollbars[this.sbXId].hide();
	myMapApp.scrollbars[this.sbYId].hide();
	}
	else {
	myMapApp.buttons[id].setTextValue("Hide Scrollbar");
	myMapApp.scrollbars[this.sbXId].show();
	myMapApp.scrollbars[this.sbYId].show();
	}
	}
	}
	]]>
	</script>
	<rect id="bgRect" x="-1000" y="-1000" width="5000" height="5000" pointer-events="fill" fill="none" stroke="none" />
	<text x="50" y="30" font-weight="bold" font-size="20" font-family="Arial,Helvetica">Demonstration of the SVG Scrollbar</text>
	<text font-size="15" font-family="Arial,Helvetica" text-anchor="end" x="950" y="30">One can also drag the images and the scrollbars will adopt.</text>
	<svg id="svg1" x="50" y="50" width="900" height="200" viewBox="0 0 900 200">
	<g id="content1" cursor="move" batik:static="true" onmousedown="scrolledObject1.handleEvent(evt)" onmousemove="scrolledObject1.handleEvent(evt)" onmouseup="scrolledObject1.handleEvent(evt)" onmouseout="scrolledObject1.handleEvent(evt)">
	<image id="image1" x="0" y="0" width="3607" height="420.5" xlink:href="images/zervreilasee_vals_panorama_low_res.jpg" />
	<g id="labeling" pointer-events="none" font-size="15" font-family="Arial,Helvetica" fill="white">
	<text text-anchor="middle" x="456" y="88.8">Furggeltihorn</text>
	<text text-anchor="middle" x="593.8" y="98.8">P 2821</text>
	<text text-anchor="middle" x="635" y="79.8">Zervreilahorn</text>
	<text text-anchor="middle" x="805" y="112.8">Plattenberg</text>
	<text text-anchor="middle" x="2220.9" y="178.8">Piz Fess</text>
	<text text-anchor="middle" x="2291.4" y="162.6">Crap Grisch</text>
	<text text-anchor="middle" x="2412.7" y="149.6">Piz Tomül</text>
	<text text-anchor="middle" x="1762.6" y="112.6" fill="black">Fruntalp</text>
	<text text-anchor="middle" x="1003.8" y="386.5" fill="black">Zervreilasee</text>
	</g>
	</g>
	</svg>
	<g id="scrollbars1" />
	<text font-size="12" font-family="Arial,Helvetica" text-anchor="end" x="950" y="280">Panorama Zervreilastausee, Vals, Graubünden, Switzerland, taken 2006-02-04 (© A. Neumann)</text>
	<svg id="svg2" x="50" y="350" width="900" height="200" viewBox="0 0 900 200">
	<g id="content2" cursor="move" batik:static="true" onmousedown="scrolledObject2.handleEvent(evt)" onmousemove="scrolledObject2.handleEvent(evt)" onmouseup="scrolledObject2.handleEvent(evt)" onmouseout="scrolledObject2.handleEvent(evt)">
	<image id="image2" x="0" y="0" width="3560.75" height="689" xlink:href="images/chalchtrittli_tierfed_panorama_low_res.jpg" />
	</g>
	</svg>
	<g id="scrollbars2" />
	<text font-size="12" font-family="Arial,Helvetica" text-anchor="end" x="950" y="575">Panorama Chalchtrittli, Tierfed, Linthal, Glarus, Switzerland, taken 2005-09-03 (© A. Neumann)</text>
	<g id="buttons" />
	</svg>