BBcode Toolbar contribution

[Nemako]

Here is my contribution to add a BBCode toolbar to pfc. This contribution needs http://www.phpfreechat.net/forum/viewtopic.php?pid=242#p242
This contribution is based on the svn Revision 275.

3 files to edit:
+ /themes/default/templates/chat.html.tpl.php
+ /themes/default/templates/pfcclient.js.tpl.php
+ /themes/default/templates/style.css.tpl.php

22 images to add to /themes/default/templates/images/

How to do :
+ in /themes/default/templates/chat.html.tpl.php
after

Code: Select all

    <div id="<?php echo $prefix; ?>cmd_container">
      <a href="http://www.phpfreechat.net" id="<?php echo $prefix; ?>logo"><img src="http://www.phpfreechat.net/pub/logo_80x15.gif" alt="<?php echo _pfc("PHP FREE CHAT [powered by phpFreeChat-%s]", $version); ?>" title="<?php echo _pfc("PHP FREE CHAT [powered by phpFreeChat-%s]", $version); ?>" /></a>
      <input id="<?php echo $prefix; ?>handle" type="button" title="<?php echo _pfc("Enter your nickname here"); ?>" maxlength="<?php echo $max_nick_len; ?>" value="<?php echo $nick; ?>" onclick="if (!pfc.login_status) return false; pfc.handleRequest('/asknick');" />
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/logout.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>loginlogout" onclick="pfc.connect_disconnect()" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/color-on.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>nickmarker" onclick="pfc.nickmarker_swap()" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/clock-on.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>clock" onclick="pfc.clock_swap()" /></div>
    </div>

add

Code: Select all

    <div id="<?php echo $prefix; ?>bbcode_container">
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_strong.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_strong" onclick="insert_text('[b]','[/b]')" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_em.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_strong" onclick="insert_text('[i]','[/i]')" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_ins.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_strong" onclick="insert_text('[u]','[/u]')" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_del.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_strong" onclick="insert_text('[s]','[/s]')" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_mail.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_strong" onclick="insert_text('[email]','[/email]')" /></div>
      <div class="<?php echo $prefix; ?>btn"><img src="<?php echo $c->getFileUrlFromTheme('images/bt_color.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>bt_color" onclick="<?php echo $prefix; ?>minimize_maximize('color')" /></div>
      <div id="<?php echo $prefix; ?>color">
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_FFFFFF.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#FFFFFF]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_000000.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#000000]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_000055.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#000055]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_008000.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#008000]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_FF0000.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#FF0000]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_800000.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#800000]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_800080.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#800080]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_FF5500.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#FF5500]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_FFFF00.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#FFFF00]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_00FF00.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#00FF00]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_008080.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#008080]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_00FFFF.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#00FFFF]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_0000FF.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#0000FF]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_FF00FF.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#FF00FF]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_7F7F7F.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#7F7F7F]','[/color]')" />
        <img src="<?php echo $c->getFileUrlFromTheme('images/color_D2D2D2.gif'); ?>" alt="" title="" id="<?php echo $prefix; ?>color" onclick="insert_text('[color=#D2D2D2]','[/color]')" />
      </div>

+ in /themes/default/templates/pfcclient.js.tpl.php
add

Code: Select all

  /**
   * BBcode ToolBar
   */
  function insert_text(open, close)
  {
   msgfield = document.getElementById('<?php echo $prefix; ?>words');

   // IE support
   if (document.selection && document.selection.createRange)
   {
      msgfield.focus();
      sel = document.selection.createRange();
      sel.text = open + sel.text + close;
      msgfield.focus();
   }

   // Moz support
   else if (msgfield.selectionStart || msgfield.selectionStart == '0')
   {
      var startPos = msgfield.selectionStart;
      var endPos = msgfield.selectionEnd;

      msgfield.value = msgfield.value.substring(0, startPos) + open + msgfield.value.substring(startPos, endPos) + close + msgfield.value.substring(endPos, msgfield.value.length);
      msgfield.selectionStart = msgfield.selectionEnd = endPos + open.length + close.length;
      msgfield.focus();
   }

   // Fallback support for other browsers
   else
   {
      msgfield.value += open + close;
      msgfield.focus();
   }
    return;
  }

and

Code: Select all

  /**
   * Minimize/Maximize none/inline
   */
  function minimize_maximize(id)
  {
    var element = document.getElementById('<?php echo $prefix; ?>'+id);
     if(element.style) {
         if(element.style.display == 'inline' ) {
            element.style.display = 'none';
         } else {
            element.style.display = 'inline';
         }
     }
  }

+ in /themes/default/templates/style.css.tpl.php
add

Code: Select all

div#<?php echo $prefix; ?>color {
  display:none;
}