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 the modules (use jQuery in them) and how it is localized.

Adding js files

First, create any js-file in the module folder. I called him 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 functions for the Up button. In order to avoid conflicts, you must write the following:

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

And in this construction we write the 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, Drupal 7 comes with 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 :

↑up



channel->item as $item): ?>
	title; ?>


	description; ?>

pubDate; ?>
	

... 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 page displaying the content of the RSS feed.

Module localization

All module translations 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, use the Translation Template Extractor module . Download and install this module. Now go to the admin / config / regional / translate page and select the EXTRACT tab . Select our module and click Extract : Get the



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

Then we do the same, just put the switch onTemplate file for Russian translations and check the box Include translations . We save the received translation rss_feeds.ru.po into the same folder.

Now all that remains is to open the .po file and enter your translations there. Now, when you install the module, the translation will be automatically imported.

Conclusion

With this I will end up writing articles on the topic of developing modules for Drupal. The resulting module shows Drupal’s very small capabilities, so much remains to be learned. I hope these articles help someone at the beginning of the road to learning Drupal.

Thanks for attention!