From 9a9669bebd3edcb3dde7459660eece3a73856cf6 Mon Sep 17 00:00:00 2001
From: Cesar G <prototech91@gmail.com>
Date: Wed, 13 Nov 2013 00:14:35 -0800
Subject: [PATCH] [ticket/10810] Make the color palette usable outside of the
 editor context.

PHPBB3-10810
---
 phpBB/assets/javascript/core.js | 50 +++++++++++++++++++++++++++------
 1 file 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>';
 			}
 
@@ -1011,6 +1015,40 @@ phpbb.colorPalette = function(dir, width, height) {
 	return html;
 }
 
+/**
+* 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
 */
@@ -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));
 	});
 });