Changeset 1142

Timestamp:

12/11/08 15:32:38 (5 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:

• Xinha.css (modified) (2 diffs)
• XinhaCore.js (modified) (2 diffs)
• plugins/CharCounter/CharCounter.js (modified) (2 diffs)
• skins/blue-look/skin.css (modified) (1 diff)
• skins/blue-metallic/skin.css (modified) (1 diff)
• skins/green-look/skin.css (modified) (1 diff)
• skins/inditreuse/skin.css (modified) (1 diff)
• skins/silva/skin.css (modified) (1 diff)
• skins/titan/skin.css (modified) (1 diff)
• skins/xp-blue/skin.css (modified) (1 diff)
• skins/xp-green/skin.css (modified) (1 diff)

trunk/Xinha.css

@@ -94 +94 @@
   font: 11px Tahoma,Verdana,sans-serif;
   height:16px;
+  overflow: hidden;
 }
 
@@ -109 +110 @@
 }
 
+.statusBarWidgetContainer {
+  background-color: ButtonFace;
+}
 
 /* popup dialogs */

trunk/XinhaCore.js

@@ -2058 +2058 @@
 Xinha.prototype._createStatusBar = function()
 {
+  // TODO: Move styling into separate stylesheet
   this.setLoadingMessage(Xinha._lc('Create Statusbar'));
-  var statusbar = document.createElement("div");
-  statusbar.className = "statusBar";
-  this._statusBar = statusbar;
+  var statusBar = document.createElement("div");
+  statusBar.style.position = "relative";
+  statusBar.className = "statusBar";
+  statusBar.style.width = "100%";
   Xinha.freeLater(this, '_statusBar');
-  
+
+  var widgetContainer = document.createElement("div");
+  widgetContainer.className = "statusBarWidgetContainer";
+  widgetContainer.style.position = "absolute";
+  widgetContainer.style.right = "0";
+  widgetContainer.style.top = "0";
+  widgetContainer.style.padding = "3px 3px 3px 10px";
+  statusBar.appendChild(widgetContainer);
+
   // statusbar.appendChild(document.createTextNode(Xinha._lc("Path") + ": "));
   // creates a holder for the path view
-  var div = document.createElement("span");
-  div.className = "statusBarTree";
-  div.innerHTML = Xinha._lc("Path") + ": ";
-
-  this._statusBarTree = div;
+  var statusBarTree = document.createElement("span");
+  statusBarTree.className = "statusBarTree";
+  statusBarTree.innerHTML = Xinha._lc("Path") + ": ";
+
+  this._statusBarTree = statusBarTree;
   Xinha.freeLater(this, '_statusBarTree');
-  this._statusBar.appendChild(div);
-
-  div = document.createElement("span");
-  div.innerHTML = Xinha._lc("You are in TEXT MODE.  Use the [<>] button to switch back to WYSIWYG.");
-  div.style.display = "none";
-
-  this._statusBarTextMode = div;
+  statusBar.appendChild(statusBarTree);
+  var statusBarTextMode = document.createElement("span");
+  statusBarTextMode.innerHTML = Xinha._lc("You are in TEXT MODE.  Use the [<>] button to switch back to WYSIWYG.");
+  statusBarTextMode.style.display = "none";
+
+  this._statusBarTextMode = statusBarTextMode;
   Xinha.freeLater(this, '_statusBarTextMode');
-  this._statusBar.appendChild(div);
+  statusBar.appendChild(statusBarTextMode);
+
+  statusBar.style.whiteSpace = "nowrap";
+
+  var self = this;
+  this.notifyOn("before_resize", function(evt, size) {
+    self._statusBar.style.width = null;
+  });
+  this.notifyOn("resize", function(evt, size) {
+    // HACK! IE6 doesn't update the width properly when resizing if it's 
+    // given in pixels, but does hide the overflow content correctly when 
+    // using 100% as the width. (FF, Safari and IE7 all require fixed
+    // pixel widths to do the overflow hiding correctly.)
+    if (Xinha.is_ie && Xinha.ie_version == 6)
+    {
+      self._statusBar.style.width = "100%";
+    } 
+    else
+    {
+      var width = size['width'];
+      self._statusBar.style.width = width + "px";
+    }
+  });
+
+  this.notifyOn("modechange", function(evt, mode) {
+    // Loop through all registered status bar items
+    // and show them only if they're turned on for
+    // the new mode.
+    for (var i in self._statusWidgets)
+    {
+      var widget = self._statusWidgets[i];
+      for (var index=0; index<widget.modes.length; index++)
+      {
+        if (widget.modes[index] == mode.mode)
+        {
+          var found = true;
+        }
+      }
+      if (typeof found == 'undefined')
+      {
+        widget.block.style.display = "none";  
+      }
+      else
+      {
+        widget.block.style.display = "";
+      }
+    }
+  });
 
   if ( !this.config.statusBar )
   {
     // disable it...
-    statusbar.style.display = "none";
-  }
-  return statusbar;
+    statusBar.style.display = "none";
+  }
+  return statusBar;
+};
+
+/** Registers and inserts a new block for a widget in the status bar
+ @param id unique string identifer for this block
+ @param modes list of modes this block should be shown in
+
+ @returns reference to HTML element inserted into the status bar
+ */
+Xinha.prototype.registerStatusWidget = function(id, modes)
+{
+  modes = modes || ['wysiwyg'];
+  if (!this._statusWidgets)
+  {
+    this._statusWidgets = {};
+  }
+
+  var block = document.createElement("div");
+  block.className = "statusBarWidget";
+  block = this._statusBar.firstChild.appendChild(block);
+
+  var showWidget = false;
+  for (var i=0; i<modes.length; i++)
+  {
+    if (modes[i] == this._editMode)
+    {
+      showWidget = true;
+    }
+  }
+  block.style.display = showWidget == true ? "" : "none";
+
+  this._statusWidgets[id] = {block: block, modes: modes};
+  return block;
 };
 
@@ -2464 +2552 @@
     // creates & appends the status bar
   var statusbar = this._createStatusBar();
-  fw.sb_cell.appendChild(statusbar);
+  this._statusBar = fw.sb_cell.appendChild(statusbar);
+
 
   // insert Xinha before the textarea.

trunk/plugins/CharCounter/CharCounter.js

@@ -40 +40 @@
   var self = this;
   if (this.charCount==null) {
-    var charCount = document.createElement("span");
-    charCount.style.padding = "2px 5px";
-    if(Xinha.is_ie) {
-      charCount.style.styleFloat = "right";
-    } else {
-      charCount.style.cssFloat = "right";
-    }
-    var brk = document.createElement('div');
-    brk.style.height =
-    brk.style.width =
-    brk.style.lineHeight =
-    brk.style.fontSize = '1px';
-    brk.style.clear = 'both';
-    if(Xinha.is_ie) {
-      this.editor._statusBarTree.style.styleFloat = "left";
-    } else {
-      this.editor._statusBarTree.style.cssFloat = "left";
-    }
-    this.editor._statusBar.appendChild(charCount);
-    this.editor._statusBar.appendChild(brk);
-    this.charCount = charCount;
+      var charCount = self.editor.registerStatusWidget('CharCounter', ['wysiwyg']);
+      this.charCount = charCount;
   }
 };
@@ -119 +100 @@
 };
 
-CharCounter.prototype.onMode = function (mode)
-{
-  //Hide Chars in statusbar when switching into textmode
-  switch (mode)
-  {
-    case "textmode":
-      this.charCount.style.display = "none";
-      break;
-    case "wysiwyg":
-      this.charCount.style.display = "";
-      break;
-    default:
-      alert("Mode <" + mode + "> not defined!");
-      return false;
-  }
-};

trunk/skins/blue-look/skin.css

@@ -69 +69 @@
 }
 
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #f7f8fd;
+}
+
 .htmlarea .statusBar .statusBarTree
 {

trunk/skins/blue-metallic/skin.css

@@ -66 +66 @@
 }
 
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #f7f8fd;
+}
+
 .htmlarea .statusBar .statusBarTree
 {

trunk/skins/green-look/skin.css

@@ -61 +61 @@
   font:11px helvetica,arial,sans-serif;
 }
+
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.gif);
+  background-repeat: repeat-x;
+  background-color: #f8fdf8;
+}
+
 .htmlarea .statusBar .statusBarTree
 {

trunk/skins/inditreuse/skin.css

@@ -49 +49 @@
   font:11px helvetica,arial,sans-serif;
 }
+
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #889fc9;
+}
+
 .htmlarea .statusBar .statusBarTree {
   display:block;

trunk/skins/silva/skin.css

@@ -92 +92 @@
 }
 
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(statusbar.png);
+  background-repeat: repeat-x;
+  background-color: white;
+}
+
 .htmlarea .statusBar .statusBarTree
 {

trunk/skins/titan/skin.css

@@ -49 +49 @@
   font:11px helvetica,arial,sans-serif;
 }
+
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #889fc9;
+}
+
 .htmlarea .statusBar .statusBarTree {
   display:block;

trunk/skins/xp-blue/skin.css

@@ -52 +52 @@
   font:11px helvetica,arial,sans-serif;
 }
+
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #c3daf9;
+}
+
 .htmlarea .statusBar .statusBarTree {
   display:block;

trunk/skins/xp-green/skin.css

@@ -52 +52 @@
   font:11px helvetica,arial,sans-serif;
 }
+
+.htmlarea .statusBar .statusBarWidgetContainer
+{
+  background-image: url(button-background.png);
+  background-repeat: repeat-x;
+  background-color: #f2f0e4;
+}
+
 .htmlarea .statusBar .statusBarTree {
   display:block;