Интеграция JS скрипта в Друпал 7. Часть 3
Снова продолжаем начатое ранее . Мы имеем работающий скрипт тултипа и пришло время интегрировать его в друпал. В целом и наиболее простом варианте, эта интеграция заключается в том, чтобы поместить фрагменты нашего кода в нужное место генерируемой CMS страницы. В нашем случае, мы создадим свой модуль. Как именно его создать не буду подробно останавливаться (или может сделаю это позже), потому как такой информации в сети полно.
Итак, мы имеем сайт с установленным Drupal 7 .
В папке sites\all\modules создаем папку tooltips. Это будет папка нашего модуля. В ней создаем 2 файла tooltips.info и tooltips.module . Вообще-то для создания модуля и в нашем самом примитивном случае, было бы достаточно одного *.info файла, но не будем начинать с такого примитива.
Хочу напомнить, что если мы собираемся заняться сайтостроительством, то для облегчения жизни в этом нелегком деле понадобятся некоторые инструменты. В первую очередь редактор кода, затем инструменты для отладки. Но это так... напоминание начинающим.
В файле tooltips.info размещаем такие строки
name = Tooltyps. description = Выводит сообщение во всплывающем окне. package = My_modules core=7.x version = "7.x-1.x-dev" project = "tooltyps" datestamp = "1332419400"
Комментировать данные строки нет необходимости, так как все интуитивно понятно, ну разве что стоит упомянуть, что искать этот модуль в списке, нужно в разделе My_modules. После того как мы сохраним данный файл, он должен появиться в списке модулей. Проверяем...Все появилось и модуль можно включать, что и делаем. Чтобы интегрировать JS скрипт, как и писалось выше, нужно просто вывести нужные нам фрагменты страницы. Для этого вернемся к коду нашей страницы.
<!DOCTYPE HTML> <html> <head> <title>Проверка скрипта</title> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"></script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" /> </head> <body> <p><span data-tooltip="sticky1" style="cursor:pointer;"><b>Это текст в контейнере</b></span></p> <!--HTML for the tooltips--> <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:350px"> Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. <img style="float:left;" src="4.jpg"/>Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. <br>Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув </div> </div> <div class="stickystatus"></div></div> </body> </html>
Стоит упомянуть, что нам не потребуется вставлять полный код, всякие там <!DOCTYPE HTML> , потому что друпал все это выводит сам. Также не понадобится подключать библиотеку jQuery (строка 6), потому как и она подключается в друпал.
Нам требуется подключить JS файл скрипта (строка 7), файл стилей (строка 8), создать элемент имеющий атрибут data-tooltip и создать сами тултипы, описав их код.
Чтобы все было по правилам, создаем в папке tooltips папку js и помещаем туда наш js файл скрипта, а именно stickytooltip.js . Затем переходим к файлу tooltips.module и пишем в нем строку
<?php
drupal_add_js('sites/all/modules/tooltips/js/stickytooltip.js');
Сразу предупреждаю.... так писать нежелательно, а лучше использовать функцию
drupal_get_path('module', 'module_name');
которая определяет путь к модулю, но для тестирования и так сойдет.Точно также подключаем и css файл. Т.е. создаем в папке модуля папку css, копируем туда файл stickytooltip.css , и в файле tooltips.module добавляем строку, подключающую css файл.
<?php
drupal_add_js('sites/all/modules/tooltips/js/stickytooltip.js');
drupal_add_css('sites/all/modules/tooltips/css/stickytooltip.css');
Теперь обновляем наш тестовый сайт и смотрим исходный код страницы. Если все правильно сделано, среди прочих строк, в блоке <head></head> увидим и наши файлы.
.....
@import url("http://test.com/sites/all/modules/tooltips/css/stickytooltip.css");
.....
<script type="text/javascript" src="http://test.com/sites/all/modules/tooltips/js/stickytooltip.js"></script>
.....
Теперь необходимо создать в блоке <body></body> элемент с атрибутом data-tooltip и присвоить ему значение ID тултипа, который нам также нужно будет создать. Правильнее будет даже не создать элемент, а поместить существующий элемент в обертку например <span></span> и дать ей соответствующий атрибут. Для проверки нашего кода максимально упростим задачу, хотя так делать и не следует. В дальнейшем исправимся 
.Открываем в редакторе файл page.tpl.php используемой темы. В примере я использую тему Garland, (на нашем тестовом сайте тема Garland установлена как пользовательская, т.е. в sites\all\themes ) следовательно иду в sites\all\themes\garland где и нахожу данный файл.
Выбираем элемент.... ну скажем в 46 строке элемент title , выводящий заглавие материала и изменяем эту строку с ....
<h1<?php print $tabs ? ' class="with-tabs"' : '' ?>><?php print $title ?></h1>на
<h1<?php print $tabs ? ' class="with-tabs"' : '' ?>><span data-tooltip="tip1" style="cursor:pointer;"><?php print $title ?></span></h1>Т.е. помещаем переменную $title в обертку с нужным нам атрибутом. Можно обновить страницу и просмотрев исходный код найти нашу обертку.
Теперь осталось создать сам тултип. Чтобы излишне не заморачиваться, а быстро проверить работоспособность кода, применим варварский метод, т.е. тупо выведем наш код тултипа в шаблоне page.tpl.php . Вот так... дописываем в самом конце файла
<?php print '<div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="tip1" class="atip" style="width:350px"> Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты. <br>Когда от милой моей долины поднимается пар и полдневное солнце стоит над непроницаемой чащей темного леса и лишь редкий луч проскальзывает в его святая святых, а я лежу в высокой траве у быстрого ручья и, прильнув </div> </div> <div class="stickystatus"></div></div>'; ?>Проверяем работоспособность. Для этого переходим на страницу любого документа. Все работает.
Итак, задача установленная для этой статьи выполнена. Конечно подобная реализация, именуемая в просторечии говнокодом, не имеет какой либо прикладной ценности, но она незаменима при отладке подобных скриптов, так как проста, интуитивно понятна и легко найти ошибки.
В следующей статье будет рассмотрена реализация, способная работать на реальном сайте.