[Sommaire] [Imprimer]

   1  /**
   2   * $Id: mcwindows.js 18 2006-06-29 14:11:23Z spocke $
   3   *
   4   * Moxiecode DHTML Windows script.
   5   *
   6   * @author Moxiecode
   7   * @copyright Copyright © 2004, Moxiecode Systems AB, All rights reserved.
   8   */
   9  
  10  // Windows handler
  11  function MCWindows() {
  12      this.settings = new Array();
  13      this.windows = new Array();
  14      this.isMSIE = (navigator.appName == "Microsoft Internet Explorer");
  15      this.isGecko = navigator.userAgent.indexOf('Gecko') != -1;
  16      this.isSafari = navigator.userAgent.indexOf('Safari') != -1;
  17      this.isMac = navigator.userAgent.indexOf('Mac') != -1;
  18      this.isMSIE5_0 = this.isMSIE && (navigator.userAgent.indexOf('MSIE 5.0') != -1);
  19      this.action = "none";
  20      this.selectedWindow = null;
  21      this.zindex = 100;
  22      this.mouseDownScreenX = 0;
  23      this.mouseDownScreenY = 0;
  24      this.mouseDownLayerX = 0;
  25      this.mouseDownLayerY = 0;
  26      this.mouseDownWidth = 0;
  27      this.mouseDownHeight = 0;
  28  };
  29  
  30  MCWindows.prototype.init = function(settings) {
  31      this.settings = settings;
  32  
  33      if (this.isMSIE)
  34          this.addEvent(document, "mousemove", mcWindows.eventDispatcher);
  35      else
  36          this.addEvent(window, "mousemove", mcWindows.eventDispatcher);
  37  
  38      this.addEvent(document, "mouseup", mcWindows.eventDispatcher);
  39  };
  40  
  41  MCWindows.prototype.getParam = function(name, default_value) {
  42      var value = null;
  43  
  44      value = (typeof(this.settings[name]) == "undefined") ? default_value : this.settings[name];
  45  
  46      // Fix bool values
  47      if (value == "true" || value == "false")
  48          return (value == "true");
  49  
  50      return value;
  51  };
  52  
  53  MCWindows.prototype.eventDispatcher = function(e) {
  54      e = typeof(e) == "undefined" ? window.event : e;
  55  
  56      if (mcWindows.selectedWindow == null)
  57          return;
  58  
  59      // Switch focus
  60      if (mcWindows.isGecko && e.type == "mousedown") {
  61          var elm = e.currentTarget;
  62  
  63          for (var n in mcWindows.windows) {
  64              var win = mcWindows.windows[n];
  65              if (typeof(win) == 'function')
  66                  continue;
  67  
  68              if (win.headElement == elm || win.resizeElement == elm) {
  69                  win.focus();
  70                  break;
  71              }
  72          }
  73      }
  74  
  75      switch (e.type) {
  76          case "mousemove":
  77              mcWindows.selectedWindow.onMouseMove(e);
  78              break;
  79  
  80          case "mouseup":
  81              mcWindows.selectedWindow.onMouseUp(e);
  82              break;
  83  
  84          case "mousedown":
  85              mcWindows.selectedWindow.onMouseDown(e);
  86              break;
  87  
  88          case "focus":
  89              mcWindows.selectedWindow.onFocus(e);
  90              break;
  91      }
  92  }
  93  
  94  MCWindows.prototype.addEvent = function(obj, name, handler) {
  95      if (this.isMSIE)
  96          obj.attachEvent("on" + name, handler);
  97      else
  98          obj.addEventListener(name, handler, true);
  99  };
 100  
 101  MCWindows.prototype.cancelEvent = function(e) {
 102      if (this.isMSIE) {
 103          e.returnValue = false;
 104          e.cancelBubble = true;
 105      } else
 106          e.preventDefault();
 107  };
 108  
 109  MCWindows.prototype.parseFeatures = function(opts) {
 110      // Cleanup the options
 111      opts = opts.toLowerCase();
 112      opts = opts.replace(/;/g, ",");
 113      opts = opts.replace(/[^0-9a-z=,]/g, "");
 114  
 115      var optionChunks = opts.split(',');
 116      var options = new Array();
 117  
 118      options['left'] = 10;
 119      options['top'] = 10;
 120      options['width'] = 300;
 121      options['height'] = 300;
 122      options['resizable'] = true;
 123      options['minimizable'] = true;
 124      options['maximizable'] = true;
 125      options['close'] = true;
 126      options['movable'] = true;
 127  
 128      if (opts == "")
 129          return options;
 130  
 131      for (var i=0; i<optionChunks.length; i++) {
 132          var parts = optionChunks[i].split('=');
 133  
 134          if (parts.length == 2)
 135              options[parts[0]] = parts[1];
 136      }
 137  
 138      return options;
 139  };
 140  
 141  MCWindows.prototype.open = function(url, name, features) {
 142      var win = new MCWindow();
 143      var winDiv, html = "", id;
 144  
 145      features = this.parseFeatures(features);
 146  
 147      // Create div
 148      id = "mcWindow_" + name;
 149  
 150      width = parseInt(features['width']);
 151      height = parseInt(features['height'])-12-19;
 152  
 153      if (this.isMSIE)
 154          width -= 2;
 155  
 156      // Setup first part of window
 157      win.id = id;
 158      win.url = url;
 159      win.name = name;
 160      win.features = features;
 161      this.windows[name] = win;
 162  
 163      iframeWidth = width;
 164      iframeHeight = height;
 165  
 166      // Create inner content
 167      html += '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';
 168      html += '<html>';
 169      html += '<head>';
 170      html += '<title>Wrapper iframe</title>';
 171      html += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">';
 172      html += '<link href="../jscripts/tiny_mce/themes/advanced/css/editor_ui.css" rel="stylesheet" type="text/css" />';
 173      html += '</head>';
 174      html += '<body onload="parent.mcWindows.onLoad(\'' + name + '\');">';
 175  
 176      html += '<div id="' + id + '_container" class="mceWindow">';
 177      html += '<div id="' + id + '_head" class="mceWindowHead" onmousedown="parent.mcWindows.windows[\'' + name + '\'].focus();">';
 178      html += '  <div id="' + id + '_title" class="mceWindowTitle"';
 179      html += '  onselectstart="return false;" unselectable="on" style="-moz-user-select: none !important;">No name window</div>';
 180      html += '    <div class="mceWindowHeadTools">';
 181      html += '      <a href="javascript:parent.mcWindows.windows[\'' + name + '\'].close();" onmousedown="return false;" class="mceWindowClose"><img border="0" src="../jscripts/tiny_mce/themes/advanced/images/window_close.gif" /></a>';
 182  //    html += '      <a href="javascript:mcWindows.windows[\'' + name + '\'].maximize();" onmousedown="return false;" class="mceWindowMaximize"></a>';
 183  //    html += '      <a href="javascript:mcWindows.windows[\'' + name + '\'].minimize();" onmousedown="return false;" class="mceWindowMinimize"></a>';
 184      html += '    </div>';
 185      html += '</div><div id="' + id + '_body" class="mceWindowBody" style="width: ' + width + 'px; height: ' + height + 'px;">';
 186      html += '<iframe id="' + id + '_iframe" name="' + id + '_iframe" onfocus="parent.mcWindows.windows[\'' + name + '\'].focus();" frameborder="0" width="' + iframeWidth + '" height="' + iframeHeight + '" src="' + url + '" class="mceWindowBodyIframe"></iframe></div>';
 187      html += '<div id="' + id + '_statusbar" class="mceWindowStatusbar" onmousedown="parent.mcWindows.windows[\'' + name + '\'].focus();">';
 188      html += '<div id="' + id + '_resize" class="mceWindowResize"><img onmousedown="parent.mcWindows.windows[\'' + name + '\'].focus();" border="0" src="../jscripts/tiny_mce/themes/advanced/images/window_resize.gif" /></div>';
 189      html += '</div>';
 190      html += '</div>';
 191  
 192      html += '</body>';
 193      html += '</html>';
 194  
 195      // Create iframe
 196      this.createFloatingIFrame(id, features['left'], features['top'], features['width'], features['height'], html);
 197  };
 198  
 199  // Gets called when wrapper iframe is initialized
 200  MCWindows.prototype.onLoad = function(name) {
 201      var win = mcWindows.windows[name];
 202      var id = "mcWindow_" + name;
 203      var wrapperIframe = window.frames[id + "_iframe"].frames[0];
 204      var wrapperDoc = window.frames[id + "_iframe"].document;
 205      var doc = window.frames[id + "_iframe"].document;
 206      var winDiv = document.getElementById("mcWindow_" + name + "_div");
 207      var realIframe = window.frames[id + "_iframe"].frames[0];
 208  
 209      // Set window data
 210      win.id = "mcWindow_" + name + "_iframe";
 211      win.winElement = winDiv;
 212      win.bodyElement = doc.getElementById(id + '_body');
 213      win.iframeElement = doc.getElementById(id + '_iframe');
 214      win.headElement = doc.getElementById(id + '_head');
 215      win.titleElement = doc.getElementById(id + '_title');
 216      win.resizeElement = doc.getElementById(id + '_resize');
 217      win.containerElement = doc.getElementById(id + '_container');
 218      win.left = win.features['left'];
 219      win.top = win.features['top'];
 220      win.frame = window.frames[id + '_iframe'].frames[0];
 221      win.wrapperFrame = window.frames[id + '_iframe'];
 222      win.wrapperIFrameElement = document.getElementById(id + "_iframe");
 223  
 224      // Add event handlers
 225      mcWindows.addEvent(win.headElement, "mousedown", mcWindows.eventDispatcher);
 226      mcWindows.addEvent(win.resizeElement, "mousedown", mcWindows.eventDispatcher);
 227  
 228      if (mcWindows.isMSIE) {
 229          mcWindows.addEvent(realIframe.document, "mousemove", mcWindows.eventDispatcher);
 230          mcWindows.addEvent(realIframe.document, "mouseup", mcWindows.eventDispatcher);
 231      } else {
 232          mcWindows.addEvent(realIframe, "mousemove", mcWindows.eventDispatcher);
 233          mcWindows.addEvent(realIframe, "mouseup", mcWindows.eventDispatcher);
 234          mcWindows.addEvent(realIframe, "focus", mcWindows.eventDispatcher);
 235      }
 236  
 237      for (var i=0; i<window.frames.length; i++) {
 238          if (!window.frames[i]._hasMouseHandlers) {
 239              if (mcWindows.isMSIE) {
 240                  mcWindows.addEvent(window.frames[i].document, "mousemove", mcWindows.eventDispatcher);
 241                  mcWindows.addEvent(window.frames[i].document, "mouseup", mcWindows.eventDispatcher);
 242              } else {
 243                  mcWindows.addEvent(window.frames[i], "mousemove", mcWindows.eventDispatcher);
 244                  mcWindows.addEvent(window.frames[i], "mouseup", mcWindows.eventDispatcher);
 245              }
 246  
 247              window.frames[i]._hasMouseHandlers = true;
 248          }
 249      }
 250  
 251      if (mcWindows.isMSIE) {
 252          mcWindows.addEvent(win.frame.document, "mousemove", mcWindows.eventDispatcher);
 253          mcWindows.addEvent(win.frame.document, "mouseup", mcWindows.eventDispatcher);
 254      } else {
 255          mcWindows.addEvent(win.frame, "mousemove", mcWindows.eventDispatcher);
 256          mcWindows.addEvent(win.frame, "mouseup", mcWindows.eventDispatcher);
 257          mcWindows.addEvent(win.frame, "focus", mcWindows.eventDispatcher);
 258      }
 259  
 260      this.selectedWindow = win;
 261  };
 262  
 263  MCWindows.prototype.createFloatingIFrame = function(id_prefix, left, top, width, height, html) {
 264      var iframe = document.createElement("iframe");
 265      var div = document.createElement("div");
 266  
 267      width = parseInt(width);
 268      height = parseInt(height)+1;
 269  
 270      // Create wrapper div
 271      div.setAttribute("id", id_prefix + "_div");
 272      div.setAttribute("width", width);
 273      div.setAttribute("height", (height));
 274      div.style.position = "absolute";
 275      div.style.left = left + "px";
 276      div.style.top = top + "px";
 277      div.style.width = width + "px";
 278      div.style.height = (height) + "px";
 279      div.style.backgroundColor = "white";
 280      div.style.display = "none";
 281  
 282      if (this.isGecko) {
 283          iframeWidth = width + 2;
 284          iframeHeight = height + 2;
 285      } else {
 286          iframeWidth = width;
 287          iframeHeight = height + 1;
 288      }
 289  
 290      // Create iframe
 291      iframe.setAttribute("id", id_prefix + "_iframe");
 292      iframe.setAttribute("name", id_prefix + "_iframe");
 293      iframe.setAttribute("border", "0");
 294      iframe.setAttribute("frameBorder", "0");
 295      iframe.setAttribute("marginWidth", "0");
 296      iframe.setAttribute("marginHeight", "0");
 297      iframe.setAttribute("leftMargin", "0");
 298      iframe.setAttribute("topMargin", "0");
 299      iframe.setAttribute("width", iframeWidth);
 300      iframe.setAttribute("height", iframeHeight);
 301  //    iframe.setAttribute("src", "../jscripts/tiny_mce/blank.htm");
 302      // iframe.setAttribute("allowtransparency", "false");
 303      iframe.setAttribute("scrolling", "no");
 304      iframe.style.width = iframeWidth + "px";
 305      iframe.style.height = iframeHeight + "px";
 306      iframe.style.backgroundColor = "white";
 307      div.appendChild(iframe);
 308  
 309      document.body.appendChild(div);
 310  
 311      // Fixed MSIE 5.0 issue
 312      div.innerHTML = div.innerHTML;
 313  
 314      if (this.isSafari) {
 315          // Give Safari some time to setup
 316          window.setTimeout(function() {
 317              doc = window.frames[id_prefix + '_iframe'].document;
 318              doc.open();
 319              doc.write(html);
 320              doc.close();
 321          }, 10);
 322      } else {
 323          doc = window.frames[id_prefix + '_iframe'].window.document
 324          doc.open();
 325          doc.write(html);
 326          doc.close();
 327      }
 328  
 329      div.style.display = "block";
 330  
 331      return div;
 332  };
 333  
 334  // Window instance
 335  function MCWindow() {
 336  };
 337  
 338  MCWindow.prototype.focus = function() {
 339      this.winElement.style.zIndex = mcWindows.zindex++;
 340      mcWindows.selectedWindow = this;
 341  };
 342  
 343  MCWindow.prototype.minimize = function() {
 344  };
 345  
 346  MCWindow.prototype.maximize = function() {
 347      
 348  };
 349  
 350  MCWindow.prototype.startResize = function() {
 351      mcWindows.action = "resize";
 352  };
 353  
 354  MCWindow.prototype.startMove = function(e) {
 355      mcWindows.action = "move";
 356  };
 357  
 358  MCWindow.prototype.close = function() {
 359      document.body.removeChild(this.winElement);
 360      mcWindows.windows[this.name] = null;
 361  };
 362  
 363  MCWindow.prototype.onMouseMove = function(e) {
 364      var scrollX = 0;//this.doc.body.scrollLeft;
 365      var scrollY = 0;//this.doc.body.scrollTop;
 366  
 367      // Calculate real X, Y
 368      var dx = e.screenX - mcWindows.mouseDownScreenX;
 369      var dy = e.screenY - mcWindows.mouseDownScreenY;
 370  
 371      switch (mcWindows.action) {
 372          case "resize":
 373              width = mcWindows.mouseDownWidth + (e.screenX - mcWindows.mouseDownScreenX);
 374              height = mcWindows.mouseDownHeight + (e.screenY - mcWindows.mouseDownScreenY);
 375  
 376              width = width < 100 ? 100 : width;
 377              height = height < 100 ? 100 : height;
 378  
 379              this.wrapperIFrameElement.style.width = width+2;
 380              this.wrapperIFrameElement.style.height = height+2;
 381              this.wrapperIFrameElement.width = width+2;
 382              this.wrapperIFrameElement.height = height+2;
 383              this.winElement.style.width = width;
 384              this.winElement.style.height = height;
 385  
 386              height = height-12-19;
 387  
 388              this.containerElement.style.width = width;
 389  
 390              this.iframeElement.style.width = width;
 391              this.iframeElement.style.height = height;
 392              this.bodyElement.style.width = width;
 393              this.bodyElement.style.height = height;
 394              this.headElement.style.width = width;
 395              //this.statusElement.style.width = width;
 396  
 397              mcWindows.cancelEvent(e);
 398              break;
 399  
 400          case "move":
 401              this.left = mcWindows.mouseDownLayerX + (e.screenX - mcWindows.mouseDownScreenX);
 402              this.top = mcWindows.mouseDownLayerY + (e.screenY - mcWindows.mouseDownScreenY);
 403              this.winElement.style.left = this.left + "px";
 404              this.winElement.style.top = this.top + "px";
 405  
 406              mcWindows.cancelEvent(e);
 407              break;
 408      }
 409  };
 410  
 411  MCWindow.prototype.onMouseUp = function(e) {
 412      mcWindows.action = "none";
 413  };
 414  
 415  MCWindow.prototype.onFocus = function(e) {
 416      // Gecko only handler
 417      var winRef = e.currentTarget;
 418  
 419      for (var n in mcWindows.windows) {
 420          var win = mcWindows.windows[n];
 421          if (typeof(win) == 'function')
 422              continue;
 423  
 424          if (winRef.name == win.id) {
 425              win.focus();
 426              return;
 427          }
 428      }
 429  };
 430  
 431  MCWindow.prototype.onMouseDown = function(e) {
 432      var elm = mcWindows.isMSIE ? this.wrapperFrame.event.srcElement : e.target;
 433  
 434      var scrollX = 0;//this.doc.body.scrollLeft;
 435      var scrollY = 0;//this.doc.body.scrollTop;
 436  
 437      mcWindows.mouseDownScreenX = e.screenX;
 438      mcWindows.mouseDownScreenY = e.screenY;
 439      mcWindows.mouseDownLayerX = this.left;
 440      mcWindows.mouseDownLayerY = this.top;
 441      mcWindows.mouseDownWidth = parseInt(this.winElement.style.width);
 442      mcWindows.mouseDownHeight = parseInt(this.winElement.style.height);
 443  
 444      if (elm == this.resizeElement.firstChild)
 445          this.startResize(e);
 446      else
 447          this.startMove(e);
 448  
 449      mcWindows.cancelEvent(e);
 450  };
 451  
 452  // Global instance
 453  var mcWindows = new MCWindows();