Advertisement:

Author Topic: Color Bar SMF1.1 RC2/RC3 (Possibly Others)  (Read 20697 times)

Offline karlbenson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,629
  • Gender: Male
    • @mortonssols on Twitter
    • Criminal Solicitors
Color Bar SMF1.1 RC2/RC3 (Possibly Others)
« on: August 11, 2006, 12:31:26 PM »
*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
Code: [Select]
// 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)
Code: [Select]
}

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

INSERT THIS CODE
Code: [Select]
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]

Code: [Select]
// 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
Code: [Select]
.color_bar {
border-color:#808080;
border-width:1px;
border-style:solid;
}
.color_cell {
height:12px;
width:5px;
border:0px solid #808080;
}
« Last Edit: January 01, 2012, 03:17:43 PM by karlbenson »

Offline snork13

  • SMF Friend
  • Sophist Member
  • *
  • Posts: 1,305
  • Gender: Male
  • so little time
    • simplemachines.org
Re: Color Bar SMF1.1 RC2
« Reply #1 on: August 11, 2006, 12:48:27 PM »
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

Offline karlbenson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,629
  • Gender: Male
    • @mortonssols on Twitter
    • Criminal Solicitors
Re: Color Bar SMF1.1 RC2
« Reply #2 on: August 11, 2006, 12:56:01 PM »
thx, I'll check it out

Offline Alan S

  • Sophist Member
  • *****
  • Posts: 1,250
  • Gender: Male
  • Monkey see Monkey do
Re: Color Bar SMF1.1 RC2 (Possibly Others)
« Reply #3 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. )
SMF 7 is where it gets good. That has time travel. You can go back and post before the guy who flamed you. :P

Offline karlbenson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,629
  • Gender: Male
    • @mortonssols on Twitter
    • Criminal Solicitors
Re: Color Bar SMF1.1 RC2 (Possibly Others)
« Reply #4 on: August 20, 2006, 09:37:57 PM »
woot, can't wait to try it ;)

Offline Alan S

  • Sophist Member
  • *****
  • Posts: 1,250
  • Gender: Male
  • Monkey see Monkey do
Re: Color Bar SMF1.1 RC2 (Possibly Others)
« Reply #5 on: August 21, 2006, 09:24:25 AM »
Oh and this works with 1.1RC2 ONLY! it is not compatable with 1.0.7 , Will test with RC3 when its available
SMF 7 is where it gets good. That has time travel. You can go back and post before the guy who flamed you. :P

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,019
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: Color Bar SMF1.1 RC2 (Possibly Others)
« Reply #6 on: August 24, 2006, 06:24:19 PM »
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

Offline karlbenson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,629
  • Gender: Male
    • @mortonssols on Twitter
    • Criminal Solicitors
Re: Color Bar SMF1.1 RC2 (Possibly Others)
« Reply #7 on: August 24, 2006, 06:56:27 PM »
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

Offline karlbenson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 15,629
  • Gender: Male
    • @mortonssols on Twitter
    • Criminal Solicitors
Re: Color Bar SMF1.1 RC2/RC3 (Possibly Others)
« Reply #8 on: August 25, 2006, 12:16:27 PM »
*Update, this mod has now been approved.
Link to Mod
Rate The Mod