Changeset 166


Ignore:
Timestamp:
05/13/05 20:20:04 (9 years ago)
Author:
gogo
Message:

There are 4 things in this commit...

  1. Resizing fixes.
  2. New "flowable" toolbar
  3. Proof of concept of skins.
  4. Testbed file.

Resizing Fixes

Complete rewrite of the framing that the editor is built from,
previously it was done using nested and positioned divs, which was very
troublesome to get right. It also suffered from problems when resizing
the editor.

I have changed it to now use a table structure and have fixed the
resizing problems. This also means we can now use any CSS measurement
for setting width and height (even percentages). Resizing is handled
very well, and generally it's just better all around.

The fullscreen plugin has been adjusted to use the new methods, which
makes it's job much easier too. This won't solve the problem with
fullscreen when the editor has been placed inside a positioned element
however.

Flowable Toolbar

A new config option has been added which allows the toolbar sections
(between separators) to be treated as "possible-line-break-here",
meaning that if there is not enough room on the line, the line will
break to put the section on the next line. Newlines are treated the
same way. Of course the toolbar will re-flow when you resize the
window.

This has been set as the default (and the toolbar has been adjusted to
better suit it) because the default toolbars can get pretty long as you
add plugins. Having the flowing toolbars alleviates this problem and
allows a very small editor window :)

Skins

Ok, well, it's just a CSS file and a couple of images, but it shows the
sort of thing we can already do. I felt that this is something that
people would want to see. What I'd like in the future is to be able to
have a config option per editor to select what skin it gets, but this
will necessitate some extra work so we can have different styles apply
to each editor on a multi-editor page.

The other thing that would be nice is to be able to style the select
lists in the toolbar, which are pretty ugly.

I've set the "blue-look" skin to be used in the full example.

Testbed

This is just a simple html file using Xinha without all the extra stuff
in the full_example. You can use it to test your plugins etc, or users
could take it as a boilerplate file.

Location:
trunk
Files:
6 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/examples/full_example-body.html

    r35 r166  
    129129    window.onload = xinha_init; 
    130130  </script> 
     131  <link href="../skins/blue-look/skin.css" rel="Stylesheet" /> 
    131132</head> 
    132133 
  • trunk/htmlarea.css

    r146 r166  
    7272.htmlarea iframe 
    7373{ 
    74   border: none; 
     74  border: 1px solid; 
    7575} 
    7676 
     
    232232.htmlarea .panels.right .panel { border-right:none; border-left:none; } 
    233233.htmlarea .panels.left  h1     { border-left:none;  } 
    234 div.htmlarea { border: 1px solid black; } 
     234.htmlarea { border: 1px solid black; } 
  • trunk/htmlarea.js

    r162 r166  
    7070// Creates a new HTMLArea object.  Tries to replace the textarea with the given 
    7171// ID with it. 
    72 function HTMLArea(textarea, config) { 
     72function HTMLArea(textarea, config) 
     73{ 
     74  if(!textarea) throw("Tried to create HTMLArea without textarea specified."); 
     75 
    7376  if (HTMLArea.checkSupportedBrowser()) { 
    7477    if (typeof config == "undefined") { 
     
    7881    } 
    7982    this._htmlArea = null; 
     83 
     84    if(typeof textarea != 'object') 
     85    { 
     86      textarea = HTMLArea.getElementById('textarea', textarea); 
     87    } 
    8088    this._textArea = textarea; 
     89 
     90    // Before we modify anything, get the initial textarea size 
     91    this._initial_ta_size = 
     92    { 
     93      w: textarea.style.width ? textarea.style.width : textarea.offsetWidth, 
     94      h: textarea.style.height ? textarea.style.height : textarea.offsetHeight 
     95    } 
     96 
    8197    this._editMode = "wysiwyg"; 
    8298    this.plugins = {}; 
     
    99115      { 
    100116        on: true, 
    101         div:    document.createElement('div'), 
     117        container:    document.createElement('td'), 
    102118        panels: [ ] 
    103119      }, 
     
    105121      { 
    106122        on: true, 
    107         div:    document.createElement('div'), 
     123        container:    document.createElement('td'), 
    108124        panels: [ ] 
    109125      }, 
     
    111127      { 
    112128        on: true, 
    113         div:    document.createElement('div'), 
     129        container:    document.createElement('td'), 
    114130        panels: [ ] 
    115131      }, 
     
    117133      { 
    118134        on: true, 
    119         div:    document.createElement('div'), 
     135        container:    document.createElement('td'), 
    120136        panels: [ ] 
    121137      } 
     
    124140    for(var i in panels) 
    125141    { 
    126       panels[i].div.className = 'panels ' + i; 
     142      panels[i].div = panels[i].container; // legacy 
     143      panels[i].container.className = 'panels ' + i; 
    127144    } 
    128145  } 
     
    146163HTMLArea.Config = function () { 
    147164  var cfg = this; 
    148   this.version = "3.0"; 
    149  
    150   this.width = "toolbar"; 
     165  this.version = HTMLArea.version.Revision; 
     166 
     167  // Width and Height 
     168  //  you may set these as follows 
     169  //  width = 'auto'      -- the width of the original textarea will be used 
     170  //  width = 'toolbar'   -- the width of the toolbar will be used 
     171  //  width = '<css measure>' -- use any css measurement, eg width = '75%' 
     172  // 
     173  //  height = 'auto'     -- the height of the original textarea 
     174  //  height = '<css measure>' -- any css measurement, eg height = '480px' 
     175  this.width  = "auto"; 
    151176  this.height = "auto"; 
    152177 
     178  // the next parameter specifies whether the toolbar should be included 
     179  // in the size above, or are extra to it.  If false then it's recommended 
     180  // to have explicit pixel sizes above (or on your textarea and have auto above) 
     181  this.sizeIncludesBars = true; 
     182 
     183  // the next parameter specifies whether the panels should be included 
     184  // in the size above, or are extra to it.  If false then it's recommended 
     185  // to have explicit pixel sizes above (or on your textarea and have auto above) 
     186  this.sizeIncludesPanels = true; 
     187 
     188  // Width of the "Right Side" panel, when present 
     189  // these, and the width and height of the editor 
     190  // _must_ be pixel widths if you wish to have config.sizeIncludesPanels = false 
     191  // if you have sizeIncludesPanels true, they can be any valid CSS measurement. 
     192  this.panel_dimensions = 
     193  { 
     194    left:   '200px', // Width 
     195    right:  '200px', 
     196    top:    '100px', // Height 
     197    bottom: '100px' 
     198  } 
    153199 
    154200  // enable creation of a status bar? 
     
    172218  this.undoTimeout = 500;       // 1/2 sec. 
    173219 
    174   // the next parameter specifies whether the toolbar should be included 
    175   // in the size or not. 
    176   this.sizeIncludesToolbar = true; 
    177  
    178220  // if true then HTMLArea will retrieve the full HTML, starting with the 
    179221  // <HTML> tag. 
     
    227269  // remove tags (these have to be a regexp, or null if this functionality is not desired) 
    228270  this.htmlRemoveTags = null; 
     271 
     272  // Turning this on will turn all "linebreak" and "separator" items in your toolbar into soft-breaks, 
     273  // this means that if the items between that item and the next linebreak/separator can 
     274  // fit on the same line as that which came before then they will, otherwise they will 
     275  // float down to the next line. 
     276 
     277  // If you put a linebreak and separator next to each other, only the separator will 
     278  // take effect, this allows you to have one toolbar that works for both flowToolbars = true and false 
     279  // infact the toolbar below has been designed in this way, if flowToolbars is false then it will 
     280  // create explictly two lines (plus any others made by plugins) breaking at justifyleft, however if 
     281  // flowToolbars is false and your window is narrow enough then it will create more than one line 
     282  // even neater, if you resize the window the toolbars will reflow.  Niiiice. 
     283 
     284  this.flowToolbars = true; 
    229285 
    230286  /** CUSTOMIZING THE TOOLBAR 
     
    239295  this.toolbar = 
    240296  [ 
    241     ["popupeditor","separator"], 
    242     ["formatblock","fontname","fontsize","bold","italic","underline","strikethrough","separator"], 
    243     ["forecolor","hilitecolor","textindicator","separator"], 
    244     ["subscript","superscript"], 
    245     ["linebreak","justifyleft","justifycenter","justifyright","justifyfull","separator"], 
    246     ["insertorderedlist","insertunorderedlist","outdent","indent","separator"], 
    247     ["inserthorizontalrule","createlink","insertimage","inserttable","separator"], 
    248     ["undo","redo"], (HTMLArea.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),["selectall"],["separator"], 
    249     ["killword","removeformat","toggleborders","lefttoright", "righttoleft", "separator","htmlmode","about"] 
     297    ["popupeditor"], 
     298    ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"], 
     299    ["separator","forecolor","hilitecolor","textindicator"], 
     300    ["separator","subscript","superscript"], 
     301    ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"], 
     302    ["separator","insertorderedlist","insertunorderedlist","outdent","indent"], 
     303    ["separator","inserthorizontalrule","createlink","insertimage","inserttable"], 
     304    ["separator","undo","redo","selectall"], (HTMLArea.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]), 
     305    ["separator","killword","removeformat","toggleborders","lefttoright", "righttoleft","separator","htmlmode","about"] 
    250306  ]; 
    251307 
    252   // Width of the "Right Side" panel, when present 
    253   this.panel_dimensions = 
    254   { 
    255     left:   '200px', // Width 
    256     right:  '200px', 
    257     top:    '100px', // Height 
    258     bottom: '100px' 
    259   } 
    260308 
    261309  this.fontname = { 
     
    667715 
    668716  var toolbar = document.createElement("div"); 
    669   this._toolbar = toolbar; 
     717  // ._toolbar is for legacy, ._toolBar is better thanks. 
     718  this._toolBar = this._toolbar = toolbar; 
    670719  toolbar.className = "toolbar"; 
    671720  toolbar.unselectable = "1"; 
     
    677726        this._createToolbar1(editor, toolbar, tb_objects); 
    678727        this._htmlArea.appendChild(toolbar); 
     728  return toolbar; 
    679729} 
    680730 
     
    691741HTMLArea.prototype._createToolbar1 = function (editor, toolbar, tb_objects) { 
    692742 
     743  // This shouldn't be necessary, but IE seems to float outside of the container 
     744  // when we float toolbar sections, so we have to clear:both here as well 
     745  // as at the end (which we do have to do). 
     746  if(editor.config.flowToolbars) 
     747  { 
     748    var brk = document.createElement('div'); 
     749    brk.style.height = 
     750      brk.style.width = 
     751      brk.style.lineHeight = 
     752      brk.style.fontSize = '1px'; 
     753    brk.style.clear = 'both'; 
     754    toolbar.appendChild(brk); 
     755  } 
     756 
    693757  // creates a new line in the toolbar 
    694758  function newLine() { 
     759    if(typeof tb_row != 'undefined' && tb_row.childNodes.length == 0) return; 
     760 
    695761    var table = document.createElement("table"); 
    696762    table.border = "0px"; 
    697763    table.cellSpacing = "0px"; 
    698764    table.cellPadding = "0px"; 
     765    if(editor.config.flowToolbars) 
     766    { 
     767      if(HTMLArea.is_ie) 
     768      { 
     769        table.style.styleFloat = "left"; 
     770      } 
     771      else 
     772      { 
     773        table.style.cssFloat = "left"; 
     774      } 
     775    } 
     776 
    699777    toolbar.appendChild(table); 
    700778    // TBODY is required for IE, otherwise you don't see anything 
     
    704782    tb_row = document.createElement("tr"); 
    705783    tb_body.appendChild(tb_row); 
     784 
     785    table.className = 'toolbarRow'; // meh, kinda. 
    706786  }; // END of function: newLine 
     787 
    707788  // init first line 
    708789  newLine(); 
     
    810891    switch (txt) { 
    811892        case "separator": 
     893          if(editor.config.flowToolbars) newLine(); 
    812894      el = document.createElement("div"); 
    813895      el.className = "separator"; 
     
    817899      el.className = "space"; 
    818900      break; 
    819         case "linebreak": 
    820       newLine(); 
    821       return false; 
     901      case "linebreak": 
     902          newLine(); 
     903          return false; 
    822904        case "textindicator": 
    823905      el = document.createElement("div"); 
     
    914996      el = createSelect(txt); 
    915997    } 
    916     if (el) { 
    917       var tb_cell = document.createElement("td"); 
    918       tb_row.appendChild(tb_cell); 
    919       tb_cell.appendChild(el); 
    920     } else { 
    921       alert("FIXME: Unknown toolbar item: " + txt); 
    922     } 
     998 
    923999    return el; 
    9241000  }; 
     
    9521028      else if(typeof code != 'function') 
    9531029      { 
    954         createButton(code); 
    955       } 
    956     } 
    957   } 
     1030        var tb_element = createButton(code); 
     1031 
     1032        if (tb_element) 
     1033        { 
     1034          var tb_cell = document.createElement("td"); 
     1035          tb_cell.className = 'toolbarElement'; 
     1036          tb_row.appendChild(tb_cell); 
     1037          tb_cell.appendChild(tb_element); 
     1038        } 
     1039        else if (tb_element == null) 
     1040        { 
     1041          alert("FIXME: Unknown toolbar item: " + code); 
     1042        } 
     1043      } 
     1044    } 
     1045  } 
     1046 
     1047  if(editor.config.flowToolbars) 
     1048  { 
     1049    var brk = document.createElement('div'); 
     1050    brk.style.height = 
     1051      brk.style.width = 
     1052      brk.style.lineHeight = 
     1053      brk.style.fontSize = '1px'; 
     1054    brk.style.clear = 'both'; 
     1055    toolbar.appendChild(brk); 
     1056  } 
     1057 
     1058  return toolbar; 
    9581059}; 
    9591060 
     
    9821083  i_contain.style.width = "18px"; 
    9831084  i_contain.style.height = "18px"; 
    984  
     1085  i_contain.className    = 'buttonImageContainer'; 
    9851086 
    9861087  var img = null; 
     
    10251126  var statusbar = document.createElement("div"); 
    10261127  statusbar.className = "statusBar"; 
    1027   this._htmlArea.appendChild(statusbar); 
    10281128  this._statusBar = statusbar; 
     1129 
    10291130  // statusbar.appendChild(document.createTextNode(HTMLArea._lc("Path") + ": ")); 
    10301131  // creates a holder for the path view 
     
    10411142  this._statusBar.appendChild(div); 
    10421143 
    1043   if (!this.config.statusBar) { 
     1144  if (!this.config.statusBar) 
     1145  { 
    10441146    // disable it... 
    10451147    statusbar.style.display = "none"; 
    10461148  } 
     1149 
     1150  return statusbar; 
    10471151}; 
    10481152 
     
    11131217  } 
    11141218 
    1115   // get the textarea 
     1219  // create the editor framework, yah, table layout I know, but much easier 
     1220  // to get it working correctly this way, sorry about that, patches welcome. 
     1221 
     1222  this._framework = 
     1223  { 
     1224    'table'     :document.createElement('table'), 
     1225    'tbody'     :document.createElement('tbody'), // IE will not show the table if it doesn't have a tbody! 
     1226    'tb_row'    :document.createElement('tr'), 
     1227    'tb_cell'   :document.createElement('td'), // Toolbar 
     1228 
     1229    'tp_row'   :document.createElement('tr'), 
     1230    'tp_cell'   :this._panels.top.container,   // top panel 
     1231 
     1232    'ler_row'   :document.createElement('tr'), 
     1233    'lp_cell'   :this._panels.left.container,  // left panel 
     1234    'ed_cell'   :document.createElement('td'), // editor 
     1235    'rp_cell'   :this._panels.right.container, // right panel 
     1236 
     1237    'bp_row'    :document.createElement('tr'), 
     1238    'bp_cell'   :this._panels.bottom.container,// bottom panel 
     1239 
     1240    'sb_row'    :document.createElement('tr'), 
     1241    'sb_cell'   :document.createElement('td')  // status bar 
     1242  } 
     1243 
     1244  var fw = this._framework; 
     1245  fw.table.border="0"; 
     1246  fw.table.cellPadding="0"; 
     1247  fw.table.cellSpacing="0"; 
     1248  fw.tb_row.style.verticalAlign = 'top'; 
     1249  fw.tp_row.style.verticalAlign = 'top'; 
     1250  fw.ler_row.style.verticalAlign= 'top'; 
     1251  fw.bp_row.style.verticalAlign = 'top'; 
     1252  fw.sb_row.style.verticalAlign = 'top'; 
     1253 
     1254  // Put the cells in the rows        set col & rowspans 
     1255  // note that I've set all these so that all panels are showing 
     1256  // but they will be redone in sizeEditor() depending on which 
     1257  // panels are shown.  It's just here to clarify how the thing 
     1258  // is put togethor. 
     1259  fw.tb_row.appendChild(fw.tb_cell);  fw.tb_cell.colSpan = 3; 
     1260 
     1261  fw.tp_row.appendChild(fw.tp_cell);  fw.tp_cell.colSpan = 3; 
     1262 
     1263  fw.ler_row.appendChild(fw.lp_cell); 
     1264  fw.ler_row.appendChild(fw.ed_cell); 
     1265  fw.ler_row.appendChild(fw.rp_cell); 
     1266 
     1267  fw.bp_row.appendChild(fw.bp_cell);  fw.bp_cell.colSpan = 3; 
     1268 
     1269  fw.sb_row.appendChild(fw.sb_cell);  fw.sb_cell.colSpan = 3; 
     1270 
     1271  // Put the rows in the table body 
     1272  fw.tbody.appendChild(fw.tb_row);  // Toolbar 
     1273  fw.tbody.appendChild(fw.tp_row); // Left, Top, Right panels 
     1274  fw.tbody.appendChild(fw.ler_row);  // Editor/Textarea 
     1275  fw.tbody.appendChild(fw.bp_row);  // Bottom panel 
     1276  fw.tbody.appendChild(fw.sb_row);  // Statusbar 
     1277 
     1278  // and body in the table 
     1279  fw.table.appendChild(fw.tbody); 
     1280 
     1281 
     1282  var htmlarea = this._framework.table; 
     1283  this._htmlArea = htmlarea; 
     1284  htmlarea.className = "htmlarea"; 
     1285 
     1286    // create the toolbar and put in the area 
     1287  var toolbar = this._createToolbar(); 
     1288  this._framework.tb_cell.appendChild(toolbar); 
     1289 
     1290    // create the IFRAME & add to container 
     1291  var iframe = document.createElement("iframe"); 
     1292  iframe.src = _editor_url + editor.config.URIs["blank"]; 
     1293  this._framework.ed_cell.appendChild(iframe); 
     1294  this._iframe = iframe; 
     1295 
     1296    // creates & appends the status bar 
     1297  var statusbar = this._createStatusBar(); 
     1298  this._framework.sb_cell.appendChild(statusbar); 
     1299 
     1300  // insert Xinha before the textarea. 
    11161301  var textarea = this._textArea; 
    1117   if (typeof textarea == "string") 
    1118   { 
    1119     this._textArea = textarea = HTMLArea.getElementById("textarea", textarea); 
    1120   } 
    1121   this._ta_size = 
    1122   { 
    1123     w: textarea.offsetWidth, 
    1124     h: textarea.offsetHeight 
    1125   }; 
    1126  
    1127   // create the editor framework 
    1128   var htmlarea = document.createElement("div"); 
    1129   htmlarea.className = "htmlarea"; 
    1130   this._htmlArea = htmlarea; 
    1131   if(this.config.width != 'auto' && this.config.width != 'toolbar') 
    1132   { 
    1133     htmlarea.style.width = this.config.width; 
    1134   } 
    1135  
    1136   // insert the editor before the textarea. 
    11371302  textarea.parentNode.insertBefore(htmlarea, textarea); 
    1138  
    1139   // creates & appends the toolbar 
    1140   this._createToolbar(); 
    1141  
    1142   // Create containing div (to hold editor and stylist) 
    1143   var innerEditor = document.createElement('div'); 
    1144   htmlarea.appendChild(innerEditor); 
    1145   innerEditor.style.position = 'relative'; 
    1146   this.innerEditor = innerEditor; 
    11471303 
    11481304  // extract the textarea and insert it into the htmlarea 
    11491305  textarea.parentNode.removeChild(textarea); 
    1150   innerEditor.appendChild(textarea); 
    1151  
    1152   // create the IFRAME & add to container 
    1153   var iframe = document.createElement("iframe"); 
    1154   iframe.src = _editor_url + editor.config.URIs["blank"]; 
    1155   innerEditor.appendChild(iframe); 
    1156   this._iframe = iframe; 
    1157  
    1158  
    1159   // - I don't think this is required, see the .htmlarea iframe in htmlarea.css 
    1160   // remove the default border as it keeps us from computing correctly 
    1161   // the sizes.  (somebody tell me why doesn't this work in IE) 
    1162   // if (!HTMLArea.is_ie) { 
    1163   //   iframe.style.borderWidth = "0px"; 
    1164   // } 
    1165  
    1166  
    1167   // Add the panels 
    1168   for(var i in this._panels) 
    1169   { 
    1170     innerEditor.appendChild(this._panels[i].div); 
    1171   } 
    1172  
    1173   // creates & appends the status bar 
    1174   this._createStatusBar(); 
    1175  
     1306  this._framework.ed_cell.appendChild(textarea); 
    11761307 
    11771308  // Set up event listeners for saving the iframe content to the textarea 
     
    12481379  textarea.style.display = "none"; 
    12491380 
    1250   // Calculate the starting size, EXCLUDING THE TOOLBAR & STATUS BAR (always) 
    1251   var height = null; 
    1252   var width  = null; 
    1253  
    1254   switch(this.config.height) 
    1255   { 
    1256     // "auto" means the same height as the original textarea 
    1257     case 'auto' : { height = parseInt(this._ta_size.h);    break; } 
    1258     // otherwise we expect it to be a PIXEL height 
    1259     default     : { height = parseInt(this.config.height); break; } 
    1260   } 
    1261  
    1262   switch(this.config.width) 
    1263   { 
    1264     // toolbar means the width is the same as the toolbar 
    1265     case 'toolbar': {width = parseInt(this._toolbar.offsetWidth); break; } 
    1266     // auto means the same as the textarea 
    1267     case 'auto'   : {width = parseInt(this._ta_size.w);          break; } 
    1268     // otherwise it is expected to be a PIXEL width 
    1269     default       : {width = parseInt(this.config.width);        break; } 
    1270   } 
    1271  
    1272   if (this.config.sizeIncludesToolbar) 
    1273   { 
    1274     // substract toolbar height 
    1275     height -= this._toolbar.offsetHeight; 
    1276     height -= this._statusBar.offsetHeight; 
    1277   } 
    1278  
    1279   // Minimal size = 100x100 
    1280   width  = Math.max(width, 100); 
    1281   height = Math.max(height,100); 
    1282  
    1283   this.setInnerSize(width,height); 
    1284   this.notifyOn('panel_change',function(){editor.setInnerSize();}); 
    1285  
     1381  // Initalize size 
     1382  editor.initSize(); 
    12861383 
    12871384  // IMPORTANT: we have to allow Mozilla a short time to recognize the 
     
    12911388}; 
    12921389 
    1293   /** Size the htmlArea according to the available space 
    1294    *   Width and Height include toolbar! 
    1295    **/ 
    1296  
    1297   HTMLArea.prototype.getInnerSize = function() 
    1298   { 
    1299     return this._innerSize; 
    1300   } 
    1301  
    1302   HTMLArea.prototype.setInnerSize = function(width, height) 
    1303   { 
    1304     if(typeof width == 'undefined' || width == null) 
    1305     { 
    1306       width  = this._innerSize.width; 
    1307     } 
    1308  
    1309     if(typeof height == 'undefined' || height == null) 
    1310     { 
    1311       height  = this._innerSize.height; 
    1312     } 
    1313  
    1314     this._innerSize = {'width':width,'height':height}; 
    1315  
    1316     var editorWidth  = width; 
    1317     var editorHeight = height; 
    1318     var editorLeft   = 0; 
    1319     var editorTop    = 0; 
     1390 
     1391  /** 
     1392   * Size the editor according to the INITIAL sizing information. 
     1393   * config.width 
     1394   *    The width may be set via three ways 
     1395   *    auto    = the width is inherited from the original textarea 
     1396   *    toolbar = the width is set to be the same size as the toolbar 
     1397   *    <set size> = the width is an explicit size (any CSS measurement, eg 100em should be fine) 
     1398   * 
     1399   * config.height 
     1400   *    auto    = the height is inherited from the original textarea 
     1401   *    <set size> = an explicit size measurement (again, CSS measurements) 
     1402   * 
     1403   * config.sizeIncludesBars 
     1404   *    true    = the tool & status bars will appear inside the width & height confines 
     1405   *    false   = the tool & status bars will appear outside the width & height confines 
     1406   * 
     1407   */ 
     1408 
     1409  HTMLArea.prototype.initSize = function() 
     1410  { 
     1411    var editor = this; 
     1412 
     1413    var width  = null; 
     1414    var height = null; 
     1415    switch(this.config.width) 
     1416    { 
     1417      case 'auto': 
     1418      { 
     1419        width = this._initial_ta_size.w; 
     1420      } 
     1421      break; 
     1422 
     1423      case 'toolbar': 
     1424      { 
     1425        width = this._toolBar.offsetWidth; 
     1426      } 
     1427      break; 
     1428 
     1429      default : 
     1430      { 
     1431        width = this.config.width; 
     1432      } 
     1433      break; 
     1434    } 
     1435 
     1436    switch(this.config.height) 
     1437    { 
     1438      case 'auto': 
     1439      { 
     1440        height = this._initial_ta_size.h; 
     1441      } 
     1442      break; 
     1443 
     1444      default : 
     1445      { 
     1446        height = this.config.height; 
     1447      } 
     1448      break; 
     1449    } 
     1450 
     1451    this.sizeEditor(width, height, this.config.sizeIncludesBars, this.config.sizeIncludesPanels); 
     1452    HTMLArea._addEvent(window, 'resize', function() { editor.sizeEditor() }); 
     1453    this.notifyOn('panel_change',function(){editor.sizeEditor();}); 
     1454  } 
     1455 
     1456  /** 
     1457   *  Size the editor to a specific size, or just refresh the size (when window resizes for example) 
     1458   *  @param width optional width (CSS specification) 
     1459   *  @param height optional height (CSS specification) 
     1460   *  @param includingBars optional boolean to indicate if the size should include or exclude tool & status bars 
     1461   */ 
     1462 
     1463  HTMLArea.prototype.sizeEditor = function(width, height, includingBars, includingPanels) 
     1464  { 
     1465    if(includingBars != null)     this._htmlArea.sizeIncludesToolbars = includingBars; 
     1466    if(includingPanels != null)   this._htmlArea.sizeIncludesPanels   = includingPanels; 
     1467 
     1468    if(width != null) 
     1469    { 
     1470      this._htmlArea.style.width          = width; 
     1471      if(!this._htmlArea.sizeIncludesPanels) 
     1472      { 
     1473        // Need to add some for l & r panels 
     1474        var panel = this._panels.right; 
     1475        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
     1476        { 
     1477          this._htmlArea.style.width = this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.right); 
     1478        } 
     1479 
     1480        var panel = this._panels.left; 
     1481        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
     1482        { 
     1483          this._htmlArea.style.width = this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.left); 
     1484        } 
     1485      } 
     1486    } 
     1487 
     1488    if(height != null) 
     1489    { 
     1490      this._htmlArea.style.height         = height; 
     1491      if(!this._htmlArea.sizeIncludesToolbars) 
     1492      { 
     1493        // Need to add some for toolbars 
     1494        this._htmlArea.style.height         = this._htmlArea.offsetHeight + this._toolbar.offsetHeight + this._statusBar.offsetHeight; 
     1495      } 
     1496 
     1497      if(!this._htmlArea.sizeIncludesPanels) 
     1498      { 
     1499        // Need to add some for l & r panels 
     1500        var panel = this._panels.top; 
     1501        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
     1502        { 
     1503          this._htmlArea.style.height = this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.top); 
     1504        } 
     1505 
     1506        var panel = this._panels.bottom; 
     1507        if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
     1508        { 
     1509          this._htmlArea.style.height = this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.bottom); 
     1510        } 
     1511      } 
     1512    } 
     1513 
     1514    // At this point we have this._htmlArea.style.width & this._htmlArea.style.height 
     1515    // which are the size for the OUTER editor area, including toolbars and panels 
     1516    // now we size the INNER area and position stuff in the right places. 
     1517 
     1518    width  = this._htmlArea.offsetWidth; 
     1519    height = this._htmlArea.offsetHeight; 
     1520 
     1521    // Set colspan for toolbar, and statusbar, rowspan for left & right panels, and insert panels to be displayed 
     1522    // into thier rows 
    13201523    var panels = this._panels; 
    1321  
    1322     var panel = panels.right; 
    1323     if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
    1324     { 
    1325       panel.div.style.position = 'absolute'; 
    1326       panel.div.style.width    = parseInt(this.config.panel_dimensions.right) + (HTMLArea.ie_ie ? -1 : -2) + 'px'; 
    1327       panel.div.style.height   = height + (HTMLArea.is_ie ? -1 : -1) + 'px'; 
    1328       panel.div.style.top      = '0px'; 
    1329       panel.div.style.right    = (HTMLArea.is_ie ? 1 : 2) + 'px'; 
    1330       panel.div.style.padding  = "0px"; 
    1331       panel.div.style.overflow = "auto"; 
    1332       panel.div.style.display  = 'block'; 
    1333       editorWidth -= parseInt(this.config.panel_dimensions.right) + (HTMLArea.is_ie ? 2 : 0); 
     1524    var col_span = 1; 
     1525 
     1526    if(panels.left.on && panels.left.panels.length && HTMLArea.hasDisplayedChildren(panels.left.container)) 
     1527    { 
     1528      col_span += 1; 
     1529      if(!panels.left.container.parentNode) 
     1530      { 
     1531        this._framework.ler_row.insertBefore(panels.left.container,this._framework.ed_cell); 
     1532      } 
    13341533    } 
    13351534    else 
    13361535    { 
    1337       panel.div.style.display  = 'none'; 
    1338     } 
    1339  
    1340     var panel = panels.left; 
    1341     if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
    1342     { 
    1343       panel.div.style.position = 'absolute'; 
    1344       panel.div.style.width    = parseInt(this.config.panel_dimensions.left) + (HTMLArea.ie_ie ? -1 : -1) + 'px'; 
    1345       panel.div.style.height   = height + (HTMLArea.is_ie ? -1 : -1) + 'px'; 
    1346       panel.div.style.top      = '0px'; 
    1347       panel.div.style.left     = (HTMLArea.is_ie ? 0 : 0) + 'px'; 
    1348       panel.div.style.padding  = "0px"; 
    1349       panel.div.style.overflow = "auto"; 
    1350       panel.div.style.display  = "block"; 
    1351       editorWidth -= parseInt(this.config.panel_dimensions.left) + (HTMLArea.is_ie ? 2 : 0); 
    1352       editorLeft   = parseInt(this.config.panel_dimensions.left) + (HTMLArea.is_ie ? 2 : 0) + 'px'; 
     1536      if(panels.left.container.parentNode) 
     1537      { 
     1538        panels.left.container.parentNode.removeChild(panels.left.container); 
     1539      } 
     1540    } 
     1541 
     1542    if(panels.top.on && panels.top.panels.length && HTMLArea.hasDisplayedChildren(panels.top.container)) 
     1543    { 
     1544      if(!panels.top.container.parentNode) 
     1545      { 
     1546        this._framework.tp_row.appendChild(panels.top.container); 
     1547      } 
    13531548    } 
    13541549    else 
    13551550    { 
    1356       panel.div.style.display  = 'none'; 
    1357     } 
    1358  
    1359     var panel = panels.top; 
    1360     if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
    1361     { 
    1362       panel.div.style.position = 'absolute'; 
    1363       panel.div.style.top      = '0px'; 
    1364       panel.div.style.left     = '0px'; 
    1365       panel.div.style.width    = width  + 'px'; 
    1366       panel.div.style.height   = parseInt(this.config.panel_dimensions.top) + 'px'; 
    1367       panel.div.style.padding  = "0px"; 
    1368       panel.div.style.overflow = "auto"; 
    1369       panel.div.style.display  = "block"; 
    1370       editorHeight -= parseInt(this.config.panel_dimensions.top); 
    1371       editorTop     = parseInt(this.config.panel_dimensions.top) + 'px'; 
     1551      if(panels.top.container.parentNode) 
     1552      { 
     1553        panels.top.container.parentNode.removeChild(panels.top.container); 
     1554      } 
     1555    } 
     1556 
     1557    if(panels.right.on && panels.right.panels.length && HTMLArea.hasDisplayedChildren(panels.right.container)) 
     1558    { 
     1559      col_span += 1; 
     1560      if(!panels.right.container.parentNode) 
     1561      { 
     1562        this._framework.ler_row.insertBefore(panels.right.container, this._framework.ed_cell.nextSibling); 
     1563      } 
    13721564    } 
    13731565    else 
    13741566    { 
    1375       panel.div.style.display  = 'none'; 
    1376     } 
    1377  
    1378     var panel = panels.bottom; 
    1379     if(panel.on && panel.panels.length && HTMLArea.hasDisplayedChildren(panel.div)) 
    1380     { 
    1381       panel.div.style.position = 'absolute'; 
    1382       panel.div.style.bottom   = '0px'; 
    1383       panel.div.style.left     = '0px'; 
    1384       panel.div.style.width    = width  + 'px'; 
    1385       panel.div.style.height   = parseInt(this.config.panel_dimensions.bottom) + 'px'; 
    1386       panel.div.style.padding  = "0px"; 
    1387       panel.div.style.overflow = "auto"; 
    1388       panel.div.style.display  = "block"; 
    1389       editorHeight -= parseInt(this.config.panel_dimensions.bottom); 
     1567      if(panels.right.container.parentNode) 
     1568      { 
     1569        panels.right.container.parentNode.removeChild(panels.right.container); 
     1570      } 
     1571    } 
     1572 
     1573    if(panels.bottom.on && panels.bottom.panels.length && HTMLArea.hasDisplayedChildren(panels.bottom.container)) 
     1574    { 
     1575      if(!panels.bottom.container.parentNode) 
     1576      { 
     1577        this._framework.bp_row.appendChild(panels.right.container); 
     1578      } 
    13901579    } 
    13911580    else 
    13921581    { 
    1393       panel.div.style.display  = 'none'; 
    1394     } 
    1395  
    1396     // Set the dimensions of the container 
    1397     this.innerEditor.style.width  = width  + 'px'; 
    1398     this.innerEditor.style.height = height + 'px'; 
    1399     this.innerEditor.style.position = 'relative'; 
    1400  
    1401     // and the iframe 
    1402     this._iframe.style.width  = editorWidth  + 'px'; 
    1403     this._iframe.style.height = editorHeight + 'px'; 
    1404     this._iframe.style.position = 'absolute'; 
    1405     this._iframe.style.left = editorLeft; 
    1406     this._iframe.style.top  = editorTop; 
    1407  
    1408  
    1409     // the editor including the toolbar now have the same size as the 
    1410     // original textarea.. which means that we need to reduce that a bit. 
    1411     this._textArea.style.width  = editorWidth  + 'px'; 
    1412     this._textArea.style.height = editorHeight + 'px'; 
    1413     this._textArea.style.position = 'absolute'; 
    1414     this._textArea.style.left = editorLeft; 
    1415     this._textArea.style.top  = editorTop; 
    1416  
    1417     this.notifyOf('resize', {'width':width,'height':height,'editorWidth':editorWidth,'editorHeight':editorHeight,'editorTop':editorTop,'editorLeft':editorLeft}); 
     1582      if(panels.bottom.container.parentNode) 
     1583      { 
     1584        panels.bottom.container.parentNode.removeChild(panels.bottom.container); 
     1585      } 
     1586    } 
     1587 
     1588    this._framework.tb_cell.colSpan = col_span; 
     1589    this._framework.tp_cell.colSpan = col_span; 
     1590    this._framework.bp_cell.colSpan = col_span; 
     1591    this._framework.sb_cell.colSpan = col_span; 
     1592 
     1593    // Put in the panel rows, top panel goes above editor row 
     1594    if(!this._framework.tp_row.childNodes.length) 
     1595    { 
     1596      if(this._framework.tp_row.parentNode) 
     1597      { 
     1598        this._framework.tp_row.parentNode.removeChild(this._framework.tp_row); 
     1599      } 
     1600    } 
     1601    else 
     1602    { 
     1603      if(!this._framework.tp_row.parentNode) 
     1604      { 
     1605        this._framework.tbody.insertBefore(this._framework.tp_row, this._framework.ler_row); 
     1606      } 
     1607    } 
     1608 
     1609    // bp goes after the editor 
     1610    if(!this._framework.bp_row.childNodes.length) 
     1611    { 
     1612      if(this._framework.bp_row.parentNode) 
     1613      { 
     1614        this._framework.bp_row.parentNode.removeChild(this._framework.bp_row); 
     1615      } 
     1616    } 
     1617    else 
     1618    { 
     1619      if(!this._framework.bp_row.parentNode) 
     1620      { 
     1621        this._framework.tbody.insertBefore(this._framework.bp_row, this._framework.ler_row.nextSibling); 
     1622      } 
     1623    } 
     1624 
     1625    // finally if the statusbar is on, insert it 
     1626    if(this.config.statusBar) 
     1627    { 
     1628      if(!this._framework.sb_row.parentNode) 
     1629      { 
     1630        this._framework.table.appendChild(this._framework.sb_row); 
     1631      } 
     1632    } 
     1633    else 
     1634    { 
     1635      if(this._framework.sb_row.parentNode) 
     1636      { 
     1637        this._framework.sb_row.parentNode.removeChild(this._framework.sb_row); 
     1638      } 
     1639    } 
     1640 
     1641    // Size and set colspans, link up the framework 
     1642    this._framework.lp_cell.style.width  = this.config.panel_dimensions.left; 
     1643    this._framework.rp_cell.style.width  = this.config.panel_dimensions.right; 
     1644    this._framework.tp_cell.style.height = this.config.panel_dimensions.top; 
     1645    this._framework.bp_cell.style.height = this.config.panel_dimensions.bottom; 
     1646    this._framework.tb_cell.style.height = this._toolBar.offsetHeight   + 'px'; 
     1647    this._framework.sb_cell.style.height = this._statusBar.offsetHeight + 'px'; 
     1648    this._iframe.style.height   = '100%'; 
     1649    this._iframe.style.width    = '100%'; 
     1650 
     1651    this._textArea.style.height = '100%'; 
     1652    this._textArea.style.width  = '100%'; 
    14181653  } 
    14191654 
     
    14491684  { 
    14501685    if(panel) 
    1451   { 
    1452     panel.style.display = 'none'; 
    1453     this.notifyOf('panel_change', {'action':'hide','panel':panel}); 
    1454   } 
     1686    { 
     1687      panel.style.display = 'none'; 
     1688      this.notifyOf('panel_change', {'action':'hide','panel':panel}); 
     1689    } 
    14551690  } 
    14561691 
     
    14581693  { 
    14591694    if(panel) 
    1460   { 
    1461     panel.style.display = ''; 
    1462     this.notifyOf('panel_change', {'action':'show','panel':panel}); 
     1695    { 
     1696      panel.style.display = ''; 
     1697      this.notifyOf('panel_change', {'action':'show','panel':panel}); 
    14631698    } 
    14641699  } 
     
    17121947      this.deactivateEditor(); 
    17131948      this._iframe.style.display   = 'none'; 
    1714       this._textArea.style.display = "block"; 
     1949      this._textArea.style.display = ''; 
     1950 
    17151951      if (this.config.statusBar) 
    17161952      { 
  • trunk/plugins/FullScreen/full-screen.js

    r152 r166  
    7575    } 
    7676 
     77    e.sizeEditor(x,y,true,true); 
     78    /* 
    7779    if(!e._revertFullScreen) e._revertFullScreen = e.getInnerSize(); 
    78  
    7980    width = x; 
    8081    height = y - e._toolbar.offsetHeight - (e._statusBar ? e._statusBar.offsetHeight : 0); 
     
    9192      } 
    9293    } 
    93  
     94    */ 
    9495    e._sizing = false; 
    9596  } 
     
    99100    if(e._isFullScreen || e._sizing) return false; 
    100101    e._sizing = true; 
     102    e.initSize(); 
     103    /* 
    101104    e.setInnerSize(e._revertFullScreen.width, e._revertFullScreen.height); 
    102105    if(HTMLArea.is_ie && document.documentElement && document.documentElement.clientHeight) 
     
    109112    } 
    110113    e._revertFullScreen = null; 
     114    */ 
    111115    e._sizing = false; 
    112116  } 
Note: See TracChangeset for help on using the changeset viewer.