[Summary view] [Print] [Text view]

   1  var MyModal = Class.create();
   2  
   3  MyModal.prototype = {
   4      initialize: function(options)
   5      {
   6          this.options = {
   7              overlay: 50,
   8              overlayCss: {},
   9              containerCss: {},
  10              close: true,
  11              closeTitle: 'Close',
  12              onOpen: null,
  13              onShow: null,
  14              onClose: null,
  15              onBeforeClose: null,
  16              type: 'string',
  17              width: '630',
  18              buttons: '',
  19              title: '',
  20              formId: 'modal_form',
  21          };
  22          
  23          Object.extend(this.options, options || {});
  24          
  25          this.generateModal();
  26      },
  27      
  28      displayModal: function(data)
  29      {
  30          // handle ACP session timeout and other error
  31          if(data == "<error>login</error>")
  32          {
  33              window.location = "./index.php";
  34              return;
  35          }
  36          
  37          this.hideLoader();
  38          modalContent = '';
  39          
  40          // Doesn't work in IE6 or below
  41          modalContent = '<div id="ModalTopLeftCorner"></div><div id="ModalTopBorder"></div><div id="ModalTopRightCorner"></div><div id="ModalLeftBorder"></div><div id="ModalRightBorder"></div><div id="ModalBottomLeftCorner"></div><div id="ModalBottomRightCorner"></div><div id="ModalBottomBorder"></div>';
  42          
  43          if(data.indexOf('ModalTitle') > 0 && data.indexOf('ModalContent') > 0)
  44          {
  45              modalContent += '<div id="ModalContentContainer">'+data+'</div>';
  46          }
  47          else
  48          {
  49              modalContent += '<div id="ModalContentContainer"><div class="ModalTitle">'+this.options.title+'</div><div class="ModalContent">'+data+'</div><div class="ModalButtonRow">'+this.options.buttons+'</div></div>';
  50          }
  51  
  52          // Doesn't work in IE6 or below
  53          cssPosition = 'fixed';
  54          
  55          var container = document.createElement('div');
  56          container.id = 'ModalContainer';
  57          container.className = 'ModalContainer';
  58          container.style.width = this.options.width+'px';
  59          container.style.position = cssPosition;
  60          container.style.zIndex = 3100;
  61          container.style.marginLeft = '-'+(this.options.width/2)+'px';
  62          
  63          var modalData = document.createElement('div');
  64          modalData.className = 'modalData';
  65          modalData.innerHTML = modalContent;
  66          container.appendChild(modalData);
  67          
  68          // Insert into the body
  69          owner = document.getElementsByTagName("body").item(0);
  70          owner.appendChild(container);
  71  
  72          // Observe the escape buttons!
  73          Event.observe("modalClose", 'click', this.close.bind(this));
  74          Event.observe("modalCancel", 'click', this.close.bind(this));
  75          Event.observe("modalSubmit", 'click', this.submit.bind(this));
  76  
  77          if(MyBB.browser == "ie" || MyBB.browser == "opera" || MyBB.browser == "safari" || MyBB.browser == "chrome")
  78          {
  79              var scripts = data.extractScripts();
  80              scripts.each(function(script)
  81              {
  82                  eval(script);
  83              });
  84          }
  85          else
  86          {
  87              data.evalScripts();
  88          }
  89          
  90          $('ModalContainer').show();
  91      },
  92      
  93      showLoader: function()
  94      {
  95          this.loader = document.createElement('div');
  96          this.loader.id = 'ModalLoadingIndicator';
  97          
  98          // Insert into the body
  99          Element.insert(document.body, { 'after': this.loader });
 100      },
 101      
 102      showOverlayLoader: function()
 103      {
 104          this.overlayLoader = document.createElement('div');
 105          this.overlayLoader.id = 'ModalOverlay';
 106          this.overlayLoader.className = 'ModalOverlay';
 107          this.overlayLoader.style.height = '100%';
 108          this.overlayLoader.style.width = '100%';
 109          this.overlayLoader.style.position = 'fixed';
 110          this.overlayLoader.style.left = 0;
 111          this.overlayLoader.style.top = 0;
 112          this.overlayLoader.style.zIndex = 3000;
 113  
 114          Element.insert(document.body, { 'after': this.overlayLoader });
 115  
 116          // Insert into the body
 117          // Opacity
 118          if(MyBB.browser != "ie")
 119          {
 120              $("ModalOverlay").style.opacity = this.options.overlay / 100;
 121          }
 122          else
 123          {
 124              // IE 8 and IE 9 does this nicely - IE 7 ignores
 125              $("ModalOverlay").setStyle(
 126              {
 127                  opacity: this.options.overlay / 100
 128              });
 129          }
 130  
 131          this.showLoader();
 132      },
 133      
 134      hideOverlayLoader: function()
 135      {
 136          $('ModalLoadingIndicator').remove();
 137          $('ModalOverlay').remove();
 138      },
 139      
 140      hideLoader: function()
 141      {
 142          $('ModalLoadingIndicator').remove();
 143      },
 144      
 145      generateModal: function()
 146      {
 147          this.showOverlayLoader();
 148          Event.observe(document, 'keypress', this.closeListener.bindAsEventListener(this));
 149  
 150          if(this.options.type == 'ajax')
 151          {
 152              new Ajax.Request(this.options.url, {
 153                  method: 'get',
 154                  parameters: { time: new Date().getTime() },
 155                  onComplete: function(request) { this.displayModal(request.responseText); }.bind(this)
 156              });
 157          }
 158          else
 159          {
 160              this.displayModal(this.options.data);
 161          }
 162      },
 163  
 164      submit: function(e)
 165      {
 166          Event.stop(e);
 167          
 168          this.showOverlayLoader();
 169          var postData = $(this.options.formId).serialize();
 170          this.postData = $(this.options.formId).serialize(true);
 171          
 172          new Ajax.Request(this.options.url, {
 173              method: 'post',
 174              postBody: postData+"&ajax=1&time=" + new Date().getTime(),
 175              onComplete: this.onComplete.bind(this),
 176          });
 177      },
 178      
 179      onComplete: function(request)
 180      {
 181          var data = request.responseText;
 182          
 183          if(MyBB.browser == "ie" || MyBB.browser == "opera" || MyBB.browser == "safari" || MyBB.browser == "chrome")
 184          {
 185              var scripts = data.extractScripts();
 186              scripts.each(function(script)
 187              {
 188                  eval(script);
 189              });
 190          }
 191          else
 192          {
 193              data.evalScripts();
 194          }
 195          
 196          this.hideOverlayLoader();
 197          this.close();
 198      },
 199      
 200      closeListener: function(e)
 201      {
 202          if(e.keyCode == 27)
 203          {
 204              this.close();
 205          }
 206  
 207          return false;
 208      },
 209      
 210      close: function(e)
 211      {
 212          if(e)
 213          {
 214              Event.stop(e);
 215          }
 216          
 217          $('ModalContainer').remove();
 218          if($('ModalLoadingIndicator'))
 219          {
 220              $('ModalLoadingIndicator').remove();
 221          }
 222  
 223          // ModalContentContainer
 224          if($('ModalOverlay'))
 225          {
 226              $('ModalOverlay').remove();
 227          }
 228      }
 229  };