How to override ModalPanel show and hide JavaScript functions

[klhoste2]

Hi,

Does someone know how to override Richfaces JavaScript functions that are called when a ModalPanel is shown are hidden ?

As I know, there are two ways to show (or hide) a ModalPanel :

RichFaces.showModalPanel(id);

#{rich:component('mp')}.show();

The first one is easy to override, I have just to write this :

var rfShowMp = RichFaces.showModalPanel;
RichFaces.showModalPanel = function(id) {
  //something
  rfShowMp(id);
};

But sometimes the second function is called and I have no idea on how to override it.

Thanks for you help.

[mcmurdosound]

Maybe a look into the prototype for the ModalPanel js object could be helpful.

"ModalPanel.prototype.show"

Overriding this should effect all modalpanels created instantly.

[klhoste2]

I tried to do this but the modal panel doesn't open...

var rfShowMp = ModalPanel.prototype.show;
ModalPanel.prototype.show = function(a, b) {
  //something
  rfShowMp(a, b);
};

Any idea ?

[mcmurdosound]

You have to look into the ModalPanel.prototype.show function. It's been used by the Richfaces.showModalPanel(id) function as well to show modalpanels.

ModalPanel.prototype.show = function (T, N) {

    if (!this.shown && this.invokeEvent("beforeshow", T, null, A)) {

        var A = this.id;

        this.preventFocus();

        if (!this.domReattached) {

            this.parent = A.parentNode;

            var P;

            if (N) {

                P = N.domElementAttachment;

            }

            if (!P) {

                P = this.options.domElementAttachment;

            }

            var L;

            if ("parent" == P) {

                L = this.parent;

            } else {

                if ("form" == P) {

                    L = this._findForm(A) || document.body;

                } else {

                    L = document.body;

                }

            }

            if (L != this.parent) {

                this._saveInputValues(A);

                L.insertBefore(A, null);

                this.domReattached = true;

            } else {

                Element.show(this.parent);

            }

        }

        var W = $(this.cdiv);

        var E = W.getElementsByTagName("form");

        if (this.options.keepVisualState && E) {

            this.formOnsubmit = this.setStateInput.bindAsEventListener(this);

            for (var U = 0; U < E.length; U++) {

                Event.observe(E[U], "submit", this.formOnsubmit);

            }

        }

        var H;

        if ((ModalPanel.disableSelects || this.options.overlapEmbedObjects) &&

            !this.iframe) {

            this.iframe = this.id.id + "IFrame";

            new Insertion.Top(W, "<iframe src=\"javascript:''\" frameborder=\"0\" scrolling=\"no\" id=\"" + this.iframe + "\" class=\"rich-mpnl-iframe\" style=\"width: 1px; height: 1px;\"></iframe>");

            H = $(this.iframe);

            Event.observe(H, "load", this.initIframe.bindAsEventListener(H));

        }

        var D = {};

        this.userOptions = {};

        if (!W.mpSet) {

            Object.extend(D, this.options);

        }

        if (N) {

            Object.extend(D, N);

            Object.extend(this.userOptions, N);

        }

        this.currentMinHeight = ModalPanel.getMinimumSize(D.minHeight || D.minHeight == 0 ? D.minHeight : this.minHeight);

        this.currentMinWidth = ModalPanel.getMinimumSize(D.minWidth || D.minWidth == 0 ? D.minWidth : this.minWidth);

        var C = this.getContentElement();

        if (!this.options.autosized) {

            if (D.width && D.width == -1) {

                D.width = 300;

            }

            if (D.height && D.height == -1) {

                D.height = 200;

            }

        }

        if (D.width && D.width != -1) {

            if (this.currentMinWidth > D.width) {

                D.width = this.currentMinWidth;

            }

            C.style.width = D.width + (/px/.test(D.width) ? "" : "px");

        }

        if (D.height && D.height != -1) {

            if (this.currentMinHeight > D.height) {

                D.height = this.currentMinHeight;

            }

            C.style.height = D.height + (/px/.test(D.height) ? "" : "px");

        }

        W.mpSet = true;

        this.disableOuterSelects();

        ModalPanel.activePanels = ModalPanel.activePanels.without(this);

        ModalPanel.activePanels.push(this);

        var X = $(this.div);

        if (X.style.position == "absolute") {

            var K = "getSizeElement().clientWidth + \"px\"";

            var G = "getSizeElement().clientHeight + \"px\"";

            X.style.setExpression("width", K);

            X.style.setExpression("height", G);

            var M = $(this.cursorDiv);

            M.style.setExpression("width", K);

            M.style.setExpression("height", G);

            var Q = "-Position.cumulativeOffset(this.parentNode)[0] + getSizeElement().scrollLeft + \"px\"";

            var J = "-Position.cumulativeOffset(this.parentNode)[1] + getSizeElement().scrollTop + \"px\"";

            X.style.setExpression("left", Q);

            X.style.setExpression("top", J);

            M.style.setExpression("left", Q);

            M.style.setExpression("top", J);

            var I = "(this.mpLeft || 0) + -Position.cumulativeOffset(this.parentNode)[0] + getSizeElement().scrollLeft + \"px\"";

            var O = "(this.mpTop || 0) + -Position.cumulativeOffset(this.parentNode)[1] + getSizeElement().scrollTop + \"px\"";

            W.style.setExpression("left", I);

            W.style.setExpression("top", O);

        }

        A.style.visibility = "hidden";

        Element.show(A);

        this.correctShadowSize();

        if (D.left) {

            var V;

            if (D.left != "auto") {

                V = parseInt(D.left, 10);

            } else {

                var B = getSizeElement().clientWidth;

                var F = this.width();

                if (B >= F) {

                    V = (B - F) / 2;

                } else {

                    V = 0;

                }

            }

            this.setLeft(Math.round(V));

        }

        if (D.top) {

            var S;

            if (D.top != "auto") {

                S = parseInt(D.top, 10);

            } else {

                var B = getSizeElement().clientHeight;

                var Y = this.height();

                if (B >= Y) {

                    S = (B - Y) / 2;

                } else {

                    S = 0;

                }

            }

            this.setTop(Math.round(S));

        }

        if (this.options.autosized) {

            this.observerSize = window.setInterval(this.correctShadowSize.bindAsEventListener(this), 500);

        }

        this.doResizeOrMove(ModalPanel.Sizer.Diff.EMPTY);

        for (var R = 0; R < this.borders.length; R++) {

            this.borders[R].doPosition();

        }

        if (this.header) {

            this.header.doPosition();

        }

        Element.hide(W);

        A.style.visibility = "";

        this.lastOnfocus();

        Element.show(W);

        var T = {};

        T.parameters = N || {};

        this.shown = true;

        this.invokeEvent("show", T, null, A);

    }

}

[klhoste2]

Thanks, that's what I did, but I was wrong when overriding the prototype function, I resolved this with the following code:

var mpShow = ModalPanel.prototype.show;
ModalPanel.prototype.show = function()
{
    console.log("show");
    mpShow.apply(this, Array.prototype.slice.call(arguments, [1]));
};