Создание виджета нужны советы и помощь

Виджет 3Д облако тегов на instantcms 2.0.1

#1 13 июля 2014 в 15:13
Здравствуйте, решил освоить поглубже систему, начал с простого создания виджета.
Виджет делаю 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Д облака.
#2 13 июля 2014 в 19:12

Сейчас подключил файлы js и css в head шаблона main.tpl.php, а можно ли как то их подключить через шаблон виджета в папочке controllers?

jorgovich
Да можете от шаблон виджета подключить таким образом:
  1. <?php $this->addMainJS("templates/{$this->name}/папка/файл.js"); ?>
  2. <?php $this->addMainCSS("templates/{$this->name}/папка/файл.css"); ?>
Это оптимальный вариант так как стили и JS грузиться только тогда когда виджет включен, а если добавить в main то они будут постоянно грузиться...
Опции для виджета можете сделать сколько угодно, просто создайте options.form.php
#3 13 июля 2014 в 19:20
Спасибо, а вот запись которую я привел выше с настройками js собственно я хочу еще в ПУ задать чтоб можно было выбирать некоторые настройки и выводить в head, как ее через шаблон виджета подключить?
#4 13 июля 2014 в 19:29
jorgovich, обязательно внутри <head> нужно добавить? если так то не знаю, если не обязательно то можете в самом шаблоне виджета добавить свой js код и принимать настройки из админки, например:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. if(!$('#myCanvas').tagcanvas({
  4. textColour: <?php echo $textColor; ?>,
  5. outlineColour: <?php echo $outlineColour; ?>,
  6. reverse: <?php echo $reverse; ?>,
  7. depth: 0.8,
  8. maxSpeed: 0.05
  9. },'tags')) {
  10. // something went wrong, hide the canvas container
  11. $('#myCanvasContainer').hide();
  12. }
  13. });
  14. </script>
Только заранее нужно передать эти переменные в шаблон из widget.php
#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
  1. define('LANG_WD_TAGS_CLOUD_STYLE_CLOUDS3D', '3-D Облако');
3. Изменяем файлы контроллера для вывода облака /system/controllers/tags/widgets/cloud/widget.php находим строчку дописываем наше облако
  1. $style = $this->getOption('style', 'cloud', 'clouds3d');
и ниже условие вывода по аналогии с существующем, я взял не список, а именно облако
  1.  
  2. if ($style=='cloud' || 'clouds3d'){
  3. $max_frequency = $model->getMaxTagFrequency();
  4. }
  5.  
4. Добавляем в опции выбор нашего облака, добавляем строчку в файле /system/controllers/tags/widgets/cloud/options.form.php
  1.  
  2. new fieldList('options:style', array(
  3. 'title' => LANG_WD_TAGS_CLOUD_STYLE,
  4. 'items' => array(
  5. 'cloud' => LANG_WD_TAGS_CLOUD_STYLE_CLOUD,
  6. 'clouds3d' => LANG_WD_TAGS_CLOUD_STYLE_CLOUDS3D,
  7. 'list' => LANG_WD_TAGS_CLOUD_STYLE_LIST,
  8. )
  9. )),
  10.  
5. Передаем в шаблон условия вывода, здесь громозко немного получилось поэтому привожу мой файл находящийся /templates/ваш_шаблон/controllers/tags/widgets/cloud/cloud.tpl.php целиком
  1.  
  2. <?php if ($tags){ ?>
  3.  
  4. <div class="widget_tags_cloud">
  5.  
  6. <?php if ($style=='clouds3d') { ?>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9. if(!$('#tagCanvas').tagcanvas({
  10. shape: "hring",
  11. lock: "x",
  12. textColour: null,
  13. outlineColour: '#fac21f',
  14. reverse: true,
  15. weight: false,
  16. depth: 0.5,
  17. maxSpeed: 0.05
  18. },'tags')) {
  19. // something went wrong, hide the canvas container
  20. $('#tagCanvasContainer').hide();
  21. }
  22. });
  23. </script>
  24. <div id="tagCanvasContainer">
  25. <canvas id="tagCanvas">
  26. <p>Ваш браузер не поддерживает 3Д</p>
  27. </canvas>
  28. </div>
  29. <div id="tags">
  30. <ul>
  31. <?php foreach($tags as $tag) { ?>
  32. <?php
  33. $size_percent = round(($tag['frequency'] * 100) / $max_freq);
  34. $portion = round(100 / $size_percent, 2);
  35. $step = round(($max_fs - $min_fs) / $portion);
  36. $fs = $min_fs + $step;
  37. ?>
  38. <li style="font-size: <?php echo $fs; ?>px">
  39. <?php echo html_tags_bar($tag['tag']); ?>
  40. </li>
  41. <?php } ?>
  42. </ul>
  43. <?php } else {?>
  44. <ul class="tags_as_<?php echo $style; ?>">
  45.  
  46. <?php foreach($tags as $tag) { ?>
  47.  
  48. <?php if ($style=='cloud'){ ?>
  49. <?php
  50. $size_percent = round(($tag['frequency'] * 100) / $max_freq);
  51. $portion = round(100 / $size_percent, 2);
  52. $step = round(($max_fs - $min_fs) / $portion);
  53. $fs = $min_fs + $step;
  54. ?>
  55. <li style="font-size: <?php echo $fs; ?>px">
  56. <?php echo html_tags_bar($tag['tag']); ?>
  57. </li>
  58. <?php } ?>
  59.  
  60.  
  61. <?php if ($style=='list'){ ?>
  62. <li>
  63. <?php echo html_tags_bar($tag['tag']); ?>
  64. <span class="counter"><?php html($tag['frequency']); ?></span>
  65. </li>
  66. <?php } ?>
  67.  
  68.  
  69. <?php } ?>
  70. </ul>
  71. <?php } ?>
  72. <?php if ($style=='clouds3d'){ ?> </div> <?php } ?>
  73.  
  74. </div>
  75. <?php } ?>
  76.  
6. Добавляем в основной шаблон /templates/ваш_шаблон/main.tpl.php в секцию head добавляем ссылку на js скрипт, здесь пока не модифицировал руки еще не дошли.
  1. <?php $this->addMainJS("templates/{$this->name}/js/jquery.tagcanvas.min.js"); ?>
7. Дописываем в стилях /templates/ваш_шаблон/css/theme-widgets.css размеры нашего облака
#tagCanvas {width: 210px; height: 130px; overflow: hidden;}
если я не забыл свои шаги и Вы сделали все правильно, то у Вас должно получится вертикальное 3д кольцо из тегов.
В планах сделать опции настроек облака его можно выводить как горизонтальное кольцо, вертикально, цилиндр (вращение по оси х или у), ну и сфера, задавать бэкграунд, цвет текста, цвет обводки, вид обводки, скорость вращения, ну вообщем много всего там.
Так же появилась идея применить этот же механизм для вывода аватаров пользователей кольцом по горизонтали с применением виджета в теле страницы, думаю будет красиво.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.