Merge pull request #6657 from danieltj27/ticket/17326

[ticket/17326] Add font icon field for custom BBCodes

phpBB/adm/style/acp_bbcodes.html

@@ -14,7 +14,7 @@
 
 	<fieldset>
 		<legend>{L_BBCODE_USAGE}</legend>
-		<p>{L_BBCODE_USAGE_EXPLAIN}</p>
+		<p>{{ lang('BBCODE_USAGE_EXPLAIN', '<a href="#down">', '</a>') }}</p>
 	<dl>
 		<dt><label for="bbcode_match">{L_EXAMPLES}</label><br /><br /><span>{L_BBCODE_USAGE_EXAMPLE}</span></dt>
 		<dd><textarea id="bbcode_match" name="bbcode_match" cols="60" rows="5">{BBCODE_MATCH}</textarea></dd>
@@ -47,6 +47,17 @@
 	</dl>
 	</fieldset>
 
+	<fieldset>
+		<legend>{{ lang('APPEARANCE') }}</legend>
+	<dl>
+		<dt><label for="bbcode_font_icon">{{ lang('BBCODE_FONT_ICON') }}</label><br><span>{{ lang('BBCODE_FONT_ICON_EXPLAIN', '<a href="https://fontawesome.com/v6/icons/" target="_blank">', '</a>') }}</span></dt>
+		<dd>
+			<input type="text" name="bbcode_font_icon" id="bbcode_font_icon" value="{{ BBCODE_FONT_ICON }}" />
+			{{ Icon('font', ' ', '', false, '', {'id':'bbcode_icon_preview'}) }}
+		</dd>
+	</dl>
+	</fieldset>
+
 	<!-- EVENT acp_bbcodes_edit_fieldsets_after -->
 
 	<fieldset class="submit-buttons">

phpBB/adm/style/admin.js

@@ -277,5 +277,34 @@ function parse_document(container)
 		$('.actions a:has(i.acp-icon)').mouseover(function () {
 			$(this).css("text-decoration", "none");
 		});
+
+		// Live update BBCode font icon preview
+		const updateIconClass = (element, newClass) => {
+			// Ignore invalid class names
+			const faIconRegex = /^(?!-)(?!.*--)[a-z0-9-]+(?<!-)$/;
+			if (!faIconRegex.test(newClass)) {
+				return;
+			}
+
+			element.classList.forEach(className => {
+				if (className.startsWith('fa-') && className !== 'fa-fw') {
+					element.classList.remove(className);
+				}
+			});
+
+			element.classList.add(`fa-${newClass}`);
+		};
+
+		const pageIconFont = document.getElementById('bbcode_font_icon');
+
+		if (pageIconFont) {
+			pageIconFont.addEventListener('keyup', function () {
+				updateIconClass(this.nextElementSibling, this.value);
+			});
+
+			pageIconFont.addEventListener('blur', function () {
+				updateIconClass(this.nextElementSibling, this.value);
+			});
+		}
 	});
 })(jQuery);

phpBB/includes/acp/acp_bbcodes.php

@@ -44,12 +44,12 @@ class acp_bbcodes
 		switch ($action)
 		{
 			case 'add':
-				$bbcode_match = $bbcode_tpl = $bbcode_helpline = '';
+				$bbcode_match = $bbcode_tpl = $bbcode_helpline = $bbcode_font_icon = '';
 				$display_on_posting = 0;
 			break;
 
 			case 'edit':
-				$sql = 'SELECT bbcode_match, bbcode_tpl, display_on_posting, bbcode_helpline
+				$sql = 'SELECT bbcode_match, bbcode_tpl, display_on_posting, bbcode_helpline, bbcode_font_icon
 					FROM ' . BBCODES_TABLE . '
 					WHERE bbcode_id = ' . $bbcode_id;
 				$result = $db->sql_query($sql);
@@ -65,6 +65,7 @@ class acp_bbcodes
 				$bbcode_tpl = htmlspecialchars($row['bbcode_tpl'], ENT_COMPAT);
 				$display_on_posting = $row['display_on_posting'];
 				$bbcode_helpline = $row['bbcode_helpline'];
+				$bbcode_font_icon = $row['bbcode_font_icon'];
 			break;
 
 			case 'modify':
@@ -88,6 +89,7 @@ class acp_bbcodes
 				$bbcode_match = $request->variable('bbcode_match', '');
 				$bbcode_tpl = html_entity_decode($request->variable('bbcode_tpl', '', true), ENT_COMPAT);
 				$bbcode_helpline = $request->variable('bbcode_helpline', '', true);
+				$bbcode_font_icon = $request->variable('bbcode_font_icon', '');
 			break;
 		}
 
@@ -101,11 +103,11 @@ class acp_bbcodes
 					'S_EDIT_BBCODE'		=> true,
 					'U_BACK'			=> $this->u_action,
 					'U_ACTION'			=> $this->u_action . '&action=' . (($action == 'add') ? 'create' : 'modify') . (($bbcode_id) ? "&bbcode=$bbcode_id" : ''),
-
+					'L_BBCODE_USAGE_EXPLAIN'		=> sprintf($user->lang['BBCODE_USAGE_EXPLAIN'], '<a href="#down">', '</a>'),
-					'L_BBCODE_USAGE_EXPLAIN'=> sprintf($user->lang['BBCODE_USAGE_EXPLAIN'], '<a href="#down">', '</a>'),
 					'BBCODE_MATCH'					=> $bbcode_match,
 					'BBCODE_TPL'					=> $bbcode_tpl,
 					'BBCODE_HELPLINE'				=> $bbcode_helpline,
+					'BBCODE_FONT_ICON'				=> $bbcode_font_icon,
 					'DISPLAY_ON_POSTING'			=> $display_on_posting,
 				);
 
@@ -157,9 +159,11 @@ class acp_bbcodes
 				* @var	string	bbcode_match		The bbcode usage string to match
 				* @var	string	bbcode_tpl			The bbcode HTML replacement string
 				* @var	string	bbcode_helpline		The bbcode help line string
+				* @var	string	bbcode_font_icon	The name of the Font Awesome BBCode icon
 				* @var	array	hidden_fields		Array of hidden fields for use when
 				*									submitting form when $warn_unsafe is true
 				* @since 3.1.0-a3
+				* @changed 4.0.0-a1 Added bbcode_font_icon
 				*/
 				$vars = array(
 					'action',
@@ -169,6 +173,7 @@ class acp_bbcodes
 					'bbcode_match',
 					'bbcode_tpl',
 					'bbcode_helpline',
+					'bbcode_font_icon',
 					'hidden_fields',
 				);
 				extract($phpbb_dispatcher->trigger_event('core.acp_bbcodes_modify_create', compact($vars)));
@@ -232,6 +237,16 @@ class acp_bbcodes
 						trigger_error($user->lang['BBCODE_HELPLINE_TOO_LONG'] . adm_back_link($this->u_action), E_USER_WARNING);
 					}
 
+					if (strlen($bbcode_font_icon) > 64)
+					{
+						trigger_error($user->lang['BBCODE_FONT_ICON_TOO_LONG'] . adm_back_link($this->u_action), E_USER_WARNING);
+					}
+
+					if (!empty($bbcode_font_icon) && !preg_match('/^(?!-)(?!.*--)[a-z0-9-]+(?<!-)$/', $bbcode_font_icon))
+					{
+						trigger_error($user->lang['BBCODE_FONT_ICON_INVALID'] . adm_back_link($this->u_action), E_USER_WARNING);
+					}
+
 					/**
 					 * Replace Emojis and other 4bit UTF-8 chars not allowed by MySQL to UCR/NCR.
 					 * Using their Numeric Character Reference's Hexadecimal notation.
@@ -244,6 +259,7 @@ class acp_bbcodes
 						'bbcode_tpl'				=> $bbcode_tpl,
 						'display_on_posting'		=> $display_on_posting,
 						'bbcode_helpline'			=> $bbcode_helpline,
+						'bbcode_font_icon'			=> $bbcode_font_icon,
 						'first_pass_match'			=> $data['first_pass_match'],
 						'first_pass_replace'		=> $data['first_pass_replace'],
 						'second_pass_match'			=> $data['second_pass_match'],
@@ -328,6 +344,7 @@ class acp_bbcodes
 						'bbcode_match'			=> $bbcode_match,
 						'bbcode_tpl'			=> htmlspecialchars($bbcode_tpl, ENT_COMPAT),
 						'bbcode_helpline'		=> $bbcode_helpline,
+						'bbcode_font_icon'		=> $bbcode_font_icon,
 						'display_on_posting'	=> $display_on_posting,
 						)))
 					, 'confirm_bbcode.html');

phpBB/includes/functions_display.php

@@ -1081,7 +1081,7 @@ function display_custom_bbcodes()
 	$num_predefined_bbcodes = NUM_PREDEFINED_BBCODES;
 
 	$sql_ary = [
-		'SELECT'	=> 'b.bbcode_id, b.bbcode_tag, b.bbcode_helpline, b.bbcode_match',
+		'SELECT'	=> 'b.bbcode_id, b.bbcode_tag, b.bbcode_helpline, b.bbcode_font_icon, b.bbcode_match',
 		'FROM'		=> [BBCODES_TABLE => 'b'],
 		'WHERE'		=> 'b.display_on_posting = 1',
 		'ORDER_BY'	=> 'b.bbcode_tag',
@@ -1124,6 +1124,7 @@ function display_custom_bbcodes()
 			'BBCODE_TAG'		=> $row['bbcode_tag'],
 			'BBCODE_TAG_CLEAN'	=> str_replace('=', '-', $row['bbcode_tag']),
 			'BBCODE_HELPLINE'	=> $row['bbcode_helpline'],
+			'BBCODE_FONT_ICON'	=> $row['bbcode_font_icon'],
 		];
 
 		/**

phpBB/language/en/acp/posting.php

@@ -53,7 +53,10 @@ $lang = array_merge($lang, array(
 	'BBCODE_HELPLINE_EXPLAIN'	=> 'This field contains the mouse over text of the BBCode.',
 	'BBCODE_HELPLINE_TEXT'		=> 'Help line text',
 	'BBCODE_HELPLINE_TOO_LONG'	=> 'The help line you entered is too long.',
-
+	'BBCODE_FONT_ICON'			=> 'BBCode icon',
+	'BBCODE_FONT_ICON_EXPLAIN'	=> 'Enter the name of a Font Awesome icon (without the fa prefix) to display instead of the BBCode name appearing on the button. %1$sClick here%2$s to view the list of available icons. Only solid style icons are supported.',
+	'BBCODE_FONT_ICON_INVALID'	=> 'The icon name you have entered is invalid.',
+	'BBCODE_FONT_ICON_TOO_LONG'	=> 'The icon name you have entered is too long.',
 	'BBCODE_INVALID_TAG_NAME'	=> 'The BBCode tag name that you selected already exists.',
 	'BBCODE_INVALID'			=> 'Your BBCode is constructed in an invalid form.',
 	'BBCODE_INVALID_TEMPLATE'	=> 'Your BBCode’s template is invalid.',

phpBB/language/en/common.php

@@ -78,6 +78,7 @@ $lang = array_merge($lang, array(
 	'ALL_TOPICS'					=> 'All Topics',
 	'ALT_TEXT'						=> 'Alternative text',
 	'AND'							=> 'And',
+	'APPEARANCE'					=> 'Appearance',
 	'ARE_WATCHING_FORUM'			=> 'You have subscribed to be notified of new posts in this forum.',
 	'ARE_WATCHING_TOPIC'			=> 'You have subscribed to be notified of new posts in this topic.',
 	'ASCENDING'						=> 'Ascending',

phpBB/phpbb/db/migration/data/v400/add_bbcode_font_icon.php

@@ -0,0 +1,51 @@
+<?php
+/**
+*
+* This file is part of the phpBB Forum Software package.
+*
+* @copyright (c) phpBB Limited <https://www.phpbb.com>
+* @license GNU General Public License, version 2 (GPL-2.0)
+*
+* For full copyright and license information, please see
+* the docs/CREDITS.txt file.
+*
+*/
+
+namespace phpbb\db\migration\data\v400;
+
+class add_bbcode_font_icon extends \phpbb\db\migration\migration
+{
+	public function effectively_installed()
+	{
+		return $this->db_tools->sql_column_exists($this->table_prefix . 'bbcodes', 'bbcode_font_icon');
+	}
+
+	public static function depends_on()
+	{
+		return [
+			'\phpbb\db\migration\data\v400\dev'
+		];
+	}
+
+	public function update_schema()
+	{
+		return [
+			'add_columns'	=> [
+				$this->table_prefix . 'bbcodes'	=> [
+					'bbcode_font_icon'	=> ['VCHAR:64', ''],
+				],
+			],
+		];
+	}
+
+	public function revert_schema()
+	{
+		return [
+			'drop_columns'	=> [
+				$this->table_prefix . 'bbcodes'	=> [
+					'bbcode_font_icon',
+				],
+			],
+		];
+	}
+}

phpBB/styles/prosilver/template/posting_buttons.html

@@ -97,7 +97,11 @@
 
 	<!-- BEGIN custom_tags -->
 	<button type="button" class="button button-secondary bbcode-{custom_tags.BBCODE_TAG_CLEAN}" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{{ custom_tags.BBCODE_HELPLINE }}">
-		{custom_tags.BBCODE_TAG}
+		{% if custom_tags.BBCODE_FONT_ICON != '' %}
+			{{ Icon('font', custom_tags.BBCODE_FONT_ICON, '', false, custom_tags.BBCODE_TAG_CLEAN) }}
+		{% else %}
+			{{ custom_tags.BBCODE_TAG }}
+		{% endif %}
 	</button>
 	<!-- END custom_tags -->
 </div>

tests/functional/acp_bbcodes_test.php

@@ -25,7 +25,8 @@ class phpbb_functional_acp_bbcodes_test extends phpbb_functional_test_case
 		$crawler = self::request('GET', 'adm/index.php?i=acp_bbcodes&sid=' . $this->sid . '&mode=bbcodes&action=add');
 		$form = $crawler->selectButton('Submit')->form(array(
 			'bbcode_match'		=> '[mod="{TEXT1}"]{TEXT2}[/mod]',
-			'bbcode_tpl'   => '<div>{TEXT1}</div><div>{TEXT2}</div>'
+			'bbcode_tpl'		=> '<div>{TEXT1}</div><div>{TEXT2}</div>',
+			'bbcode_font_icon'	=> 'user',
 		));
 		self::submit($form);
 
@@ -47,7 +48,7 @@ class phpbb_functional_acp_bbcodes_test extends phpbb_functional_test_case
 	/**
 	* @dataProvider get_bbcode_error_tests
 	*/
-	public function test_bbcode_error($match, $tpl, $error)
+	public function test_bbcode_error($match, $tpl, $icon, $error)
 	{
 		$this->login();
 		$this->admin_login();
@@ -55,7 +56,8 @@ class phpbb_functional_acp_bbcodes_test extends phpbb_functional_test_case
 		$crawler = self::request('GET', 'adm/index.php?i=acp_bbcodes&sid=' . $this->sid . '&mode=bbcodes&action=add');
 		$form = $crawler->selectButton('Submit')->form([
 			'bbcode_match'		=> $match,
-			'bbcode_tpl'   => $tpl
+			'bbcode_tpl'		=> $tpl,
+			'bbcode_font_icon'	=> $icon,
 		]);
 		$crawler = self::submit($form);
 
@@ -69,18 +71,45 @@ class phpbb_functional_acp_bbcodes_test extends phpbb_functional_test_case
 			[
 				'XXX',
 				'',
+				'',
 				'BBCode is constructed in an invalid form'
 			],
 			[
 				'[x]{TEXT}[/x]',
 				'<xsl:invalid',
+				'',
 				'template is invalid'
 			],
 			[
 				'[x]{TEXT}[/x]',
 				'<script>{TEXT}</script>',
+				'',
 				'unsafe'
 			],
+			'icon name too long' => [
+				'[mod2="{TEXT1}"]{TEXT2}[/mod2]',
+				'<div>{TEXT1}</div><div>{TEXT2}</div>',
+				str_repeat('a', 65),
+				'is too long',
+			],
+			'icon name invalid' => [
+				'[mod2="{TEXT1}"]{TEXT2}[/mod2]',
+				'<div>{TEXT1}</div><div>{TEXT2}</div>',
+				'Not a valid icon name',
+				'is invalid',
+			],
+			'icon name invalid double dash' => [
+				'[mod2="{TEXT1}"]{TEXT2}[/mod2]',
+				'<div>{TEXT1}</div><div>{TEXT2}</div>',
+				'us--er',
+				'is invalid',
+			],
+			'icon name invalid trailing dash' => [
+				'[mod2="{TEXT1}"]{TEXT2}[/mod2]',
+				'<div>{TEXT1}</div><div>{TEXT2}</div>',
+				'user-',
+				'is invalid',
+			],
 		];
 	}
 }