Joomla. Создаём плагин с каруселью jQuery.

Продолжаем изучать CMS Joomla вместе со мной, в этой статье мы сделаем первый плагин для Joomla, интегрировав в Joomla 1.5.22(23) слайдер jQuery в текст статей. Слайдер jQuery можно будет использовать в любом месте содержимого статьи, благодаря использованию тэга {jqueryslider}.

Для тех, кто мало знаком с Joomla

Палгины – это расширения для Joomla, имеющие возможность интегрирования в отдельные компоненты CMS Joomla. Плагины в целом можно отнести к группе расширений Joomla, наряду с модулями и компонентами.

Однако, плагины имеют собственные отличительные особенности, прежде всего, - это запуск по определённому событию, например в нашем случае плагин будет запускаться по событию «onAfterDisplayContent».

Для тех, кто не встречался с разработкой плагинов для Joomla.

Для того чтобы установить плагин, в соответствие с требованиями предъявляемыми сообществом Joomla, необходимо использовать следующую структуру папок, котоая одновременно будет являться структурой архива установки загружаемого через «Менеджер установки Joomla».

./jqueryslider.phpjqueryslider.xmljquery-slider-img/ bg.png tempphoto-5.jpg tempphoto-5thumb.jpg tempphoto-6thumb.jpg tempphoto-4thumb.jpg tempphoto-4.jpg tempphoto-3thumb.jpg scotch-egg.jpg tempphoto-1thumb.jpg tempphoto-1.jpg icon-uparrowsmallwhite.png tempphoto-2.jpg tempphoto-2thumb.jpg tempphoto-3.jpg tempphoto-6.jpg thumb-author.jpg thumb-video-1.jpg thumb-video-2.jpg thumb-video-3.jpg transpBlack.png .DS_Storejqueryslider/ycodaslider-2.0.pack.jsjquery-easing-compatibility.1.2.pack.jsjquery-easing-1.3.pack.jsjquery-1.5.min.jscoda-slider.1.1.1.pack.js.DS_Store

Основными файлами в этой структуре являются:

jqueryslider.php (плагин)jqueryslider.xml (установочный файл)

Дополнительны файлы и папки необходимы для правильной работы самого jQuery плагина, который мы назовём «jQuery Slider», поэтому даже, если Вы их удалите, то плагин всё равно установится, хотя и с ошибками, указывающими на отсутствие файлов и Вы сможете его настраивать и отключать в админ. панели.

Давайте разберёмся с установочным файлом jqueryslider.xml.

Прежде всего, при создании установочного файла (в зарубежной литературе данный фал называется «manifest file with xml extension») необходимо соблюдать определённые требования:

файл должен иметь кодировку UTF-8; структура файла должны соответствовать стандартам XML; необходимо указать DOCTYPE;

Сущность установочного файла заключается в его содержимом, заключенным в тег install. Данный тег так же встречается в модулях и компонентах, но для плагина необходимо указывать атрибут type="plugin"</var>, то есть явно указать на принадлежность расширения к плагину Joomla, это очень важно, так как на основании этого тега ваши файлы уёдут в директорию с плагинами, если укажите модуль(module) то «уйдут» в директорию с модулями(папка modules).</p> <p class="textnovosti">Атрибут <var>group="content"</var>. Так же важен, поскольку мы, таким образом, дифференцируем плагины. Наш плагин относится к группе плагинов для работы с контентом, - где же, как не в статьях выводить слайдер?</p> <p class="textnovosti">Посмотрим весь код установочного файла:</var></var></p> <div class="codejquery"> Код Чистый код   1.<span class="aaa"><?xml version="1.0" encoding="utf-8"?> 2.<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD plugin 1.0//EN" "http://dev.joomla.org/xml/1.5/plugin-install.dtd"> 3.<install version="1.5" type="plugin" group="content"> 4.<name>jQuery Слайдер</name> 5.<creationDate>07 июня 2011 г.</creationDate> 6.<author>Александр Ермаков</author> 7.<authorEmail>Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. </authorEmail> 8.<authorUrl>http://slyweb.ru/</authorUrl> 9.<copyright>(c) Александр Ермаков http://slyweb.ru/</copyright>10.<license>GNU/GPL 2.0</license>11.<description>Слайдер на jQuery. Для вставки в любом месте текста статьи можно использовать тэг {jqueryslider}</description>12.<version>1.0</version>13. <files>14. <filename plugin="jqueryslider">jqueryslider.php</filename>15. <filename plugin="jqueryslider">jqueryslider/ycodaslider-2.0.pack.js</filename>16. <filename plugin="jqueryslider">jqueryslider/jquery-easing-compatibility.1.2.pack.js</filename>17. <filename plugin="jqueryslider">jqueryslider/jquery-easing-1.3.pack.js</filename>18. <filename plugin="jqueryslider">jqueryslider/jquery-1.5.min.js</filename>19. <filename plugin="jqueryslider">jqueryslider/coda-slider.1.1.1.pack.js</filename>20. <filename plugin="jqueryslider">jqueryslider/jslider.js</filename>21. <filename plugin="jqueryslider">jqueryslider/jslider.css</filename>22. <filename plugin="jqueryslider">jqueryslider/.DS_Store</filename>23. 24. </files>25. <params>26. <param name="sef" type="radio" default="1" label="Используется ли SEF" description="Выключите, если SEF на сайте отключен">27. <option value="0">Нет</option>28. <option value="1">Да</option>29. </param>30. 31. 32. <param name="pretext" type="text" size="40" default="jQuery плагин:" label="Вступительный текст" description="Напишите текст, добавляемый перед отображением плагина" />33. 34. <param name="size" type="radio" default="48" label="Размер иконок" description="Размер иконок социальных закладок">35. <option value="24">24</option>36. <option value="32">32</option>37. <option value="48">48</option>38. </param>39. 40. <param name="background" type="text" default="#FDFFBC" label="Цвет бэкграунда" description="Цвет бэкграунда - используется css-варианты (http://www.joomla15.ru/вертска/копипасты/56-список_цветов_CSS.html)" />41. 42. <param name="padd" type="text" default="10" label="Отступ между кнопками в пикселях" description="Значение отступа между кнопками в пикселях" />43. 44. <param name="border" type="radio" default="1" label="Нужен ли бордер вокруг">45. <option value="0">Скрыть</option>46. <option value="1">Показывать</option>47. </param>48. 49. <param name="showon" type="radio" default="1" label="Показывать кнопки в конце статьи">50. <option value="0">Нет (только по тэгу {jqueryslider})</option>51. <option value="1">Показывать</option>52. </param>53. 54. <param name="copy" type="radio" default="1" label="Показать ссылку на плагин" description="Показывать ссылку на скачивание плагина">55. <option value="0">Скрыть</option>56. <option value="1">Показывать</option>57. </param>58. 59. 60. </params>61. 62. <params group="advanced">63. </params>64. 65. 66. <media destination="stories/jquery-slider-img/" folder="jquery-slider-img">67. <filename>bg.png</filename>68. <filename>tempphoto-5.jpg</filename>69. <filename>tempphoto-5thumb.jpg</filename>70. <filename>tempphoto-6thumb.jpg</filename>71. <filename>tempphoto-4thumb.jpg</filename>72. <filename>tempphoto-4.jpg</filename>73. <filename>tempphoto-3thumb.jpg</filename>74. <filename>scotch-egg.jpg</filename>75. <filename>tempphoto-1thumb.jpg</filename>76. <filename>tempphoto-1.jpg</filename>77. <filename>icon-uparrowsmallwhite.png</filename>78. <filename>tempphoto-2.jpg</filename>79. <filename>tempphoto-2thumb.jpg</filename>80. <filename>tempphoto-3.jpg</filename>81. <filename>tempphoto-6.jpg</filename>82. <filename>thumb-author.jpg</filename>83. <filename>thumb-video-1.jpg</filename>84. <filename>thumb-video-2.jpg</filename>85. <filename>thumb-video-3.jpg</filename>86. <filename>transpBlack.png</filename>87. <filename>.DS_Store</filename>88. 89. </media>90. 91. 92. 93.</install>94.  Листинг 1.

Думаю, особой сложности он не представляет, возможно Вам не знаком тег media, данный тэг позволяет загружать файлы в директорию media, в которой, как предполагается, данные файлы будут доступны для модификации пользователю через «Медиа менеджер».

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

Файл плагина jqueryslider.php

Для начала, в наш плагин необходимо подключить две библиотеки Joomla:

Код Чистый код   1.<?php  2.   3.defined( '_JEXEC' ) or die( 'Restricted access' );  4.   5.jimport('joomla.event.plugin');  6.jimport('joomla.plugin.plugin');   7.   8.……….  9.  Листинг 2.

Далее следует обработчик события до отображения содержимого статьи:

Код Чистый код   1.…….  2.   3.$mainframe->registerEvent('onPrepareContent', 'plgJSMarks' );  4.   5.…….  6.   7.  Листинг 3.

Функция "plgJSMarks" будет рассмотрена ниже.

После обработчика события следует основная функция плагина «jquerydisp», внутри которой снача проверяется тип документа (переменная GET запроса "view"):

Код Чистый код   1.function jquerydisp( &$article, &$params, $limitstart )  2.{ 3. $view = JRequest::getCmd('view');  4. if ( ($view != 'article')  5. || JRequest::getBool('fullview')  6. || JRequest::getVar('print'))  7. { 8. return null; exit;  9. } 10. 11.…….12. 13.  Листинг 4.

То есть если тип не является статьей, например PDF или файл для печати, нам не к чему выводить остальной код плагина, поэтому мы завершаем выполнение php скрипта.

Остальной код «jquerydisp», где первоначально мы получаем настройки нашего плагина из объекта $params, который содержит настройки файла jqueryslider.xml, то есть $params->get( 'pretext') содержит значение из тега «param» с именем «pretext» файла jqueryslider.xml<.var>.

Код Чистый код   1.<param name="pretext" type="text" size="40" default="jQuery плагин:" label="Вступительный текст" description="Напишите текст, добавляемый перед отображением плагина" /> Листинг 5. Код Чистый код   1.   2. global $mainframe;  3.   4. /* The url adress of page */  5. $currurl = JURI::current();  6. $content='';  7.   8.   9. $baseurl = JURI::base();10. $document = &JFactory::getDocument();11. $title = $document->getTitle();12. 13. /* customs params */14. $pretext = $params->get( 'pretext');15. $h = $params->get( 'size');16. $b = '#FDFFBC';17. $b = $params->get( 'background');18. 19. 20.$content.='<div id="page-wrap">21. 22. <div class="slider-wrap">23. <div id="main-photo-slider" class="csw">24. <div class="panelContainer">25. 26. <div class="panel" title="Panel 1">27. <div class="wrapper">28. <img src="jquery-slider-img/tempphoto-1.jpg" alt="temp" />29. <div class="photo-meta-data">30. Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />31. <span>"Free Tibet" Protest at the Olympic Torch Rally</span>32. </div>33. </div>34. </div>35. <div class="panel" title="Panel 2">36. <div class="wrapper">37. <img src="jquery-slider-img/tempphoto-2.jpg" alt="temp" />38. <div class="photo-meta-data">39. Chicago Bears at Seattle Seahawks<br />40. <span>Fifth field goal, overtime win for the Seahawks</span>41. </div>42. </div>43. </div> 44. <div class="panel" title="Panel 3">45. <div class="wrapper">46. 47. <img src="jquery-slider-img/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>48. 49. <h1>How to Cook a Scotch Egg</h1>50. 51. <ul>52. <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>53. <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>54. <li>1/2 cup AP flour</li>55. <li>1-2 eggs, beaten</li>56. <li>3/4 cup panko-style bread crumbs</li>57. <li>Vegetable oil for frying</li>58. </ul>59. </div>60. </div>61. <div class="panel" title="Panel 4">62. <div class="wrapper">63. <img src="jquery-slider-img/tempphoto-4.jpg" alt="temp" />64. <div class="photo-meta-data">65. A Poem by Shel Silverstein<br />66. <span>Falling Up</span>67. </div>68. </div>69. </div>70. <div class="panel" title="Panel 5">71. <div class="wrapper">72. <img src="jquery-slider-img/tempphoto-5.jpg" alt="temp" />73. <div class="photo-meta-data">74. New Video on CSS-Tricks<br />75. <span>Using Wufoo for Web Forms</span>76. </div>77. </div>78. </div>79. <div class="panel" title="Panel 6">80. <div class="wrapper">81. <h1>A Tale of Two Cities</h1>82. <p><em>Charles Dickins</em></p>83. <blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>84. </div>85. </div>86. 87. </div>88. </div>89. 90. <a href="#1" class="cross-link active-thumb"><img src="jquery-slider-img/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>91. <div id="movers-row">92. <div><a href="#2" class="cross-link"><img src="jquery-slider-img/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>93. <div><a href="#3" class="cross-link"><img src="jquery-slider-img/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>94. <div><a href="#4" class="cross-link"><img src="jquery-slider-img/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>95. <div><a href="#5" class="cross-link"><img src="jquery-slider-img/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>96. <div><a href="#6" class="cross-link"><img src="jquery-slider-img/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>97. </div>98. 99. </div>100. 101. </div>';102. 103. 104.return $content;105.}106.  Листинг 6.

Переменная $content содержит html структуру слайдера.

Так как все палгины должны содержать функцию конструктор, наследуемыую объекты и функции глобального класса «JPlugin», в нашем случае за это отвечает следующий код:

Код Чистый код   1.   2.   3.class plgcontentJquerySlider extends JPlugin  4.{ 5. function plgcontentJquerySlider (&$subject,$params)  6. { 7. parent::__construct ($subject,$params);  8. $document = &JFactory::getDocument();  9. $document->addStyleSheet( '/plugins/content/jqueryslider/jslider.css' );10. $document->addScript( '/plugins/content/jqueryslider/jquery-1.5.min.js' );11. $document->addScript( '/plugins/content/jqueryslider/jquery-easing-1.3.pack.js' );12. $document->addScript( '/plugins/content/jqueryslider/jquery-easing-compatibility.1.2.pack.js' );13. $document->addScript( '/plugins/content/jqueryslider/coda-slider.1.1.1.pack.js' );14. $document->addScript( '/plugins/content/jqueryslider/jslider.js' );15. }16. 17. function onAfterDisplayContent( &$article, &$params, $limitstart )18. { 19. 20. if ($this->params->get('showon') == 1 ) 21. {22. $content = jquerydisp($article, $this->params, $limitstart );23. }24. 25. return $content; 26. }27.}28.  Листинг 7.

Данный код наиболее важен как для плагина, так и для слайдера, так как он подключает javascript и css файлы, но ещё более важна для нас функция «onAfterDisplayContent», с помощью которой просиходит первоначальный запуск палгина, если параметр «showon» (отображение слайдера только в конце статьи) установлен (1).

Можно сказать, что плагин на этом завершён, однако у нас осталась функция «plgJSMarks».

Замена тега {jqueryslider} внутри текста статьи на jQuery слайдер!

Функция «plgJSMarks» заменят все {jqueryslider} вставкой слайдера, однако, предупреждаю, ДАННЫЙ ПЛАГИН ВОЗМОЖНО ВСТАВИТЬ НА СТРАНИЦУ ЕДИНОЖДЫ, поэтому не пытайтесь вставлять «кучу» тегов {jqueryslider} в текст статьи, - будет работать только первый сверху. Такое ограничение связано с jQuery кодом и HTML разметкой.

Если Вам нужно вставлять неограниченное количество палигнов, нужно избавить слайдер от привязке к id «page-wrap». Другими словами,- это тема другой статьи и другого раздела! Если нужно обращайтесь в раздел «Заказ скрипта»!

функции «plgJSMarks» предназначена для замены тега {jqueryslider}:

Код Чистый код   1.   2.   3.function plgJSMarks( &$article, &$params, $limitstart )  4.{ 5. static $pluginParams = null;  6.   7. if ($params->get('showon') == 1 )   8. { 9. if(preg_match('{jqueryslider}',$article->text))10. {11. 12. $plugin =& JPluginHelper::getPlugin('content', 'jqueryslider');13. $pluginParams = new JParameter( $plugin->params );14. 15. 16. $content = jquerydisp( $article, $pluginParams, $limitstart );17. 18. $article->text = str_replace('{jqueryslider}',$content,$article->text);19. }20. }21. return true;22.}23. 24.  Листинг 8.

Всё, теперь для Вас, как и для меня открыты хорошие возможности для интеграции плагинов jQuery в Joomla!

P.S.

Осталось написать статью о том как сделать код плагина легко доступным для редактирования пользователю из редактора админ. панели, без необходимости ручного изменения файла jqueryslider.php в папке с плагинами. Может кто-то подскажет в каком направлении искать?

http://slyweb.ru