Code: Select all
/**
* Get the HTML for a color palette table.
*
* @param {string} dir Palette direction - either v or h
* @param {int} width Palette cell width.
* @param {int} height Palette cell height.
*/
phpbb.colorPalette = function(dir, width, height) {
var r, g, b,
numberList = new Array(6),
color = '',
html = '';
numberList[0] = '00';
numberList[1] = '40';
numberList[2] = '80';
numberList[3] = 'BF';
numberList[4] = 'FF';
var tableClass = (dir === 'h') ? 'horizontal-palette' : 'vertical-palette';
html += '<table class="not-responsive colour-palette ' + tableClass + '" style="width: auto;">';
for (r = 0; r < 5; r++) {
if (dir === 'h') {
html += '<tr>';
}
for (g = 0; g < 5; g++) {
if (dir === 'v') {
html += '<tr>';
}
for (b = 0; b < 5; b++) {
color = '' + numberList[r] + numberList[g] + numberList[b];
html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' +
height + 'px;"><a href="#" data-color="' + color + '" style="display: block; width: ' +
width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>';
html += '</td>';
}
if (dir === 'v') {
html += '</tr>';
}
}
if (dir === 'h') {
html += '</tr>';
}
}
html += '</table>';
return html;
};
/**
* Register a color palette.
*
* @param {jQuery} el jQuery object for the palette container.
*/
phpbb.registerPalette = function(el) {
var orientation = el.attr('data-orientation'),
height = el.attr('data-height'),
width = el.attr('data-width'),
target = el.attr('data-target'),
bbcode = el.attr('data-bbcode');
// Insert the palette HTML into the container.
el.html(phpbb.colorPalette(orientation, width, height));
// Add toggle control.
$('#color_palette_toggle').click(function(e) {
el.toggle();
e.preventDefault();
});
// Attach event handler when a palette cell is clicked.
$(el).on('click', 'a', function(e) {
var color = $(this).attr('data-color');
if (bbcode) {
bbfontstyle('[color=#' + color + ']', '[/color]');
} else {
$(target).val(color);
}
e.preventDefault();
});
};
I wouldn't say it's necessary to implement something that complex, especially given that phpBB already supports custom colours through entering a hex code. Thinking from a usability point of view it's impossible for users to pick the same colour twice using a palette such as the one you've linked to, so end-users trying to use consistent colours will always have varying results.Hanakin wrote: ↑Fri Nov 17, 2017 2:19 am This really just needs to be a dropdown with an infinite color picker such as https://codepen.io/hanakin/pen/mqBgbm?editors=1100
I need to work on for the new theme anyway so Ill start hacking away at it.
Indeed, but hex code knowledge is very limited amongst end users without design experience.
Sorry, for reviving this topic, but that above color picker seriously sucks and is so terrible 90’s web design. I mean
[color=green]
(it already works)<input type="color">