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

   1 <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
   3 ]>
   4 <?AdobeSVGViewer save="snapshot"?>
   5 <svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt);">
   6         <title>Demonstration of the carto.net SVG GUI slider object</title>
   7         <script type="text/ecmascript" xlink:href="resources/helper_functions.js" />
   8         <script type="text/ecmascript" xlink:href="resources/slider.js" />
   9         <script type="text/ecmascript" xlink:href="resources/mapApp.js" />
  10         <script type="text/ecmascript"><![CDATA[
  11                 var myMapApp = new mapApp(false,undefined);
  12                 var slider1;
  13                 var slider2;
  14                 var slider3;
  15                 var slider4;
  16
  17                 function init(evt) {
  18                         //fist the slider styles
  19                         var sliderStyles={"stroke":"dimgray","stroke-width":3};
  20                         var invisSliderWidth = 15;
  21                         slider1 = new slider("slider1","slider1",710,65,0,710,165,100,50,sliderStyles,invisSliderWidth,"sliderSymbol",showVal,true);
  22                         slider2 = new slider("slider2","slider2",100,100,0,300,300,50,30,sliderStyles,invisSliderWidth,"sliderSymbol",showVal,false);
  23                         slider3 = new slider("slider3","slider3",100,100,0,200,100,100,0,sliderStyles,invisSliderWidth,"sliderSymbol",showVal,false);
  24                         slider4 = new slider("slider4","slider4",300,300,50,500,300,100,70,sliderStyles,invisSliderWidth,"sliderSymbol",showVal,true);
  25                 }
  26
  27                 function showVal(valType,groupId,value) {
  28                         //valType can be "change" (on mouse move or click) or "release" (mouseup or mouseout)
  29                         if (valType == "change") {
  30                                 statusChange("Value of Slider '"+groupId+"' = "+Math.round(value));
  31                         }
  32                         if (valType == "release") {
  33                                 statusChange("Slider '"+groupId+"' was released, value = "+Math.round(value));
  34                         }
  35                 }
  36                 function reposSlider() {
  37                         var newx1 = 300 + Math.round(Math.random() * 50);
  38                         var newx2 = 500 + Math.round(Math.random() * 50);
  39                         var newy1 = 300 + Math.round(Math.random() * 50);
  40                         var newy2 = 300 + Math.round(Math.random() * 50);
  41                         slider4.moveTo(newx1,newy1,newx2,newy2);
  42                 }
  43 ]]></script>
  44         <defs>
  45                 <!-- Symbol for Slider -->
  46                 <symbol id="sliderSymbol" overflow="visible">
  47                         <line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="5" pointer-events="none"/>
  48                 </symbol>
  49         </defs>
  50         <rect x="-2000" y="-2000" width="6000" height="6000" fill="white" stroke="none" />
  51         <text x="512" y="40" font-family="Arial,Helvetica" text-anchor="middle" font-weight="bold" font-size="20" fill="dimgray">Demonstration of the carto.net SVG GUI slider object</text>
  52         <g id="slider1" />
  53         <g id="slider2" />
  54         <g id="slider3" transform="translate(50 0)" />
  55         <g id="slider4" transform="translate(0 500) rotate(-50)" />
  56         <text x="20" y="700" id="statusText">Statusbar:</text>
  57         <text x="500" y="600" onclick="reposSlider()">Click on this text to randomly reposition slider 4</text>
  58 </svg>