Создание плагина. От идеи до публикации. Часть 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++;
        })
    }
});

Вот и все). Плагин работает, осталось лишь навести немного косметики, но об это в следующей статье…
Результат
Что-то уже должно получиться(

Тюнинг
  1. Внесем некоторые изменения в работу плагина. Во первых в окне добавления карусели нет необходимости в поле «Описание», поэтому смело удалим его.
  2. Добавим два режима работы: добавление карусели через созданное диалоговое окно или просто окружать тегом carousel существующие изображения. Для этого добавим в конец файла config.php конфигурационный параметр следующим образом:
  3. $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>':'',
    Тем самым определяя теги открытия и закрытия в случае отсутствия окна создания карусели.
  4. Каталоги classes, config и templates защитим .htaccess со следующим содержанием:
    Order Deny,Allow
    Deny from all


Публикация
С публикацией дела обстоят ровно так, как сказано в «Как попасть в каталог» — создаем описание, скриншоты и в путь). Ну и ссылка на плагин (не денег ради, а эксперименту для):


upd
1. 26.09.12 — В модуле была найдена ошибка неправильного формирования идентификатора карусели, которая делает невозможным одновременное функционирование двух и более каруселей на одной странице. Исправляется так:
в файле js/carouselScript.js строка 64:
var $id = "myCarousel" + ($carousels.length + 1).toString();

должна выглядеть так:
var $id = "myCarousel" + ($i + 1).toString();

— неожиданная появившаяся очепятка.

19 комментариев

avatar
Спасибо. Добавил в избранное.
  • Kooks
  • 0
avatar
хорошие статьи. ловите + в карму ;)
avatar
Спасибо)
avatar
можете перенести их в блог Техническая документация по LiveStreet? чтобы полезные материалы были доступны в одном месте
avatar
Согласен. Тематика блога позволяет, да и кармы хватает.
avatar
а можно на демо взглянуть
avatar
Демо не делал, Здесь открыли плагин с модерации — есть скриншоты, а здесь сама используемая карусель от Bootstrap.
avatar
andreyv , обратите внимание на слайдшоу в постах lookatme.ru, насколько оно удобное, быстрое, не напрягает чрезмерными эффектами. Или на esqire.ru. Вариант бутстрапа подходит для потфолио мб, где нужно произвести эффект на читателя, но для сообществ, где ценится прежде всего удобсто.
avatar
фигня. Купил и пожалел. Есть масса более простых и при этом намного более удобных реализаций. Эта штука глючит, то есть эффект плавного перелистывания, то нет. Нету счетчика картинок, вообщем, сыро. Имхо конечно.
avatar
Вот это бы запилить под ЛС 1.0.1
avatar
лицензия не позволяет. каждый делает только для себя
avatar
Блин, тоже купил, на social не работает автоматическое перелистывание + во время загрузки топика, сначала появляются сразу все пикчи, а потом убираются, это видно не долго, но как побочный эффект, получается смещение вниз, как если бы вы загрузили топики и пролистнули немного вниз :)

Если кто то сделал или сделает фотораму, которая заменяет стандартныю фотосет, напишите в лс, возьму :)
avatar
на стандартном не проверял
avatar
Здесь посмотри.
avatar
Годится :)
avatar
Только там ничего кроме описания сайта нет.
avatar
еще если использовать совместно с lazy loading images то нужно каждый раз крутить колесо чтобы сл. изображение загрузилось.
avatar
Исправляется так:

В bootstrap.min.js найти
if(e.hasClass("active"))return;

сразу после этого вставить
e.find('img').trigger('appear');

после этого не надо крутить мышкой чтобы сл. изображение появлялось в карусели.
avatar
Спасибо за конфиг джевикса!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.