diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js b/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js
index 8490d973fd9b22ac3c91ae0396bcf3e4773fbb13..4867fdf50610140c3e24e27ed051b8bcf759afcd 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Icons.js
@@ -41,88 +41,48 @@ define(['jquery'], function($) {
* @return {Promise<Array>}
*/
Icons.getIcon = function(identifier, size, overlayIdentifier, state) {
- return $.when.apply($, Icons.fetch([[identifier, size, overlayIdentifier, state]]));
- };
-
- /**
- * Fetches multiple icons by passing the parameters of getIcon() for each requested
- * icon as array.
- *
- * @param {Array} icons
- * @return {Promise<Array>}
- */
- Icons.getIcons = function(icons) {
- if (!icons instanceof Array) {
- throw 'Icons must be an array of multiple definitions.';
- }
- return $.when.apply($, Icons.fetch(icons));
+ return $.when(Icons.fetch(identifier, size, overlayIdentifier, state));
};
/**
* Performs the AJAX request to fetch the icon.
*
- * @param {Array} icons
- * @return {Array}
+ * @param {string} identifier
+ * @param {string} size
+ * @param {string} overlayIdentifier
+ * @param {string} state
+ * @return {String|Promise}
* @private
*/
- Icons.fetch = function(icons) {
- var promises = [],
- requestedIcons = {},
- cachedRequestedIcons = {};
-
- for (var i = 0; i < icons.length; ++i) {
- /**
- * Icon keys:
- *
- * 0: identifier
- * 1: size
- * 2: overlayIdentifier
- * 3: state
- */
- var icon = icons[i];
- icon[1] = icon[1] || Icons.sizes.default;
- icon[3] = icon[3] || Icons.states.default;
+ Icons.fetch = function(identifier, size, overlayIdentifier, state) {
+ /**
+ * Icon keys:
+ *
+ * 0: identifier
+ * 1: size
+ * 2: overlayIdentifier
+ * 3: state
+ */
+ size = size || Icons.sizes.default;
+ state = state || Icons.states.default;
- var cacheIdentifier = icon.join('_');
- if (Icons.isCached(cacheIdentifier)) {
- $.extend(cachedRequestedIcons, Icons.getFromCache(cacheIdentifier));
- } else {
- requestedIcons[icon[0]] = {
- cacheIdentifier: cacheIdentifier,
- icon: icon
- };
- }
- }
+ var icon = [identifier, size, overlayIdentifier, state],
+ cacheIdentifier = icon.join('_');
- if (Object.keys(cachedRequestedIcons).length > 0) {
- promises.push(cachedRequestedIcons);
+ if (Icons.isCached(cacheIdentifier)) {
+ return Icons.getFromCache(cacheIdentifier);
}
- if (Object.keys(requestedIcons).length > 0) {
- promises.push(
- $.ajax({
- url: TYPO3.settings.ajaxUrls['icons'],
- data: {
- requestedIcons: JSON.stringify(
- $.map(requestedIcons, function(o) {
- return [o['icon']];
- })
- )
- },
- success: function(data) {
- $.each(data, function(identifier, markup) {
- var cacheIdentifier = requestedIcons[identifier].cacheIdentifier,
- cacheEntry = {};
-
- cacheEntry[identifier] = markup;
- Icons.putInCache(cacheIdentifier, cacheEntry);
- });
- }
- })
- );
- }
-
- return promises;
+ return $.ajax({
+ url: TYPO3.settings.ajaxUrls['icons'],
+ dataType: 'html',
+ data: {
+ icon: JSON.stringify(icon)
+ },
+ success: function(markup) {
+ Icons.putInCache(cacheIdentifier, markup);
+ }
+ });
};
/**
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
index cc9d47da2736f3756ca1866b7b149f67565afef4..ad1a3bd75ceb49457787b0f12636f3bea9a062cf 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
@@ -53,8 +53,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
var $toolbarItemIcon = $(ClearCacheMenu.options.toolbarIconSelector, ClearCacheMenu.options.containerSelector),
$existingIcon = $toolbarItemIcon.clone();
- Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(icons) {
- $toolbarItemIcon.replaceWith(icons['spinner-circle-light']);
+ Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
+ $toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
index 4c4bffc1fcc0f5ff609a3cc7b9b134b894908acc..688b0d70f8b22be42b2efe6d567d422665acb8bc 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
@@ -108,8 +108,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Icons'], functio
var $toolbarItemIcon = $(ShortcutMenu.options.toolbarIconSelector, ShortcutMenu.options.containerSelector),
$existingIcon = $toolbarItemIcon.clone();
- Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(icons) {
- $toolbarItemIcon.replaceWith(icons['spinner-circle-light']);
+ Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
+ $toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
index 8461cc55d87ef09d6f9fce28a64d65d8b8b1814a..c4e2b0c98b92d7dfe28d3161078df44fdef0e321 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
@@ -49,8 +49,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Storage'], funct
$menuContainer.click();
}
- Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(icons) {
- $toolbarItemIcon.replaceWith(icons['spinner-circle-light']);
+ Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
+ $toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
diff --git a/typo3/sysext/core/Classes/Imaging/IconFactory.php b/typo3/sysext/core/Classes/Imaging/IconFactory.php
index 2349bc319dfc80fc9cf9a3122e4ca0d5e3075d69..49a13851aac601c904fba2b15bb58d6f9cbd5a29 100644
--- a/typo3/sysext/core/Classes/Imaging/IconFactory.php
+++ b/typo3/sysext/core/Classes/Imaging/IconFactory.php
@@ -86,25 +86,22 @@ class IconFactory
{
$parsedBody = $request->getParsedBody();
$queryParams = $request->getQueryParams();
- $requestedIcons = json_decode(
- isset($parsedBody['requestedIcons'])
- ? $parsedBody['requestedIcons']
- : $queryParams['requestedIcons'],
+ $requestedIcon = json_decode(
+ isset($parsedBody['icon'])
+ ? $parsedBody['icon']
+ : $queryParams['icon'],
true
);
- $icons = [];
- for ($i = 0, $count = count($requestedIcons); $i < $count; ++$i) {
- list($identifier, $size, $overlayIdentifier, $iconState) = $requestedIcons[$i];
- if (empty($overlayIdentifier)) {
- $overlayIdentifier = null;
- }
- $iconState = IconState::cast($iconState);
- $icons[$identifier] = $this->getIcon($identifier, $size, $overlayIdentifier, $iconState)->render();
+ list($identifier, $size, $overlayIdentifier, $iconState) = $requestedIcon;
+ if (empty($overlayIdentifier)) {
+ $overlayIdentifier = null;
}
+ $iconState = IconState::cast($iconState);
$response->getBody()->write(
- json_encode($icons)
+ $this->getIcon($identifier, $size, $overlayIdentifier, $iconState)->render()
);
+ $response = $response->withHeader('Content-Type', 'text/html; charset=utf-8');
return $response;
}
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-70583-IntroducedIconAPIInJavaScript.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-70583-IntroducedIconAPIInJavaScript.rst
index 8f725621adec7562b9ec7d61d7e5660840d2a614..4cafd5792e01126372618e3231547d108b7b7ed9 100644
--- a/typo3/sysext/core/Documentation/Changelog/master/Feature-70583-IntroducedIconAPIInJavaScript.rst
+++ b/typo3/sysext/core/Documentation/Changelog/master/Feature-70583-IntroducedIconAPIInJavaScript.rst
@@ -40,9 +40,6 @@ A single icon can be fetched by ``getIcon()`` which takes four parameters:
The state of the icon. Please use the properties of the ``Icons.states`` object.
-Multiple icons can be fetched by ``getIcons()``. This function takes a multidimensional array as parameter,
-holding the parameters used by ``getIcon()`` for each icon.
-
To use the fetched icons, chain the ``done()`` method to the promise.
Examples
@@ -51,17 +48,6 @@ Examples
.. code-block:: javascript
// Get a single icon
- Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(icons) {
- $toolbarItemIcon.replaceWith(icons['spinner-circle-light']);
- });
-
- // Get multiple icons
- Icons.getIcons([
- ['apps-filetree-folder-default', Icons.sizes.large],
- ['actions-edit-delete', Icons.sizes.small, null, Icons.states.disabled],
- ['actions-system-cache-clear-impact-medium']
- ]).done(function(icons) {
- // icons['apps-filetree-folder-default']
- // icons['actions-edit-delete']
- // icons['actions-system-cache-clear-impact-medium']
+ Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
+ $toolbarItemIcon.replaceWith(spinner);
});
diff --git a/typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js b/typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js
index 4842af37d62c15552fd386d800146e1ad10b31d3..12ef8f9115e4ec0950cc4bbf331e3230e09fbd15 100644
--- a/typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js
+++ b/typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js
@@ -375,15 +375,15 @@ define(['jquery', 'moment', 'TYPO3/CMS/Backend/Icons', 'datatables', 'TYPO3/CMS/
case 'update':
LanguageModule.buttons.update.data('action', 'cancelLanguageUpdate');
LanguageModule.buttons.cancel.removeClass('disabled');
- Icons.getIcon('spinner-circle-dark', Icons.sizes.small).done(function(icons) {
- LanguageModule.buttons.update.find('span.icon').replaceWith(icons['spinner-circle-dark']);
+ Icons.getIcon('spinner-circle-dark', Icons.sizes.small).done(function(spinner) {
+ LanguageModule.buttons.update.find('span.icon').replaceWith(spinner);
});
break;
case 'cancel':
LanguageModule.buttons.update.data('action', 'updateActiveLanguages');
LanguageModule.buttons.cancel.addClass('disabled');
- Icons.getIcon('actions-system-extension-download', Icons.sizes.small).done(function(icons) {
- LanguageModule.buttons.update.find('span.icon').replaceWith(icons['actions-system-extension-download']);
+ Icons.getIcon('actions-system-extension-download', Icons.sizes.small).done(function(download) {
+ LanguageModule.buttons.update.find('span.icon').replaceWith(download);
});
break;
}
diff --git a/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js b/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
index dc033a4952e0d7f8f242a426c584a7131096a811..1cdcf4175288403017f8033ae7ca502593340f9b 100644
--- a/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
+++ b/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
@@ -53,8 +53,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
var $toolbarItemIcon = $(OpendocsMenu.options.toolbarIconSelector, OpendocsMenu.options.containerSelector),
$existingIcon = $toolbarItemIcon.clone();
- Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(icons) {
- $toolbarItemIcon.replaceWith(icons['spinner-circle-light']);
+ Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
+ $toolbarItemIcon.replaceWith(spinner);
});
$.ajax({
diff --git a/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js b/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js
index c169ebe8f2f93fe4fa057183fa2e8ab8192e0665..a58438dee730ffa361c4e6637bdc2efa1da40863 100644
--- a/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js
+++ b/typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js
@@ -37,11 +37,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Storage', 'TYPO3/CMS/Backend/Icons'], funct
$collapseIcon = $me.find('.collapseIcon'),
toggleIcon = isExpanded ? Recordlist.identifier.icons.expand : Recordlist.identifier.icons.collapse;
- Icons.getIcons([
- [Recordlist.identifier.icons.expand, Icons.sizes.small],
- [Recordlist.identifier.icons.collapse, Icons.sizes.small]
- ]).done(function(icons) {
- $collapseIcon.html(icons[toggleIcon]);
+ Icons.getIcon(toggleIcon, Icons.sizes.small).done(function(toggleIcon) {
+ $collapseIcon.html(toggleIcon);
});
// Store collapse state in UC