Skip to content

Instantly share code, notes, and snippets.

@iegorov

iegorov/univers.txt

Created December 5, 2013 09:34
Show Gist options
  • Save iegorov/7802604 to your computer and use it in GitHub Desktop.
Save iegorov/7802604 to your computer and use it in GitHub Desktop.
Download ZIP
Задание по XSL: При открытии XML-документа большинством современных веб-браузеров, последние показывают его, с возможностью открывать и скрывать части дерева XML при нажатии на знаки <+> и <->. Разработать фиксированный (один и тот же) XSL, который при трансформации любого XML-документа дает HTML, показывающий исходный XML, и позволяющий аналоги…
Raw
univers.txt
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment