.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: Script Base Format Bar

Últimas blogadas:

HeadlinesPlugin ERROR: 500 Internal Server Error
Cirandas.net



Script Base Format Bar

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

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
bold.pngpng bold.png manage 0.4 K 26 May 2006 - 13:37 AurelioAHeckert  
colors.pngpng colors.png manage 0.8 K 26 May 2006 - 13:37 AurelioAHeckert  
help.pngpng help.png manage 0.6 K 26 May 2006 - 13:38 AurelioAHeckert  
italic.pngpng italic.png manage 0.5 K 26 May 2006 - 13:38 AurelioAHeckert  
underlined.pngpng underlined.png manage 0.6 K 26 May 2006 - 13:38 AurelioAHeckert  
Copyright © 2004 - 2018 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa