Script Base Format Bar
Developing... coming soon... 
This script is the base for the
ButtonsForFormatEditingText works. Please, visit the referenced topic to know about this.
%STARTINCLUDE%\
<script type="text/javascript">
// <pre> to stop the TWiki parser
// An "alias" to write in the document:
function w(str) { document.write(str); }
// The butons are defined by the users:
if ( ! arrDefTWikiButtons ) {
var arrDefTWikiButtons = [ %TWIKI_FORMAT_BUTTONS% %WEB_FORMAT_BUTTONS%
];
}
function twikiButtonOptionsCode( options, selNum ) {
var html = "";
for ( var opt in options ) {
switch ( options[opt][0] ) {
case "help_opt":
html += '<a href="javascript:void( twikiButtonLaunchWindow(\''+ options[opt][2] +'\') );"';
html += ' style="padding:0 2px 0 2px; line-height:14px; font-size:12px; text-decoration:none;';
html += ' font-weight:800; margin:1px; display:block; %FORMAT_BUTTON_STYLE%"';
html += ' title="' + options[opt][2] + '">'+ opt +'</a>';
break;
case "topt":
html += '<a href="javascript:void( twikiButtonFormat(this,\''+ selNum +'\',\''+ opt +'\') );"';
html += ' style="padding:0 2px 0 2px; line-height:14px; font-size:12px; text-decoration:none;';
html += ' font-weight:800; margin:1px; display:block; %FORMAT_BUTTON_STYLE%"';
html += ' title="' + options[opt][2] + '">'+ opt +'</a>';
break;
case "iopt":
html += '<a href="javascript:void( twikiButtonFormat(this,\''+ selNum +'\',\''+ opt +'\') );"';
html += ' style="text-decoration:none; display:block; margin:1px; background-color:transparent;"';
html += ' title="' + options[opt][2] + '"><img src="%ATTACHURL%/'+ opt +'"';
html += ' height="16" border="0" alt="' + options[opt][2] + '"/></a>';
break;
}
}
return html;
}
// Create the list of button objects based on the array defined by the user:
if ( ! twikiButtons ) {
var twikiButtons = {};
var twikiButtonsGreaterNum = 0;
var twikiButtonsLastSelect = false;
for ( var num = 0; num < arrDefTWikiButtons.length; num++ ) {
var button = arrDefTWikiButtons[num];
switch ( button[0] ) {
case "txt": // If is an Text Button
twikiButtons[ ++twikiButtonsGreaterNum ] = {
myNum : twikiButtonsGreaterNum,
props : button,
code : function () {
var html = '<a href="javascript:void( twikiButtonFormat(this,\''+ this.myNum +'\') );"';
html += ' style="float:left; line-height:14px; font-size:12px; text-decoration:none;';
html += ' display:block; padding:0 2px 0 2px; font-weight:800; margin:1px; %FORMAT_BUTTON_STYLE%"';
html += ' title="' + this.props[2] + '">'+ this.props[1] +'</a>';
return html;
}
}; break;
case "ico": // If is an Icon Button
twikiButtons[ ++twikiButtonsGreaterNum ] = {
myNum : twikiButtonsGreaterNum,
props : button,
code : function () {
var html = '<a href="javascript:void( twikiButtonFormat(this,\''+ this.myNum +'\') );"';
html += ' style="float:left; margin:1px; text-decoration:none;">';
html += '<img src="%ATTACHURL%/'+ this.props[1] +'" height="16" border="0"';
html += ' alt="' + this.props[2] + '" title="' + this.props[2] + '" /></a>';
return html;
}
}; break;
case "tsel": // If is a text button of a Select
twikiButtons[ ++twikiButtonsGreaterNum ] = {
myNum : twikiButtonsGreaterNum,
props : button,
options : {},
code : function () {
var html = '<div style="float:left; margin:1px;"';
html += ' onmouseover="twikiButtonOpenOpts(this)" onmouseout="twikiButtonCloseOpts(this)">';
html += '<a href="javascript:void(0);" style="line-height:14px; font-size:12px; display:block;';
html += ' padding:0 2px 0 2px; text-decoration:none; font-weight:800; %FORMAT_BUTTON_STYLE%"';
html += ' title="' + this.props[2] + '">'+ this.props[1] +'</a>';
html += '<div style="position:absolute; display:none; %FORMAT_SELECT_STYLE%">';
html += twikiButtonOptionsCode( this.options, this.myNum );
html += '</div></div>';
return html;
}
};
twikiButtonsLastSelect = twikiButtonsGreaterNum;
break;
case "help_sel": // If is the help button (it's equal an isel, but float for the right side.)
case "isel": // If is an image button of a Select
twikiButtons[ ++twikiButtonsGreaterNum ] = {
myNum : twikiButtonsGreaterNum,
props : button,
options : {},
code : function () {
if ( this.props[0] == "isel" ) {
var myFloat = "left";
var myPosition = '';
} else {
var myFloat = "right";
var myPosition = "text-align:right; margin-left:-50px;";
}
var html = '<div style="float:'+ myFloat +'; margin:1px;"';
html += ' onmouseover="twikiButtonOpenOpts(this)" onmouseout="twikiButtonCloseOpts(this)">';
html += '<a href="javascript:void(0);" style="text-decoration:none;">';
html += '<img src="%ATTACHURL%/'+ this.props[1] +'" title="' + this.props[2] + '"';
html += ' height="16" border="0" /></a>';
html += '<div style="position:absolute; display:none; '+myPosition+' %FORMAT_SELECT_STYLE%">';
html += twikiButtonOptionsCode( this.options, this.myNum );
html += '</div></div>';
return html;
}
};
if ( button[0] == "isel" ) {
twikiButtonsLastSelect = twikiButtonsGreaterNum;
} else {
twikiButtonsHelpSelect = twikiButtonsGreaterNum;
}
break;
case "topt": // If is a Text Option of the lest Select
if ( twikiButtons[twikiButtonsLastSelect] ) {
twikiButtons[twikiButtonsLastSelect].options[ button[1] ] = button;
} else {
alert("ERROR Line:\n" + button + "\n\nAn Option need come after a Select.");
} break;
case "iopt": // If is an Image Option of the lest Select
if ( twikiButtons[twikiButtonsLastSelect] ) {
twikiButtons[twikiButtonsLastSelect].options[ button[1] ] = button;
} else {
alert("ERROR Line:\n" + button + "\n\nAn Option need come after a Select.");
} break;
case "help_opt": // If is a help Option
if ( twikiButtons[twikiButtonsHelpSelect] ) {
twikiButtons[twikiButtonsHelpSelect].options[ button[1] ] = button;
} else {
alert("ERROR Line:\n" + button + "\n\nAn Help Option need come after the Help Select.");
} break;
} // switch end.
}
}
function twikiButtonFormat( btElement, btNum, opt ) {
// This method put the format of the clicked button on the selected text.
// btElement : the cliked element reference
// btNum : the button number in the twikiButtons list
// opt : the option name if in a select
if ( twikiButtons[btNum].options ) {
alert( twikiButtons[btNum].options[opt] );
} else {
alert( twikiButtons[btNum].props );
}
}
function twikiButtonOpenOpts( btElement ) {
// Open a drop-down menu of options from a select button
if ( btElement.CloseOptsTimeout ) {
window.clearTimeout(btElement.CloseOptsTimeout);
}
btElement.getElementsByTagName("DIV")[0].style.display = "block";
}
function twikiButtonCloseOpts( btElement ) {
// Close a drop-down menu of options from a select button
if ( ! btElement.getElementsByTagName("DIV")[0].id ) {
var now = new Date();
var newId = 'id' + now.getMinutes() + now.getSeconds() + now.getMilliseconds();
btElement.getElementsByTagName("DIV")[0].id = newId;
}
var id = btElement.getElementsByTagName("DIV")[0].id;
var closeCommand = 'document.getElementById("'+ id +'").style.display = "none";';
btElement.CloseOptsTimeout = window.setTimeout(closeCommand, 300);
}
function twikiButtonLaunchWindow( theTopic ) {
if (screen && screen.width) {
var w = Math.round( screen.width * 0.7 );
} else {
var w = 550;
}
win = open( "%SCRIPTURL%/view%SCRIPTSUFFIX%/" + theTopic + "?skin=plain.pattern",
theTopic, "titlebar=0, width="+w+", height=480, resizable, scrollbars" );
if( win ) { win.focus(); }
}
// Write the html code in the document to show the TWiki Format Bar:
w('<div style="width:99%; %FORMAT_BAR_STYLE%"><div style="height:18px;">');
for (var btNum in twikiButtons) {
w( twikiButtons[btNum].code() );
}
w('</div></div>');
// </pre> to stop the TWiki parser
</script>\
%STOPINCLUDE%
--
TWiki:Main.AurelioAHeckert - 03 Aug 2005
png 
