Создание плагина. От идеи до публикации. Часть 3
Настройка типографа
Настройку типографа реализуем следующим образом: создадим файл конфигурации плагина в каталоге «config» который, в свою очередь, находиться в корне плагина и в нем проведем нехитрые опрерации по добавлению тега 'carousel' в список разрешенных jevix-ом тегов.<?php
$aAllowTags = Config::Get('jevix.default.cfgAllowTags');
$aAllowTags[0][0][] = 'carousel';
Config::Set('jevix.default.cfgAllowTags', $aAllowTags);
Формирование структуры карусели
Нам осталось реализовать процедуру создания карусели. Сейчас создаваемая в редакторе структура карусели представляет собой тег carousel, содержащий в себе набор изображений и его необходимо привести к виду, требуемому фреймворком Bootstrap. Сделаем это функцией, которая срабатывает при загрузке страницы и подменяет тег carousel на нужную структуру. Функцию расположим в carouselScript.js./** Добавим событие, срабатывающее при загрузке страницы и в нем... */
$(window).on('load', function() {
/** Получим набор каруселей */
var $carousels = $('carousel');
/** Если на странице присутствует хотя бы одна карусель, то */
if ($carousels.length > 0) {
/** Установим счетчик, используемый для корректного построения идентификаторов */
var $i = 0;
/** И для каждой карусели в наборе */
$carousels.each(function() {
/** Определим текущий объект карусели и...*/
var $this = $(this);
/** Сформируем ее идентификатор */
var $id = "myCarousel" + ($carousels.length + 1).toString();
/** Каждое оизображени в наборе карусели обернем div-ом как того требует bootstrap и вернем
* ширину последнего изображения в наборе, ее и будем использовать ка ширнарусели (здесь мы
* принм, что вс изображени одинакового размера)*/
var $width = $(this)
.find('img')
.each(function() {
$(this)
.wrap('<div class="item"></div>')
}).width();
/** Завершим формирование структуры карусели и установим ее ширину в полученое ранее значение*/
$(this)
.wrap('<div id="' + $id + '" class="carousel slide"></div>')
.wrap('<div class="carousel-inner"></div>')
.find('.item').first()
.addClass('active')
.unwrap()
.parent()
.after('<a class="right carousel-control" href="#' + $id + '" data-slide="next">›</a>')
.after('<a class="left carousel-control" href="#' + $id + '" data-slide="prev">‹</a>')
.parent()
.width($width);
$i++;
})
}
});
Вот и все). Плагин работает, осталось лишь навести немного косметики, но об это в следующей статье…
Результат
Что-то уже должно получиться(Тюнинг
- Внесем некоторые изменения в работу плагина. Во первых в окне добавления карусели нет необходимости в поле «Описание», поэтому смело удалим его.
- Добавим два режима работы: добавление карусели через созданное диалоговое окно или просто окружать тегом carousel существующие изображения. Для этого добавим в конец файла config.php конфигурационный параметр следующим образом:
- Каталоги classes, config и templates защитим .htaccess со следующим содержанием:
Order Deny,Allow Deny from all
$config = array();
Config::Set('carousel.openwindow', true);
return $config;
Изменим хук (HookCarousel.class.php) на загрузку шаблона только по необходимости:public function RegisterHook() {
if (Config::Get('carousel.openwindow'))
if ($oUserCurrent = $this->User_GetUserCurrent() && (Router::GetAction() == "topic")) {
$this->AddHook('template_body_end', 'Carousel');
}
}
В файле скриптов (carouselScript.js) откроем заремленные ранее параметры кнопки реализующие окружение выделенного фрагмента произвольным тегом так:openWith : ($("#window_upload_carousel").length == 0)?'<carousel>':'',
closeWith : ($("#window_upload_carousel").length == 0)?'</carousel>':'',
Тем самым определяя теги открытия и закрытия в случае отсутствия окна создания карусели.Публикация
С публикацией дела обстоят ровно так, как сказано в «Как попасть в каталог» — создаем описание, скриншоты и в путь). Ну и ссылка на плагин (не денег ради, а эксперименту для):upd
1. 26.09.12 — В модуле была найдена ошибка неправильного формирования идентификатора карусели, которая делает невозможным одновременное функционирование двух и более каруселей на одной странице. Исправляется так:в файле js/carouselScript.js строка 64:
var $id = "myCarousel" + ($carousels.length + 1).toString();
должна выглядеть так:
var $id = "myCarousel" + ($i + 1).toString();
— неожиданная появившаяся очепятка.
19 комментариев
Если кто то сделал или сделает фотораму, которая заменяет стандартныю фотосет, напишите в лс, возьму :)
В bootstrap.min.js найти
сразу после этого вставить
после этого не надо крутить мышкой чтобы сл. изображение появлялось в карусели.