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">

<!--

   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You 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 desc2  = document.getElementById("foo2");
    var newD2 = document.createTextNode("Text 1");
    var oldD2 = desc2.firstChild;

    function toggleDesc2() {
       desc2.removeChild(oldD2);
       desc2.appendChild(newD2);
       var tmp = newD2; newD2=oldD2; oldD2=tmp;
       setTimeout("toggleDesc2()", 1000);
    }

    var title2  = document.getElementById("bar2");
    var newT2 = document.createTextNode("Title 2");
    var oldT2 = title2.firstChild;

    function toggleTitle2() {
       title2.removeChild(oldT2);
       title2.appendChild(newT2);
       var tmp = newT2; newT2=oldT2; oldT2=tmp;
       setTimeout("toggleTitle2()", 1000);
    }

    toggleDesc2();
    toggleTitle2();

    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>

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

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

    </g>
</svg>