News:

Wondering if this will always be free?  See why free is better.

Main Menu

Color Bar SMF1.1 RC2/RC3 (Possibly Others)

Started by karlbenson, August 11, 2006, 12:31:26 PM

Previous topic - Next topic

karlbenson

*Edit: This has now been made into a mod and updated/improved/bug fixes.
Link to Mod
Rate this Mod

Thanks to Alan S [http://www.theteenzone.net/] for making my code into the original Mod.





Color Bar Only.

Notes
This is converted from a PHPBB/PHPBB2 mod by mat <mat100.AT.ifrance.com> which I've improved for another board provider. I've converted it again for my SMF, so here it is. (I'm knew to SMF, so I dont know how to make it into a mod, I've hard coded mine.
- Color bar on clicks inserts at post @ cursor (works for most browsers as far as I have tested)
- Two boxes to far left, one shows the color last clicked, the other the one last hovered over.

Tested & Works On SMF1.1 RC2 (but since its independant of SMF, it should work for any version with little or no modding AFAIK)

Plans For Future
I want to get orange/brown colors, but I cant/dont know the matrix for creating an orange/brown strip
if anyone knows, it would be great to add.

Demo http://www.mortons-solicitors.co.uk (on new topic post or quick reply)
Image Color Bar


For each skin you want to use this on in the NEW TOPIC/POST REPLY
Note if you use the enhanced Quick reply like me, you insert the same lines in Display.template.

Open Themes/default/Post.template.php

AFTER (Line 844) in default unmodded RC2 version

// Okay... we have the link. Now for the image and the closing </a>!
echo '<img onmouseover="bbc_highlight(this, true);" onmouseout="if (window.bbc_highlight) bbc_highlight(this, false);" src="', $settings['images_url'], '/bbc/', $image, '.gif" align="bottom" width="23" height="22" alt="', $tag['description'], '" title="', $tag['description'], '" style="background-image: url(', $settings['images_url'], '/bbc/bbc_bg.gif); margin: 1px 2px 1px 1px;" /></a>';
}
// I guess it's a divider...
else
echo '<img src="', $settings['images_url'], '/bbc/divider.gif" alt="|" style="margin: 0 3px 0 3px;" />';


BEFORE (Line 845 in default unmodded RC2 version)

}

// Now start printing all of the smileys.
if (!empty($context['smileys']['postform']))
{
echo '
<tr>
<td align="right"></td>
<td valign="middle">';


INSERT THIS CODE

echo '<tr>
<td align="right"></td>
<td valign="middle">
<script language="javascript" src="', $settings['default_theme_url'], '/color.js" type="text/javascript"></script>
</td>
</tr>';




Save as color.js in the folder Themes/default/

(you need to ensure there is a blank.gif image in the subfolder images/) which it uses as a placeholder [otherwise its screwy in IE]


// COLOR BAR * Code Based On PHPBB2 hack by mat < mat100.AT.ifrance.com >
// Reworked/Converted/Improved for use on SMF boards by Karlbenson aka(Smack!) <URL:http://www.youposted.com/>
// Insert @ Cursor Script Copyright © 2004 Charles C. Fu <URL:http://www.web-i18n.net/>

// V1.01 - Added Greyscale Colors

var pas = 25;// Defines the number of colors PER set eg 25 reds, 25 yellows etc


function color(MyString)
{
bbcodeopen='[color=' + MyString + ']'
bbcodeclose='[/color]'
addElement(bbcodeopen, bbcodeclose)
}

var base_hexa = "0123456789ABCDEF";

function dec2Hexa(number)
{
   return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
}

function RGB2Hexa(TR,TG,TB)
{
  return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
}

col = new Array;
col[0] = new Array(255,0,255,0,255,-1);
col[1] = new Array(255,-1,255,0,0,0);
col[2] = new Array(0,0,255,0,0,1);
col[3] = new Array(0,0,255,-1,255,0);
col[4] = new Array(0,1,0,0,255,0);
col[5] = new Array(255,0,0,0,255,-1);
col[6] = new Array(255,-1,0,0,0,0);

function rgb(pas){
for (j=0;j<6+1;j++){
    for (i=0;i<pas+1;i++)
{
r = Math.floor(col[j][0]+col[j][1]*i*(255)/pas);
g = Math.floor(col[j][2]+col[j][3]*i*(255)/pas);
b = Math.floor(col[j][4]+col[j][5]*i*(255)/pas);
  codehex = r + '' + g + '' + b;
  document.write(' <td class="color_cell" bgColor="' + RGB2Hexa(r,g,b) + '" onClick="color(this.bgColor);document.getElementById(\'colorused\').bgColor = this.bgColor;" '
         + 'onmouseover="document.getElementById(\'colorused1\').bgColor = this.bgColor;this.style.cursor=\'pointer\'" title="Insert Color BBCode [color='+ RGB2Hexa(r,g,b) + '][/color]"></td>\n');
}}}

function greyscale() {
var rows = 40;
    for (i=0;i<rows;i++) {
v = Math.floor(i*(255)/rows);
codehex = v + '' + v + '' + v;
document.write(' <td class="color_cell" bgColor="' + RGB2Hexa(v,v,v) + '" onClick="color(this.bgColor);document.getElementById(\'colorused\').bgColor = this.bgColor;" '
         + 'onmouseover="document.getElementById(\'colorused1\').bgColor = this.bgColor;this.style.cursor=\'pointer\'" title="Insert Color BBCode [color='+ RGB2Hexa(v,v,v) + '][/color]"></td>\n');
}
}

/* Insert @ Cursor Script Copyright © 2004 Charles C. Fu <URL:http://www.web-i18n.net/> */
/* Try to add text surrounded by prepend/append in a number of ways. */
function addElement(prepend, append) {
  saveTextarea();
  var a = document.forms.postmodify.message; // reply textarea
  if (a.selectionStart != null) // Moz
    insertSelectionMoz(a, prepend, append);
  else if (document.selection) // IE/Win32
    insertSelectionIEWin32(a, prepend, append);
  else {
    if (a.getSelection)
      a.value += prepend + getSelection() + append;
    else
      a.value += prepend + append;
    a.focus();
  }
}

/* For Mozilla family browsers, replace selected textarea text with
* selected text surrounded by prepend/append.  If no other text is
* selected, just surround selected textarea text. */
function insertSelectionMoz(a, prepend, append) {
  var sel = window.getSelection().toString();
  if (sel == "")
    return surroundMozTextareaSelection(a, prepend, append);

  /* Replaces selected textarea text with (prepend+selected
   * text+append).  Leaves inserted selected text selected. */
  var selLength = sel.length;
  var t = a.value;              // textarea text

  var scrollTop = a.scrollTop;
  var scrollLeft = a.scrollLeft;
  a.value = t.substring(0, start) + prepend + sel + append + t.substring(end);
  a.scrollTop = scrollTop;
  a.scrollLeft = scrollLeft;

  a.selectionStart = start + prepend.length;
  a.selectionEnd = start + prepend.length + selLength;
  a.focus();
}

/* Replaces selected textarea text with (prepend+selected
* text+append).  That is, it surrounds the selected text with
* prepend/append.  Leaves surrounded text selected. */
function surroundMozTextareaSelection(a, prepend, append) {
  var start = a.selectionStart;
  var end = a.selectionEnd;
  var t = a.value;              // textarea text

  var scrollTop = a.scrollTop;
  var scrollLeft = a.scrollLeft;
  a.value = (t.substring(0, start)
             + prepend + t.substring(start, end) + append
             + t.substring(end));
  a.scrollTop = scrollTop;
  a.scrollLeft = scrollLeft;

  if (a.setSelectionRange)
    a.setSelectionRange(start + prepend.length, end + prepend.length);
  else {
    a.selectionStart = start + prepend.length;
    a.selectionEnd = end + prepend.length;
  }
  a.focus();
}

/* Stores IE caret position. */
function storeIECaret(el) {
  var el = document.forms.postmodify.message;
  if (el.createTextRange)
    el.caretPos = document.selection.createRange().duplicate();
}

/* Replaces selected textarea text (text at caret) with
* (prepend+selected text+append).  Leaves inserted selected text
* selected. */
function insertSelectionIEWin32(a, prepend, append) {
  if (! a.caretPos) {
    /* IE6/Win32 initially places cursor at the start of textareas. */
    a.caretPos = a.createTextRange();
    a.caretPos.collapse();
  }
  var insertText = document.selection.createRange().text;
  /* Can't calc on insertText.length since that counts CR/LF as 2 but
   * caretPos counts it as 1. */
  a.caretPos.text = prepend;
  var afterPrepend = a.caretPos.duplicate();
  a.caretPos.text = insertText + append;
  a.caretPos.move("character", - append.length);
  a.caretPos.setEndPoint("StartToStart", afterPrepend);
  a.caretPos.select();
}

function selectionLengthIE(sel) {
  var r = sel.duplicate();
  r.collapse();
  var len = 0;
  while (! r.isEqual(sel)) {
    r.moveEnd("character", 1);
    ++len;
  }
  return len;
}
function saveTextarea(undoOrRedo) {
  var a = document.forms.postmodify.message; // reply textarea
  var state = new Object();
  state.value = a.value;
  if (a.selectionStart) {
    state.selectionStart = a.selectionStart;
    state.selectionEnd = a.selectionEnd;
  } else if (a.caretPos) {
    state.offsetLeft = a.caretPos.offsetLeft;
    state.offsetTop = a.caretPos.offsetTop;
    state.length = selectionLengthIE(a.caretPos);
  }
  a.focus();
}

function installPostHandlers(msg) {
  if (! msg)
    return;
  document.forms.postmodify.message.onkeyup = storeIECaret;
  document.forms.postmodify.message.onclick = storeIECaret;
  document.forms.postmodify.message.onselect = storeIECaret;
}

document.write('<table cellspacing="0" width="450px" cellpadding="0"><tr>')

document.write('<td id="colorused" name="color_bar" onClick="color(this.bgColor);" onMouseOver="this.style.cursor=\'pointer\'" width="10" class="color_bar">')
document.write('<img name="color_bar" src="Themes/default/images/blank.gif" width="10px"/></td>')
document.write('<td name="color_bar" width="5"></td>')

document.write('<td id="colorused1" name="color_bar" onClick="color(this.bgColor);" color(this.bgColor); onMouseOver="this.style.cursor=\'pointer\'" width="10" class="color_bar">')
document.write('<img name="color_bar" src="Themes/default/images/blank.gif" width="10px" /></td>')
document.write('<td><img name="color_bar" src="Themes/default/images/blank.gif" width="3px"/></td>')
document.write('<!--' + rgb(pas) + '// -->')
document.write('<!--' + greyscale() + '// -->')
document.write('</tr></table>')


CSS Classes to mod as you require

.color_bar {
border-color:#808080;
border-width:1px;
border-style:solid;
}
.color_cell {
height:12px;
width:5px;
border:0px solid #808080;
}

snork13

Very interesting, I'm sure you could figure out how to package it up. Check out this link:

http://www.simplemachines.org/community/index.php?topic=20319.0

If you have any question let me know.

-Snork13
Mods
Please DO NOT PM me with requests for individual support, but post your questions and concerns in the appropriate section of the forum where other users can benefit from them as well. Thank you.
I have been super busy as of late. Working on updates to all my modifications for 2.0.1

karlbenson


Alan S

Link To Mod

Karlbenson gave me permission to turn it into a mod.

2 Packages Available.

1. Colourbar.zip - Adds a colour selection bar to the post template
2.quickreply_colourbar.zip - Adds a colour selection bar to the post template and to the quick reply box ( providing the enchanced quick reply box mod is installed first. )
Quote from: Eliana Tamerin on August 23, 2008, 04:10:10 PM
SMF 7 is where it gets good. That has time travel. You can go back and post before the guy who flamed you. :P

karlbenson


Alan S

Oh and this works with 1.1RC2 ONLY! it is not compatable with 1.0.7 , Will test with RC3 when its available
Quote from: Eliana Tamerin on August 23, 2008, 04:10:10 PM
SMF 7 is where it gets good. That has time travel. You can go back and post before the guy who flamed you. :P

Deaks

Quote from: Alan S on August 20, 2006, 11:05:36 AM
Link To Mod

Karlbenson gave me permission to turn it into a mod.

2 Packages Available.

1. Colourbar.zip - Adds a colour selection bar to the post template
2.quickreply_colourbar.zip - Adds a colour selection bar to the post template and to the quick reply box ( providing the enchanced quick reply box mod is installed first. )

this link isnt working
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

karlbenson

Yep, Whats happened is, I asked Alan S to transfer the mod to me (as i made the original code, he made it into a mod) so that I could update it.

Well he removed the mod and I've uploaded the new version, which is yet to be approved (hopefully soon).

There are now 3 versions of it which work for RC2 & RC3
http://mods.simplemachines.org/index.php?mod=435

karlbenson


Advertisement: