Changeset 1010

Timestamp:

05/24/08 16:45:43 (5 years ago)

Author:

ray

Message:

further updates to new dialogs

Location:

branches/new-dialogs-merge

Files:

• Xinha.css (modified) (2 diffs)
• XinhaCore.js (modified) (4 diffs)
• modules/Dialogs/XinhaDialog.js (modified) (24 diffs)

branches/new-dialogs-merge/Xinha.css

@@ -122 +122 @@
 }
 .xinha_dialog_background {
+  filter: alpha(opacity = 0);
+  -moz-opacity: 0;
+  opacity: 0;
+  border:none;
+}
+.xinha_dialog_background.modal {
   background-color:#666;
   filter: alpha(opacity = 70);
@@ -127 +133 @@
   opacity: 0.7;
   border:none;
+}
+body.xinha_dialog_background.modal {
+  filter: alpha(opacity = 100);
 }
 .dialog .content { padding: 2px; }

branches/new-dialogs-merge/XinhaCore.js

@@ -2205 +2205 @@
     'lp_cell': this._panels.left.container,  // left panel
     'ed_cell': document.createElement('td'), // editor
-    'iframe_cover' : document.createElement('div'), //the editor iframe has to be covered when draging a dialog over it
     'rp_cell': this._panels.right.container, // right panel
 
@@ -2276 +2275 @@
   this._iframe.className = 'xinha_iframe';
   Xinha.freeLater(this, '_iframe');
-  
-  fw.iframe_cover.style.display = 'none';
-  fw.iframe_cover.style.position = 'absolute';
-  
-  fw.ed_cell.appendChild(fw.iframe_cover);
   
     // creates & appends the status bar
@@ -2665 +2659 @@
   this._textArea.style.height = this._iframe.style.height;
   this._textArea.style.width  = this._iframe.style.width;
-  
-  var iframePos = Xinha.getElementTopLeft(this._iframe);
-  framework.iframe_cover.style.top = iframePos.top;
-  framework.iframe_cover.style.left = iframePos.left;
-  framework.iframe_cover.style.height = this._iframe.style.height;
-  framework.iframe_cover.style.width = this._iframe.style.width;
-  
+
   this.notifyOf('resize', {width:this._htmlArea.offsetWidth, height:this._htmlArea.offsetHeight});
   this.firePluginEvent('onResize',this._htmlArea.offsetWidth, this._htmlArea.offsetWidth);
@@ -5504 +5492 @@
 };
 
+Xinha.getEvent = function(ev)
+{
+  return ev || window.event;
+}
 /**
  * Prepares an element to receive more than one DOM-0 event handler

branches/new-dialogs-merge/modules/Dialogs/XinhaDialog.js

@@ -14 +14 @@
     --  This is the new all-in-one implementation of dialogs for Xinha
     --
-
     --
     --  $HeadURL:http://svn.xinha.webfactional.com/trunk/modules/Dialogs/inline-dialog.js $
@@ -43 +42 @@
   
   
-  if (Xinha.is_ie && Xinha.ie_version < 7)
+  if (Xinha.is_ie)
   { // IE6 needs the iframe to hide select boxes
     var backG = document.createElement("iframe");
@@ -50 +49 @@
     {
       var doc = window.event.srcElement.contentWindow.document;
-      if (doc && doc.body)
-      {
-        doc.body.style.backgroundColor = "#666666";
+      if (this.readyState == 'complete' && doc && doc.body)
+      {
+        var div = doc.createElement('div');
+        //insert styles to make background color skinable
+        var styles, stylesheets = document.styleSheets;
+        for (var i=0;i<stylesheets.length;i++)
+        {
+          if (stylesheets[i].id.indexOf('Xinha') != -1 && stylesheets[i].cssText) 
+            styles += stylesheets[i].cssText;
+        }
+        div.innerHTML = '<br><style type="text/css">\ņ'+styles+'\n</style>'; // strange way, but didn't work otherwise
+        doc.getElementsByTagName('body')[0].appendChild(div);
+        doc.body.className = 'xinha_dialog_background';
+        if (dialog.modal) doc.body.className += ' modal';
       }
     }
@@ -62 +72 @@
   }
   backG.className = "xinha_dialog_background";
+  if (this.modal) backG.className += ' modal';
   with (backG.style)
   {
@@ -125 +136 @@
   
   captionBar.style.MozUserSelect = "none";
-  
+  captionBar.style.WebkitUserSelect = "none"; //seems to have no effect
+  captionBar.unselectable = "on";
+  captionBar.onselectstart = function() {return false;};
+
   this.buttons = document.createElement('div');
   with (this.buttons.style)
@@ -141 +155 @@
     this.closer.className= 'closeButton'; 
       
-    this.closer.onmousedown = function(ev) { this.className = "closeButton buttonClick"; Xinha._stopEvent((ev) ? ev : window.event); return false;};
-    this.closer.onmouseout = function(ev) { this.className = "closeButton"; Xinha._stopEvent((ev) ? ev : window.event); return false;};
+    this.closer.onmousedown = function(ev) { this.className = "closeButton buttonClick"; Xinha._stopEvent(Xinha.getEvent(ev)); return false;};
+    this.closer.onmouseout = function(ev) { this.className = "closeButton"; Xinha._stopEvent(Xinha.getEvent(ev)); return false;};
     this.closer.onmouseup = function() { this.className = "closeButton"; dialog.hide(); return false;};
   
@@ -153 +167 @@
   
     butX.appendChild(document.createTextNode('\u00D7')); // cross
+    //below different symbols for future use
     //butX.appendChild(document.createTextNode('\u25AC')); //bar
     //butX.appendChild(document.createTextNode('\u25BA')); //triangle right
@@ -242 +257 @@
   }
     
-  if ( modal )
-  {
-    this.posBackground({top:0, left:0}); 
-  }
- 
   // We need to preserve the selection
   // if this is called before some editor has been activated, it activates the editor
   if (Xinha._someEditorHasBeenActivated)
   {
-     this._lastRange = this.editor.saveSelection();
+    this._lastRange = this.editor.saveSelection();
      
     if (Xinha.is_ie && !modal)
@@ -272 +282 @@
   if ( !this.attached )
   {
-    this.showBackground();
-    var viewport = Xinha.viewportSize();
     if ( modal )
     {
-      var pageSize = Xinha.pageSize();
-      this.resizeBackground({width:pageSize.x + "px",height:pageSize.y + "px"});
-    }
-    var viewportHeight = viewport.y;
-    var viewportWidth = viewport.x;
+      this.showBackground()
+      this.posBackground({top:0, left:0}); 
+      this.resizeBackground(Xinha.Dialog.calcFullBgSize());
+    }
+    else this.background.style.display = '';
+
     //this.onResizeWin = function () {dialog.sizeBackground()};
     //Xinha._addEvent(window, 'resize', this.onResizeWin );
@@ -288 +297 @@
     var dialogHeight = rootElem.offsetHeight;
     var dialogWidth = rootElem.offsetWidth;
-
+    var viewport = Xinha.viewportSize();
+    var viewportHeight = viewport.y;
+    var viewportWidth = viewport.x;
+    
     if (dialogHeight >  viewportHeight)
     {
@@ -449 +461 @@
   if (!this.modal)
   {
-    Xinha.Dialog.coverIframes();
-  }
-  ev = ev || window.event;
+    this.posBackground({top:0, left:0}); 
+    this.resizeBackground(Xinha.Dialog.calcFullBgSize());
+  }
+  ev = Xinha.getEvent(ev);
   
   this.editor.suspendUpdateToolbar = true;
@@ -467 +480 @@
   dialog.mouseMove = function(ev) { dialog.dragIt(ev); };
   Xinha._addEvent(document,"mousemove", dialog.mouseMove );
-
+  if (Xinha.is_ie) Xinha._addEvent(this.background.contentWindow.document,"mousemove", dialog.mouseMove );
+  
   dialog.mouseUp = function (ev) { dialog.dragEnd(ev); };
   Xinha._addEvent(document,"mouseup",  dialog.mouseUp);
-
+  if (Xinha.is_ie) Xinha._addEvent(this.background.contentWindow.document,"mouseup",  dialog.mouseUp);
 };
 
@@ -498 +512 @@
   
   dialog.posDialog(newPos);
-  
-  if (!dialog.modal)
-  {
-    dialog.posBackground(newPos);
-  }
 };
 
@@ -509 +518 @@
   var dialog = this;
   this.editor.suspendUpdateToolbar = false;
-  
-  if (!this.modal)
-  {
-    Xinha.Dialog.unCoverIframes();
-  }
-  
+
   if (!dialog.dragging) 
   {
@@ -522 +526 @@
 
   Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
-  Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
-  Xinha._removeEvent(document, "mouseup",  dialog.mouseUp);
-
+  if (Xinha.is_ie) Xinha._removeEvent(this.background.contentWindow.document, "mousemove", dialog.mouseMove );
+  Xinha._removeEvent(document, "mouseup", dialog.mouseUp);
+  if (Xinha.is_ie) Xinha._removeEvent(this.background.contentWindow.document, "mouseup",  dialog.mouseUp);
+
+  var rootElemStyle = dialog.rootElem.style;
+  
   dialog.size.top  = dialog.rootElem.style.top;
   dialog.size.left = dialog.rootElem.style.left;
-};
-
+  
+  if (!this.modal)
+  {
+    this.sizeBgToDialog();
+  }
+
+};
 
 Xinha.Dialog.prototype.resizeStart = function (ev) {
@@ -540 +552 @@
   if (!this.modal)
   {
-    Xinha.Dialog.coverIframes();
+    this.posBackground({top:0, left:0}); 
+    this.resizeBackground(Xinha.Dialog.calcFullBgSize());
   }
   dialog.scrollPos = dialog.editor.scrollPos();
@@ -552 +565 @@
   dialog.mouseMove = function(ev) { dialog.resizeIt(ev); };
   Xinha._addEvent(document,"mousemove", dialog.mouseMove );
+  if (Xinha.is_ie) Xinha._addEvent(this.background.contentWindow.document,"mousemove", dialog.mouseMove );
   dialog.mouseUp = function (ev) { dialog.resizeEnd(ev); };
   Xinha._addEvent(document,"mouseup",  dialog.mouseUp); 
+  if (Xinha.is_ie) Xinha._addEvent(this.background.contentWindow.document,"mouseup", dialog.mouseUp );
 };
 
@@ -584 +599 @@
   dialog.sizeDialog(newSize);
   
-  if (!this.modal)
-  {
-    dialog.resizeBackground(newSize);
-  }
   
   dialog.width = dialog.rootElem.offsetWidth;
@@ -600 +611 @@
   dialog.resizing = false;
   this.editor.suspendUpdateToolbar = false;
-  if (!this.modal)
-  {
-    Xinha.Dialog.unCoverIframes();
-  }
+
   Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
+  if (Xinha.is_ie) Xinha._removeEvent(this.background.contentWindow.document, "mouseup",  dialog.mouseUp);
   Xinha._removeEvent(document, "mouseup",  dialog.mouseUp);
+  if (Xinha.is_ie) Xinha._removeEvent(this.background.contentWindow.document, "mouseup",  dialog.mouseUp);
   
   dialog.size.width  = dialog.rootElem.offsetWidth;
   dialog.size.height = dialog.rootElem.offsetHeight;
+
+  if (!this.modal) 
+  {
+    this.sizeBgToDialog();
+  }  
 };
 
@@ -619 +634 @@
   this.attached = true;
   this.rootElem.side = side;
-  this.captionBar.ondblclick = function(ev) { dialog.detachFromPanel(ev ? ev :window.event); };
+  this.captionBar.ondblclick = function(ev) { dialog.detachFromPanel(Xinha.getEvent(ev)); };
   
   rootElem.style.position = "static";
   rootElem.parentNode.removeChild(rootElem);
+  
+  this.background.style.display = 'none';
   
   this.captionBar.style.paddingLeft = "3px";
@@ -648 +665 @@
   var dialog = this;
   var rootElem = dialog.rootElem;
+  var rootElemStyle = rootElem.style;
   var editor = dialog.editor;
   
   dialog.attached = false;
+  
+  this.background.style.display = '';
+  this.sizeBgToDialog();
+  
   var pos = Xinha.getElementTopLeft(rootElem);
-  rootElem.style.position = "absolute";
-  rootElem.style.top = pos.top + "px";
-  rootElem.style.left = pos.left + "px";
+  rootElemStyle.position = "absolute";
+  rootElemStyle.top = pos.top + "px";
+  rootElemStyle.left = pos.left + "px";
   
   dialog.captionBar.style.paddingLeft = "22px";
@@ -661 +683 @@
   dialog.icon.style.display = '';
   
-  
   if ( dialog.size.width ) rootElem.style.width  = dialog.size.width + 'px';
 
@@ -672 +693 @@
 };
 
+Xinha.Dialog.calcFullBgSize = function()
+{
+  var page = Xinha.pageSize();
+  var viewport = Xinha.viewportSize();
+  return {width:(page.x > viewport.x  ? page.x : viewport.x )  + "px",height:(page.x > viewport.y ? page.y : viewport.y ) + "px"};
+}
+
+Xinha.Dialog.prototype.sizeBgToDialog = function()
+{
+  var rootElemStyle = this.rootElem.style;
+  var bgStyle = this.background.style;
+  bgStyle.top = rootElemStyle.top;
+  bgStyle.left = rootElemStyle.left;
+  bgStyle.width = rootElemStyle.width;
+  bgStyle.height = rootElemStyle.height;
+}
 Xinha.Dialog.prototype.hideBackground = function()
 {
@@ -1046 +1083 @@
     }
 }
-Xinha.Dialog.coverIframes = function()
-{
-    for (var i=0;i<__xinhas.length;i++)
-    {
-      __xinhas[i]._framework.iframe_cover.style.display = '';
-    }
-}
-Xinha.Dialog.unCoverIframes = function()
-{
-    for (var i=0;i<__xinhas.length;i++)
-    {
-      __xinhas[i]._framework.iframe_cover.style.display = 'none';
-    }
-}