Script Base Format Bar

This script is the base for the Buttons for Format Editing Text 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