jQuery: How to get value from "this" object?

Question

I made one helper for open new popup window on click and I have a problem with setup default values inside object. I need to calculate position for TOP and LEFT position for popup to center new popup. Here is complete code:

/*
    $(element).onPopup(options); - Open Popup window
    -Ths function open new popup window on your browser

    EXAMPLE:
    ----------------------------------------------
    <a href="http://google.com">Google</a>

    $("a#link").onPopup({
        name        :   "Popup Window",
        width       :   800,
        height      :   600
    });

    OPTIONS:
    ----------------------------------------------
    attr            // attribute where is located link
    name            // name of popup window
    width           // max width
    height          // max height
    left            // position left    (px)
    top             // position top (px)
    resizable       // resizable 1 or 0
    location        // display location 1 or 0
    fullscreen      // open in full screen  1 or 0
    scrollbars      // display scroll bars  1 or 0
    titlebar        // display title bar    1 or 0
    toolbar         // display tool bar     1 or 0
    directories     // display directories  1 or 0
*/
$.fn.onPopup=function(options){
    var s   = {
            attr        :   "href",
            name        :   "Popup Window",
            width       :   700,
            height      :   600,
            left        :   ($(window).width()/2)-(this.width/2),
            top         :   ($(window).height()/2)-(this.height/2),
            resizable   :   0,
            location    :   0,
            fullscreen  :   0,
            scrollbars  :   1,
            titlebar    :   0,
            toolbar     :   0,
            directories :   0
        },
        $element    = this;

    s = $.extend(s,options);

    $element.on("click",function(e) {
        e.stopPropagation(); e.preventDefault();
        window.open(
            $(this).attr(s.attr), s.name, "width="+s.width+", height="+s.height+", directories="+s.directories+", toolbar="+s.toolbar+", titlebar="+s.titlebar+", scrollbars="+s.scrollbars+", fullscreen="+s.fullscreen+", location="+s.location+", resizable="+s.resizable+", top="+s.top+", left="+s.left
        );
     });
};

And here is where is my problem:

var s   = {
             /*...*/

                width       :   700,
                height      :   600,
                left        :   ($(window).width()/2)-(this.width/2),
                top         :   ($(window).height()/2)-(this.height/2),

             /*...*/

            },

How to pass width/height to another object to work?

Answer 1

One way is to create the object first then add extra properties that reference other properties in the object

var s   = {
        attr        :   "href",
        name        :   "Popup Window",
        width       :   700,
        height      :   600,
        left        :   null, //calculated if not user provided
        top         :   null  //calculated if not user provided
       ....
    };

// update user settings
s = $.extend(s,options);

// calculate based on actual values
if(s.left === null){
   s.left =  ($(window).width()/2)-(s.width/2);
}
if(s.top === null){
   s.top  =  ($(window).height()/2)-(s.height/2);
}

Also note you should return this.each(.. and run your business there so you have separate instances when selector includes more than one element as well as make the plugin chainable with other jQuery methods

Answer 2

According to your API in the code comments you want the caller to be able to specify their own left and top positions.

You therefore need to check whether any values have been given at all, and only then calculate the default position based on the configured width and height.

var s = {
    ... // defaults, *not including* "left" and "top"
};

// override the defaults with the user-supplied options
// NB: no need to re-assign to `s` - `$.extend` overwrites
//     the contents of the first parameter
$.extend(s, options);

// then calculate `left` and `top` if they weren't supplied
if (s.left === undefined) {
    s.left = ($(window).width() - s.width) / 2;
}
if (s.top === undefined) {
    s.top  = ($(window).height() - s.height) / 2;
}