<?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>
Codebase Browser
chromium