Создание модуля под Drupal 7. Часть 2

Предисловие

В первой части я показал как создавать модуль под Drupal 7. И как я и обещал, теперь покажу как добавлять к модулям js-файлы (использовать в них jQuery) и как осуществляется его локализация.

Добавление js-файлов

Для начала создадим в папке с модулем любой js-файл. Я назвал его main.js.

Далее добавляем в файл rss_feeds.info строку:

scripts[] = main.js

В своем модуле я использовал jQuery. В main.js я реализую функции для кнопки «Вверх». Для того, чтобы не было конфликтов, необходимо написать следующее:

(function ($) {  })(jQuery); 

И в этой конструкции пишем код:

$.fn.extend({         topMouseover: function(self) {             this.on('mouseover',function() {                 self.opacity.stop().animate({opacity:"1"},300);                 self.button.stop().animate({opacity:"1"},300);             });         },         topMouseout: function(self) {             this.on('mouseout',function() {                 self.opacity.stop().animate({opacity:"0"},300);                 self.button.stop().animate({opacity:"0.4"},300);             });         },         wScroll: function(g) {             if(g == 0) this.removeClass("no-count");             if(!this.hasClass("no-count")){                 if(g > 500 && this.is(":hidden")){                     this.addClass("visible");                     this.css("cursor","pointer");                     this.fadeIn(500);                     this.click(function(){                         $("body, html").animate({scrollTop:0},600);                         this.fadeOut(300);                         this.addClass("no-count");                     });                 }                 if(g < 200 && this.hasClass("visible")){                     this.removeClass("visible");                     this.fadeOut(300);                 }             }else{                 this.unbind("click");             }         }     });      function toTopBtn(toTop, opacity, btn) {         this.toTopBtn = $(toTop);         this.opacity = $(opacity);         this.button = $(btn);         this.windowScroll();         this._init();         return this;     }      toTopBtn.prototype = {         _init: function () {             var self = this;             this.toTopBtn.topMouseover(self);             this.toTopBtn.topMouseout(self);         },         windowScroll: function() {             var g = $(window).scrollTop();             this.toTopBtn.wScroll(g);         }     }     $(document).ready(function() {         upButton = new toTopBtn(".toTopWrapper",".toTopOpacity",".toTopBtn");          $(window).scroll(function(){             upButton.windowScroll();         });     }); 

Но по умолчанию в Drupal 7 идет jQuery 1.4.4. Функция .on() в ней не реализована. Для обновления jQuery скачайте модуль Query Update. В нем все интуитивно понятно. В настройках выбираем нужную версию (я выбрал 1.8).

Для того, чтобы кнопка отображалась, изменяем файл rssfeeds_content.tpl.php:

<div class="toTopWrapper"> 	<div class="toTopOpacity"></div> 	<div class="toTopPanel" title="Up"> 		<div class="toTopBtn"> 			<span class="arrow">↑</span> <span class="label">up</span> 		</div> 	</div> </div> <br><br> <?php foreach ($items->channel->item as $item): ?> 	<span class="title"><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></span><br><br> 	<?php echo $item->description; ?><br><br><?php echo $item->pubDate; ?> 	<hr><br><br> <?php endforeach; ?> 

… и добавляем стили в main.css:

/* "TO UP" BUTTON */  .toTopWrapper { 	position:fixed; 	top:0; 	bottom:0; 	left:0; 	width:7%; 	display:none; 	background-color: #87ceeb; 	opacity: 0.3; }  .toTopOpacity { 	position:fixed; 	top:0; 	bottom:0; 	left:0; 	width:7%; 	background-color: #87ceeb; 	opacity: 0.1; } .toTopWrapper .toTopPanel { 	width:100%; 	height:100%; 	font-size:13px; 	color: black; 	padding-top:10px; 	position:relative; } .toTopWrapper .toTopBtn { 	text-align:left; 	line-height:15px; 	margin-left: 30%; 	font-family:tahoma,arial,verdana,sans-serif; 	font-weight:bold; 	opacity: 0.2; } .toTopWrapper .toTopBtn .arrow{ 	font-size:14px; 	font-weight:bold; 	vertical-align:middle; }  /* END OF "TO UP" BUTTON */ 

Теперь на странице отображения контента RSS-ленты будет появляться кнопка «Вверх».

Локализация модуля

Все переводы модуля хранятся в папке translations и состоят как минимум из двух файлов — modulename.pot (это шаблон перевода) и modulename.po (непосредственно сам перевод).

Чтобы генерировать эти файлы используется модуль Translation Template Extractor. Скачиваем и устанавливаем этот модуль. Теперь переходи на страницу admin/config/regional/translate и выбираем вкладку EXTRACT. Выбираем наш модуль и нажимаем Extract:

Получаем файл шаблона rss_feeds.pot, и сохраняем его в папку модуля translations.

Потом проделываем все то же, только ставим переключатель на Template file for Russian translations и ставим галочку на Include translations. Сохраняем полученный перевод rss_feeds.ru.po в эту же папку.

Теперь остается только открыть .po-файл и вписать туда свои переводы. Теперь при установке модуля перевод будет автоматически импортироваться.

Заключение

На этом я закончу написание статей на тему разработки модулей под Drupal. Получившийся модуль показывает очень маленькие возможности Drupal’a, поэтому остается много того, что стоит узнать. Надеюсь эти статьи кому-нибудь помогут в начале пути изучения Drupal.

Спасибо за внимание!