Интеграция 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. Этот фрагмент описывает отображаемые элементы страницы и тултипы.
Напоминаю, что при проверке должен быть подключен интернет, в противном случае не загрузится библиотека 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 и обновляем страницу. Скрипт по прежнему работает, что нам и требуется.
В следующей статье, продолжим данную тему.