Changeset 1009

Timestamp:

05/23/08 19:42:14 (5 years ago)

Author:

ray

Message:

some fixes for dragging for new dialogs

Location:

branches/new-dialogs-merge

Files:

• XinhaCore.js (modified) (10 diffs)
• modules/CreateLink/link.js (modified) (1 diff)
• modules/Dialogs/XinhaDialog.js (modified) (22 diffs)

branches/new-dialogs-merge/XinhaCore.js

@@ -1782 +1782 @@
         function(ev)
         {
-          ev = Xinha.is_ie ? window.event : ev;
+          ev = ev || window.event;
           editor.btnClickEvent = {clientX : ev.clientX, clientY : ev.clientY};
           if ( obj.enabled )
@@ -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
 
@@ -2259 +2260 @@
   fw.table.appendChild(fw.tbody);
 
-  var xinha = this._framework.table;
+  var xinha = fw.table;
   this._htmlArea = xinha;
   Xinha.freeLater(this, '_htmlArea');
@@ -2265 +2266 @@
 
     // create the toolbar and put in the area
-  this._framework.tb_cell.appendChild( this._createToolbar() );
+  fw.tb_cell.appendChild( this._createToolbar() );
 
     // create the IFRAME & add to container
@@ -2271 +2272 @@
   iframe.src = this.popupURL(editor.config.URIs.blank);
   iframe.id = "XinhaIFrame_" + this._textArea.id;
-  this._framework.ed_cell.appendChild(iframe);
+  fw.ed_cell.appendChild(iframe);
   this._iframe = iframe;
   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
   var statusbar = this._createStatusBar();
-  this._framework.sb_cell.appendChild(statusbar);
+  fw.sb_cell.appendChild(statusbar);
 
   // insert Xinha before the textarea.
@@ -2287 +2293 @@
   // extract the textarea and insert it into the xinha framework
   Xinha.removeFromParent(textarea);
-  this._framework.ed_cell.appendChild(textarea);
+  fw.ed_cell.appendChild(textarea);
 
   // if another editor is activated while this one is in text mode, toolbar is disabled   
@@ -2469 +2475 @@
   this._risizing = true;
   
+  var framework = this._framework;
+  
   this.notifyOf('before_resize', {width:width, height:height});
   this.firePluginEvent('onBeforeResize', width, height);
@@ -2580 +2588 @@
 //  }
 
-  this._framework.tb_cell.colSpan = col_span;
-  this._framework.tp_cell.colSpan = col_span;
-  this._framework.bp_cell.colSpan = col_span;
-  this._framework.sb_cell.colSpan = col_span;
+  framework.tb_cell.colSpan = col_span;
+  framework.tp_cell.colSpan = col_span;
+  framework.bp_cell.colSpan = col_span;
+  framework.sb_cell.colSpan = col_span;
 
   // Put in the panel rows, top panel goes above editor row
-  if ( !this._framework.tp_row.childNodes.length )
-  {
-    Xinha.removeFromParent(this._framework.tp_row);
+  if ( !framework.tp_row.childNodes.length )
+  {
+    Xinha.removeFromParent(framework.tp_row);
   }
   else
   {
-    if ( !Xinha.hasParentNode(this._framework.tp_row) )
-    {
-      this._framework.tbody.insertBefore(this._framework.tp_row, this._framework.ler_row);
+    if ( !Xinha.hasParentNode(framework.tp_row) )
+    {
+      framework.tbody.insertBefore(framework.tp_row, framework.ler_row);
     }
   }
 
   // bp goes after the editor
-  if ( !this._framework.bp_row.childNodes.length )
-  {
-    Xinha.removeFromParent(this._framework.bp_row);
+  if ( !framework.bp_row.childNodes.length )
+  {
+    Xinha.removeFromParent(framework.bp_row);
   }
   else
   {
-    if ( !Xinha.hasParentNode(this._framework.bp_row) )
-    {
-      this._framework.tbody.insertBefore(this._framework.bp_row, this._framework.ler_row.nextSibling);
+    if ( !Xinha.hasParentNode(framework.bp_row) )
+    {
+      framework.tbody.insertBefore(framework.bp_row, framework.ler_row.nextSibling);
     }
   }
@@ -2614 +2622 @@
   if ( !this.config.statusBar )
   {
-    Xinha.removeFromParent(this._framework.sb_row);
+    Xinha.removeFromParent(framework.sb_row);
   }
   else
   {
-    if ( !Xinha.hasParentNode(this._framework.sb_row) )
-    {
-      this._framework.table.appendChild(this._framework.sb_row);
+    if ( !Xinha.hasParentNode(framework.sb_row) )
+    {
+      framework.table.appendChild(framework.sb_row);
     }
   }
 
   // Size and set colspans, link up the framework
-  this._framework.lp_cell.style.width  = this.config.panel_dimensions.left;
-  this._framework.rp_cell.style.width  = this.config.panel_dimensions.right;
-  this._framework.tp_cell.style.height = this.config.panel_dimensions.top;
-  this._framework.bp_cell.style.height = this.config.panel_dimensions.bottom;
-  this._framework.tb_cell.style.height = this._toolBar.offsetHeight + 'px';
-  this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px';
+  framework.lp_cell.style.width  = this.config.panel_dimensions.left;
+  framework.rp_cell.style.width  = this.config.panel_dimensions.right;
+  framework.tp_cell.style.height = this.config.panel_dimensions.top;
+  framework.bp_cell.style.height = this.config.panel_dimensions.bottom;
+  framework.tb_cell.style.height = this._toolBar.offsetHeight + 'px';
+  framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px';
 
   var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight;
@@ -2657 +2665 @@
   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);

branches/new-dialogs-merge/modules/CreateLink/link.js

@@ -1 @@
-// Paste Plain Text plugin for Xinha
-
-// Distributed under the same terms as Xinha itself.
-// This notice MUST stay intact for use (see license.txt).
+  /*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
+    --  Xinha (is not htmlArea) - http://xinha.org
+    --
+    --  Use of Xinha is granted by the terms of the htmlArea License (based on
+    --  BSD license)  please read license.txt in this package for details.
+    --
+    --  Copyright (c) 2005-2008 Xinha Developer Team and contributors
+    --
+    --  Xinha was originally based on work by Mihai Bazon which is:
+    --      Copyright (c) 2003-2004 dynarch.com.
+    --      Copyright (c) 2002-2003 interactivetools.com, inc.
+    --      This copyright notice MUST stay intact for use.
+    --
+    --  This is the standard implementation of the Xinha.prototype._createLink method,
+    --  which provides the functionality to insert a hyperlink in the editor.
+    --
+    --  The file is loaded as a special plugin by the Xinha Core when no alternative method (plugin) is loaded.
+    --
+    --
+    --  $HeadURL:http://svn.xinha.webfactional.com/trunk/modules/CreateLink/link.js $
+    --  $LastChangedDate:2008-04-12 19:10:04 +0200 (Sa, 12 Apr 2008) $
+    --  $LastChangedRevision:990 $
+    --  $LastChangedBy:ray $
+    --------------------------------------------------------------------------*/
 
 function CreateLink(editor) {

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

@@ -122 +122 @@
   var captionBar = main.removeChild( main.getElementsByTagName("h1")[0]);
   rootElem.insertBefore(captionBar,main);
-  captionBar.onmousedown = function(ev) { dialog._dragStart(ev); };
+  Xinha._addEvent(captionBar, 'mousedown',function(ev) { dialog.dragStart(ev); });
   
   captionBar.style.MozUserSelect = "none";
@@ -178 +178 @@
   for (var i=0; i<all.length;i++)
   {
-        var el = all[i]; 
+    var el = all[i]; 
     if (el.tagName.toLowerCase() == 'textarea' || el.tagName.toLowerCase() == 'input')
     {
@@ -198 +198 @@
     right= "0px";
   }
-  this.resizer.onmousedown = function(ev) { dialog._resizeStart(ev); };
+  Xinha._addEvent(this.resizer, 'mousedown', function(ev) { dialog.resizeStart(ev); });
   rootElem.appendChild(this.resizer);
   
@@ -248 +248 @@
  
   // We need to preserve the selection
-  this._lastRange = this.editor.saveSelection();
-  
-  if (Xinha.is_ie && !modal)
-  {
-    dialog.saveSelection = function() { dialog._lastRange = dialog.editor.saveSelection();};
-    Xinha._addEvent(this.editor._doc,'mouseup', dialog.saveSelection);
-  }
-
+  // if this is called before some editor has been activated, it activates the editor
+  if (Xinha._someEditorHasBeenActivated)
+  {
+     this._lastRange = this.editor.saveSelection();
+     
+    if (Xinha.is_ie && !modal)
+    {
+      dialog.saveSelection = function() { dialog._lastRange = dialog.editor.saveSelection();};
+      Xinha._addEvent(this.editor._doc,'mouseup', dialog.saveSelection);
+    }
+  }
+ 
   if ( modal ) this.editor.deactivateEditor();
 
@@ -281 +285 @@
 
     //rootElemStyle.display   = '';
-        Xinha.Dialog.fadeIn(this.rootElem);
+    Xinha.Dialog.fadeIn(this.rootElem);
     var dialogHeight = rootElem.offsetHeight;
     var dialogWidth = rootElem.offsetWidth;
@@ -369 +373 @@
     //this.rootElem.style.display = 'none';
     Xinha.Dialog.fadeOut(this.rootElem);
-        this.hideBackground();
+    this.hideBackground();
     var dialog = this;
 
@@ -437 +441 @@
 };
 
-Xinha.Dialog.prototype._dragStart = function (ev) 
+Xinha.Dialog.prototype.dragStart = function (ev) 
 {
   if ( this.attached || this.dragging) 
@@ -443 +447 @@
     return;
   }
+  if (!this.modal)
+  {
+    Xinha.Dialog.coverIframes();
+  }
+  ev = ev || window.event;
+  
   this.editor.suspendUpdateToolbar = true;
   var dialog = this;
@@ -452 +462 @@
   var st = dialog.rootElem.style;
 
-  dialog.xOffs = ((Xinha.is_ie) ? window.event.offsetX : ev.layerX);
-  dialog.yOffs = ((Xinha.is_ie) ? window.event.offsetY : ev.layerY);
+  dialog.xOffs =  ev.offsetX || ev.layerX; //first value for IE/Opera/Safari, second value for Gecko (or should I say "netscape";))
+  dialog.yOffs =  ev.offsetY || ev.layerY;
 
   dialog.mouseMove = function(ev) { dialog.dragIt(ev); };
-  Xinha._addEvent(document, "mousemove", dialog.mouseMove );
+  Xinha._addEvent(document,"mousemove", dialog.mouseMove );
+
   dialog.mouseUp = function (ev) { dialog.dragEnd(ev); };
-  Xinha._addEvent(document, "mouseup",  dialog.mouseUp);
+  Xinha._addEvent(document,"mouseup",  dialog.mouseUp);
 
 };
@@ -470 +481 @@
     return false;
   }
-  ev = (Xinha.is_ie) ? window.event : ev;
 
   if (dialog.rootElem.style.position == 'absolute')
@@ -499 +509 @@
   var dialog = this;
   this.editor.suspendUpdateToolbar = false;
+  
+  if (!this.modal)
+  {
+    Xinha.Dialog.unCoverIframes();
+  }
+  
   if (!dialog.dragging) 
   {
@@ -506 +522 @@
 
   Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
-  Xinha._removeEvent(document, "mouseup", dialog.mouseUp );
+  Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
+  Xinha._removeEvent(document, "mouseup",  dialog.mouseUp);
 
   dialog.size.top  = dialog.rootElem.style.top;
@@ -513 +530 @@
 
 
-Xinha.Dialog.prototype._resizeStart = function (ev) {
+Xinha.Dialog.prototype.resizeStart = function (ev) {
   var dialog = this;
   this.editor.suspendUpdateToolbar = true;
@@ -521 +538 @@
   }
   dialog.resizing = true;
+  if (!this.modal)
+  {
+    Xinha.Dialog.coverIframes();
+  }
   dialog.scrollPos = dialog.editor.scrollPos();
   
@@ -530 +551 @@
 
   dialog.mouseMove = function(ev) { dialog.resizeIt(ev); };
-  Xinha._addEvent(document, "mousemove", dialog.mouseMove );
+  Xinha._addEvent(document,"mousemove", dialog.mouseMove );
   dialog.mouseUp = function (ev) { dialog.resizeEnd(ev); };
-  Xinha._addEvent(document, "mouseup",  dialog.mouseUp);
-    
+  Xinha._addEvent(document,"mouseup",  dialog.mouseUp); 
 };
 
@@ -554 +574 @@
     var posX = ev.clientX;
   }
- 
+
   posX -=  dialog.xOffs;
   posY -=  dialog.yOffs;
@@ -580 +600 @@
   dialog.resizing = false;
   this.editor.suspendUpdateToolbar = false;
-  
+  if (!this.modal)
+  {
+    Xinha.Dialog.unCoverIframes();
+  }
   Xinha._removeEvent(document, "mousemove", dialog.mouseMove );
-  Xinha._removeEvent(document, "mouseup", dialog.mouseUp );
+  Xinha._removeEvent(document, "mouseup",  dialog.mouseUp);
   
   dialog.size.width  = dialog.rootElem.offsetWidth;
@@ -628 +651 @@
   
   dialog.attached = false;
-  
+  var pos = Xinha.getElementTopLeft(rootElem);
   rootElem.style.position = "absolute";
+  rootElem.style.top = pos.top + "px";
+  rootElem.style.left = pos.left + "px";
   
   dialog.captionBar.style.paddingLeft = "22px";
@@ -643 +668 @@
   document.body.appendChild(rootElem);
   
-  if (ev)
-  {
-    var scrollPos = dialog.editor.scrollPos(); 
-    rootElem.style.top = (ev.clientY + scrollPos.y) - ((Xinha.is_ie) ? window.event.offsetY : ev.layerY) + "px";
-    rootElem.style.left =(ev.clientX + scrollPos.x) - ((Xinha.is_ie) ? window.event.offsetX : ev.layerX) + "px";
-  }
   dialog.captionBar.ondblclick = function() { dialog.attachToPanel(rootElem.side); };
   
@@ -690 +709 @@
   st.height = size.height;
   st.width  = size.width;
-  this.main.style.height = parseInt(size.height,10) - this.captionBar.offsetHeight + "px";
-  this.main.style.width = size.width;
-  
+  var width = parseInt(size.width, 10);
+  var height = parseInt(size.height,10) - this.captionBar.offsetHeight;
+  this.main.style.height = (height > 20) ? height : 20 + "px";
+  this.main.style.width = (width > 10) ? width : 10 + 'px';
 }
 Xinha.Dialog.prototype.setValues = function(values)
@@ -931 +951 @@
 }
 
+/** When several modeless dialogs are shown, one can be brought to front with this function (as happens on mouseclick) 
+ * 
+ * @param {XinhaDialog} dialog The dialog to activate
+ */
 
 Xinha.Dialog.activateModeless = function(dialog)
 {
-  var zIndex;
   if (Xinha.Dialog.activeModeless == dialog || dialog.attached ) 
   {
@@ -948 +971 @@
   Xinha.Dialog.activeModeless.rootElem.style.zIndex = parseInt(Xinha.Dialog.activeModeless.rootElem.style.zIndex) + 10;
 }
+/** Set opacity cross browser 
+ * 
+ * @param {DomNode} el The element to set the opacity
+ * @param {Object} value opacity value (percent)
+ */
 Xinha.Dialog.setOpacity = function(el,value)
 {
-        if (typeof el.style.filter != 'undefined')
-        {
-                el.style.filter = (value < 100) ?  'alpha(opacity='+value+')' : '';
-        }
-        else
-        {
-                el.style.opacity = value/100;
-        }
-}
+    if (typeof el.style.filter != 'undefined')
+    {
+        el.style.filter = (value < 100) ?  'alpha(opacity='+value+')' : '';
+    }
+    else
+    {
+        el.style.opacity = value/100;
+    }
+}
+/** Fade in an element
+ * 
+ * @param {DomNode} el The element to fade
+ * @param {Number} delay Time for one step in ms
+ * @param {Number} endOpacity stop when this value is reached (percent)
+ * @param {Number} step Fade this much per step (percent)
+ */
 Xinha.Dialog.fadeIn = function(el,endOpacity,delay,step)
 {
-        delay = delay || 1;
-        step = step || 25;
-        endOpacity = endOpacity || 100;
-        el.op = el.op || 0;
-        var op = el.op;
-        if (el.style.display == 'none')
-        {
-                Xinha.Dialog.setOpacity(el,0);
-                el.style.display = '';
-        }
-        if (op < endOpacity)
-        {
-                el.op += step;
-                Xinha.Dialog.setOpacity(el,op);
-                el.timeOut = setTimeout(function(){Xinha.Dialog.fadeIn(el,endOpacity,delay,step);},delay);
-        }
-        else
-        {
-                Xinha.Dialog.setOpacity(el,endOpacity);
-                el.op = endOpacity;
-                el.timeOut = null;
-        }
-}
-
+    delay = delay || 1;
+    step = step || 25;
+    endOpacity = endOpacity || 100;
+    el.op = el.op || 0;
+    var op = el.op;
+    if (el.style.display == 'none')
+    {
+        Xinha.Dialog.setOpacity(el,0);
+        el.style.display = '';
+    }
+    if (op < endOpacity)
+    {
+        el.op += step;
+        Xinha.Dialog.setOpacity(el,op);
+        el.timeOut = setTimeout(function(){Xinha.Dialog.fadeIn(el,endOpacity,delay,step);},delay);
+    }
+    else
+    {
+        Xinha.Dialog.setOpacity(el,endOpacity);
+        el.op = endOpacity;
+        el.timeOut = null;
+    }
+}
+/** Fade out an element
+ * 
+ * @param {DomNode} el The element to fade
+ * @param {Number} delay Time for one step in ms
+ * @param {Number} step Fade this much per step (percent)
+ */
 Xinha.Dialog.fadeOut = function(el,delay,step)
 {
-        delay = delay || 1;
-        step = step || 30;
-        if (typeof el.op == 'undefined') el.op = 100;
-        var op = el.op;
-
-        if (op >= 0)
-        {
-                el.op -= step;
-                Xinha.Dialog.setOpacity(el,op);
-                el.timeOut = setTimeout(function(){Xinha.Dialog.fadeOut(el,delay,step);},delay);
-        }
-        else
-        {
-                Xinha.Dialog.setOpacity(el,0);
-                el.style.display = 'none';
-                el.op = 0;
-                el.timeOut = null;
-        }
-}
+    delay = delay || 1;
+    step = step || 30;
+    if (typeof el.op == 'undefined') el.op = 100;
+    var op = el.op;
+
+    if (op >= 0)
+    {
+        el.op -= step;
+        Xinha.Dialog.setOpacity(el,op);
+        el.timeOut = setTimeout(function(){Xinha.Dialog.fadeOut(el,delay,step);},delay);
+    }
+    else
+    {
+        Xinha.Dialog.setOpacity(el,0);
+        el.style.display = 'none';
+        el.op = 0;
+        el.timeOut = null;
+    }
+}
+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';
+    }
+}