iegorov
12/5/2013 - 9:34 AM

Задание по XSL: При открытии XML-документа большинством современных веб-браузеров, последние показывают его, с возможностью открывать и скр

Задание по XSL:

При открытии XML-документа большинством современных веб-браузеров, последние показывают его, с возможностью открывать и скрывать части дерева XML при нажатии на знаки <+> и <->.

Разработать фиксированный (один и тот же) XSL, который при трансформации любого XML-документа дает HTML, показывающий исходный XML, и позволяющий аналогичным образом открывать и скрывать части этого XML. Необходимо получить представление, максимально точно совпадающее с представлением XML интернет эксплорера (с точностью до шрифтов, цветов раскраски и поведения при нажатии на з

univers.txt
content_copyfile_download
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"
            encoding="UTF-8"
            doctype-public=""/>

<xsl:strip-space elements="*"/>
<!-- Обработка корня документа -->
<xsl:template match="/"> 
<html>
<head>
    <style type="text/css">
            BODY{font:x-small 'Verdana';margin-right:1.5em}
            .c{cursor:hand}
            .b{color:red;font-family:'Courier New';font-weight:bold;text-decoration:none}
            .e{margin-left:1em;text-indent:-1em;margin-right:1em}
            .k{margin-left:1.5em;text-indent:-1em;margin-right:1em}
            .t{color:#990000}
            .xt{color:#990099}
            .ns{color:red}
            .dt{color:green}
            .m{color:blue}
            .tx{font-weight:bold}
            .db{text-indent:0px;margin-left:1em;margin-top:0px;margin-bottom:0px;padding-left:.3em;border-left:1px solid #CCCCCC;font:small Courier}
            .di{font:small Courier}
            .d{color:blue}
            .pi{color:blue}
            .cb{text-indent:0px;margin-left:1em;margin-top:0px;margin-bottom:0px;padding-left:.3em;font:small Courier;color:#888888}
            .ci{font:small Courier;color:#888888}
            PRE{margin:0px;display:inline}
            .hidden {display:none;}
    </style>
</head>
<body>      
    <xsl:apply-templates 
        select="*|comment()|processing-instruction()|text()[normalize-space(.)]" />
    <script>
        var UNIVERSXSLT = {};
        UNIVERSXSLT.nodes = (function(){
            var
                extEl,
                colEl,
                // toogle не работаen в ie8. Конечно есть кросбраузерное решение,
                // я сознательно не стал его использовать, чтобы сэкономить время.
                // И оно не такое наглядное, думаю тут главное идея.
                toogle = function( hid, vis ) {
                    hid.classList.add('hidden');
                    vis.classList.remove('hidden');
                },                 
                // развернуть список
                dropDown = function( nodeId ) {
                    extEl = document.getElementById( 'extend_' + nodeId );
                    colEl = document.getElementById( 'collaps_' + nodeId );
                    // скрыть свернутый вариант
                    // показать развернутый вариант
                    toogle( colEl, extEl );
                },
                // скрыть список
                cutDown = function( nodeId ) {
                    extEl = document.getElementById( 'extend_' + nodeId );
                    colEl = document.getElementById( 'collaps_' + nodeId );
                    // показать свернутый вариант
                    // скрыть развернутый вариант
                    toogle( extEl, colEl );
                };
            return {
                dropDown: dropDown,
                cutDown: cutDown                                

            };
        }());
    </script>
</body>
</html>
</xsl:template>

<!-- Шаблон для процессинговых инструкций -->
<xsl:template match="processing-instruction()">
    <div class="e">        
        <span class="b"></span>
        <span class="m"><![CDATA[<?]]></span>   
        <span class="pi">
            <xsl:value-of select="concat(name(),' ',.)"/>
        </span>
        <span class="m"><![CDATA[?>]]></span>
    </div>    
</xsl:template>
<!-- Шаблон для комментариев -->
<xsl:template match="comment()">
    <div class="k">
        <span class="m"><![CDATA[<!--]]></span>
        <span class="ci">
            <pre><xsl:value-of select="."/></pre>
        </span>
        <span class="b"></span>
        <span class="m"><![CDATA[-->]]></span>
    </div>
</xsl:template>
<!-- Шаблон для узлов, содержащих текст -->
<xsl:template match="text()[normalize-space(.)]">
    <xsl:variable name="textNodeName" select="name(..)"/>
    <div class="e">
        <div style="text-indent: -2em; margin-left: 1em;">
            <span class="b"> </span>
            <span class="m"><![CDATA[<]]></span>
            <span class="t"><xsl:copy-of select="$textNodeName"/></span>
            <!-- Отрисовка аттрибутов и их значений -->            
            <xsl:if test="count(../@*) &gt; 0">
                <xsl:for-each select="../@*">
                    <span class="t"><xsl:value-of select="concat(' ',name())"/></span>
                    <span class="m">="</span>
                    <b><xsl:value-of select="."/></b>
                    <span class="m">"</span>
                </xsl:for-each>
            </xsl:if>
            <span class="m"><![CDATA[>]]></span>
            <span class="tx">
                <xsl:value-of select="."/>
            </span>
            <span class="m"><![CDATA[</]]></span>
            <span class="t"><xsl:copy-of select="$textNodeName"/></span>
            <span class="m"><![CDATA[>]]></span>
        </div>
    </div>
</xsl:template>
<xsl:template name="namespace-node">
    <span class="ns">&#160;
        <xsl:choose>
            <xsl:when test="name() != ''">
                <xsl:text>xmlns:</xsl:text>
            </xsl:when>
            <xsl:otherwise>
                <xsl:text>xmlns</xsl:text>
            </xsl:otherwise>                            
        </xsl:choose>
    <xsl:value-of select="name()"/></span>
    <span class="m">="</span>
    <b class="ns"><xsl:value-of select="."/></b>
    <span class="m">"</span>
</xsl:template>
<!-- Шаблон для родительских узлов (содержат дочерние узлы) -->
<xsl:template match="node()[count(node())&gt;0 and not(text())]">    
        <xsl:variable name="nodeName" select="name()"/>
    <!-- <div class="collapsible"> -->
        <div class="e" id="extend_{generate-id()}">
            <div class="c" style="text-indent: -2em; margin-left: 1em;">
                <a href="#" class="b"  onclick="UNIVERSXSLT.nodes.cutDown('{generate-id()}')">-</a>
                <span class="m"><xsl:text>&lt;</xsl:text></span>
                <span class="t"><xsl:copy-of select="$nodeName"/></span>
                <!-- Вывод всех объявлений пространств имен , только для корня
                    У корневого узла нет предков. Конечно, надобы учесть случай, 
                    если пространство объявляется в некорневом узле, но тогда 
                    надо больше времени на реализацию. -->
                <xsl:if test="not(ancestor::*)">
                <xsl:for-each select="namespace::*">
                    <xsl:if test="name() != 'xml'">
                        <xsl:call-template name="namespace-node"/>
                    </xsl:if>
                </xsl:for-each>
                </xsl:if>
                <!-- Отрисовка аттрибутов и их значений -->
                <xsl:if test="count(@*) &gt; 0">
                <xsl:for-each select="@*">
                    <span class="t"><xsl:value-of select="concat(' ',name())"/></span>
                    <span class="m">="</span>
                    <b><xsl:value-of select="."/></b>
                    <span class="m">"</span>
                </xsl:for-each>
            </xsl:if>
                <span class="m"><xsl:text>&gt;</xsl:text></span>
            </div>
            <div>
                <!-- Рекурсивный обход потомков -->
                <xsl:apply-templates select="node()"/>
            </div>
            <div>
                <span class="b"> </span>
                <span class="m">&lt;/</span>
                <span class="t"><xsl:copy-of select="$nodeName"/></span>
                <span class="m">&gt;</span>
            </div>
        </div>
        <div class="e collapsed hidden" id="collaps_{generate-id()}">
            <div class="c" style="text-indent: -2em; margin-left: 1em;">
                <a href="#" class="b" onclick="UNIVERSXSLT.nodes.dropDown('{generate-id()}')">+</a>
                <span class="m"><xsl:text>&lt;</xsl:text></span>
                <span class="t"><xsl:copy-of select="$nodeName"/></span>
                <span class="m"><xsl:text>&gt;</xsl:text></span>
            </div>
        </div>
    <!--</div> -->
</xsl:template>
</xsl:stylesheet>