Changeset 1142


Ignore:
Timestamp:
12/11/08 15:32:38 (6 years ago)
Author:
nicholasbs
Message:

FIXES #314 (status bar screwed up when displaying long URL)

  • updates status bar to hide overflow content
  • adds standardized method (registerStatusWidget) for adding things to the status bar
  • updates the CharCounter plugin to use this method
  • updates the skins to work correctly with new status bar
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/Xinha.css

    r1141 r1142  
    9494  font: 11px Tahoma,Verdana,sans-serif; 
    9595  height:16px; 
     96  overflow: hidden; 
    9697} 
    9798 
     
    109110} 
    110111 
     112.statusBarWidgetContainer { 
     113  background-color: ButtonFace; 
     114} 
    111115 
    112116/* popup dialogs */ 
  • trunk/XinhaCore.js

    r1141 r1142  
    20582058Xinha.prototype._createStatusBar = function() 
    20592059{ 
     2060  // TODO: Move styling into separate stylesheet 
    20602061  this.setLoadingMessage(Xinha._lc('Create Statusbar')); 
    2061   var statusbar = document.createElement("div"); 
    2062   statusbar.className = "statusBar"; 
    2063   this._statusBar = statusbar; 
     2062  var statusBar = document.createElement("div"); 
     2063  statusBar.style.position = "relative"; 
     2064  statusBar.className = "statusBar"; 
     2065  statusBar.style.width = "100%"; 
    20642066  Xinha.freeLater(this, '_statusBar'); 
    2065    
     2067 
     2068  var widgetContainer = document.createElement("div"); 
     2069  widgetContainer.className = "statusBarWidgetContainer"; 
     2070  widgetContainer.style.position = "absolute"; 
     2071  widgetContainer.style.right = "0"; 
     2072  widgetContainer.style.top = "0"; 
     2073  widgetContainer.style.padding = "3px 3px 3px 10px"; 
     2074  statusBar.appendChild(widgetContainer); 
     2075 
    20662076  // statusbar.appendChild(document.createTextNode(Xinha._lc("Path") + ": ")); 
    20672077  // creates a holder for the path view 
    2068   var div = document.createElement("span"); 
    2069   div.className = "statusBarTree"; 
    2070   div.innerHTML = Xinha._lc("Path") + ": "; 
    2071  
    2072   this._statusBarTree = div; 
     2078  var statusBarTree = document.createElement("span"); 
     2079  statusBarTree.className = "statusBarTree"; 
     2080  statusBarTree.innerHTML = Xinha._lc("Path") + ": "; 
     2081 
     2082  this._statusBarTree = statusBarTree; 
    20732083  Xinha.freeLater(this, '_statusBarTree'); 
    2074   this._statusBar.appendChild(div); 
    2075  
    2076   div = document.createElement("span"); 
    2077   div.innerHTML = Xinha._lc("You are in TEXT MODE.  Use the [<>] button to switch back to WYSIWYG."); 
    2078   div.style.display = "none"; 
    2079  
    2080   this._statusBarTextMode = div; 
     2084  statusBar.appendChild(statusBarTree); 
     2085  var statusBarTextMode = document.createElement("span"); 
     2086  statusBarTextMode.innerHTML = Xinha._lc("You are in TEXT MODE.  Use the [<>] button to switch back to WYSIWYG."); 
     2087  statusBarTextMode.style.display = "none"; 
     2088 
     2089  this._statusBarTextMode = statusBarTextMode; 
    20812090  Xinha.freeLater(this, '_statusBarTextMode'); 
    2082   this._statusBar.appendChild(div); 
     2091  statusBar.appendChild(statusBarTextMode); 
     2092 
     2093  statusBar.style.whiteSpace = "nowrap"; 
     2094 
     2095  var self = this; 
     2096  this.notifyOn("before_resize", function(evt, size) { 
     2097    self._statusBar.style.width = null; 
     2098  }); 
     2099  this.notifyOn("resize", function(evt, size) { 
     2100    // HACK! IE6 doesn't update the width properly when resizing if it's  
     2101    // given in pixels, but does hide the overflow content correctly when  
     2102    // using 100% as the width. (FF, Safari and IE7 all require fixed 
     2103    // pixel widths to do the overflow hiding correctly.) 
     2104    if (Xinha.is_ie && Xinha.ie_version == 6) 
     2105    { 
     2106      self._statusBar.style.width = "100%"; 
     2107    }  
     2108    else 
     2109    { 
     2110      var width = size['width']; 
     2111      self._statusBar.style.width = width + "px"; 
     2112    } 
     2113  }); 
     2114 
     2115  this.notifyOn("modechange", function(evt, mode) { 
     2116    // Loop through all registered status bar items 
     2117    // and show them only if they're turned on for 
     2118    // the new mode. 
     2119    for (var i in self._statusWidgets) 
     2120    { 
     2121      var widget = self._statusWidgets[i]; 
     2122      for (var index=0; index<widget.modes.length; index++) 
     2123      { 
     2124        if (widget.modes[index] == mode.mode) 
     2125        { 
     2126          var found = true; 
     2127        } 
     2128      } 
     2129      if (typeof found == 'undefined') 
     2130      { 
     2131        widget.block.style.display = "none";   
     2132      } 
     2133      else 
     2134      { 
     2135        widget.block.style.display = ""; 
     2136      } 
     2137    } 
     2138  }); 
    20832139 
    20842140  if ( !this.config.statusBar ) 
    20852141  { 
    20862142    // disable it... 
    2087     statusbar.style.display = "none"; 
    2088   } 
    2089   return statusbar; 
     2143    statusBar.style.display = "none"; 
     2144  } 
     2145  return statusBar; 
     2146}; 
     2147 
     2148/** Registers and inserts a new block for a widget in the status bar 
     2149 @param id unique string identifer for this block 
     2150 @param modes list of modes this block should be shown in 
     2151 
     2152 @returns reference to HTML element inserted into the status bar 
     2153 */ 
     2154Xinha.prototype.registerStatusWidget = function(id, modes) 
     2155{ 
     2156  modes = modes || ['wysiwyg']; 
     2157  if (!this._statusWidgets) 
     2158  { 
     2159    this._statusWidgets = {}; 
     2160  } 
     2161 
     2162  var block = document.createElement("div"); 
     2163  block.className = "statusBarWidget"; 
     2164  block = this._statusBar.firstChild.appendChild(block); 
     2165 
     2166  var showWidget = false; 
     2167  for (var i=0; i<modes.length; i++) 
     2168  { 
     2169    if (modes[i] == this._editMode) 
     2170    { 
     2171      showWidget = true; 
     2172    } 
     2173  } 
     2174  block.style.display = showWidget == true ? "" : "none"; 
     2175 
     2176  this._statusWidgets[id] = {block: block, modes: modes}; 
     2177  return block; 
    20902178}; 
    20912179 
     
    24642552    // creates & appends the status bar 
    24652553  var statusbar = this._createStatusBar(); 
    2466   fw.sb_cell.appendChild(statusbar); 
     2554  this._statusBar = fw.sb_cell.appendChild(statusbar); 
     2555 
    24672556 
    24682557  // insert Xinha before the textarea. 
  • trunk/plugins/CharCounter/CharCounter.js

    r1067 r1142  
    4040  var self = this; 
    4141  if (this.charCount==null) { 
    42     var charCount = document.createElement("span"); 
    43     charCount.style.padding = "2px 5px"; 
    44     if(Xinha.is_ie) { 
    45       charCount.style.styleFloat = "right"; 
    46     } else { 
    47       charCount.style.cssFloat = "right"; 
    48     } 
    49     var brk = document.createElement('div'); 
    50     brk.style.height = 
    51     brk.style.width = 
    52     brk.style.lineHeight = 
    53     brk.style.fontSize = '1px'; 
    54     brk.style.clear = 'both'; 
    55     if(Xinha.is_ie) { 
    56       this.editor._statusBarTree.style.styleFloat = "left"; 
    57     } else { 
    58       this.editor._statusBarTree.style.cssFloat = "left"; 
    59     } 
    60     this.editor._statusBar.appendChild(charCount); 
    61     this.editor._statusBar.appendChild(brk); 
    62     this.charCount = charCount; 
     42      var charCount = self.editor.registerStatusWidget('CharCounter', ['wysiwyg']); 
     43      this.charCount = charCount; 
    6344  } 
    6445}; 
     
    119100}; 
    120101 
    121 CharCounter.prototype.onMode = function (mode) 
    122 { 
    123   //Hide Chars in statusbar when switching into textmode 
    124   switch (mode) 
    125   { 
    126     case "textmode": 
    127       this.charCount.style.display = "none"; 
    128       break; 
    129     case "wysiwyg": 
    130       this.charCount.style.display = ""; 
    131       break; 
    132     default: 
    133       alert("Mode <" + mode + "> not defined!"); 
    134       return false; 
    135   } 
    136 }; 
  • trunk/skins/blue-look/skin.css

    r677 r1142  
    6969} 
    7070 
     71.htmlarea .statusBar .statusBarWidgetContainer 
     72{ 
     73  background-image: url(button-background.png); 
     74  background-repeat: repeat-x; 
     75  background-color: #f7f8fd; 
     76} 
     77 
    7178.htmlarea .statusBar .statusBarTree 
    7279{ 
  • trunk/skins/blue-metallic/skin.css

    r677 r1142  
    6666} 
    6767 
     68.htmlarea .statusBar .statusBarWidgetContainer 
     69{ 
     70  background-image: url(button-background.png); 
     71  background-repeat: repeat-x; 
     72  background-color: #f7f8fd; 
     73} 
     74 
    6875.htmlarea .statusBar .statusBarTree 
    6976{ 
  • trunk/skins/green-look/skin.css

    r677 r1142  
    6161  font:11px helvetica,arial,sans-serif; 
    6262} 
     63 
     64.htmlarea .statusBar .statusBarWidgetContainer 
     65{ 
     66  background-image: url(button-background.gif); 
     67  background-repeat: repeat-x; 
     68  background-color: #f8fdf8; 
     69} 
     70 
    6371.htmlarea .statusBar .statusBarTree 
    6472{ 
  • trunk/skins/inditreuse/skin.css

    r677 r1142  
    4949  font:11px helvetica,arial,sans-serif; 
    5050} 
     51 
     52.htmlarea .statusBar .statusBarWidgetContainer 
     53{ 
     54  background-image: url(button-background.png); 
     55  background-repeat: repeat-x; 
     56  background-color: #889fc9; 
     57} 
     58 
    5159.htmlarea .statusBar .statusBarTree { 
    5260  display:block; 
  • trunk/skins/silva/skin.css

    r1022 r1142  
    9292} 
    9393 
     94.htmlarea .statusBar .statusBarWidgetContainer 
     95{ 
     96  background-image: url(statusbar.png); 
     97  background-repeat: repeat-x; 
     98  background-color: white; 
     99} 
     100 
    94101.htmlarea .statusBar .statusBarTree 
    95102{ 
  • trunk/skins/titan/skin.css

    r677 r1142  
    4949  font:11px helvetica,arial,sans-serif; 
    5050} 
     51 
     52.htmlarea .statusBar .statusBarWidgetContainer 
     53{ 
     54  background-image: url(button-background.png); 
     55  background-repeat: repeat-x; 
     56  background-color: #889fc9; 
     57} 
     58 
    5159.htmlarea .statusBar .statusBarTree { 
    5260  display:block; 
  • trunk/skins/xp-blue/skin.css

    r677 r1142  
    5252  font:11px helvetica,arial,sans-serif; 
    5353} 
     54 
     55.htmlarea .statusBar .statusBarWidgetContainer 
     56{ 
     57  background-image: url(button-background.png); 
     58  background-repeat: repeat-x; 
     59  background-color: #c3daf9; 
     60} 
     61 
    5462.htmlarea .statusBar .statusBarTree { 
    5563  display:block; 
  • trunk/skins/xp-green/skin.css

    r677 r1142  
    5252  font:11px helvetica,arial,sans-serif; 
    5353} 
     54 
     55.htmlarea .statusBar .statusBarWidgetContainer 
     56{ 
     57  background-image: url(button-background.png); 
     58  background-repeat: repeat-x; 
     59  background-color: #f2f0e4; 
     60} 
     61 
    5462.htmlarea .statusBar .statusBarTree { 
    5563  display:block; 
Note: See TracChangeset for help on using the changeset viewer.