third_party/WebKit/LayoutTests/svg/carto.net/scrollbar.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
   3 <!ATTLIST svg
   4         xmlns:attrib CDATA #IMPLIED
   5         xmlns:batik CDATA #IMPLIED
   6         >
   7         <!ATTLIST g
   8         batik:static CDATA #IMPLIED
   9         >
  10 ]>
  11 <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()">
  12     <title>Example of SVG Scrollbars</title>
  13         <script type="text/ecmascript" xlink:href="resources/mapApp.js"></script>
  14         <script type="text/ecmascript" xlink:href="resources/helper_functions.js"></script>
  15         <script type="text/ecmascript" xlink:href="resources/timer.js"></script>
  16         <script type="text/ecmascript" xlink:href="resources/button.js"></script>
  17         <script type="text/ecmascript" xlink:href="resources/scrollbar.js"></script>
  18         <script type="text/ecmascript">
  19                 <![CDATA[
  20                         var mapApp;
  21                         var scrolledObject1;
  22                         var scrolledObject2;
  23                         function init() {
  24                                 myMapApp = new mapApp(false,undefined);
  25                                 //scrollbar styles
  26                                 var scrollbarStyles = {"fill":"whitesmoke","stroke":"dimgray","stroke-width":1};
  27                                 var scrollerStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1};
  28                                 var triangleStyles = {"fill":"dimgray"};
  29                                 var highlightStyles = {"fill":"dimgray","stroke":"dimgray","stroke-width":1};
  30                                 //button styles
  31                                 var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
  32                                 var buttonStyles = {"fill":"gainsboro"};
  33                                 var shadeLightStyles = {"fill":"white"};
  34                                 var shadeDarkStyles = {"fill":"dimgray"};
  35                                 //create scrolledObjects to react on scrollbar
  36                                 scrolledObject1 = new scrolledObject("content1",0,-2707,0,-220.5,"sb1horiz","sb1vert");
  37                                 scrolledObject2 = new scrolledObject("content2",0,-2660.75,0,-489,"sb2horiz","sb2vert");
  38                                 //id,parentNode,x,y,width,height,startValue,endValue,initialWidthPerc,initialOffset,scrollButtonLocations,scrollbarStyles,scrollerStyles,triangleStyles,highlightStyles,functionToCall
  39                                 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);
  40                                 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);
  41                                 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);
  42                                 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);
  43                                 //create buttons
  44                                 myMapApp.buttons["showHideButton2"] = new button("showHideButton2","buttons",scrolledObject2,"rect","Hide Scrollbar",undefined,50,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  45                                 myMapApp.buttons["removeButton2"] = new button("removeButton2","buttons",scrolledObject2,"rect","Remove Scrollbar",undefined,170,580,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  46                 }
  47                         //this object controls the panning and scrolling of the svg elements (panoramas)
  48                         function scrolledObject(contentId,maxX,minX,maxY,minY,sbXId,sbYId) {
  49                                 this.content = document.getElementById(contentId);
  50                                 this.transX = 0;
  51                                 this.transY = 0;
  52                                 this.maxX = maxX;
  53                                 this.minX = minX;
  54                                 this.maxY = maxY;
  55                                 this.minY = minY;
  56                                 this.sbXId = sbXId;
  57                                 this.sbYId = sbYId;
  58                                 this.panActive = false;
  59                                 this.parent = this.content.parentNode;
  60                         }
  61                         scrolledObject.prototype.scrollbarChanged = function(id,changeType,valueAbs,valuePerc) {
  62                                 if (changeType == "scrollChange" || "scrolledStep") {
  63                                         if (id.match(/horiz/gi)) {
  64                                                 this.transX = valueAbs;
  65                                         }
  66                                         if (id.match(/vert/gi)) {
  67                                                 this.transY = valueAbs;
  68                                         }
  69                                         this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
  70                                 }
  71                         }
  72                         scrolledObject.prototype.handleEvent = function(evt) {
  73                                 if (evt.type == "mousedown") {
  74                                         this.coords = myMapApp.calcCoord(evt,this.parent);
  75                                         this.panActive = true;
  76                                 }
  77                                 if (evt.type == "mousemove" && this.panActive) {
  78                                         var coords = myMapApp.calcCoord(evt,this.parent);
  79                                         this.transX += coords.x - this.coords.x;
  80                                         this.transY += coords.y - this.coords.y;
  81                                         if (this.transX < this.minX) {
  82                                                 this.transX = this.minX;
  83                                         }
  84                                         if (this.transX > this.maxX) {
  85                                                 this.transX = this.maxX;
  86                                         }
  87                                         if (this.transY < this.minY) {
  88                                                 this.transY = this.minY;
  89                                         }
  90                                         if (this.transY > this.maxY) {
  91                                                 this.transY = this.maxY;
  92                                         }
  93                                         this.content.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
  94                                         //set scrollbars
  95                                         if (myMapApp.scrollbars[this.sbXId]) {
  96                                                 myMapApp.scrollbars[this.sbXId].scrollToValue(this.transX);
  97                                         }
  98                                         if (myMapApp.scrollbars[this.sbYId]) {
  99                                                 myMapApp.scrollbars[this.sbYId].scrollToValue(this.transY);
 100                                         }
 101                                         this.coords = coords;
 102                                 }
 103                                 if (evt.type == "mouseup" || evt.type == "mouseout") {
 104                                         this.panActive = false;
 105                                 }
 106                         }
 107                         scrolledObject.prototype.buttonPressed = function(id,evt,buttonText) {
 108                                 if (id.match(/removeButton/)) {
 109                                                 myMapApp.scrollbars[this.sbXId].remove();
 110                                                 myMapApp.scrollbars[this.sbXId] = undefined;
 111                                                 myMapApp.scrollbars[this.sbYId].remove();
 112                                                 myMapApp.scrollbars[this.sbYId] = undefined;
 113                                                 myMapApp.buttons[id].deactivate();
 114                                                 //get id number
 115                                                 var sbId = id.substr(id.length-1);
 116                                                 myMapApp.buttons["showHideButton"+sbId].deactivate();
 117                                 }
 118                                 else {
 119                                         if (buttonText == "Hide Scrollbar") {
 120                                                 myMapApp.buttons[id].setTextValue("Show Scrollbar");
 121                                                 myMapApp.scrollbars[this.sbXId].hide();
 122                                                 myMapApp.scrollbars[this.sbYId].hide();
 123                                         }
 124                                         else {
 125                                                 myMapApp.buttons[id].setTextValue("Hide Scrollbar");
 126                                                 myMapApp.scrollbars[this.sbXId].show();
 127                                                 myMapApp.scrollbars[this.sbYId].show();
 128                                         }
 129                                 }
 130                         }
 131         ]]>
 132         </script>
 133         <rect id="bgRect" x="-1000" y="-1000" width="5000" height="5000" pointer-events="fill" fill="none" stroke="none" />
 134         <text x="50" y="30" font-weight="bold" font-size="20" font-family="Arial,Helvetica">Demonstration of the SVG Scrollbar</text>
 135         <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>
 136         <svg id="svg1" x="50" y="50" width="900" height="200" viewBox="0 0 900 200">
 137                 <g id="content1" cursor="move" batik:static="true" onmousedown="scrolledObject1.handleEvent(evt)" onmousemove="scrolledObject1.handleEvent(evt)" onmouseup="scrolledObject1.handleEvent(evt)" onmouseout="scrolledObject1.handleEvent(evt)">
 138                         <image id="image1" x="0" y="0" width="3607" height="420.5" xlink:href="images/zervreilasee_vals_panorama_low_res.jpg" />
 139                         <g id="labeling" pointer-events="none" font-size="15" font-family="Arial,Helvetica" fill="white">
 140                                 <text text-anchor="middle" x="456" y="88.8">Furggeltihorn</text>
 141                                 <text text-anchor="middle" x="593.8" y="98.8">P 2821</text>
 142                                 <text text-anchor="middle" x="635" y="79.8">Zervreilahorn</text>
 143                                 <text text-anchor="middle" x="805" y="112.8">Plattenberg</text>
 144                                 <text text-anchor="middle" x="2220.9" y="178.8">Piz Fess</text>
 145                                 <text text-anchor="middle" x="2291.4" y="162.6">Crap Grisch</text>
 146                                 <text text-anchor="middle" x="2412.7" y="149.6">Piz Tomül</text>
 147                                 <text text-anchor="middle" x="1762.6" y="112.6" fill="black">Fruntalp</text>
 148                                 <text text-anchor="middle" x="1003.8" y="386.5" fill="black">Zervreilasee</text>
 149                         </g>
 150                 </g>
 151         </svg>
 152         <g id="scrollbars1" />
 153         <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>
 154         <svg id="svg2" x="50" y="350" width="900" height="200" viewBox="0 0 900 200">
 155                 <g id="content2" cursor="move" batik:static="true" onmousedown="scrolledObject2.handleEvent(evt)" onmousemove="scrolledObject2.handleEvent(evt)" onmouseup="scrolledObject2.handleEvent(evt)" onmouseout="scrolledObject2.handleEvent(evt)">
 156                         <image id="image2" x="0" y="0" width="3560.75" height="689" xlink:href="images/chalchtrittli_tierfed_panorama_low_res.jpg" />
 157                 </g>
 158         </svg>
 159         <g id="scrollbars2" />
 160         <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>
 161         <g id="buttons" />
 162 </svg>