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

Иногда бывает необходимо интегрировать свой любимый JS скрипт в не менее любимую CMS. Если речь идет о Друпал, с его на данный момент 32К модулей, то врядли найдется задача, которая не была бы в нем реализована. Тем не менее, есть здесь и подводные камни, из-за которых я предпочитаю устанавливать по возможности меньшее кол-во модулей. 
Дело в том, что почти все находящиеся на оф. сайте модули создавались т.с. по всем правилам, т.е. имеют, админку с настройками и проч. полезные для рядового пользователя элементы интерфейса. Однако не во всех упоминаемых элементах есть необходимость, это во первых, а во вторых, единожды установленные настройки, чаще всего, уже никогда не изменяются, что делает некоторые элементы кода (часто весьма почтенного объема) лишним грузом. 
Если нужно реализовать некий функционал быстро и без излишнего кода, то проще и эффективнее сделать это в своем модуле. В качестве примера могу предложить задачу, которую мне было нужно реализовать для данного сайта. Мне понадобилась читалка формата epub. На друпал.орг нашелся одноименный проект созданный итальянскими товарищами . Однако совладать с ним я не смог. Файл *.module содержал синтаксические ошибки, пришлось искать его "чистый" вариант в репозитории. Половина ссылок в доках битые. РНР библиотеки также пришлось искать. С неимоверным трудом модуль таки запустился, но заставить его нормально работать я так и не смог. 
Вспомнив в процессе возни с модулем многих близких родственников его создателей, а заодно и свое нежелание в свое время учиться, я взялся реализовать эту задачу самостоятельно. В результате, файл *.module читалки, которую вы видите на сайте содержит всего 70 строк кода, а такой же файл модуля epub, 340. В обоих случаях реализована интеграция в Друпал проекта Enhanced eBooks in the browser .
Поэтому, когда возникает необходимость реализации в проект на Друпал какой нибудь JS задачи, я стараюсь в первую очередь изучить возможности по ее самостоятельной реализации.
Каким образом это можно сделать мы сейчас и рассмотрим.

Еще хочу уточнить....
Знатоки Друпал неверняка могут решить данные задачи более эффективно. Можно например использовать Library API, но данная публикация рассчитана на большинство, т.е. таких как я, ничего не знающих и не умеющих, но тем не менее, желающих сотворить НЕЧТО.

И еще одно уточнение.... .
Не каждый скрипт удастся заставить работать в Друпал. Особенно это касается скриптов, использующих jQuery версии отличной от 1.4.4, т.е. той, которая используется в ядре Друпал. Проблемы чаще всего возникают на страницах где внедряемый и стандартный скрипты должны работать совместно. Например на страницах добавления материала, где например интегрированный скрипт работает как тултип, а стандартный как загрузчик изображения.
Слышал, что ядро Друпал способно функционировать с версией jQuery вплоть до 1.8.х , но похоже это не так. Ajax загрузчик файла отказывался работать уже при версии 1.5.х . Тем не менее, если скрипт работает на отдельной странице, как например у меня читалка, то версия jQuery значения не имеет.

Теперь приступим...
Для примера берем скрипт Sticky Tooltip script с сайта http://www.dynamicdrive.com откуда я часто таскаю скрипты.
Для начала, нужно создать автономно работающий пример.

Важно! Отладку скрипта необходимо проводить на локальном сервере. 

Я многие годы использовал Денвер, но потом открыл для себя более гибкий Open Server
Создаем хост. Помещаем в корень файл index.html c таким кодом.

<!DOCTYPE HTML>
<html>
<head>
<title>Проверка скрипта</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js"></script>
<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
</head>
<body>
<p>Some page contents here...</p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
<p><a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p>
<p><img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p>
<p>Some page contents here...</p>
<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div>
<div id="sticky2" class="atip"  style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>
<div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div></div>
<div class="stickystatus"></div></div>
</body> 
</html>
Это обычний шаблон HTML с минимальным кол-вом элементов. Не забываем указать кодировку (стр. 5). В блоке <head></head> размещаем код, указанный в доке. Это строки 6, 7, 8. Убираем из кода мусор.
В строке 6 подружается библиотека jQuery, как видим версии 1.3.2 ,  это дает надежду, что скрипт будет работать с версией 1.4.4. , используемой в ядре Друпал.
Строка 7 подгружает сам файл тултипа stickytooltip.js , который должен лежать в корне, там же где и index.html .
8-я строка подгружает файл стилей stickytooltip.css , находящийся там же.
Ссылки на содержимое этих файлов указаны в доке.

В блоке <body></body> размещаем второй фрагмент кода из доки, строки 11-29. Этот фрагмент описывает отображаемые элементы страницы и тултипы.
Далее создаем файлы stickytooltip.js и  stickytooltip.css 
помещаем все в корневой каталог созданного хоста и пробуем открыть index.html .
Напоминаю, что при проверке должен быть подключен интернет, в противном случае не загрузится библиотека jQuery и скрипт однозначно работать не будет. Не особо сокрушайтесь, если не будут видны картинки. Они грузятся с 
imageshack.us с его заморочками и редиректами, поэтому не будем обращать на это внимание.
У меня получилось такое. Т.е. скрипт работает.
Теперь проверим будет ли он работать с версией jQuery 1.4.4 , для чего просто изменим версию подгружаемой библиотеки на соответствующую.
Кстати, в данном примере библиотека jQuery берется с GoogleAPI , но можно взять такую же и с сайта разработчика. Иными словами, подгрузка библиотеки с адреса https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js и http://code.jquery.com/jquery-1.4.4.min.js это одно и тоже.
Итак изменяем в строке 6 файла index.html значение версии с 1.3.2 на 1.4.4 и обновляем страницу. Скрипт по прежнему работает, что нам и требуется.
В следующей статье, продолжим данную тему.