3D Облако тегов

Актуально для версии 2.9

В продолжении статьи Простое облако тегов можно добавить к реализации один удобный скрипт, довольно быстрый и работающий во всех адекватных браузерах нормально понимающих HTML5.

Сам скрипт можно скачать отсюда Файл:Tagcanvas.min.zip или с http://www.goat1000.com/tagcanvas.php
Как это организовать? Очень просто. Извлекаем из архива js-файл и помещаем его в системную папку /js/.
Далее, идем в шаблон /xsltTpls/layouts/default.xsl или тот, в котором вы выполняли действия из предыдущей статьи.
Теперь следует в раздел HEAD, основного шаблона, поместить вызов скрипта и настройки:

<!--CLOUD-->
<script charset="utf-8" type="text/javascript" src="/js/tagcanvas.js" />
<!-- Настройки плагина -->
	 <script type="text/javascript">
	 $(document).ready(function() {
	   if( ! $('#myCanvas').tagcanvas({
	     textColour : 'orange', //Цвет ссылки
	     outlineColour: 'black', //Цвет контура
	     weight: true, //Учитывать вес
	     outlineThickness : 1, //Толщина контура
	     zoom: 1.2, //Приближение текста
	     maxSpeed : 0.02, //Скорость вращения
	     depth : 0.40, //Глубина (mouse rollover)
	     textHeight: 16 //Базовый размер текста
	   }, 'tagcloud')); });
	 </script>
<!--/ Настройки плагина -->

Находим место, где хотим разместить наше облако. В данном примере это будет левый блок (под категориями).
Размер этой колонки 190px, это важно учитывать при написании canvas.
Создаем область:

<canvas width="190" height="190" id="myCanvas">
	<div id="tagcloud">
		<xsl:apply-templates select="document('udata://stat/tagsCloud//10/9')/udata/lines" mode="tags" />
	</div>
</canvas>

в макросе stat/tagsCloud третий параметр отвечает за максимальный размер текста, приходящий в xml. Установим значение как 9, для того, чтобы указывать это число как остаток для единицы измерения em.

Сам же шаблон отличается от примера из предыдущей статьи использованием атрибута @font-size для более корректного отображения. И неиспользованием обрамляющих тегов.

<xsl:template match="item" mode="tags">
	<a style="font: 1.{@font-size}em sans-serif;" href="/content/pagesByDomainTags/{.}">
		<xsl:value-of select="." />
	</a>
</xsl:template>

Всё, облако тегов в 3D на сайте установлено. Статья актуальная для версии 2.8.5.3 при наличии подключенной библиотеки jQuery.