diff --git a/phpBB/config/default/container/services.yml b/phpBB/config/default/container/services.yml index 0e9a037290..a7ab26f163 100644 --- a/phpBB/config/default/container/services.yml +++ b/phpBB/config/default/container/services.yml @@ -29,6 +29,7 @@ imports: - { resource: services_text_formatter.yml } - { resource: services_text_reparser.yml } - { resource: services_twig.yml } + - { resource: services_twig_extensions.yml } - { resource: services_ucp.yml } - { resource: services_user.yml } diff --git a/phpBB/config/default/container/services_twig_extensions.yml b/phpBB/config/default/container/services_twig_extensions.yml new file mode 100644 index 0000000000..115d3f1417 --- /dev/null +++ b/phpBB/config/default/container/services_twig_extensions.yml @@ -0,0 +1,9 @@ +# Twig extensions not needed by the installer + +services: + template.twig.extensions.icon: + class: phpbb\template\twig\extension\icon + arguments: + - '@user' + tags: + - { name: twig.extension } diff --git a/phpBB/phpbb/template/twig/extension/icon.php b/phpBB/phpbb/template/twig/extension/icon.php new file mode 100644 index 0000000000..f96ed94821 --- /dev/null +++ b/phpBB/phpbb/template/twig/extension/icon.php @@ -0,0 +1,321 @@ + + * @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\template\twig\extension; + +use phpbb\template\twig\environment; + +class icon extends \Twig\Extension\AbstractExtension +{ + /** @var \phpbb\user */ + protected $user; + + /** + * Constructor. + * + * @param \phpbb\user $user User object + */ + public function __construct(\phpbb\user $user) + { + $this->user = $user; + } + + /** + * Returns the name of this extension. + * + * @return string The extension name + */ + public function getName() + { + return 'icon'; + } + + /** + * Returns a list of functions to add to the existing list. + * + * @return \Twig\TwigFunction[] Array of twig functions + */ + public function getFunctions() + { + return [ + new \Twig\TwigFunction('Icon', [$this, 'icon'], ['needs_environment' => true]), + ]; + } + + /** + * Generate icon HTML for use in the template, depending on the mode. + * + * @param environment $environment Twig environment object + * @param string $type Icon type (font|iconify|png|svg) + * @param string $icon Icon name (eg. "bold") + * @param string $title Icon title + * @param bool $hidden Hide the icon title from view + * @param string $classes Additional classes (eg. "fa-fw") + * @param array $attributes Additional attributes for the icon, where the key is the attribute. + * {'data-ajax': 'mark_forums'} results in ' data-ajax="mark_forums"' + * @return string + */ + public function icon(environment $environment, $type, $icon, $title = '', $hidden = false, $classes = '', array $attributes = []) + { + $type = strtolower($type); + $icon = is_array($icon) ? $this->get_first_icon($icon) : $icon; + + if (empty($icon)) + { + return ''; + } + + $not_found = false; + $source = ''; + $view_box = ''; + + switch ($type) + { + case 'font': + // Nothing to do here.. + break; + + case 'iconify': + $source = explode(':', $icon); + $source = $source[0]; + break; + + case 'png': + $filesystem = $environment->get_filesystem(); + $root_path = $environment->get_web_root_path(); + + $board_url = defined('PHPBB_USE_BOARD_URL_PATH') && PHPBB_USE_BOARD_URL_PATH; + $base_path = $board_url ? generate_board_url() . '/' : $root_path; + + // Iterate over the user's styles and check for icon existance + foreach ($this->get_style_list() as $style_path) + { + if ($filesystem->exists("{$root_path}styles/{$style_path}/theme/png/{$icon}.png")) + { + $source = "{$base_path}styles/{$style_path}/theme/png/{$icon}.png"; + + break; + } + } + + // Check if the icon was found or not + $not_found = empty($source); + break; + + case 'svg': + try + { + // Try to load and prepare the SVG icon + $file = $environment->load('svg/' . $icon . '.svg'); + $source = $this->prepare_svg($file, $view_box); + + if (empty($view_box)) + { + return ''; + } + } + catch (\Twig\Error\LoaderError $e) + { + // Icon was not found + $not_found = true; + } + catch (\Twig\Error\Error $e) + { + return ''; + } + break; + + default: + return ''; + break; + } + + // If no PNG or SVG icon was found, display a default 404 SVG icon. + if ($not_found) + { + try + { + $file = $environment->load('svg/404.svg'); + $source = $this->prepare_svg($file, $view_box); + } + catch (\Twig\Error\Error $e) + { + return ''; + } + + $type = 'svg'; + $icon = '404'; + } + + try + { + return $environment->render("macros/icons/{$type}.twig", [ + 'ATTRIBUTES' => (string) $this->implode_attributes($attributes), + 'CLASSES' => (string) $classes, + 'ICON' => (string) $icon, + 'SOURCE' => (string) $source, + 'TITLE' => (string) $title, + 'VIEW_BOX' => (string) $view_box, + 'S_HIDDEN' => (bool) $hidden, + ]); + } + catch (\Twig\Error\Error $e) + { + return ''; + } + } + + /** + * Prepare an SVG for usage in the template icon. + * + * This removes any and elements, + * aswell as the root and any elements. + * + * @param \Twig\TemplateWrapper $file The SVG file loaded from the environment + * @param string $view_box The viewBox attribute value + * @return string The cleaned SVG + */ + protected function prepare_svg(\Twig\TemplateWrapper $file, &$view_box = '') + { + $code = $file->render(); + $code = preg_replace( "/<\?xml.+?\?>/", '', $code); + + $doc = new \DOMDocument(); + $doc->preserveWhiteSpace = false; + + /** + * Suppression is needed as DOMDocument does not like HTML5 and SVGs. + * Options parameter prevents $dom->saveHTML() from adding an element. + */ + @$doc->loadHTML($code, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); + + // Remove any DOCTYPE + foreach ($doc->childNodes as $child) + { + if ($child->nodeType === XML_DOCUMENT_TYPE_NODE) + { + $child->parentNode->removeChild($child); + } + } + + $xpath = new \DOMXPath($doc); + + /** + * Remove the root element + * and all elements. + * + * @var \DOMElement $element + */ + foreach ($xpath->query('/svg | //title') as $element) + { + if ($element->nodeName === 'svg') + { + // Return the viewBox attribute value of the root SVG element by reference + $view_box = $element->getAttribute('viewbox'); + + $width = $element->getAttribute('width'); + $height = $element->getAttribute('height'); + + if (empty($view_box) && $width && $height) + { + $view_box = "0 0 {$width} {$height}"; + } + + while (isset($element->firstChild)) + { + $element->parentNode->insertBefore($element->firstChild, $element); + } + } + + $element->parentNode->removeChild($element); + } + + $string = $doc->saveHTML(); + $string = preg_replace('/\s+/', ' ', $string); + + return $string; + } + + /** + * Finds the first icon that has a "true" value and returns it. + * + * This allows sending an array to the Icon() function, + * where the keys are the icon names and the values are their checks. + * + * {{ Icon('font', { + * 'bullhorn': topicrow.S_POST_GLOBAL or topicrow.S_POST_ANNOUNCE, + * 'star': topicrow.S_POST_STICKY, + * 'lock': topicrow.S_TOPIC_LOCKED, + * 'fire': topicrow.S_TOPIC_HOT, + * 'file': true, + * }, 'MY_TITLE', true) }} + * + * @param array $icons Array of icons and their booleans + * @return string The first 'true' icon + */ + protected function get_first_icon(array $icons) + { + foreach ($icons as $icon => $boolean) + { + // In case the key is not a string, + // this icon does not have a check + // so instantly return it + if (!is_string($icon)) + { + return $boolean; + } + + if ($boolean) + { + return $icon; + } + } + + return ''; + } + + /** + * Implode an associated array of attributes to a string for usage in a template. + * + * @param array $attributes Associated array of attributes + * @return string + */ + protected function implode_attributes(array $attributes) + { + $string = ''; + + foreach ($attributes as $key => $value) + { + $string .= ' ' . $key . '="' . $value . '"'; + } + + return $string; + } + + /** + * Get the style tree of the style preferred by the current user. + * + * @return array Style tree, most specific first + */ + protected function get_style_list() + { + $style_list = [$this->user->style['style_path']]; + + if ($this->user->style['style_parent_id']) + { + $style_list = array_merge($style_list, array_reverse(explode('/', $this->user->style['style_parent_tree']))); + } + + return $style_list; + } +} diff --git a/phpBB/styles/all/imgs/svg/404.svg b/phpBB/styles/all/imgs/svg/404.svg new file mode 100644 index 0000000000..a8bc69bba7 --- /dev/null +++ b/phpBB/styles/all/imgs/svg/404.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/phpBB/styles/all/template/macros/icons/font.twig b/phpBB/styles/all/template/macros/icons/font.twig new file mode 100644 index 0000000000..a882a25c40 --- /dev/null +++ b/phpBB/styles/all/template/macros/icons/font.twig @@ -0,0 +1,4 @@ +{% spaceless %} + + {% if TITLE %}{{ lang(TITLE) }}{% endif %} +{% endspaceless %} diff --git a/phpBB/styles/all/template/macros/icons/iconify.twig b/phpBB/styles/all/template/macros/icons/iconify.twig new file mode 100644 index 0000000000..43b8b88948 --- /dev/null +++ b/phpBB/styles/all/template/macros/icons/iconify.twig @@ -0,0 +1,4 @@ +{% spaceless %} + + {% if TITLE %}{{ lang(TITLE) }}{% endif %} +{% endspaceless %} diff --git a/phpBB/styles/all/template/macros/icons/png.twig b/phpBB/styles/all/template/macros/icons/png.twig new file mode 100644 index 0000000000..426f7a3a5e --- /dev/null +++ b/phpBB/styles/all/template/macros/icons/png.twig @@ -0,0 +1,3 @@ +{% spaceless %} + {{ lang(TITLE) }} +{% endspaceless %} diff --git a/phpBB/styles/all/template/macros/icons/svg.twig b/phpBB/styles/all/template/macros/icons/svg.twig new file mode 100644 index 0000000000..e24777272e --- /dev/null +++ b/phpBB/styles/all/template/macros/icons/svg.twig @@ -0,0 +1,9 @@ +{% spaceless %} + {% set TITLE_ID = TITLE ? TITLE|lower|replace({' ': '_'}) ~ '-' ~ random() %} + + +{% endspaceless %} diff --git a/tests/template/extension_test.php b/tests/template/extension_test.php index 0e9f2110ed..5d73aed91e 100644 --- a/tests/template/extension_test.php +++ b/tests/template/extension_test.php @@ -15,7 +15,7 @@ require_once dirname(__FILE__) . '/template_test_case.php'; class phpbb_template_extension_test extends phpbb_template_template_test_case { - protected function setup_engine(array $new_config = array()) + protected function setup_engine(array $new_config = []) { global $config, $phpbb_container, $phpbb_dispatcher, $phpbb_root_path, $phpEx; @@ -28,6 +28,7 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case $lang_loader = new \phpbb\language\language_file_loader($phpbb_root_path, $phpEx); $this->lang = $lang = new \phpbb\language\language($lang_loader); $this->user = new \phpbb\user($lang, '\phpbb\datetime'); + $this->user->style['style_path'] = 'chameleon'; global $auth, $request, $symfony_request, $user; $user = new phpbb_mock_user(); @@ -39,7 +40,15 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case $auth->method('acl_get') ->willReturn(true); - $filesystem = new \phpbb\filesystem\filesystem(); + $filesystem = $this->createMock('\phpbb\filesystem\filesystem'); + $filesystem->expects($this->any()) + ->method('exists') + ->with($this->stringContains('theme/png/')) + ->will($this->returnValueMap([ + ['phpBB/styles/chameleon/theme/png/phone.png', true], + ['phpBB/styles/chameleon/theme/png/pencil.png', true], + ['phpBB/styles/chameleon/theme/png/user.png', false], + ])); $request = new phpbb_mock_request; $symfony_request = new \phpbb\symfony_request( $request @@ -73,7 +82,7 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case $cache_path = $phpbb_root_path . 'cache/twig'; $context = new \phpbb\template\context(); - $loader = new \phpbb\template\twig\loader(''); + $loader = new \phpbb\template\twig\loader([]); $twig = new \phpbb\template\twig\environment( $config, $filesystem, @@ -82,12 +91,12 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case null, $loader, new \phpbb\event\dispatcher($phpbb_container), - array( + [ 'cache' => false, 'debug' => false, 'auto_reload' => true, 'autoescape' => false, - ) + ] ); $this->template = new phpbb\template\twig\twig( $phpbb_path_helper, @@ -100,11 +109,17 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case new \phpbb\template\twig\extension($context, $twig, $this->lang), new \phpbb\template\twig\extension\avatar(), new \phpbb\template\twig\extension\config($config), + new \phpbb\template\twig\extension\icon($this->user), new \phpbb\template\twig\extension\username(), ] ); $twig->setLexer(new \phpbb\template\twig\lexer($twig)); - $this->template->set_custom_style('tests', $this->template_path); + + $this->template->set_custom_style('tests', [ + $this->template_path, + $phpbb_root_path . 'styles/all/imgs', + $phpbb_root_path . 'styles/all/template', + ]); } public function data_template_extensions() @@ -253,8 +268,287 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case /** * @dataProvider data_template_extensions */ - public function test_get_user_avatar($file, $vars, $block_vars, $destroy_array, $expected, $lang_vars = []) + public function test_template_extensions($file, $vars, $block_vars, $destroy_array, $expected, $lang_vars = []) { $this->run_template($file, $vars, $block_vars, $destroy_array, $expected, $lang_vars); } + + public function data_template_icon_extension() + { + return [ + /** Font: default */ + [ + [ + 'type' => 'font', + 'icon' => 'phone', + 'title' => 'ICON_PHONE', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [ + 'ICON_PHONE' => 'Phone icon', + ], + 'Phone icon', + + ], + /** Font: all options */ + [ + [ + 'type' => 'font', + 'icon' => 'pencil', + 'title' => 'ICON_PENCIL', + 'hidden' => true, + 'classes' => 'a-class another-class', + 'attributes' => [ + 'data-attr-1' => 'true', + 'data-attr-2' => 'two', + ], + ], + [ + 'ICON_PENCIL' => 'Pencil icon', + ], + ' + Pencil icon' + ], + /** Font: icons array */ + [ + [ + 'type' => 'font', + 'icon' => [ + 'bullhorn' => false, + 'star' => false, + 'lock' => true, + 'fire' => false, + 'file' => true, + ], + 'title' => 'ICON_TOPIC', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [ + 'ICON_TOPIC' => 'Topic icon', + ], + ' + Topic icon', + ], + /** Font: icons array with no key for the default */ + [ + [ + 'type' => 'font', + 'icon' => [ + 'bullhorn' => false, + 'star' => false, + 'lock' => false, + 'fire' => false, + 'file', + ], + 'title' => 'ICON_TOPIC', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [ + 'ICON_TOPIC' => 'Topic icon', + ], + ' + Topic icon', + ], + /** Iconify: default */ + [ + [ + 'type' => 'iconify', + 'icon' => 'fa:phone', + 'title' => '', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [], + '', + ], + /** Iconify: all options */ + [ + [ + 'type' => 'iconify', + 'icon' => 'mdi:pencil', + 'title' => 'ICON_PENCIL', + 'hidden' => true, + 'classes' => 'icon-lg', + 'attributes' => [ + 'style' => 'color: #12a3eb;', + ], + ], + [ + 'ICON_PENCIL' => 'Pencil icon', + ], + ' + Pencil icon', + ], + /** PNG: default */ + [ + [ + 'type' => 'png', + 'icon' => 'phone', + 'title' => 'ICON_PHONE', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [ + 'ICON_PHONE' => 'Phone icon', + ], + 'Phone icon', + ], + /** PNG: all options */ + [ + [ + 'type' => 'png', + 'icon' => 'pencil', + 'title' => 'ICON_PENCIL', + 'hidden' => true, + 'classes' => 'my-class', + 'attributes' => [ + 'data-url' => 'my-test-url/test-page.php?u=2', + ], + ], + [ + 'ICON_PENCIL' => 'Pencil icon', + ], + 'Pencil icon', + ], + /** PNG: Not found */ + [ + [ + 'type' => 'png', + 'icon' => 'user', + 'title' => 'ICON_USER', + 'hidden' => false, + 'classes' => 'my-class', + 'attributes' => [], + ], + [ + 'ICON_USER' => 'User icon', + ], + ' + User icon + + + + + + ', + ], + /** SVG: default */ + [ + [ + 'type' => 'svg', + 'icon' => 'phone', + 'title' => 'ICON_PHONE', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [ + 'ICON_PHONE' => 'Phone icon', + ], + ' + Phone icon + + + ', + ], + /** SVG: all options */ + [ + [ + 'type' => 'svg', + 'icon' => 'pencil', + 'title' => 'ICON_PENCIL', + 'hidden' => true, + 'classes' => 'my-svg-class', + 'attributes' => [ + 'data-ajax' => 'my_ajax_callback', + ], + ], + [ + 'ICON_PENCIL' => 'Pencil icon', + ], + '', + ], + /** SVG: Not found */ + [ + [ + 'type' => 'svg', + 'icon' => 'not-existent', + 'title' => 'Just a title', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [], + ' + Just a title + + + + + + ', + ], + /** SVG: Sanitization */ + [ + [ + 'type' => 'svg', + 'icon' => 'dirty', + 'title' => '', + 'hidden' => false, + 'classes' => '', + 'attributes' => [], + ], + [], + ' + + ', + ], + ]; + } + + /** + * @dataProvider data_template_icon_extension + */ + public function test_template_icon_extension($vars, $lang_vars, $expected) + { + $file = 'extension_icon_test.html'; + + $this->template->set_filenames(['test' => $file]); + $this->template->assign_vars($vars); + + foreach ($lang_vars as $name => $value) + { + self::$language_reflection_lang->setValue($this->lang, array_merge( + self::$language_reflection_lang->getValue($this->lang), + [$name => $value] + )); + } + + $expected = str_replace(["\n", "\r", "\t"], '', $expected); + $output = str_replace(["\n", "\r", "\t"], '', $this->display('test')); + + /** + * SVGs need their random identifier replaced (normalized). + * The 'user' is a PNG, but not existent, so it returns a 404 SVG. + */ + if ($vars['type'] === 'svg' || $vars['icon'] === 'user') + { + $prefix = strtolower(str_replace(' ', '_', $vars['title'])) . '-'; + $output = preg_replace('/' . $prefix . '\d+/', $prefix . '123456789', $output); + } + + $this->assertEquals($expected, $output, "Testing {$file}"); + } } diff --git a/tests/template/templates/extension_icon_test.html b/tests/template/templates/extension_icon_test.html new file mode 100644 index 0000000000..4ea6eb0410 --- /dev/null +++ b/tests/template/templates/extension_icon_test.html @@ -0,0 +1 @@ +{{ Icon(type, icon, title, hidden, classes, attributes) }} diff --git a/tests/template/templates/svg/dirty.svg b/tests/template/templates/svg/dirty.svg new file mode 100644 index 0000000000..29c1500ffe --- /dev/null +++ b/tests/template/templates/svg/dirty.svg @@ -0,0 +1,6 @@ + + + diff --git a/tests/template/templates/svg/pencil.svg b/tests/template/templates/svg/pencil.svg new file mode 100644 index 0000000000..c9c021d811 --- /dev/null +++ b/tests/template/templates/svg/pencil.svg @@ -0,0 +1 @@ +My fake title! diff --git a/tests/template/templates/svg/phone.svg b/tests/template/templates/svg/phone.svg new file mode 100644 index 0000000000..5fbfe196ba --- /dev/null +++ b/tests/template/templates/svg/phone.svg @@ -0,0 +1 @@ +