[FEATURE] Add markupIdentifier support to JavaScript IconAPI

Releases: master
Resolves: #75579
Change-Id: Iae5d8aa364bcb11c593365814d157047dea15c70
Reviewed-on: https://review.typo3.org/47652


Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Susanne Moog <typo3@susannemoog.de>
Tested-by: Susanne Moog <typo3@susannemoog.de>

typo3/sysext/backend/Resources/Public/JavaScript/Icons.js

@@ -56,6 +56,10 @@ define(['jquery'], function($) {
 		states: {
 			default: 'default',
 			disabled: 'disabled'
+		},
+		markupIdentifiers: {
+			default: 'default',
+			inline: 'inline'
 		}
 	};
 
@@ -66,10 +70,11 @@ define(['jquery'], function($) {
 	 * @param {String} size
 	 * @param {String} overlayIdentifier
 	 * @param {String} state
+	 * @param {String} markupIdentifier
 	 * @return {Promise<Array>}
 	 */
-	Icons.getIcon = function(identifier, size, overlayIdentifier, state) {
-		return $.when(Icons.fetch(identifier, size, overlayIdentifier, state));
+	Icons.getIcon = function(identifier, size, overlayIdentifier, state, markupIdentifier) {
+		return $.when(Icons.fetch(identifier, size, overlayIdentifier, state, markupIdentifier));
 	};
 
 	/**
@@ -79,10 +84,11 @@ define(['jquery'], function($) {
 	 * @param {string} size
 	 * @param {string} overlayIdentifier
 	 * @param {string} state
+	 * @param {string} markupIdentifier
 	 * @return {String|Promise}
 	 * @private
 	 */
-	Icons.fetch = function(identifier, size, overlayIdentifier, state) {
+	Icons.fetch = function(identifier, size, overlayIdentifier, state, markupIdentifier) {
 		/**
 		 * Icon keys:
 		 *
@@ -90,11 +96,13 @@ define(['jquery'], function($) {
 		 * 1: size
 		 * 2: overlayIdentifier
 		 * 3: state
+		 * 4: markupIdentifier
 		 */
 		size = size || Icons.sizes.default;
 		state = state || Icons.states.default;
+		markupIdentifier = markupIdentifier || Icons.markupIdentifiers.default;
 
-		var icon = [identifier, size, overlayIdentifier, state],
+		var icon = [identifier, size, overlayIdentifier, state, markupIdentifier],
 			cacheIdentifier = icon.join('_');
 
 		if (Icons.isCached(cacheIdentifier)) {

typo3/sysext/core/Classes/Imaging/IconFactory.php

@@ -84,13 +84,13 @@ class IconFactory
             true
         );
 
-        list($identifier, $size, $overlayIdentifier, $iconState) = $requestedIcon;
+        list($identifier, $size, $overlayIdentifier, $iconState, $alternativeMarkupIdentifier) = $requestedIcon;
         if (empty($overlayIdentifier)) {
             $overlayIdentifier = null;
         }
         $iconState = IconState::cast($iconState);
         $response->getBody()->write(
-            $this->getIcon($identifier, $size, $overlayIdentifier, $iconState)->render()
+            $this->getIcon($identifier, $size, $overlayIdentifier, $iconState)->render($alternativeMarkupIdentifier)
         );
         $response = $response->withHeader('Content-Type', 'text/html; charset=utf-8');
         return $response;

typo3/sysext/core/Documentation/Changelog/master/Feature-75579-AddMarkupIdentifierSupportToJavaScriptIconAPI.rst

+====================================================================
+Feature: #75579 - Add markupIdentifier support to JavaScript IconAPI
+====================================================================
+
+Description
+===========
+
+It is now possible to request alternative rendering methods also through the
+JavaScript IconAPI for the backend. A new parameter has been added to the ``getIcon``
+function that now accepts the ``markupIdentifier`` for alternative rendering output,
+as its also possible within PHP.
+
+Currently this is only used from the ``SvgIconProvider`` to deliver inlined SVG`s
+instead of linking them in an ``img`` tag.
+
+Example 1: default, without alternativeMarkup
+
+.. code-block:: javascript
+
+   require(['TYPO3/CMS/Backend/Icons'], function(Icons) {
+      var iconName = 'actions-view-list-collapse';
+      Icons.getIcon(iconName, Icons.sizes.small).done(function(icon) {
+         console.log(icon);
+      });
+   });
+
+Example 2: with alternativeMarkup = inline
+
+.. code-block:: javascript
+
+   require(['TYPO3/CMS/Backend/Icons'], function(Icons) {
+      var iconName = 'actions-view-list-collapse';
+      Icons.getIcon(iconName, Icons.sizes.small, null, null, 'inline').done(function(icon) {
+         console.log(icon);
+      });
+   });