samples/tests/spec/scripting/addDescOnClick.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!--

   Copyright 2005  The Apache Software Foundation 

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

-->
<!-- ====================================================================== -->
<!-- Append/Remove desc/title test                                          -->
<!--                                                                        -->
<!-- @author deweese@apache.org                                             -->
<!-- @version $Id$ -->
<!-- ====================================================================== -->

<?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?>  

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     id="body" width="450" height="500" viewBox="0 0 450 500">

    <title>Add Desc element "onClick"</title>

    <text x="50%" y="45" class="title">Add Desc element "onClick"</text>

    <script type="text/ecmascript">

    var svgNamespaceURI = "http://www.w3.org/2000/svg";

    function addChild(evt, tag) {
        var r = evt.target;
        var document = r.ownerDocument;
        var e = document.createElementNS(svgNamespaceURI, tag);
        e.appendChild(document.createTextNode("Dynamic: " + tag));
        r.appendChild(e);
    }

    var desc  = document.getElementById("foo");
    var newD = document.createTextNode("Text 1");
    var oldD = desc.firstChild;

    function toggleDesc() {
       desc.replaceChild(newD, oldD);
       var tmp = newD; newD=oldD; oldD=tmp;
       setTimeout("toggleDesc()", 1000);
    }

    var title  = document.getElementById("bar");
    var newT = document.createTextNode("Title 2");
    var oldT = title.firstChild;

    function toggleTitle() {
       title.replaceChild(newT, oldT);
       var tmp = newT; newT=oldT; oldT=tmp;
       setTimeout("toggleTitle()", 1000);
    }

    toggleDesc();
    toggleTitle();

    var elT = document.getElementById("title");
    var tglTitle = elT.firstChild;
    var elD = document.getElementById("desc");
    var tglDesc = elD.firstChild;

    function toggleShowTitle() {
      if (elT.firstChild) 
         elT.removeChild(tglTitle);
      else
         elT.appendChild(tglTitle);
       setTimeout("toggleShowTitle()", 1000);
    }
    function toggleShowDesc() {
      if (elD.firstChild) 
         elD.removeChild(tglDesc);
      else
         elD.appendChild(tglDesc);
       setTimeout("toggleShowDesc()", 1000);
    }

    toggleShowDesc();
    toggleShowTitle();

    var elT2 = document.getElementById("title2");
    var tglTitle2 = elT2.firstChild;
    var elD2 = document.getElementById("desc2");
    var tglDesc2 = elD2.firstChild;

    function toggleShowTitle2() {
      if (tglTitle2.parentNode == elT2) 
         elT2.removeChild(tglTitle2);
      else
         elT2.appendChild(tglTitle2);
       setTimeout("toggleShowTitle2()", 1000);
    }
    function toggleShowDesc2() {
      if (tglDesc2.parentNode == elD2) 
         elD2.removeChild(tglDesc2);
      else
         elD2.appendChild(tglDesc2);
       setTimeout("toggleShowDesc2()", 1000);
    }

    toggleShowDesc2();
    toggleShowTitle2();
    </script>

    <g>
       <rect x="30"  y="75" width="75" height="75" style="fill:crimson"
             onclick="addChild(evt, 'desc')"/>

       <rect x="135" y="75" width="75" height="75" style="fill:gold"
             onclick="addChild(evt, 'title')"/>

       <rect x="240" y="75" width="75" height="75" style="fill:crimson"
             onclick="addChild(evt, 'desc')"
          ><title>Pre Existing Title</title></rect>

       <rect x="345" y="75" width="75" height="75" style="fill:gold"
             onclick="addChild(evt, 'title')"
          ><desc>Pre Existing Desc</desc></rect>


       <rect id="title" x="30" y="180" width="75" height="75" 
             style="fill:crimson"><title>Pre Existing Title</title></rect>

       <rect id="desc" x="135" y="180" width="75" height="75" 
             style="fill:gold"><desc>Pre-existing Desc</desc></rect>

       <rect id="title2" x="240" y="180" width="75" height="75" 
          style="fill:crimson"><title>Pre Existing Title</title>
                               <desc>A constant Desc</desc></rect>

       <rect id="desc2" x="345" y="180" width="75" height="75" 
             style="fill:gold"><desc>Pre-existing Desc</desc>
                               <title>A constant title</title></rect>


       <rect x="30" y="285" width="75" height="75" style="fill:crimson"
          ><title>Pre Existing Title</title
          ><desc id="foo">Text 2</desc></rect>

       <rect x="135" y="285" width="75" height="75" style="fill:gold"
          ><title id="bar">Title 1</title
          ><desc >Pre-existing Desc</desc></rect>

    </g>
</svg>