Интеграция JS скрипта в Друпал 7. Часть 3

Теги: 
Друпал
Друпал tooltip
Создание модуля Друпал

Снова продолжаем начатое ранее . Мы имеем работающий скрипт тултипа и пришло время интегрировать его в друпал. В целом и наиболее простом варианте, эта интеграция заключается в том, чтобы поместить фрагменты нашего кода в нужное место генерируемой 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> и дать ей соответствующий атрибут. Для проверки нашего кода максимально упростим задачу, хотя так делать и не следует. В дальнейшем исправимся smiley .
Открываем в редакторе файл 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>'; ?>
Проверяем работоспособность. Для этого переходим на страницу любого документа. Все работает.

Итак, задача установленная для этой статьи выполнена. Конечно подобная реализация, именуемая в просторечии говнокодом, не имеет какой либо прикладной ценности, но она незаменима при отладке подобных скриптов, так как проста, интуитивно понятна и легко найти ошибки. 
В следующей статье будет рассмотрена реализация, способная работать на реальном сайте.
  • 1 просмотр