Tag Archives: html

/*
(c) By Garry Lachman (http://www.garry-lachman.com), GPL License

Options:
* width, height = size of window
* top, left = position in px set 0 set center
* send_button = show send button
* send_button_caption = send button caption
* send_button_disabled = disbale send button
* cancel_button = show cancel button
* cancel_button_caption = disable cancel button

Methods
* enable_auto_resize = enable auto resize mode by content, for auto resize use Ben Alman jQuery resize
event plugin from here: http://benalman.com/projects/jquery-resize-plugin/
* change_height = change height (height in px, is using transcation)
* set_content = send html content
* get_content = get content rect
* disbaled = disable and enable popup
* send_button_disabled = disbale and enable send button
* add_click_event = add event to send and cancel buttons
* close = close window

*/

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

var popup_rect = {
    init: function(options, elem)   {
        this.options = $.extend(true,{}, this.options, options);
       
        this.elem = elem;
        this.$elem = $(elem);

        this._build();
    },
    options:    {
        width: 100,
        height: 100,
        top: 0,
        left: 0,
        send_button: true,
        send_button_caption: "Save",
        send_button_disabled: false,
        cancel_button: true,
        cancel_button_caption: "Cancel"
    },
    _build: function()  {
        var _this = this;
        this.$elem.hide();
        this.$elem.addClass("popup_rect");
        this.$elem.css({width: this.options.width,
                height: this.options.height,
                top: this.options.top,
                left: this.options.left-this.options.width});

        this.$elem.append("<div id='popup_content' class='popup_rect_content'></div>");
        this.$elem.append("<div class='popup_rect_buttons'></div>");

        if (this.options.send_button)   {
            this.$elem.find(".popup_rect_buttons").append("<div id='popup_rect_send_button' class='popup_rect_button'>"+this.options.send_button_caption+"</div>");
        }
        if (this.options.cancel_button)   {
                        this.$elem.find(".popup_rect_buttons").append("<div id='popup_rect_cancel_button' class='popup_rect_button'>"+this.options.cancel_button_caption+"</div>");
                }

        this.$elem.find(".popup_rect_buttons").children().addClass("hand_cursor");
    },
    change_height: function(_h, _no_fx) {
        var _this = this;
        if (_no_fx) {
            this.$elem.height(_h);
            if (_this.options.top ==0 && _this.options.left == 0)       {
                _this.$elem.center({transition: 100});
            }
        }   else    {
            this.$elem.animate({
                height: _h
            }, 500, function(){
                if (_this.options.top ==0 && _this.options.left == 0)       {
                                _this.$elem.center({transition: 100});
                        }  
            });
        }
    },
    enable_auto_resize: function()  {
        var _this = this;
        this.$elem.find("#popup_content").resize(function(_event){
            _this.change_height(_event.target.clientHeight + 15 + _this.$elem.find(".popup_rect_buttons").height(),true);
        });
    },
    set_content: function(_content) {
        this.$elem.find("#popup_content").html(_content);
        this.$elem.show();
    },
    get_content: function() {
        return this.$elem.find("#popup_content");
    },
    add_click_event: function(_button, _function)   {
        var self = this;
        switch (_button)    {
            case "send":
                this.$elem.find(".popup_rect_buttons").find("#popup_rect_send_button").click(function(){
                    if (!self.options.send_button_disabled) {
                        _function();
                    }
                });
            break;

            case "cancel":
                                this.$elem.find(".popup_rect_buttons").find("#popup_rect_cancel_button").click(_function);
                        break;
        }
    },
    show_rect: function()   {
        this.$elem.show();
        if (this.options.top ==0 && this.options.left == 0)       {
                        this.$elem.center({transition: 100});
                }
    },
    disbaled: function (is_disbaled)    {
        if (is_disbaled)    {
            this.$elem.prepend("<div class='popup_rect_disbaled'></div>");
            this.$elem.find(".popup_rect_disbaled").css({width: this.options.width,
                                    height: this.options.height});
        }   else    {
            this.$elem.find(".popup_rect_disbaled").remove();
        }
    },
    send_button_disabled: function(is_disbaled) {
        this.options.send_button_disabled = is_disbaled;
        var fadeVal = is_disbaled ? 0.5 : 1;
        this.$elem.find(".popup_rect_buttons").find("#popup_rect_send_button").fadeTo('slow', fadeVal);
       
    },
    close: function(_this)  {
        _this = _this ? _this : this;
        _this.$elem.fadeOut('fast', function(){
                        $(_this).empty();
                });
    }

};

$.fn.extend({
  center: function (options) {  
       var options =  $.extend({ // Default values
            inside:window, // element, center into window
            transition: 0, // millisecond, transition time
            minX:0, // pixel, minimum left element value
            minY:0, // pixel, minimum top element value
            withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
            vertical:true, // booleen, center vertical
            horizontal:true // booleen, center horizontal
       }, options);
       return this.each(function() {
            var props = {position:'absolute'};
            if (options.vertical) {
                 var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                 if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                 top = (top > options.minY ? top : options.minY);
                 $.extend(props, {top: top+'px'});
            }
               
            if (options.horizontal) {
                  var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                  if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                  left = (left > options.minX ? left : options.minX);
                  $.extend(props, {left: left+'px'});
            }
            if (options.transition > 0) {
            $(this).animate(props, options.transition);
        } else {
            $(this).css(props);
        }
            return $(this);
               
       });     
  }
});