[ticket/15538] Twig icon function

PHPBB3-15538

phpBB/config/default/container/services_twig.yml

@@ -54,6 +54,13 @@ services:
         tags:
             - { name: twig.extension }
 
+    template.twig.extensions.icon:
+        class: phpbb\template\twig\extension\icon
+        arguments:
+            - '@user'
+        tags:
+            - { name: twig.extension }
+
     template.twig.extensions.routing:
         class: phpbb\template\twig\extension\routing
         arguments:

phpBB/phpbb/template/twig/extension/icon.php

@@ -0,0 +1,198 @@
+<?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\template\twig\extension;
+
+use phpbb\template\twig\environment;
+
+class icon extends \Twig_Extension
+{
+	/** @var \phpbb\user */
+	protected $user;
+
+	/**
+	 * Constructor.
+	 *
+	 * @param \phpbb\user	$user		User object
+	 */
+	public function __construct(\phpbb\user $user)
+	{
+		$this->user = $user;
+	}
+
+	/**
+	* Get the name of this extension.
+	*
+	* @return string
+	*/
+	public function getName()
+	{
+		return 'icon';
+	}
+
+	/**
+	* Returns a list of global functions to add to the existing list.
+	*
+	* @return array		An array of global functions
+	*/
+	public function getFunctions()
+	{
+		return [
+			new \Twig_SimpleFunction('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|png|svg)
+	 * @param string		$icon			Icon name (eg. "bold")
+	 * @param string		$classes		Additional classes (eg. "fa-fw")
+	 * @param string		$title			Icon title
+	 * @param bool			$hidden			Hide the icon title from view
+	 * @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 = '', $classes = '', $title = '', $hidden = false, array $attributes = [])
+	{
+		switch ($type)
+		{
+			case 'font':
+				$src = '';
+			break;
+
+			case 'png':
+				$board_url = defined('PHPBB_USE_BOARD_URL_PATH') && PHPBB_USE_BOARD_URL_PATH;
+				$web_path = $board_url ? generate_board_url() . '/' : $environment->get_web_root_path();
+
+				$src = "{$web_path}styles/" . $this->user->style['style_path'] . "/template/icons/png/{$icon}.png";
+			break;
+
+			case 'svg':
+				try
+				{
+					$file = $environment->load('icons/svg/' . $icon . '.svg');
+				}
+				catch (\Twig_Error $e)
+				{
+					return '';
+				}
+
+				$src = $this->filter_svg($file);
+			break;
+
+			default:
+				// Not a supported icon type (font|png|svg), return an empty string
+				return '';
+			break;
+		}
+
+		try
+		{
+			return $environment->render("icons/{$type}.html", [
+				'ATTRIBUTES'	=> (string) $this->implode_attributes($attributes),
+				'CLASSES'		=> (string) $classes,
+				'ICON'			=> (string) $icon,
+				'SOURCE'		=> (string) $src,
+				'TITLE'			=> (string) $title,
+				'S_HIDDEN'		=> (bool) $hidden,
+			]);
+		}
+		catch (\Twig_Error $e)
+		{
+			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)
+	{
+		$attr_str = '';
+
+		foreach ($attributes as $attribute => $value)
+		{
+			$attr_str .= ' ' . $attribute . '="' . $value . '"';
+		}
+
+		return $attr_str;
+	}
+
+	/**
+	 * Filter a SVG for usage in the template.
+	 *
+	 * @param \Twig_TemplateWrapper	$file	The svg file loaded from the environment
+	 * @return string
+	 */
+	protected function filter_svg(\Twig_TemplateWrapper $file)
+	{
+		/** @var \Twig_Source $src */
+		$src = $file->getSourceContext();
+		$svg = $src->getCode();
+
+		/** @var \DOMDocument $dom */
+		$dom = new \DOMDocument();
+		$dom->preserveWhiteSpace = false;
+
+		/**
+		 * Suppression is needed as DOMDocument does not like HTML5 and SVGs.
+		 * Options parameter prevents $dom->saveHTML() from adding an <html> element.
+		 */
+		@$dom->loadHTML($svg, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
+
+		/** @var \DOMXPath $xpath */
+		$xpath = new \DOMXPath($dom);
+
+		/** @var \DOMNode $element */
+		foreach ($xpath->query('//svg | //title') as $element)
+		{
+			if ($element->nodeName === 'svg')
+			{
+				$children = [];
+
+				/** @var \DOMNode $node */
+				foreach ($element->childNodes as $node)
+				{
+					$children[] = $node;
+				}
+
+				/** @var \DOMNode $child */
+				foreach ($children as $child)
+				{
+					$element->parentNode->insertBefore($child, $element);
+				}
+			}
+
+			$element->parentNode->removeChild($element);
+		}
+
+		/** @var \DOMElement $attribute */
+		foreach ($xpath->query('//@fill') as $attribute)
+		{
+			if ($attribute->nodeName === 'fill' && $attribute->nodeValue === 'none')
+			{
+				continue;
+			}
+
+			$attribute->parentNode->removeAttribute($attribute->nodeName);
+		}
+
+		return $dom->saveHTML();
+	}
+}

phpBB/styles/prosilver/template/icons/font.html

@@ -0,0 +1,11 @@
+{% spaceless %}
+<i
+	class="icon fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	{% if S_HIDDEN %}
+		{% if TITLE %}title="{{ lang(TITLE) }}"{% endif %}
+		aria-hidden="true"
+	{% endif %}
+	{{ ATTRIBUTES }}
+></i>
+{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ lang(TITLE) }}</span>{% endif %}
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/png.html

@@ -0,0 +1,8 @@
+{% spaceless %}
+<img
+	class="icon png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	src="{{ SOURCE }}"
+	alt="{{ lang(TITLE) }}"
+	{{ ATTRIBUTES }}
+/>
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/svg.html

@@ -0,0 +1,21 @@
+{% spaceless %}
+	{% set TITLE_ID = TITLE ? TITLE|lower|replace({' ': '-'}) ~ '-' ~ random() %}
+<svg
+	class="icon svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	viewBox="0 0 24 24"
+	{% if TITLE %}
+		{% if S_HIDDEN %}aria-hidden="true"{% endif %}
+		aria-labelledby="{{ TITLE_ID }}"
+	{% endif %}
+	role="img"
+	{{ ATTRIBUTES }}
+>
+	{% if TITLE %}
+	<title id="{{ TITLE_ID }}">
+		{{ lang(TITLE) }}
+	</title>
+	{% endif %}
+
+	{{ SOURCE }}
+</svg>
+{% endspaceless %}

phpBB/styles/prosilver/template/icons/svg/bars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="red" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>

phpBB/styles/prosilver/template/icons/svg/envelope.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>

phpBB/styles/prosilver/template/icons/svg/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>My fake title!</title><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

phpBB/styles/prosilver/template/icons/svg/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>

phpBB/styles/prosilver/template/index_body.html

@@ -34,6 +34,36 @@
 	</form>
 <!-- ENDIF -->
 
+<div class="panel">
+	<h3>Font</h3>
+	<div>
+		{{ icon('font', 'bars', 'fa-fw icon-blue') }}
+		{{ icon('font', 'envelope-o') }}
+		{{ icon('font', 'pencil', '', '', true, {'data-ajax': 'true', 'data-refresh': 'true'}) }}
+		{{ icon('font', 'phone') }}
+		<a>{{ icon('font', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+		<a class="button">{{ icon('font', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+	<h3>PNG</h3>
+	<div>
+		{{ icon('png', 'bars') }}
+		{{ icon('png', 'envelope') }}
+		{{ icon('png', 'pencil') }}
+		{{ icon('png', 'phone') }}
+		<a>{{ icon('png', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+		<a class="button">{{ icon('png', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+	<h3>SVG</h3>
+	<div>
+		{{ icon('svg', 'bars', 'fa-fw icon-blue') }}
+		{{ icon('svg', 'envelope', '', 'USERNAME', false) }}
+		{{ icon('svg', 'pencil') }}
+		{{ icon('svg', 'phone') }}
+		<a>{{ icon('svg', 'pencil') }}</a>
+		<a class="button">{{ icon('svg', 'pencil', 'fa-fw', 'POST_REPLY') }}</a>
+	</div>
+</div>
+
 <!-- EVENT index_body_stat_blocks_before -->
 
 <!-- IF S_DISPLAY_ONLINE_LIST -->

phpBB/styles/prosilver/theme/icons.css

@@ -5,6 +5,11 @@
 /* Global module setup
 ---------------------------------------- */
 
+/* Global svg colours fix */
+svg {
+	fill: currentColor;
+}
+
 /* Renamed version of .fa class for agnostic usage of icon fonts.
  * Just change the name of the font after the 14/1 to the name of
  * the font you wish to use.
@@ -27,6 +32,14 @@ blockquote cite:before,
 	text-rendering: auto; /* optimizelegibility throws things off #1094 */
 }
 
+img.icon,
+svg.icon {
+	width: 14px;
+	height: 14px;
+	display: inline-block;
+	vertical-align: middle;
+}
+
 .icon:before {
 	padding-right: 2px;
 }
@@ -39,18 +52,26 @@ blockquote cite:before,
 
 .icon.icon-xl {
 	font-size: 20px;
+	width: 20px;
+	height: 20px;
 }
 
 .icon.icon-lg {
 	font-size: 16px;
+	width: 16px;
+	height: 16px;
 }
 
 .icon.icon-md {
 	font-size: 10px;
+	width: 10px;
+	height: 10px;
 }
 
 .icon.icon-sm {
 	font-size: 8px;
+	width: 8px;
+	height: 8px;
 }
 
 /* icon modifiers */