15 files changed, 117 insertions, 207 deletions
diff --git a/phpBB/adm/style/acp_groups.html b/phpBB/adm/style/acp_groups.html
index a77010b636..925d24f3a3 100644
--- a/phpBB/adm/style/acp_groups.html
+++ b/phpBB/adm/style/acp_groups.html
@@ -92,7 +92,12 @@
 	</dl>
 	<dl>
 		<dt><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></dt>
-		<dd><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" /><!-- IF GROUP_COLOUR -->&nbsp;<span style="background-color: #{GROUP_COLOUR}">&nbsp; &nbsp;</span><!-- ENDIF -->&nbsp;&nbsp;<span>[ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false">{L_COLOUR_SWATCH}</a> ]</span></dd>
+		<dd>
+			<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" />
+			<!-- IF GROUP_COLOUR -->&nbsp;<span style="background-color: #{GROUP_COLOUR}">&nbsp; &nbsp;</span><!-- ENDIF -->&nbsp;&nbsp;<span>
+			[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]</span>
+			<div id="color_palette_placeholder" style="display: none;" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
+		</dd>
 	</dl>
 	<dl>
 		<dt><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></dt>
diff --git a/phpBB/adm/style/acp_users_signature.html b/phpBB/adm/style/acp_users_signature.html
index cfcab155bd..0a04c411d2 100644
--- a/phpBB/adm/style/acp_users_signature.html
+++ b/phpBB/adm/style/acp_users_signature.html
@@ -86,7 +86,7 @@
 		</div>
 
 		<dl>
-			<dt style="width: 90px;" id="color_palette_placeholder" data-orientation="v" data-height="12" data-width="15">
+			<dt style="width: 90px;" id="color_palette_placeholder" data-orientation="v" data-height="12" data-width="15" data-bbcode="true">
 			</dt>
 			<dd style="margin-{S_CONTENT_FLOW_BEGIN}: 90px;"><textarea name="signature" rows="10" cols="60" style="width: 95%;" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" data-bbcode="true">{SIGNATURE}</textarea></dd>
 			<dd style="margin-{S_CONTENT_FLOW_BEGIN}: 90px; margin-top: 5px;">
diff --git a/phpBB/adm/style/colour_swatch.html b/phpBB/adm/style/colour_swatch.html
deleted file mode 100644
index e692a8bd91..0000000000
--- a/phpBB/adm/style/colour_swatch.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
-<head>
-<meta charset="utf-8">
-<title>{L_COLOUR_SWATCH}</title>
-
-<style type="text/css">
-/* <![CDATA[ */
-	body {
-		background-color: #404040;
-		color: #fff;
-	}
-
-	table {
-		border-collapse: separate;
-		border-spacing: 0;
-		border: 0;
-	}
-
-	td {
-		border: solid 1px #333;
-		padding: 1px;
-	}
-
-	.over { 
-		border-color: white; 
-	}
-
-	.out {
-		border-color: #333333; 
-	}
-
-	img {
-		border: 0;
-	}
-/* ]]> */
-</style>
-</head>
-
-<body>
-
-<script type="text/javascript">
-// <![CDATA[
-	var r = 0, g = 0, b = 0;
-
-	var numberList = new Array(6);
-	numberList[0] = '00';
-	numberList[1] = '33';
-	numberList[2] = '66';
-	numberList[3] = '99';
-	numberList[4] = 'CC';
-	numberList[5] = 'FF';
-
-	document.writeln('<table>');
-
-	for (r = 0; r < 6; r++)
-	{
-		document.writeln('<tr>');
-
-		for (g = 0; g < 6; g++)
-		{
-			for (b = 0; b < 6; b++)
-			{
-				color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
-				document.write('<td style="background-color: #' + color + ';" onmouseover="this.className=\'over\'" onmouseout="this.className=\'out\'">');
-				document.write('<a href="#" onclick="cell(\'' + color + '\'); return false;"><img src="{T_IMAGES_PATH}spacer.gif" width="13" height="10" alt="#' + color + '" title="#' + color + '" \/><\/a>');
-				document.writeln('<\/td>');
-			}
-		}
-		document.writeln('<\/tr>');
-	}
-	document.writeln('<\/table>');
-
-	function cell(color)
-	{
-		opener.document.forms["{OPENER}"].{NAME}.value = color;
-	}
-// ]]>
-</script>
-
-</body>
-</html>
diff --git a/phpBB/adm/swatch.php b/phpBB/adm/swatch.php
deleted file mode 100644
index e9d46d65b5..0000000000
--- a/phpBB/adm/swatch.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-/**
-*
-* @package phpBB3
-* @copyright (c) 2005 phpBB Group
-* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
-*
-*/
-
-/**
-* @ignore
-*/
-define('IN_PHPBB', true);
-define('ADMIN_START', true);
-$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './../';
-$phpEx = substr(strrchr(__FILE__, '.'), 1);
-include($phpbb_root_path . 'common.' . $phpEx);
-
-// Start session management
-$user->session_begin(false);
-$auth->acl($user->data);
-$user->setup();
-
-// Set custom template for admin area
-$template->set_custom_style('adm', $phpbb_admin_path . 'style');
-
-$template->set_filenames(array(
-	'body' => 'colour_swatch.html')
-);
-
-$form = request_var('form', '');
-$name = request_var('name', '');
-
-// We validate form and name here, only id/class allowed
-$form = (!preg_match('/^[a-z0-9_-]+$/i', $form)) ? '' : $form;
-$name = (!preg_match('/^[a-z0-9_-]+$/i', $name)) ? '' : $name;
-
-$template->assign_vars(array(
-	'OPENER'		=> $form,
-	'NAME'			=> $name,
-	'T_IMAGES_PATH'	=> "{$phpbb_root_path}images/",
-
-	'S_USER_LANG'			=> $user->lang['USER_LANG'],
-	'S_CONTENT_DIRECTION'	=> $user->lang['DIRECTION'],
-	'S_CONTENT_ENCODING'	=> 'UTF-8',
-));
-
-$template->display('body');
-
-garbage_collection();
diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js
index a3a6d75dd2..69a09427fe 100644
--- a/phpBB/assets/javascript/core.js
+++ b/phpBB/assets/javascript/core.js
@@ -963,6 +963,93 @@ phpbb.registerDropdown = function(toggle, dropdown, options)
 };
 
 /**
+* 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, 
+		g = 0, 
+		b = 0,
+		numberList = new Array(6),
+		color = '',
+		html = '';
+
+	numberList[0] = '00';
+	numberList[1] = '40';
+	numberList[2] = '80';
+	numberList[3] = 'BF';
+	numberList[4] = 'FF';
+
+	html += '<table 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 = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
+				html += '<td style="background-color: #' + color + '; width: ' + width + 'px; height: ' + height + 'px;">';
+				html += '<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 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() {
@@ -977,6 +1064,10 @@ $(document).ready(function() {
 			$(phpbb.dropdownHandles).each(phpbb.toggleDropdown);
 		}
 	});
+
+	$('#color_palette_placeholder').each(function() {
+		phpbb.registerPalette($(this));
+	});
 });
 
 })(jQuery); // Avoid conflicts with other libraries
diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js
index 418dd163aa..5222de9fee 100644
--- a/phpBB/assets/javascript/editor.js
+++ b/phpBB/assets/javascript/editor.js
@@ -295,67 +295,6 @@ function storeCaret(textEl) {
 }
 
 /**
-* Color pallette
-*/
-function colorPalette(dir, width, height) {
-	var r = 0, 
-		g = 0, 
-		b = 0,
-		numberList = new Array(6),
-		color = '',
-		html = '';
-
-	numberList[0] = '00';
-	numberList[1] = '40';
-	numberList[2] = '80';
-	numberList[3] = 'BF';
-	numberList[4] = 'FF';
-
-	html += '<table>';
-
-	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 = 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 += '</td>';
-			}
-
-			if (dir == 'v') {
-				html += '</tr>';
-			}
-		}
-
-		if (dir == 'h') {
-			html += '</tr>';
-		}
-	}
-	html += '</table>';
-	return html;
-}
-
-(function($) {
-	$(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(colorPalette(orientation, width, height));
-		});
-	});
-})(jQuery);
-
-/**
 * Caret Position object
 */
 function caretPosition() {
diff --git a/phpBB/includes/acp/acp_groups.php b/phpBB/includes/acp/acp_groups.php
index 8f417e753c..c170c67d49 100644
--- a/phpBB/includes/acp/acp_groups.php
+++ b/phpBB/includes/acp/acp_groups.php
@@ -657,7 +657,6 @@ class acp_groups
 					'GROUP_HIDDEN'		=> $type_hidden,
 
 					'U_BACK'			=> $u_back,
-					'U_SWATCH'			=> append_sid("{$phpbb_admin_path}swatch.$phpEx", 'form=settings&amp;name=group_colour'),
 					'U_ACTION'			=> "{$this->u_action}&amp;action=$action&amp;g=$group_id",
 					'L_AVATAR_EXPLAIN'	=> phpbb_avatar_explanation_string(),
 				));
diff --git a/phpBB/includes/ucp/ucp_groups.php b/phpBB/includes/ucp/ucp_groups.php
index 32b27b55b4..716289eded 100644
--- a/phpBB/includes/ucp/ucp_groups.php
+++ b/phpBB/includes/ucp/ucp_groups.php
@@ -699,7 +699,6 @@ class ucp_groups
 							'GROUP_CLOSED'		=> $type_closed,
 							'GROUP_HIDDEN'		=> $type_hidden,
 
-							'U_SWATCH'			=> append_sid("{$phpbb_admin_path}swatch.$phpEx", 'form=ucp&amp;name=group_colour'),
 							'S_UCP_ACTION'		=> $this->u_action . "&amp;action=$action&amp;g=$group_id",
 							'L_AVATAR_EXPLAIN'	=> phpbb_avatar_explanation_string(),
 						));
diff --git a/phpBB/styles/prosilver/template/posting_buttons.html b/phpBB/styles/prosilver/template/posting_buttons.html
index aa269058cc..c5cdfad156 100644
--- a/phpBB/styles/prosilver/template/posting_buttons.html
+++ b/phpBB/styles/prosilver/template/posting_buttons.html
@@ -55,7 +55,7 @@
 <div id="colour_palette" style="display: none;">
 	<dl style="clear: left;">
 		<dt><label>{L_FONT_COLOR}{L_COLON}</label></dt>
-		<dd id="color_palette_placeholder" data-orientation="h" data-height="12" data-width="15"></dd>
+		<dd id="color_palette_placeholder" data-orientation="h" data-height="12" data-width="15" data-bbcode="true"></dd>
 	</dl>
 </div>
 
diff --git a/phpBB/styles/prosilver/template/ucp_groups_manage.html b/phpBB/styles/prosilver/template/ucp_groups_manage.html
index 019b5aa3e1..eb431e9f3f 100644
--- a/phpBB/styles/prosilver/template/ucp_groups_manage.html
+++ b/phpBB/styles/prosilver/template/ucp_groups_manage.html
@@ -54,7 +54,12 @@
 	<fieldset>
 	<dl>
 		<dt><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></dt>
-		<dd><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" class="inputbox narrow" /> <span style="background-color: {GROUP_COLOUR};">&nbsp;&nbsp;&nbsp;</span> [ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false;">{L_COLOUR_SWATCH}</a> ]</dd>
+		<dd>
+			<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" class="inputbox narrow" />
+			<span style="background-color: {GROUP_COLOUR};">&nbsp;&nbsp;&nbsp;</span>
+			[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]
+			<div id="color_palette_placeholder" class="hidden" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
+		</dd>
 	</dl>
 	<dl>
 		<dt><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></dt>
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index 225673a932..de55b8188f 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -631,6 +631,11 @@ table.info tbody th {
 	margin: 0 -1px;
 }
 
+#color_palette_placeholder table {
+	border-collapse: separate;
+	border-spacing: 1px;
+}
+
 /* Misc layout styles
 ---------------------------------------- */
 /* column[1-2] styles are containers for two column layouts
diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css
index 1ee364ce93..755ce4a19d 100644
--- a/phpBB/styles/prosilver/theme/forms.css
+++ b/phpBB/styles/prosilver/theme/forms.css
@@ -235,11 +235,6 @@ fieldset.submit-buttons input {
 /* Posting page styles
 ----------------------------------------*/
 
-#colour_palette table {
-	border-collapse: separate;
-	border-spacing: 1px;
-}
-
 /* Buttons used in the editor */
 #format-buttons {
 	margin: 15px 0 2px 0;
diff --git a/phpBB/styles/subsilver2/template/posting_body.html b/phpBB/styles/subsilver2/template/posting_body.html
index 79c0fa2dbb..b501c4146a 100644
--- a/phpBB/styles/subsilver2/template/posting_body.html
+++ b/phpBB/styles/subsilver2/template/posting_body.html
@@ -207,7 +207,7 @@
 		<tr>
 			<td valign="top" style="width: 100%;"><textarea name="message" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 700px; height: 270px; min-width: 98%; max-width: 98%;">{MESSAGE}</textarea></td>
 			<!-- IF S_BBCODE_ALLOWED -->
-			<td width="80" align="center" valign="top" id="color_palette_placeholder" data-orientation="v" data-width="11" data-height="10">
+			<td width="80" align="center" valign="top" id="color_palette_placeholder" data-orientation="v" data-width="11" data-height="10" data-bbcode="true">
 			</td>
 			<!-- ENDIF -->
 	 	</tr>
diff --git a/phpBB/styles/subsilver2/template/ucp_groups_manage.html b/phpBB/styles/subsilver2/template/ucp_groups_manage.html
index b8e7e29481..1499f90eaf 100644
--- a/phpBB/styles/subsilver2/template/ucp_groups_manage.html
+++ b/phpBB/styles/subsilver2/template/ucp_groups_manage.html
@@ -49,7 +49,11 @@
 	</tr>
 	<tr>
 		<td class="row1" width="35%"><label for="group_colour">{L_GROUP_COLOR}{L_COLON}</label><br /><span>{L_GROUP_COLOR_EXPLAIN}</span></td>
-		<td class="row2"><input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" />&nbsp;&nbsp;<span>[ <a href="{U_SWATCH}" onclick="popup(this.href, 636, 150, '_swatch'); return false;">{L_COLOUR_SWATCH}</a> ]</span></td>
+		<td class="row2">
+			<input name="group_colour" type="text" id="group_colour" value="{GROUP_COLOUR}" size="6" maxlength="6" />&nbsp;&nbsp;
+			<span>[ <a href="#" id="color_palette_toggle">{L_COLOUR_SWATCH}</a> ]</span>
+			<div id="color_palette_placeholder" style="display: none;" data-orientation="h" data-height="12" data-width="15" data-target="#group_colour"></div>
+		</td>
 	</tr>
 	<tr>
 		<td class="row1" width="35%"><label for="group_rank">{L_GROUP_RANK}{L_COLON}</label></td>
diff --git a/phpBB/styles/subsilver2/template/ucp_main_drafts.html b/phpBB/styles/subsilver2/template/ucp_main_drafts.html
index 0206c7c613..d63d678250 100644
--- a/phpBB/styles/subsilver2/template/ucp_main_drafts.html
+++ b/phpBB/styles/subsilver2/template/ucp_main_drafts.html
@@ -75,7 +75,7 @@
 				<td colspan="9">
 					<table cellspacing="0" cellpadding="0" border="0" width="100%">
 					<tr>
-						<td align="{S_CONTENT_FLOW_BEGIN}" id="color_palette_placeholder" data-orientation="h" data-width="11" data-height="10">
+						<td align="{S_CONTENT_FLOW_BEGIN}" id="color_palette_placeholder" data-orientation="h" data-width="11" data-height="10" data-bbcode="true">
 						</td>
 					</tr>
 					</table>