[pLog-svn] r973 - plog/trunk/js/editor

[oscar at devel.plogworld.net]

Author: oscar
Date: 2005-02-06 17:12:05 +0000 (Sun, 06 Feb 2005)
New Revision: 973

Modified:
   plog/trunk/js/editor/plogeditor.css
   plog/trunk/js/editor/plogeditor.js
Log:
fixed some layout issues with the non-visual html editor. Seems to work fine in safari and FF, even though opera renders the widgets in a completely random order... go figure, I'm not going to bother too much.

Modified: plog/trunk/js/editor/plogeditor.css
===================================================================
--- plog/trunk/js/editor/plogeditor.css	2005-02-06 16:44:33 UTC (rev 972)
+++ plog/trunk/js/editor/plogeditor.css	2005-02-06 17:12:05 UTC (rev 973)
@@ -5,6 +5,7 @@
   border: 1px solid;
   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
   width: 380px;
+  height: 20px;
 }
 
 .pressedButton {
@@ -15,13 +16,13 @@
   color: ButtonText;  
   padding: 0px;  
   width: 18px;
-  height: 18px;  
+  height: 18px;
 }
 
 .normalButton {
   border: 1px ButtonFace solid;
-  margin-left:2px;
-  margin-bottom: 2px;  		
+  margin-left:3px;
+  margin-bottom: 3px;  		
   color: ButtonText;  
   padding: 0px;
   width: 18px;
@@ -31,20 +32,30 @@
 .buttonHover {
   border: 1px solid;
   border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
-  margin-left:2px;
-  margin-bottom: 2px;  
+  margin-left:3px;
+  margin-bottom: 3px;  
   padding: 0px;
   width: 18px;
   height: 18px;    
 }
 
 .separator {
-  position: relative;
-  margin: 3px;
+  margin-bottom: 3px;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-top: 0px;
   border-left: 1px solid ButtonShadow;
   border-right: 1px solid ButtonHighlight;
   width: 0px;
   height: 16px;
   padding: 0px;
+  position:relative;
+  top: -9px;
 }
 
+.editorDropDownList {
+ position: relative;
+ top: -9px;
+ padding: 0px;
+ margin: 0px;
+}

Modified: plog/trunk/js/editor/plogeditor.js
===================================================================
--- plog/trunk/js/editor/plogeditor.js	2005-02-06 16:44:33 UTC (rev 972)
+++ plog/trunk/js/editor/plogeditor.js	2005-02-06 17:12:05 UTC (rev 973)
@@ -87,7 +87,7 @@
 		this.htmlId = txtId + '_' + this.id;
 		var buttonText = '<img src="'+baseImageFolder+'/'+this.icon+'" id="' + txtId + '_' + this.id + '" class="normalButton" onmouseout="'+objName+'.mouseOut(\'' + txtId + '\', \'' + this.id + '\');" onmouseover="'+objName+'.mouseOver(\'' + txtId + '\', \'' + this.id + '\');" onclick="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', null );" alt = "' + this.display + '" />';
 		
-		document.write(buttonText);
+		return(buttonText);
 	}
 	
 	/**
@@ -218,7 +218,7 @@
 	{
 		separatorCode = '<span class="separator"></span>';
 		
-		document.write( separatorCode );
+		return( separatorCode );
 	}
 }
 
@@ -400,17 +400,17 @@
 	 * renders the button. In our case, creates a drop-down list with the available options
 	 *
 	 * @param txtId
-	 * @return nothing
+	 * @returns the markup that is going to be written to the document
 	 */
 	this.show = function(txtId, objName)
 	{
-		selectBox = '<select style="height: 18px;padding:0px;margin:0px;" name=\''+this.id+'\'onChange="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', this);"';
+		selectBox = '<select class="editorDropDownList" name=\''+this.id+'\' onChange="'+objName+'.execute(\'' + txtId + '\', \'' + this.id + '\', this);">';
 		for( var key in this.options ) {
 			selectBox += '<option value=\''+key+'\'>'+this.options[key]+'</option>';
 		}
 		selectBox += '</select>';
 		
-		document.write( selectBox );
+		return( selectBox );
 	}
 	
 	/**
@@ -496,6 +496,8 @@
   // array with all the open tags that haven't been closed
   this.tagStack = new Array();
   
+  this.debug = false;
+  
   // --
   // our very own toolbar
   // --
@@ -547,14 +549,21 @@
 	  // even print the toolbar! (and nothing will happen without a toolbar)
 	  if( !this.isSupportedBrowser())
 	  	return;
+		
+	  markup = '';
 	  
 	  this.toolBar.sort();
 	  document.write('<div class="textEditorToolbar" id="textEditorToolbar">');
 	  for( var buttonId in this.toolBar ) {
 		  button = this.toolBar[buttonId];
-		  button.show(this.txtId, this.objName);
+		  markup += button.show(this.txtId, this.objName);
 	  }
+	  document.write(markup);
 	  document.write('</div>');
+	  
+	  if( this.debug ) {
+		document.write('<textarea>'+markup+'</textarea>');
+	  }
   }
   
   // after initializing the buttons, we can generate the toolbar