[RFC] Add greyscale to colour picker

[GravityDK]

Outcome: Change picker to include greyscale, like this.

grey.jpg (2.91 KiB) Viewed 15084 times

How to:
editor.js in the style/../template

Find

Code: Select all

/**
* Color pallette
*/
function colorPalette(dir, width, height)
{

Change to

Code: Select all

/**
* Color pallette
*/
function colorPalette(dir, width, height)
{
var r = 0, g = 0, b = 0;
var numberList = new Array(6);
var numberListgrey = new Array(6);
var color = '';

numberList[0] = '00';
numberList[1] = '40';
numberList[2] = '80';
numberList[3] = 'BF';
numberList[4] = 'FF';

numberListgrey[0] = '373737';
numberListgrey[1] = '565656';
numberListgrey[2] = '787878';
numberListgrey[3] = 'A1A1A1';
numberListgrey[4] = 'CACACA';

document.writeln('<table cellspacing="1" cellpadding="0" border="0">');

for (r = 0; r < 5; r++)
{
if (dir == 'h')
{
document.writeln('<tr>');
}

for (g = 0; g < 5; g++)
{
if (dir == 'v')
{
document.writeln('<tr>');
}

for (b = 0; b < 5; b++)
{
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]); 
document.write('<td bgcolor="#' + color + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}

if (dir == 'v')
{
document.writeln('</tr>');
}
}

colorgrey = String(numberListgrey[r]);
document.write('<td bgcolor="#' + colorgrey + '" style="width: ' + width + 'px; height: ' + height + 'px;">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + colorgrey + ']\', \'[/color]\'); return false;"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + colorgrey + '" title="#' + colorgrey + '" /></a>');
document.writeln('</td>');

if (dir == 'h')
{
document.writeln('</tr>');
}
}
document.writeln('</table>');
}

Thanks to wejonk at STG for this code. That thread has a few alternative implementations if developers are curious, but they're more complicated.

[naderman]

Just came across this again. Anyone want to create a github pull request for this and create a ticket on the tracker?

[A_Jelly_Doughnut]

Would strongly support a refactor of the color picker to use jQuery while we're at it.

[naderman]

Good idea.

[brunoais]

That means not using document.write(), right? (YES!)
I would still prefer if innerHTML wasn't used. In some methods of jQuery innerHTML is used.
In some situations chrome fails or (logical "or") firefox fails.
I still wasn't able to find a way to repeat the situations where they fail. Sounds like Byzantine fault in the HTML parser where it fails sometimes...
Note: If you prefer using such feature, I won't fight against it, anyway

[Erik Frèrejean]

Would strongly support a refactor of the color picker to use jQuery while we're at it.

Might as well switch to a decent looking jQuery color picker plugin then. This seems to be nice/simple option.

[brunoais]

Has some small(?) performance problems by jQuery abuse but overall sounds good :thumbsup:

[bantu]

+1 for adding grey scale. Never noticed it was not included however.

[psoTFX]

Would strongly support a refactor of the color picker to use jQuery while we're at it.

Might as well switch to a decent looking jQuery color picker plugin then. This seems to be nice/simple option.

+1 for this - biggest potential downside is when using touch interfaces, may need some investigation? Should add that I did away with the existing (ancient) colour swatch in my own styles and use a picker very similar to the one Erik's highlighted.

[DavidIQ]

biggest potential downside is when using touch interfaces, may need some investigation?

Just tried their demo on my iPad. Seems to work perfectly fine in Safari.