Changeset 168


Ignore:
Timestamp:
05/18/05 16:14:40 (15 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

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/htmlarea.css

    r166 r168  
    7070.htmlarea .toolbar select:active { background: FieldFace; color: ButtonText; } 
    7171 
    72 .htmlarea iframe 
    73 { 
    74   border: 1px solid; 
     72.htmlarea iframe, .htmlarea textarea 
     73{ 
     74  border: none; /*1px solid;*/ 
    7575} 
    7676 
  • trunk/htmlarea.js

    r167 r168  
    190190  // _must_ be pixel widths if you wish to have config.sizeIncludesPanels = false 
    191191  // if you have sizeIncludesPanels true, they can be any valid CSS measurement. 
     192  // 
     193  // If you are using Xinha in a "Standards Mode" page (using doctype switching) 
     194  // then you must use pixel heights for the top and bottom panels, otherwise 
     195  // it won't work correctly.  Also remember that you MUST have the "px" appended 
     196  // to pixel lengths or it won't work either! 
    192197  this.panel_dimensions = 
    193198  { 
     
    12461251  fw.table.cellPadding="0"; 
    12471252  fw.table.cellSpacing="0"; 
     1253 
    12481254  fw.tb_row.style.verticalAlign = 'top'; 
    12491255  fw.tp_row.style.verticalAlign = 'top'; 
     
    14501456 
    14511457    this.sizeEditor(width, height, this.config.sizeIncludesBars, this.config.sizeIncludesPanels); 
    1452     HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor() }); 
     1458 
     1459    // The resize handler is to allow for heights specified as percentages. 
     1460    // This has been disabled in compatmode because IE seems to throw a resize 
     1461    // event up to the window even when you change the dimensions of elements 
     1462    // on the page rather than the window itself.  Which can lead to 
     1463    // huge amounts of resize events, and possibly getting into infinite loops 
     1464    // of resize events. 
     1465    // 
     1466    // % widths are fine without the event because they are passed through to 
     1467    // the browser as percentages so it's up to the browser to resize those. 
     1468    if(!document.compatMode || document.compatMode == 'BackCompat') 
     1469    { 
     1470      HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor(); }); 
     1471    } 
     1472 
    14531473    this.notifyOn('panel_change',function(){editor.sizeEditor();}); 
    14541474  } 
     
    14631483  HTMLArea.prototype.sizeEditor = function(width, height, includingBars, includingPanels) 
    14641484  { 
     1485 
    14651486    if(includingBars != null)     this._htmlArea.sizeIncludesToolbars = includingBars; 
    14661487    if(includingPanels != null)   this._htmlArea.sizeIncludesPanels   = includingPanels; 
     
    15121533    } 
    15131534 
     1535    // We need to set the iframe & textarea to 100% height so that the htmlarea 
     1536    // isn't "pushed out" when we get it's height, so we can change them later. 
     1537    if(this._iframe.style.height != '100%')   this._iframe.style.height   = '100%'; 
     1538    if(this._textArea.style.height != '100%') this._textArea.style.height = '100%'; 
     1539 
    15141540    // At this point we have this._htmlArea.style.width & this._htmlArea.style.height 
    15151541    // which are the size for the OUTER editor area, including toolbars and panels 
    15161542    // now we size the INNER area and position stuff in the right places. 
    1517  
    15181543    width  = this._htmlArea.offsetWidth; 
    15191544    height = this._htmlArea.offsetHeight; 
     
    16461671    this._framework.tb_cell.style.height = this._toolBar.offsetHeight   + 'px'; 
    16471672    this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px'; 
    1648     this._iframe.style.height   = '100%'; 
     1673 
     1674    // Compatability Mode (both IE and Moz), because table cell heights are 
     1675    // ignored in compatability mode (at least in IE, moz works, but 
     1676    // I don't think it should so we'll do this for moz too incase it changes) 
     1677    // we have to set an explicit pixel height on the iframe so as the table 
     1678    // cell surrounding it takes the available height. 
     1679    // This means that the panel heights for top & bottom MUST be pixel heights 
     1680    // if you are using Xinha in a standards mode page. 
     1681    if( document.compatMode && document.compatMode != 'BackCompat') 
     1682    { 
     1683      var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight; 
     1684      if(this._framework.tp_row.childNodes.length) 
     1685      { 
     1686        edcellheight  -= parseInt(this.config.panel_dimensions.top); 
     1687      } 
     1688 
     1689      if(this._framework.bp_row.childNodes.length) 
     1690      { 
     1691        edcellheight  -= parseInt(this.config.panel_dimensions.bottom); 
     1692      } 
     1693      this._iframe.style.height   = (edcellheight - this._toolBar.offsetHeight - this._statusBar.offsetHeight) + 'px'; 
     1694    } 
     1695    else 
     1696    { 
     1697      this._iframe.style.height   = '100%'; 
     1698    } 
    16491699    this._iframe.style.width    = '100%'; 
    16501700 
    1651     this._textArea.style.height = '100%'; 
    1652     this._textArea.style.width  = '100%'; 
     1701    this._textArea.style.height = this._iframe.style.height; 
     1702    this._textArea.style.width  = this._iframe.style.width; 
    16531703 
    16541704    this.notifyOf('resize', {width:this._htmlArea.offsetWidth, height:this._htmlArea.offsetHeight}); 
     
    17951845      } catch (e) {} 
    17961846    } 
    1797     else if(!HTMLArea.is_gecko) 
     1847    else if(!HTMLArea.is_gecko && this._doc.body.contentEditable != true) 
    17981848    { 
    17991849      this._doc.body.contentEditable = true; 
     
    18181868      try {this._doc.designMode = 'off';} catch (e) {} 
    18191869    } 
    1820     else if(!HTMLArea.is_gecko) 
     1870    else if(!HTMLArea.is_gecko && this._doc.body.contentEditable != false) 
    18211871    { 
    18221872      this._doc.body.contentEditable = false; 
     
    28912941    if(! sel.isCollapsed) 
    28922942    { 
    2893       if(sel.anchorNode.nodeType == 1) 
     2943      if(sel.anchorNode.childNodes.length > sel.anchorOffset && sel.anchorNode.childNodes[sel.anchorOffset].nodeType == 1) 
     2944      { 
     2945        return sel.anchorNode.childNodes[sel.anchorOffset]; 
     2946      } 
     2947      else if(sel.anchorNode.nodeType == 1) 
    28942948      { 
    28952949        return sel.anchorNode; 
     2950      } 
     2951      else 
     2952      { 
     2953        return sel.anchorNode.parentNode; 
    28962954      } 
    28972955    } 
     
    37313789    editor.updateToolbar(); 
    37323790    editor._timerToolbar = null; 
    3733   }, 100); 
     3791  }, 250); 
    37343792}; 
    37353793 
  • trunk/plugins/FullScreen/full-screen.js

    r166 r168  
    5858    // Width & Height of window 
    5959    var x,y; 
    60     if (self.innerHeight) // all except Explorer 
     60    if (window.innerHeight) // all except Explorer 
    6161    { 
    62       x = self.innerWidth; 
    63       y = self.innerHeight; 
     62      x = window.innerWidth; 
     63      y = window.innerHeight; 
    6464    } 
    6565    else if (document.documentElement && document.documentElement.clientHeight) 
     
    7575    } 
    7676 
    77     e.sizeEditor(x,y,true,true); 
    78     /* 
    79     if(!e._revertFullScreen) e._revertFullScreen = e.getInnerSize(); 
    80     width = x; 
    81     height = y - e._toolbar.offsetHeight - (e._statusBar ? e._statusBar.offsetHeight : 0); 
    82     e.setInnerSize(width,height); 
    83  
    84     // IE in standards mode needs us to set the width of the tool & status bar, 
    85     // I have NO idea why 
    86     if(HTMLArea.is_ie && document.documentElement && document.documentElement.clientHeight) 
    87     { 
    88       e._toolbar.style.width = (width - 12) + 'px'; 
    89       if(e._statusBar) 
    90       { 
    91         e._statusBar.style.width = (width - 12) + 'px'; 
    92       } 
    93     } 
    94     */ 
     77    e.sizeEditor(x + 'px',y + 'px',true,true); 
    9578    e._sizing = false; 
    9679  } 
     
    10184    e._sizing = true; 
    10285    e.initSize(); 
    103     /* 
    104     e.setInnerSize(e._revertFullScreen.width, e._revertFullScreen.height); 
    105     if(HTMLArea.is_ie && document.documentElement && document.documentElement.clientHeight) 
    106     { 
    107       e._toolbar.style.width = ''; 
    108       if(e._statusBar) 
    109       { 
    110         e._statusBar.style.width = ''; 
    111       } 
    112     } 
    113     e._revertFullScreen = null; 
    114     */ 
    11586    e._sizing = false; 
    11687  } 
Note: See TracChangeset for help on using the changeset viewer.