4 Replies Latest reply on Oct 17, 2011 4:11 AM by kevin 2

    How to override ModalPanel show and hide JavaScript functions

    kevin 2 Newbie

      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.

        • 1. Re: How to override ModalPanel show and hide JavaScript functions
          Christian Peter Expert

          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.

          • 2. Re: How to override ModalPanel show and hide JavaScript functions
            kevin 2 Newbie

            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 ?

            • 3. Re: How to override ModalPanel show and hide JavaScript functions
              Christian Peter Expert

              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);

                  }

              }

              • 4. Re: How to override ModalPanel show and hide JavaScript functions
                kevin 2 Newbie

                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]));
                };