Tags:
stale_content1Add my vote for this tag create new tag
, view all tags

Script Base Format Bar

see NatEditContrib for an up to date solution...

Developing... coming soon... wink

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

Topic attachments
I Attachment History Action Size Date Who Comment
PNGpng bold.png r2 r1 manage 0.4 K 2005-08-11 - 01:01 AurelioAHeckert  
PNGpng colors.png r1 manage 0.8 K 2005-08-13 - 01:42 AurelioAHeckert  
PNGpng help.png r1 manage 0.6 K 2005-08-19 - 00:03 AurelioAHeckert  
PNGpng italic.png r3 r2 r1 manage 0.5 K 2005-08-11 - 01:18 AurelioAHeckert  
PNGpng underlined.png r2 r1 manage 0.6 K 2005-08-11 - 01:02 AurelioAHeckert  
Edit | Attach | Watch | Print version | History: r7 < r6 < r5 < r4 < r3 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r7 - 2008-09-04 - TWikiJanitor
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.