Creating a module for Drupal 7. Part 2

Foreword

In the first part, I showed how to create a module for Drupal 7. And as I promised, now I will show how to add js-files to modules (use jQuery in them) and how its localization is performed.

Adding js-files

')
To begin, create in the folder with the module any js-file. I called it main.js.

Next, add the line to the rss_feeds.info file:

scripts [] = main.js

In my module, I used jQuery. In main.js, I implement the functions for the Up button. In order to avoid conflicts, you must write the following:

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

And in this construction we write code:

 $.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(); }); }); 

But by default in Drupal 7 comes jQuery 1.4.4 . The .on () function is not implemented in it. To update jQuery, download the Query Update module. Everything is intuitive in it. In the settings, select the desired version (I chose 1.8).

In order for the button to be displayed, we modify the rssfeeds_content.tpl.php file:

 <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; ?> 

... and add styles to 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 */ 

Now the Up button will appear on the RSS content display page.

Module localization

All translations of the module are stored in the translations folder and consist of at least two files — modulename.pot (this is the translation template) and modulename.po (the translation itself).

To generate these files, the Translation Template Extractor module is used. Download and install this module. Now go to the admin / config / regional / translate page and select the EXTRACT tab. Choose our module and click Extract :



Get the template file rss_feeds.pot , and save it to the translations module folder.

Then we do everything the same, just put the switch on Template file for Russian translations and put a tick on Include translations . We save the received translation of rss_feeds.ru.po into the same folder.

Now it only remains to open the .po file and enter your translations there. Now when installing the module, the translation will be automatically imported.

Conclusion

With this, I will finish writing articles on the topic of developing modules for Drupal. The resulting module shows Drupal’s very small capabilities, so there’s a lot left to know. I hope these articles will help someone at the beginning of the journey of learning Drupal.

Thanks for attention!