Здравствуйте, решил освоить поглубже систему, начал с простого создания виджета.
Виджет делаю 3d облако тегов на базе JS скрипта TagCanvas, за основу взял существующий облако, вообщем все получилось, но вот пару моментов хотел спросить может кто в курсе или подскажет как по грамотней реализовать:
Сейчас подключил файлы js и css в head шаблона main.tpl.php, а можно ли как то их подключить через шаблон виджета в папочке controllers? Чтоб страницу не грузить лишний раз js скриптами, по проверке если виджет включен то выводим в head :
<script type="text/javascript">
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
},'tags')) {
// something went wrong, hide the canvas container
$('#myCanvasContainer').hide();
}
});
</script>
Ну и хотел еще плюшки сделать в опциях менять через ПУ параметры textColour, depth, maxSpeed, не понял как вывести если выбрана вкладка 3D облако тегов добавить вкладку настройки 3Д облака.
Виджет 3Д облако тегов на instantcms 2.0.1
#1
13 июля 2014 в 15:13
#2
13 июля 2014 в 19:12
Да можете от шаблон виджета подключить таким образом:Сейчас подключил файлы js и css в head шаблона main.tpl.php, а можно ли как то их подключить через шаблон виджета в папочке controllers?
<?php $this->addMainJS("templates/{$this->name}/папка/файл.js"); ?> <?php $this->addMainCSS("templates/{$this->name}/папка/файл.css"); ?>
Опции для виджета можете сделать сколько угодно, просто создайте options.form.php
Спасибо, а вот запись которую я привел выше с настройками js собственно я хочу еще в ПУ задать чтоб можно было выбирать некоторые настройки и выводить в head, как ее через шаблон виджета подключить?
Сегодня в 14:18
#4
13 июля 2014 в 19:29
jorgovich, обязательно внутри <head> нужно добавить? если так то не знаю, если не обязательно то можете в самом шаблоне виджета добавить свой js код и принимать настройки из админки, например:
Только заранее нужно передать эти переменные в шаблон из widget.php
<script type="text/javascript"> $(document).ready(function() { if(!$('#myCanvas').tagcanvas({ textColour: <?php echo $textColor; ?>, outlineColour: <?php echo $outlineColour; ?>, reverse: <?php echo $reverse; ?>, depth: 0.8, maxSpeed: 0.05 },'tags')) { // something went wrong, hide the canvas container $('#myCanvasContainer').hide(); } }); </script>
#5
13 июля 2014 в 19:34
А, щас попробую, я что то не помню document ready по окончании загрузки DOM страницы работает и ее можно в теле выводить…
#6
15 июля 2014 в 10:31
И так по прежнему нужны советы, на данном этапе я застрял что не получается сделать отдельную вкладку для настроек облака тегов.
Собственно чтоб повторить мои шаги выкладываю порядок действий что я сделал:
Напомню что ничего глобального нет модифицировал существующее решение.
1. Качаем скрипт TagCanvas, закидываем его в папочку /templates/ваш_шаблон/js/
я брал версию jquery.tagcanvas.min.js
2. Прописываем в языковых файлах наше 3-д облако /languages/ru/controllers/tags/widgets/cloud.php
3. Изменяем файлы контроллера для вывода облака /system/controllers/tags/widgets/cloud/widget.php находим строчку дописываем наше облако
и ниже условие вывода по аналогии с существующем, я взял не список, а именно облако
4. Добавляем в опции выбор нашего облака, добавляем строчку в файле /system/controllers/tags/widgets/cloud/options.form.php
6. Добавляем в основной шаблон /templates/ваш_шаблон/main.tpl.php в секцию head добавляем ссылку на js скрипт, здесь пока не модифицировал руки еще не дошли.
7. Дописываем в стилях /templates/ваш_шаблон/css/theme-widgets.css размеры нашего облака
если я не забыл свои шаги и Вы сделали все правильно, то у Вас должно получится вертикальное 3д кольцо из тегов.
В планах сделать опции настроек облака его можно выводить как горизонтальное кольцо, вертикально, цилиндр (вращение по оси х или у), ну и сфера, задавать бэкграунд, цвет текста, цвет обводки, вид обводки, скорость вращения, ну вообщем много всего там.
Так же появилась идея применить этот же механизм для вывода аватаров пользователей кольцом по горизонтали с применением виджета в теле страницы, думаю будет красиво.
Собственно чтоб повторить мои шаги выкладываю порядок действий что я сделал:
Напомню что ничего глобального нет модифицировал существующее решение.
1. Качаем скрипт TagCanvas, закидываем его в папочку /templates/ваш_шаблон/js/
я брал версию jquery.tagcanvas.min.js
2. Прописываем в языковых файлах наше 3-д облако /languages/ru/controllers/tags/widgets/cloud.php
$style = $this->getOption('style', 'cloud', 'clouds3d');
if ($style=='cloud' || 'clouds3d'){ $max_frequency = $model->getMaxTagFrequency(); }
5. Передаем в шаблон условия вывода, здесь громозко немного получилось поэтому привожу мой файл находящийся /templates/ваш_шаблон/controllers/tags/widgets/cloud/cloud.tpl.php целиком
<?php if ($tags){ ?> <div class="widget_tags_cloud"> <?php if ($style=='clouds3d') { ?> <script type="text/javascript"> $(document).ready(function() { if(!$('#tagCanvas').tagcanvas({ shape: "hring", lock: "x", textColour: null, outlineColour: '#fac21f', reverse: true, weight: false, depth: 0.5, maxSpeed: 0.05 },'tags')) { // something went wrong, hide the canvas container $('#tagCanvasContainer').hide(); } }); </script> <div id="tagCanvasContainer"> <canvas id="tagCanvas"> <p>Ваш браузер не поддерживает 3Д</p> </canvas> </div> <div id="tags"> <ul> <?php foreach($tags as $tag) { ?> <?php $fs = $min_fs + $step; ?> <li style="font-size: <?php echo $fs; ?>px"> <?php echo html_tags_bar($tag['tag']); ?> </li> <?php } ?> </ul> <?php } else {?> <ul class="tags_as_<?php echo $style; ?>"> <?php foreach($tags as $tag) { ?> <?php if ($style=='cloud'){ ?> <?php $fs = $min_fs + $step; ?> <li style="font-size: <?php echo $fs; ?>px"> <?php echo html_tags_bar($tag['tag']); ?> </li> <?php } ?> <?php if ($style=='list'){ ?> <li> <?php echo html_tags_bar($tag['tag']); ?> <span class="counter"><?php html($tag['frequency']); ?></span> </li> <?php } ?> <?php } ?> </ul> <?php } ?> <?php if ($style=='clouds3d'){ ?> </div> <?php } ?> </div> <?php } ?>
<?php $this->addMainJS("templates/{$this->name}/js/jquery.tagcanvas.min.js"); ?>
#tagCanvas {width: 210px; height: 130px; overflow: hidden;}
В планах сделать опции настроек облака его можно выводить как горизонтальное кольцо, вертикально, цилиндр (вращение по оси х или у), ну и сфера, задавать бэкграунд, цвет текста, цвет обводки, вид обводки, скорость вращения, ну вообщем много всего там.
Так же появилась идея применить этот же механизм для вывода аватаров пользователей кольцом по горизонтали с применением виджета в теле страницы, думаю будет красиво.