Changeset 1418


Ignore:
Timestamp:
02/22/18 23:21:39 (5 months ago)
Author:
gogo
Message:

Add xinha_config.resizableEditor = [bool]; option to allow drag-resize of editor.

This works pretty well in Chrome. Not at all in IE/Edge or Firefox, and works to an extent in Safari.

The differences are due to how much support there is for the css resize property, specifically, Firefox doesn't support it on Iframe properly, IE/Edge doesn't support it at all, and Safari's support is a bit weird especially in 9.x, in 11.x it only allows you to increase size, not decrease.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/XinhaCore.js

    r1417 r1418  
    562562  this.height = "auto"; 
    563563 
     564  /** This property allows the user to drag-resize the iframe, if  
     565   * the browser supports it.  Currently Chrome and Opera seem to work 
     566   * ok with this, while Firefox doesn't support the CSS resize for iframe 
     567   *  
     568   * There is a Bugzilla bug about it... 
     569   *    https://bugzilla.mozilla.org/show_bug.cgi?id=680823 
     570   *  
     571   * IE, and Edge don't support the css resize property at all. 
     572   *  
     573   *  Safari 9.1.1 acts a bit weird, unusable 
     574   *  Safari 11.0.3 works ok but you can only increase the size 
     575   *  
     576   * @type Boolean 
     577   */ 
     578   
     579  this.resizableEditor = false; 
     580   
    564581 /** Specifies whether the toolbar should be included 
    565582  *  in the size, or are extra to it.  If false then it's recommended 
     
    29212938}; 
    29222939 
     2940/** Get the overall size of the editor, including toolbars and panels 
     2941 *  (if they are being considered) 
     2942 * 
     2943 *  This is used by sizeEditor to get the size of the area excluding toolbars 
     2944 *  when it sets the _htmlArea.size attribute first explicitly and then 
     2945 *  adds in toolbars/panels later. 
     2946 * 
     2947 */ 
     2948 
     2949Xinha.prototype.getOverallSize = function(useStylePxSize) 
     2950{ 
     2951  // Originally when sizeEditor was adjusting for panel/toolbar 
     2952  // size after having set _htmlArea.style.width/height it always 
     2953  // used the offsetWidth/Height, even if it set a px width/height 
     2954  // on the style just before. 
     2955  // 
     2956  // In the interests of not-fixing-whats-not-broke, we are only 
     2957  // going to look at the style.width/height pixel size if  
     2958  // this is in resizing mode.  It actually works ok for  
     2959  // non-resizable editors too but I have not tested old ones. 
     2960  // 
     2961  // Note that if you use offsetWidth/Height for a resizable  
     2962  // editor during resize, it works OK but for some reason I don't 
     2963  // quite understand the minimum size you can reach (in Chrome) 
     2964  // is not as small as when you observe style.width/height 
     2965   
     2966  if(typeof useStylePxSize == 'undefined') 
     2967  { 
     2968    useStylePxSize = this.config.resizableEditor; 
     2969  } 
     2970   
     2971  var size = { w: 0, h: 0, width: 0, height:0, offsetWidth: 0, offsetHeight: 0 }; 
     2972   
     2973  if(useStylePxSize && this._htmlArea.style.width.match(/px/)) 
     2974  { 
     2975    size.w = parseInt(this._htmlArea.style.width.replace(/px/,'')); 
     2976  } 
     2977  else 
     2978  { 
     2979    size.w = this._htmlArea.offsetWidth; 
     2980  } 
     2981   
     2982  if(useStylePxSize && this._htmlArea.style.height.match(/px/)) 
     2983  { 
     2984    size.h = parseInt(this._htmlArea.style.height.replace(/px/,'')); 
     2985  } 
     2986  else 
     2987  { 
     2988    size.h = this._htmlArea.offsetHeight; 
     2989  } 
     2990   
     2991  size.offsetHeight = size.h; 
     2992  size.height       = this._htmlArea.style.height; 
     2993  size.offsetWidth  = size.w; 
     2994  size.width        = this._htmlArea.style.width; 
     2995   
     2996  return size; 
     2997}; 
     2998 
    29232999/** 
    29243000 *  Size the editor to a specific size, or just refresh the size (when window resizes for example) 
     
    29673043      if ( rPanel.on && rPanel.panels.length && Xinha.hasDisplayedChildren(rPanel.div) ) 
    29683044      { 
    2969         this._htmlArea.style.width = (this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.right, 10)) + 'px'; 
     3045        this._htmlArea.style.width = (this.getOverallSize().offsetWidth + parseInt(this.config.panel_dimensions.right, 10)) + 'px'; 
    29703046      } 
    29713047 
     
    29733049      if ( lPanel.on && lPanel.panels.length && Xinha.hasDisplayedChildren(lPanel.div) ) 
    29743050      { 
    2975         this._htmlArea.style.width = (this._htmlArea.offsetWidth + parseInt(this.config.panel_dimensions.left, 10)) + 'px'; 
     3051        this._htmlArea.style.width = (this.getOverallSize().offsetWidth + parseInt(this.config.panel_dimensions.left, 10)) + 'px'; 
    29763052      } 
    29773053    } 
     
    29843060    { 
    29853061      // Need to add some for toolbars 
    2986       this._htmlArea.style.height = (this._htmlArea.offsetHeight + this._toolbar.offsetHeight + this._statusBar.offsetHeight) + 'px'; 
     3062      this._htmlArea.style.height = (this.getOverallSize().offsetHeight + this._toolbar.offsetHeight + this._statusBar.offsetHeight) + 'px'; 
    29873063    } 
    29883064 
     
    29933069      if ( tPanel.on && tPanel.panels.length && Xinha.hasDisplayedChildren(tPanel.div) ) 
    29943070      { 
    2995         this._htmlArea.style.height = (this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.top, 10)) + 'px'; 
     3071        this._htmlArea.style.height = (this.getOverallSize().offsetHeight + parseInt(this.config.panel_dimensions.top, 10)) + 'px'; 
    29963072      } 
    29973073 
     
    29993075      if ( bPanel.on && bPanel.panels.length && Xinha.hasDisplayedChildren(bPanel.div) ) 
    30003076      { 
    3001         this._htmlArea.style.height = (this._htmlArea.offsetHeight + parseInt(this.config.panel_dimensions.bottom, 10)) + 'px'; 
     3077        this._htmlArea.style.height = (this.getOverallSize().offsetHeight + parseInt(this.config.panel_dimensions.bottom, 10)) + 'px'; 
    30023078      } 
    30033079    } 
     
    30093085  width  = this._htmlArea.offsetWidth; 
    30103086  height = this._htmlArea.offsetHeight; 
     3087   
     3088   
    30113089 
    30123090  // Set colspan for toolbar, and statusbar, rowspan for left & right panels, and insert panels to be displayed 
     
    38203898        } 
    38213899      });       
     3900       
     3901       
     3902      if(typeof editor.config.resizableEditor != 'undefined' && editor.config.resizableEditor) 
     3903      { 
     3904        editor._iframe.style.resize = 'both'; 
     3905        var lastResize    = [0,0]; 
     3906        Xinha._addEvent(editor._iframe.contentWindow, 'resize', function(){ 
     3907          if(lastResize[0] == editor._iframe.style.width && lastResize[1] == editor._iframe.style.height) 
     3908          { 
     3909            return; 
     3910          } 
     3911           
     3912          lastResize = [ editor._iframe.style.width, editor._iframe.style.height ];           
     3913          editor.sizeEditor(editor._iframe.style.width, editor._iframe.style.height, false, false); 
     3914        }); 
     3915      } 
     3916       
     3917     
    38223918      editor.removeLoadingMessage(); 
    38233919    } 
Note: See TracChangeset for help on using the changeset viewer.