jquery plugin code separate multiple files

Question

I'm trying to write a simple jquery plugin but code gets huge and messy below is a portion to explain the idea I'm trying to achieve.

(function( $ ) {


 $.fn.pageBuilder = function( options ) {

    var lb = $.extend({

        self:                   this,
        modal_edit:             $("#vz_edit_modal"),
        modal_delete:           $("#vz_delete_modal"),
        onSlideElements:        function() {},
        onInsertElement:        function() {},
        onSaveElement:          function() {},

    }, options);


    // Disabling all link clicks default action within page layout builder
    this.on( 'click', 'a', function(event) {
        event.preventDefault();
    });


    // Changing class of layout builder elements while dragging for cursor change purposes
    this.on('mousedown', '.element .inner', function(){
        $(this).addClass('grabbing');
    }).on('mouseup', '.element .inner', function(){
        $(this).removeClass('grabbing');
    });     
 };

}( jQuery ));

So this code is core of plugin and want to keep in jquery.myplugin.js and now when I try to create a new file jquery.myplugin.elements.js and add this code:

(function( $ ){

 $.extend($.fn, {

    pageBuilder: function( options ){ 

        // Extended action
        this.find(".element a").on('click', function() {
            console.log( lb.modal_edit ); // Access to core plugin option
        });
    }

 });

})( jQuery );

The matter is I can't get the extended plugin working, the this.find(".element a").on('click', function() { doesn't work, I mean console.log is never fired weather can't get access to lb.modal_edit or extending in wrong way...

Also I need both of functionality to work the core plugin and the extended one, extending plugin shouldn't deactivate core functions..

Thanks in advance.

Get what working? You've not explained what you're trying to achieve. — Rory McCrossan, Aug 23 '13 at 12:49
Just edited the question sorry for frustration, the event is not getting fired from extended plugin.. — simultsop, Aug 23 '13 at 12:50
Silly question, but... you have both files included in your webpage? — Richard, Aug 23 '13 at 12:50
Yeah I did stuck on this 2 hours or more I'm tryin it in local server :S — simultsop, Aug 23 '13 at 12:52
Yeah tried that however, also tried the core and easiest access by trying to console log it, tried this,parent but no chance. — simultsop, Aug 23 '13 at 12:58
Hi Richard I do use firebug and I don't think the coma is causing the matter browser in use is firefox. Thanks for your suggestion. — simultsop, Aug 23 '13 at 13:29

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

There are two approaches you could take. First, you could pass another option to your core plugin that would allow you to execute a callback function.

The second approach would be to extend the prototype of the core plugin. Like this:

$.fn.pageBuilder.prototype.newFunction = function() {};

As for the lb variable, to get access to it, you'll need to expose it in your core plugin, since it's an internal variable.

this.lb = lb;

(Not sure if that would work exactly as is, but you need to expose it somehow.)

edited May 23 '17 at 11:56

Community

1
1

answered Aug 23 '13 at 13:09

Richard

6,215
4
33
48

Thought it will do the trick I defined this.lb = lb; but this is what I get on firebug: TypeError: this.lb is undefined console.log( this.lb.modal_edit ) – simultsop Aug 23 '13 at 13:25
By the link you've provided, when do the showid get fired? I applied the code but no activity in console of firebug... – simultsop Aug 23 '13 at 13:33
Functions in javascript are not inherently extendable. Id Est: You can't add code to the end of a function. The core plugin is a function (that sets attributes on `this`, which are accessible). To extend the "pageBuilder" plugin, you have to add new functions to it. For this "newFunction()" above, you will have to call it explicitly from somewhere. – Richard Aug 23 '13 at 13:43
So how do I call newFunction() on core plugin or should I call it on creating instance ? – simultsop Aug 23 '13 at 13:51
From the core function, I would recommend passing the function in as another option. However, you could also do something like: `if (typeof this.newFunction() !== "undefined") { this.newFunction()}` (or whatever the syntax is for dynamic invocation) – Richard Aug 23 '13 at 13:54

jquery plugin code separate multiple files

1 Answers1