Changeset 168

Timestamp:

05/18/05 16:14:40 (8 years ago)

Author:

gogo

Message:

Fixes for Standards Compliant modes in both IE and Mozilla.

The fixes mean that in standards mode:

1. you are required that the top and bottom panel
   heights (if used) are set to explicit pixel heights
   
2. percentage heights on the editor itself probably won't work well
   when resizing the window, if at all.
   
3. all sizes must be correct CSS length items, specifically if you are
   specifying a pixel length then it MUST include the 'px' suffix, ie
   "config.height = '233px';", if you tried "config.height = 233;" it
   won't work correctly (or is unlikely to, especially for heights).
   This seems to be simply a requirement of standards mode, it's not
   specific to Xinha.
   

See

• http://xinha.gogo.co.nz/punbb/viewtopic.php?pid=1528
  
• ticket:269
  

Location:

trunk

Files:

• htmlarea.css (modified) (1 diff)
• htmlarea.js (modified) (10 diffs)
• plugins/FullScreen/full-screen.js (modified) (3 diffs)

trunk/htmlarea.css

@@ -70 +70 @@
 .htmlarea .toolbar select:active { background: FieldFace; color: ButtonText; }
 
-.htmlarea iframe
-{
-  border: 1px solid;
+.htmlarea iframe, .htmlarea textarea
+{
+  border: none; /*1px solid;*/
 }
 

trunk/htmlarea.js

@@ -190 +190 @@
   // _must_ be pixel widths if you wish to have config.sizeIncludesPanels = false
   // if you have sizeIncludesPanels true, they can be any valid CSS measurement.
+  //
+  // If you are using Xinha in a "Standards Mode" page (using doctype switching)
+  // then you must use pixel heights for the top and bottom panels, otherwise
+  // it won't work correctly.  Also remember that you MUST have the "px" appended
+  // to pixel lengths or it won't work either!
   this.panel_dimensions =
   {
@@ -1246 +1251 @@
   fw.table.cellPadding="0";
   fw.table.cellSpacing="0";
+
   fw.tb_row.style.verticalAlign = 'top';
   fw.tp_row.style.verticalAlign = 'top';
@@ -1450 +1456 @@
 
     this.sizeEditor(width, height, this.config.sizeIncludesBars, this.config.sizeIncludesPanels);
-    HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor() });
+
+    // The resize handler is to allow for heights specified as percentages.
+    // This has been disabled in compatmode because IE seems to throw a resize
+    // event up to the window even when you change the dimensions of elements
+    // on the page rather than the window itself.  Which can lead to
+    // huge amounts of resize events, and possibly getting into infinite loops
+    // of resize events.
+    //
+    // % widths are fine without the event because they are passed through to
+    // the browser as percentages so it's up to the browser to resize those.
+    if(!document.compatMode || document.compatMode == 'BackCompat')
+    {
+      HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor(); });
+    }
+
     this.notifyOn('panel_change',function(){editor.sizeEditor();});
   }
@@ -1463 +1483 @@
   HTMLArea.prototype.sizeEditor = function(width, height, includingBars, includingPanels)
   {
+
     if(includingBars != null)     this._htmlArea.sizeIncludesToolbars = includingBars;
     if(includingPanels != null)   this._htmlArea.sizeIncludesPanels   = includingPanels;
@@ -1512 +1533 @@
     }
 
+    // We need to set the iframe & textarea to 100% height so that the htmlarea
+    // isn't "pushed out" when we get it's height, so we can change them later.
+    if(this._iframe.style.height != '100%')   this._iframe.style.height   = '100%';
+    if(this._textArea.style.height != '100%') this._textArea.style.height = '100%';
+
     // At this point we have this._htmlArea.style.width & this._htmlArea.style.height
     // which are the size for the OUTER editor area, including toolbars and panels
     // now we size the INNER area and position stuff in the right places.
-
     width  = this._htmlArea.offsetWidth;
     height = this._htmlArea.offsetHeight;
@@ -1646 +1671 @@
     this._framework.tb_cell.style.height = this._toolBar.offsetHeight   + 'px';
     this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px';
-    this._iframe.style.height   = '100%';
+
+    // Compatability Mode (both IE and Moz), because table cell heights are
+    // ignored in compatability mode (at least in IE, moz works, but
+    // I don't think it should so we'll do this for moz too incase it changes)
+    // we have to set an explicit pixel height on the iframe so as the table
+    // cell surrounding it takes the available height.
+    // This means that the panel heights for top & bottom MUST be pixel heights
+    // if you are using Xinha in a standards mode page.
+    if( document.compatMode && document.compatMode != 'BackCompat')
+    {
+      var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight;
+      if(this._framework.tp_row.childNodes.length)
+      {
+        edcellheight  -= parseInt(this.config.panel_dimensions.top);
+      }
+
+      if(this._framework.bp_row.childNodes.length)
+      {
+        edcellheight  -= parseInt(this.config.panel_dimensions.bottom);
+      }
+      this._iframe.style.height   = (edcellheight - this._toolBar.offsetHeight - this._statusBar.offsetHeight) + 'px';
+    }
+    else
+    {
+      this._iframe.style.height   = '100%';
+    }
     this._iframe.style.width    = '100%';
 
-    this._textArea.style.height = '100%';
-    this._textArea.style.width  = '100%';
+    this._textArea.style.height = this._iframe.style.height;
+    this._textArea.style.width  = this._iframe.style.width;
 
     this.notifyOf('resize', {width:this._htmlArea.offsetWidth, height:this._htmlArea.offsetHeight});
@@ -1795 +1845 @@
       } catch (e) {}
     }
-    else if(!HTMLArea.is_gecko)
+    else if(!HTMLArea.is_gecko && this._doc.body.contentEditable != true)
     {
       this._doc.body.contentEditable = true;
@@ -1818 +1868 @@
       try {this._doc.designMode = 'off';} catch (e) {}
     }
-    else if(!HTMLArea.is_gecko)
+    else if(!HTMLArea.is_gecko && this._doc.body.contentEditable != false)
     {
       this._doc.body.contentEditable = false;
@@ -2891 +2941 @@
     if(! sel.isCollapsed)
     {
-      if(sel.anchorNode.nodeType == 1)
+      if(sel.anchorNode.childNodes.length > sel.anchorOffset && sel.anchorNode.childNodes[sel.anchorOffset].nodeType == 1)
+      {
+        return sel.anchorNode.childNodes[sel.anchorOffset];
+      }
+      else if(sel.anchorNode.nodeType == 1)
       {
         return sel.anchorNode;
+      }
+      else
+      {
+        return sel.anchorNode.parentNode;
       }
     }
@@ -3731 +3789 @@
     editor.updateToolbar();
     editor._timerToolbar = null;
-  }, 100);
+  }, 250);
 };
 

trunk/plugins/FullScreen/full-screen.js

@@ -58 +58 @@
     // Width & Height of window
     var x,y;
-    if (self.innerHeight) // all except Explorer
+    if (window.innerHeight) // all except Explorer
     {
-      x = self.innerWidth;
-      y = self.innerHeight;
+      x = window.innerWidth;
+      y = window.innerHeight;
     }
     else if (document.documentElement && document.documentElement.clientHeight)
@@ -75 +75 @@
     }
 
-    e.sizeEditor(x,y,true,true);
-    /*
-    if(!e._revertFullScreen) e._revertFullScreen = e.getInnerSize();
-    width = x;
-    height = y - e._toolbar.offsetHeight - (e._statusBar ? e._statusBar.offsetHeight : 0);
-    e.setInnerSize(width,height);
-
-    // IE in standards mode needs us to set the width of the tool & status bar,
-    // I have NO idea why
-    if(HTMLArea.is_ie && document.documentElement && document.documentElement.clientHeight)
-    {
-      e._toolbar.style.width = (width - 12) + 'px';
-      if(e._statusBar)
-      {
-        e._statusBar.style.width = (width - 12) + 'px';
-      }
-    }
-    */
+    e.sizeEditor(x + 'px',y + 'px',true,true);
     e._sizing = false;
   }
@@ -101 +84 @@
     e._sizing = true;
     e.initSize();
-    /*
-    e.setInnerSize(e._revertFullScreen.width, e._revertFullScreen.height);
-    if(HTMLArea.is_ie && document.documentElement && document.documentElement.clientHeight)
-    {
-      e._toolbar.style.width = '';
-      if(e._statusBar)
-      {
-        e._statusBar.style.width = '';
-      }
-    }
-    e._revertFullScreen = null;
-    */
     e._sizing = false;
   }