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

Виджет 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

Да можете от шаблон виджета подключить таким образом:

<?php $this->addMainJS("templates/{$this->name}/папка/файл.js"); ?>
<?php $this->addMainCSS("templates/{$this->name}/папка/файл.css"); ?>

Это оптимальный вариант так как стили и JS грузиться только тогда когда виджет включен, а если добавить в main то они будут постоянно грузиться...
Опции для виджета можете сделать сколько угодно, просто создайте options.form.php

Telegram канал https://t.me/my_instantcms

#3 13 июля 2014 в 19:20

Спасибо, а вот запись которую я привел выше с настройками js собственно я хочу еще в ПУ задать чтоб можно было выбирать некоторые настройки и выводить в head, как ее через шаблон виджета подключить?

Сегодня в 13:44

#4 13 июля 2014 в 19:29

jorgovich, обязательно внутри <head> нужно добавить? если так то не знаю, если не обязательно то можете в самом шаблоне виджета добавить свой js код и принимать настройки из админки, например:

<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>

Только заранее нужно передать эти переменные в шаблон из widget.php

Telegram канал https://t.me/my_instantcms

#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

Спойлер

define('LANG_WD_TAGS_CLOUD_STYLE_CLOUDS3D',  '3-D Облако');

3. Изменяем файлы контроллера для вывода облака /system/controllers/tags/widgets/cloud/widget.php находим строчку дописываем наше облако

Спойлер

$style = $this->getOption('style', 'cloud', 'clouds3d');

и ниже условие вывода по аналогии с существующем, я взял не список, а именно облако

Спойлер

 
if ($style=='cloud' || 'clouds3d'){
            $max_frequency = $model->getMaxTagFrequency();
        }

4. Добавляем в опции выбор нашего облака, добавляем строчку в файле /system/controllers/tags/widgets/cloud/options.form.php

Спойлер

 
  new fieldList('options:style', array(
                        'title' => LANG_WD_TAGS_CLOUD_STYLE,
                        'items' => array(
                            'cloud' => LANG_WD_TAGS_CLOUD_STYLE_CLOUD,
			    'clouds3d' => LANG_WD_TAGS_CLOUD_STYLE_CLOUDS3D,
                            'list' => LANG_WD_TAGS_CLOUD_STYLE_LIST,
                        )
                    )),

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
                        $size_percent = round(($tag['frequency'] * 100) / $max_freq);
                        $portion = round(100 / $size_percent, 2);
                        $step = round(($max_fs - $min_fs) / $portion);
                        $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
                        $size_percent = round(($tag['frequency'] * 100) / $max_freq);
                        $portion = round(100 / $size_percent, 2);
                        $step = round(($max_fs - $min_fs) / $portion);
                        $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 } ?>

6. Добавляем в основной шаблон /templates/ваш_шаблон/main.tpl.php в секцию head добавляем ссылку на js скрипт, здесь пока не модифицировал руки еще не дошли.

Спойлер

<?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д кольцо из тегов.
В планах сделать опции настроек облака его можно выводить как горизонтальное кольцо, вертикально, цилиндр (вращение по оси х или у), ну и сфера, задавать бэкграунд, цвет текста, цвет обводки, вид обводки, скорость вращения, ну вообщем много всего там.
Так же появилась идея применить этот же механизм для вывода аватаров пользователей кольцом по горизонтали с применением виджета в теле страницы, думаю будет красиво.

Когда ждать instantmaps?

Поделиться с друзьями в социал

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Социальный проект - это сайт. Разработка, доработка, создания виджетов, шаблонов - стартап.

Идея по каталогу. Нужны советы)

Нужны советы по структуре сайта

[ЗАКРЫТО] Виджет "Поля контента"

Нужен совет по созданию формы обратной связи

[ЗАКРЫТО] Создание виджета

InstantCMS Team

О проекте

Поддержка

Дополнения