[TASK] Drop faulty getIcons() method from "Icons" module 86/44186/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Tue, 20 Oct 2015 16:25:25 +0000 (18:25 +0200)
committerStefan Neufeind <typo3.neufeind@speedpartner.de>
Tue, 20 Oct 2015 22:04:36 +0000 (00:04 +0200)
The getIcons() implementation of the Icons RequireJS module is faulty and
leads to issues when fetching cached and uncached icons in the same
request. The method is dropped and all calls against that API are
adjusted.

As the API was introduced a week ago, this change is considered being
not breaking.

Resolves: #70881
Releases: master
Change-Id: I62932c48b1482767b3920afe8d320de3ab8623c7
Reviewed-on: https://review.typo3.org/44186
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Stefan Neufeind <typo3.neufeind@speedpartner.de>
Tested-by: Stefan Neufeind <typo3.neufeind@speedpartner.de>
typo3/sysext/backend/Resources/Public/JavaScript/Icons.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
typo3/sysext/core/Classes/Imaging/IconFactory.php
typo3/sysext/core/Documentation/Changelog/master/Feature-70583-IntroducedIconAPIInJavaScript.rst
typo3/sysext/lang/Resources/Public/JavaScript/LanguageModule.js
typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
typo3/sysext/recordlist/Resources/Public/JavaScript/Recordlist.js

index 8490d97..4867fdf 100644 (file)
@@ -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);
+                       }
+               });
        };
 
        /**
index cc9d47d..ad1a3bd 100644 (file)
@@ -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({
index 4c4bffc..688b0d7 100644 (file)
@@ -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({
index 8461cc5..c4e2b0c 100644 (file)
@@ -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({
index 2349bc3..49a1385 100644 (file)
@@ -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;
     }
 
index 8f72562..4cafd57 100644 (file)
@@ -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);
        });
index 4842af3..12ef8f9 100644 (file)
@@ -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;
                }
index dc033a4..1cdcf41 100644 (file)
@@ -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({
index c169ebe..a58438d 100644 (file)
@@ -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