Changeset 266 for trunk


Ignore:
Timestamp:
07/17/05 04:43:32 (14 years ago)
Author:
gogo
Message:

Fix for #266 (panel size is incorrect).

Unfortunatly the only way I could get this to work reliably (cross
browser) was to restict panel dimensions to being a pixel width so
that the absolute size of the iframe can be calculated and set. IE
sucks.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/htmlarea.js

    r265 r266  
    191191  this.sizeIncludesPanels = true; 
    192192 
    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! 
     193  // each of the panels has a dimension, for the left/right it's the width 
     194  // for the top/bottom it's the height. 
     195  // 
     196  // WARNING: PANEL DIMENSIONS MUST BE SPECIFIED AS PIXEL WIDTHS 
    197197  this.panel_dimensions = 
    198198  { 
     
    12531253 
    12541254    'sb_row'    :document.createElement('tr'), 
    1255     'sb_cell'   :document.createElement('td')  // status bar 
     1255    'sb_cell'   :document.createElement('td'),  // status bar 
     1256 
     1257    'left'      :document.createElement('col'), 
     1258    'middle'      :document.createElement('col'), 
     1259    'right'      :document.createElement('col') 
    12561260  } 
    12571261 
     
    12671271  fw.sb_row.style.verticalAlign = 'top'; 
    12681272  fw.ed_cell.style.position     = 'relative'; 
     1273 
    12691274  // Put the cells in the rows        set col & rowspans 
    12701275  // note that I've set all these so that all panels are showing 
     
    12911296  fw.tbody.appendChild(fw.sb_row);  // Statusbar 
    12921297 
     1298  // cols in the table 
     1299  fw.table.appendChild(fw.left); 
     1300  fw.table.appendChild(fw.middle); 
     1301  fw.table.appendChild(fw.right); 
     1302 
    12931303  // and body in the table 
    12941304  fw.table.appendChild(fw.tbody); 
    1295  
    12961305 
    12971306  var htmlarea = this._framework.table; 
     
    14391448    this.sizeEditor(width, height, this.config.sizeIncludesBars, this.config.sizeIncludesPanels); 
    14401449 
    1441     // The resize handler is to allow for heights specified as percentages. 
    1442     // This has been disabled in compatmode because IE seems to throw a resize 
    1443     // event up to the window even when you change the dimensions of elements 
    1444     // on the page rather than the window itself.  Which can lead to 
    1445     // huge amounts of resize events, and possibly getting into infinite loops 
    1446     // of resize events. 
    1447     // 
    1448     // % widths are fine without the event because they are passed through to 
    1449     // the browser as percentages so it's up to the browser to resize those. 
    1450     if(!document.compatMode || document.compatMode == 'BackCompat') 
    1451     { 
    1452       HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor(); }); 
    1453     } 
     1450    HTMLArea.addDom0Event(window, 'resize', function(e) { editor.sizeEditor(); }); 
    14541451 
    14551452    this.notifyOn('panel_change',function(){editor.sizeEditor();}); 
     
    14661463  { 
    14671464 
     1465    // We need to set the iframe & textarea to 100% height so that the htmlarea 
     1466    // isn't "pushed out" when we get it's height, so we can change them later. 
     1467    this._iframe.style.height   = '100%'; 
     1468    this._textArea.style.height = '100%'; 
     1469    this._iframe.style.width    = '100%'; 
     1470    this._textArea.style.width  = '100%'; 
     1471    this._framework.ed_cell.style.width = ''; 
     1472 
    14681473    if(includingBars != null)     this._htmlArea.sizeIncludesToolbars = includingBars; 
    14691474    if(includingPanels != null)   this._htmlArea.sizeIncludesPanels   = includingPanels; 
     
    15151520    } 
    15161521 
    1517     // We need to set the iframe & textarea to 100% height so that the htmlarea 
    1518     // isn't "pushed out" when we get it's height, so we can change them later. 
    1519     if(this._iframe.style.height != '100%')   this._iframe.style.height   = '100%'; 
    1520     if(this._textArea.style.height != '100%') this._textArea.style.height = '100%'; 
    1521  
    15221522    // At this point we have this._htmlArea.style.width & this._htmlArea.style.height 
    15231523    // which are the size for the OUTER editor area, including toolbars and panels 
     
    15291529    // into thier rows 
    15301530    var panels = this._panels; 
     1531    var editor = this; 
    15311532    var col_span = 1; 
    15321533 
     
    15421543      { 
    15431544        HTMLArea.removeFromParent(panels[pan].container); 
     1545        if(typeof editor._framework[pan] != 'undefined') 
     1546        { 
     1547          HTMLArea.removeFromParent(editor._framework[pan]); 
     1548        } 
    15441549        return false; 
    15451550      } 
     
    15521557      { 
    15531558        this._framework.ler_row.insertBefore(panels.left.container,this._framework.ed_cell); 
     1559        this._framework.table.insertBefore(this._framework.left,this._framework.middle); 
     1560        this._framework.left.style.width = this.config.panel_dimensions.left; 
    15541561      } 
    15551562    } 
     
    15691576      { 
    15701577        this._framework.ler_row.insertBefore(panels.right.container, this._framework.ed_cell.nextSibling); 
     1578        this._framework.table.insertBefore(this._framework.right,this._framework.middle.nextSibling); 
     1579        this._framework.right.style.width = this.config.panel_dimensions.right; 
    15711580      } 
    15721581    } 
     
    16321641    this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px'; 
    16331642 
    1634     // Compatability Mode (both IE and Moz), because table cell heights are 
    1635     // ignored in compatability mode (at least in IE, moz works, but 
    1636     // I don't think it should so we'll do this for moz too incase it changes) 
    1637     // we have to set an explicit pixel height on the iframe so as the table 
    1638     // cell surrounding it takes the available height. 
    1639     // This means that the panel heights for top & bottom MUST be pixel heights 
    1640     // if you are using Xinha in a standards mode page. 
    1641     if( document.compatMode && document.compatMode != 'BackCompat') 
    1642     { 
    1643       var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight; 
    1644       if(this._framework.tp_row.childNodes.length) 
    1645       { 
    1646         edcellheight  -= parseInt(this.config.panel_dimensions.top); 
    1647       } 
    1648  
    1649       if(this._framework.bp_row.childNodes.length) 
    1650       { 
    1651         edcellheight  -= parseInt(this.config.panel_dimensions.bottom); 
    1652       } 
    1653       this._iframe.style.height   = edcellheight + 'px'; 
    1654     } 
    1655     else 
    1656     { 
    1657       this._iframe.style.height   = '100%'; 
    1658     } 
    1659     this._iframe.style.width    = '100%'; 
     1643    var edcellheight = height - this._toolBar.offsetHeight - this._statusBar.offsetHeight; 
     1644    if(panel_is_alive('top'))    edcellheight  -= parseInt(this.config.panel_dimensions.top); 
     1645    if(panel_is_alive('bottom')) edcellheight  -= parseInt(this.config.panel_dimensions.bottom);; 
     1646    this._iframe.style.height    = edcellheight + 'px'; 
     1647 
     1648    var edcellwidth = width; 
     1649    if(panel_is_alive('left'))  edcellwidth -= parseInt(this.config.panel_dimensions.left); 
     1650    if(panel_is_alive('right')) edcellwidth -= parseInt(this.config.panel_dimensions.right); 
     1651    this._iframe.style.width     =  edcellwidth + 'px'; 
    16601652 
    16611653    this._textArea.style.height = this._iframe.style.height; 
     
    16691661    var div = document.createElement('div'); 
    16701662    div.side = side; 
     1663    if(side == 'left' || side == 'right') 
     1664    { 
     1665      div.style.width = this.config.panel_dimensions[side]; 
     1666    } 
    16711667    HTMLArea.addClasses(div, 'panel'); 
    16721668    this._panels[side].panels.push(div); 
Note: See TracChangeset for help on using the changeset viewer.