webcit/tiny_mce/plugins/inlinepopups/jscripts/mcwindows.js

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