diff options
author | Cesar G <prototech91@gmail.com> | 2013-11-13 00:14:35 -0800 |
---|---|---|
committer | Cesar G <prototech91@gmail.com> | 2013-11-13 01:01:15 -0800 |
commit | 9a9669bebd3edcb3dde7459660eece3a73856cf6 (patch) | |
tree | d9ff2f5bc48622dee877702a5b3eb797ae08bc69 /phpBB/assets | |
parent | 0385d163647f954062ef6ccb511602e8e69fc1d1 (diff) | |
download | forums-9a9669bebd3edcb3dde7459660eece3a73856cf6.tar forums-9a9669bebd3edcb3dde7459660eece3a73856cf6.tar.gz forums-9a9669bebd3edcb3dde7459660eece3a73856cf6.tar.bz2 forums-9a9669bebd3edcb3dde7459660eece3a73856cf6.tar.xz forums-9a9669bebd3edcb3dde7459660eece3a73856cf6.zip |
[ticket/10810] Make the color palette usable outside of the editor context.
PHPBB3-10810
Diffstat (limited to 'phpBB/assets')
-rw-r--r-- | phpBB/assets/javascript/core.js | 50 |
1 files changed, 42 insertions, 8 deletions
diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index a5931d5e90..69a09427fe 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -963,7 +963,11 @@ phpbb.registerDropdown = function(toggle, dropdown, options) }; /** -* Get the HTML for a color palette table +* 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 = 0, @@ -979,7 +983,7 @@ phpbb.colorPalette = function(dir, width, height) { numberList[3] = 'BF'; numberList[4] = 'FF'; - html += '<table>'; + html += '<table style="width: auto;">'; for (r = 0; r < 5; r++) { if (dir == 'h') { @@ -994,7 +998,7 @@ phpbb.colorPalette = function(dir, width, height) { for (b = 0; b < 5; b++) { color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]); html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' + height + 'px;">'; - html += '<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" style="display: block; width: ' + width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>'; + html += '<a href="#" data-color="' + color + '" style="display: block; width: ' + width + 'px; height: ' + height + 'px; " alt="#' + color + '" title="#' + color + '"></a>'; html += '</td>'; } @@ -1012,6 +1016,40 @@ phpbb.colorPalette = function(dir, width, height) { } /** +* Register a color palette. +* +* @param object 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(); + }); +} + +/** * Apply code editor to all textarea elements with data-bbcode attribute */ $(document).ready(function() { @@ -1028,11 +1066,7 @@ $(document).ready(function() { }); $('#color_palette_placeholder').each(function() { - var orientation = $(this).attr('data-orientation'), - height = $(this).attr('data-height'), - width = $(this).attr('data-width'); - - $(this).html(phpbb.colorPalette(orientation, width, height)); + phpbb.registerPalette($(this)); }); }); |