From 0385d163647f954062ef6ccb511602e8e69fc1d1 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Tue, 12 Nov 2013 23:57:27 -0800 Subject: [ticket/10810] Move the color palette code to core.js. PHPBB3-10810 --- phpBB/assets/javascript/core.js | 57 ++++++++++++++++++++++++++++++++++++ phpBB/assets/javascript/editor.js | 61 --------------------------------------- 2 files changed, 57 insertions(+), 61 deletions(-) (limited to 'phpBB/assets/javascript') diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index a3a6d75dd2..a5931d5e90 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -962,6 +962,55 @@ phpbb.registerDropdown = function(toggle, dropdown, options) toggle.click(phpbb.toggleDropdown); }; +/** +* Get the HTML for a color palette table +*/ +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 += ''; + + for (r = 0; r < 5; r++) { + if (dir == 'h') { + html += ''; + } + + for (g = 0; g < 5; g++) { + if (dir == 'v') { + html += ''; + } + + for (b = 0; b < 5; b++) { + color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]); + html += ''; + } + + if (dir == 'v') { + html += ''; + } + } + + if (dir == 'h') { + html += ''; + } + } + html += '
'; + html += ''; + html += '
'; + return html; +} + /** * Apply code editor to all textarea elements with data-bbcode attribute */ @@ -977,6 +1026,14 @@ $(document).ready(function() { $(phpbb.dropdownHandles).each(phpbb.toggleDropdown); } }); + + $('#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)); + }); }); })(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 @@ -294,67 +294,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 += ''; - - for (r = 0; r < 5; r++) { - if (dir == 'h') { - html += ''; - } - - for (g = 0; g < 5; g++) { - if (dir == 'v') { - html += ''; - } - - for (b = 0; b < 5; b++) { - color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]); - html += ''; - } - - if (dir == 'v') { - html += ''; - } - } - - if (dir == 'h') { - html += ''; - } - } - html += '
'; - html += ''; - html += '
'; - 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 */ -- cgit v1.2.1 From 9a9669bebd3edcb3dde7459660eece3a73856cf6 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Wed, 13 Nov 2013 00:14:35 -0800 Subject: [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(-) (limited to 'phpBB/assets/javascript') 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 += ''; + html += '
'; 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 += ''; } @@ -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)); }); }); -- cgit v1.2.1
'; - html += ''; + html += ''; html += '