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

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

 
Посетитель
small user social cms
МедальПочетный донор проектаПочетный донор проекта
Сообщений: 609
Здравствуйте, решил освоить поглубже систему, начал с простого создания виджета.
Виджет делаю 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Д облака.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1167
jorgovich:
Сейчас подключил файлы js и css в head шаблона main.tpl.php, а можно ли как то их подключить через шаблон виджета в папочке controllers?
Да можете от шаблон виджета подключить таким образом:
Код PHP:
  1. <?php $this->addMainJS("templates/{$this->name}/папка/файл.js"); ?>
  2. <?php $this->addMainCSS("templates/{$this->name}/папка/файл.css"); ?>
Это оптимальный вариант так как стили и JS грузиться только тогда когда виджет включен, а если добавить в main то они будут постоянно грузиться...
Опции для виджета можете сделать сколько угодно, просто создайте options.form.php
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаПочетный донор проекта
Сообщений: 609
Спасибо, а вот запись которую я привел выше с настройками js собственно я хочу еще в ПУ задать чтоб можно было выбирать некоторые настройки и выводить в head, как ее через шаблон виджета подключить?
Редактировалось: 1 раз (Последний: 13 июля 2014 в 19:21)
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1167
jorgovich, обязательно внутри <head> нужно добавить? если так то не знаю, если не обязательно то можете в самом шаблоне виджета добавить свой js код и принимать настройки из админки, например:
Код PHP:
  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
Дополнения для InstantCMS 2 | Готовый сайт Доска объявлений
Посетитель
small user social cms
МедальПочетный донор проектаПочетный донор проекта
Сообщений: 609
А, щас попробую, я что то не помню document ready по окончании загрузки DOM страницы работает и ее можно в теле выводить...
Посетитель
small user social cms
МедальПочетный донор проектаПочетный донор проекта
Сообщений: 609
И так по прежнему нужны советы, на данном этапе я застрял что не получается сделать отдельную вкладку для настроек облака тегов.
Собственно чтоб повторить мои шаги выкладываю порядок действий что я сделал:
Напомню что ничего глобального нет модифицировал существующее решение.

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
Спойлер
5. Передаем в шаблон условия вывода, здесь громозко немного получилось поэтому привожу мой файл находящийся /templates/ваш_шаблон/controllers/tags/widgets/cloud/cloud.tpl.php целиком
Спойлер
6. Добавляем в основной шаблон /templates/ваш_шаблон/main.tpl.php в секцию head добавляем ссылку на js скрипт, здесь пока не модифицировал руки еще не дошли.
Спойлер
7. Дописываем в стилях /templates/ваш_шаблон/css/theme-widgets.css размеры нашего облака
Спойлер
если я не забыл свои шаги и Вы сделали все правильно, то у Вас должно получится вертикальное 3д кольцо из тегов.
В планах сделать опции настроек облака его можно выводить как горизонтальное кольцо, вертикально, цилиндр (вращение по оси х или у), ну и сфера, задавать бэкграунд, цвет текста, цвет обводки, вид обводки, скорость вращения, ну вообщем много всего там.
Так же появилась идея применить этот же механизм для вывода аватаров пользователей кольцом по горизонтали с применением виджета в теле страницы, думаю будет красиво.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.