[pLog-svn] r500 - plog/trunk/js/editor
oscar at devel.plogworld.net
oscar at devel.plogworld.net
Tue Dec 14 22:48:49 GMT 2004
Author: oscar
Date: 2004-12-14 22:48:49 +0000 (Tue, 14 Dec 2004)
New Revision: 500
Modified:
plog/trunk/js/editor/plogeditor.css
plog/trunk/js/editor/plogeditor.js
Log:
the plog non-visual html editor now looks exactly like htmlarea. i've added support for separators plus support for drop-down lists that react diffrently depending on the selection (the behaviour can and should be customized)
Modified: plog/trunk/js/editor/plogeditor.css
===================================================================
--- plog/trunk/js/editor/plogeditor.css 2004-12-14 21:31:42 UTC (rev 499)
+++ plog/trunk/js/editor/plogeditor.css 2004-12-14 22:48:49 UTC (rev 500)
@@ -4,7 +4,7 @@
padding: 1px 1px 1px 1px;
border: 1px solid;
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
- width: 140px;
+ width: 380px;
}
.pressedButton {
@@ -13,6 +13,9 @@
margin-left:2px;
margin-bottom: 2px;
color: ButtonText;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
}
.normalButton {
@@ -20,6 +23,9 @@
margin-left:2px;
margin-bottom: 2px;
color: ButtonText;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
}
.buttonHover {
@@ -27,4 +33,18 @@
border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
margin-left:2px;
margin-bottom: 2px;
+ padding: 0px;
+ width: 18px;
+ height: 18px;
}
+
+.separator {
+ position: relative;
+ margin: 3px;
+ border-left: 1px solid ButtonShadow;
+ border-right: 1px solid ButtonHighlight;
+ width: 0px;
+ height: 16px;
+ padding: 0px;
+}
+
Modified: plog/trunk/js/editor/plogeditor.js
===================================================================
--- plog/trunk/js/editor/plogeditor.js 2004-12-14 21:31:42 UTC (rev 499)
+++ plog/trunk/js/editor/plogeditor.js 2004-12-14 22:48:49 UTC (rev 500)
@@ -85,7 +85,7 @@
{
// a very simple document.write...
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 + '\');" alt = "' + this.display + '" />';
+ 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);
}
@@ -150,7 +150,7 @@
* @param txtId
* @return nothing
*/
- this.execute = function( txtId )
+ this.execute = function( txtId, param )
{
var text = '';
@@ -183,7 +183,7 @@
*
* @param txtId the textarea id
*/
- this.surround = function( txtId )
+ this.surround = function( txtId, param )
{
surroundInfo = Array()
surroundInfo['start'] = this.tagStart;
@@ -200,6 +200,29 @@
}
/**
+ * visual separators for the toolbar are also implemented as buttons, but they do
+ * do nothing and only show a vertical bar anyway with some margin on both sides...
+ */
+edButtonSeparator = function()
+{
+ this.prototype = new edButton('separator', '', '', '', '', -1 );
+ this.prototype.constructor = edButton;
+ this.superclass = edButton;
+
+ this.superclass('separator', '', '', '', '', -1 );
+
+ /**
+ * draws a vertical line
+ */
+ this.show = function( txtId, objName )
+ {
+ separatorCode = '<span class="separator"></span>';
+
+ document.write( separatorCode );
+ }
+}
+
+/**
* special button that only adds a link
*
* @param id
@@ -222,7 +245,7 @@
*
* @param txtId
*/
- this.execute = function( txtId )
+ this.execute = function( txtId, param )
{
this.toggle();
@@ -251,7 +274,7 @@
*
* @param txtId
*/
- this.surround = function( txtId )
+ this.surround = function( txtId, param )
{
surroundInfo = Array();
surroundInfo['start'] = '';
@@ -297,7 +320,7 @@
*
* @param txtId
*/
- this.surround = function( txtId )
+ this.surround = function( txtId, param )
{
surroundInfo = Array();
surroundInfo['start'] = '<p>';
@@ -331,7 +354,7 @@
*
* @param txtId
*/
- this.execute = function( txtId )
+ this.execute = function( txtId, param )
{
textArea = document.getElementById(txtId);
@@ -358,6 +381,108 @@
}
/**
+ * implements drop-down lists
+ */
+edButtonList = function( id, options )
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new edButton(id, '', '', '', '', -1 );
+ this.prototype.constructor = edButton;
+ this.superclass = edButton;
+
+ this.options = options;
+
+ this.superclass(id, '', '', '', '', -1 );
+
+ /**
+ * renders the button. In our case, creates a drop-down list with the available options
+ *
+ * @param txtId
+ * @return nothing
+ */
+ this.show = function(txtId, objName)
+ {
+ selectBox = '<select style="height: 18px;padding:0px;margin:0px;" 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 );
+ }
+
+ /**
+ * reimplement this method for lists that should behave in a particular way when an option
+ * is selected
+ */
+ this.execute = function( txtId, param )
+ {
+ // param is the drop-down list that generated the event, so we can easily learn
+ // more about what was selected by
+ opt = param.selectedIndex;
+
+ return( param.options[opt].value );
+ }
+
+ /**
+ * does nothing
+ */
+ this.surround = function( txtId, param )
+ {
+ surroundInfo = Array();
+ return( surroundInfo );
+ }
+
+}
+
+/**
+ * button that shows a list with different font sizes
+ */
+edFontSizeList = function( id, options )
+{
+ //
+ // strange javascript thingies used for object inheritance...
+ //
+ this.prototype = new edButtonList(id, options );
+ this.prototype.constructor = edButtonList;
+ this.superclass = edButtonList;
+
+ this.superclass(id, options );
+
+ /**
+ * returns the right <span style=...></span> markup
+ */
+ this.execute = function( txtId, param )
+ {
+ // param is the drop-down list that generated the event, so we can easily learn
+ // more about what was selected in the dropdown list
+ opt = param.selectedIndex;
+ fontSizePt = param.options[opt].value;
+
+ spanCode = '<span style="font-size: '+fontSizePt+'pt;"></span>';
+
+ return( spanCode );
+ }
+
+ /**
+ * surrouns the selected text with the right <span>...</span> tags
+ */
+ this.surround = function( txtId, param )
+ {
+ opt = param.selectedIndex;
+ fontSizePt = param.options[opt].value;
+
+ surroundInfo = Array();
+ surroundInfo['start'] = '<span style="font-size: '+fontSizePt+'pt;">';
+ surroundInfo['end'] = '</span>';
+ return( surroundInfo );
+ }
+}
+
+
+/**
* main class
*
*/
@@ -375,10 +500,27 @@
// our very own toolbar
// --
this.toolBar = Array();
+ options = new Array();
+ options['8'] = '8 pt';
+ options['10'] = '10 pt';
+ options['12'] = '12 pt';
+ options['14'] = '14 pt';
+ options['18'] = '18 pt';
+ options['24'] = '24 pt';
+ options['36'] = '36 pt';
+ this.toolBar['list_font_size'] = new edFontSizeList( 'list_font_size', options );
this.toolBar['1_but_b'] = new edButton( '1_but_b', 'bold', '<strong>', '</strong>', 'ed_format_bold.gif', 1 );
this.toolBar['2_but_i'] = new edButton( '2_but_i', 'italics', '<em>', '</em>', 'ed_format_italic.gif', 1 );
- //this.toolBar['3_but_u'] = new edButton( '3_but_u', 'underline', '<span style="text-decoration:underline">', '</span>', 'ed_format_underline.gif', 1 );
- this.toolBar['4_but_br'] = new edButtonBr( '4_but_br', 'br', 'ed_redo.gif' );
+ this.toolBar['3_but_u'] = new edButton( '3_but_u', 'underline', '<span style="text-decoration:underline">', '</span>', 'ed_format_underline.gif', 1 );
+ this.toolBar['4_but_strikethrough'] = new edButton( '4_but_strikethrough', 'strikethrough', '<span style="text-decoration: line-through;">', '</span>', 'ed_format_strike.gif', 1 );
+ this.toolBar['but_sep1'] = new edButtonSeparator();
+ this.toolBar['but_align_left'] = new edButton( 'but_align_left', 'align center', '<div style="text-align: left;">', '</div>', 'ed_align_left.gif' );
+ this.toolBar['but_align_center'] = new edButton( 'but_align_center', 'align center', '<div style="text-align: center;">', '</div>', 'ed_align_center.gif' );
+ this.toolBar['but_align_right'] = new edButton( 'but_align_right', 'align center', '<div style="text-align: right;">', '</div>', 'ed_align_right.gif' );
+ this.toolBar['but_align_justify'] = new edButton( 'but_align_justify', 'align center', '<div style="text-align: justify;">', '</div>', 'ed_align_justify.gif' );
+ this.toolBar['but_sep2'] = new edButtonSeparator();
+ this.toolBar['but_ordered_list'] = new edButton( 'but_ordered_list', 'ordered list', '<ol><li></li></ol>', '', 'ed_list_num.gif', -1 );
+ this.toolBar['but_unordered_list'] = new edButton( 'but_unordered_list', 'unordered list', '<ul><li></li></ul>', '', 'ed_list_bullet.gif', -1 );
this.toolBar['5_but_a'] = new edButtonLink( '5_but_a', 'anchor', 'ed_link.gif' );
this.toolBar['6_but_img']= new edButtonImage( '6_but_img', 'image', 'ed_image.gif' );
@@ -426,19 +568,19 @@
* @param buttonId
* @return nothing
*/
- this.execute = function( txtId, buttonId )
+ this.execute = function( txtId, buttonId, param )
{
// get the button from the array
var edButton = this.toolBar[buttonId];
// execute the button
if( !this.selectionExists()) {
- result = edButton.execute( txtId );
+ result = edButton.execute( txtId, param );
if( result != 'undefined' )
this.insertText( result );
}
else {
- surroundInfo = edButton.surround( txtId );
+ surroundInfo = edButton.surround( txtId, param );
this.surroundText( surroundInfo['start'], surroundInfo['end'] );
}
}
More information about the pLog-svn
mailing list