[FEATURE] Add spinner on loading search result 47/53047/2
authorMarkus Sommer <markussom@posteo.de>
Fri, 2 Jun 2017 14:10:47 +0000 (16:10 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Fri, 2 Jun 2017 14:51:29 +0000 (16:51 +0200)
Change-Id: I6137830f3ce6c272286161b39fe5c7e82754ce96
Resolves: #81313
Releases: master
Reviewed-on: https://review.typo3.org/53047
Reviewed-by: Johannes Goslar <jogo@kronberger-spiele.de>
Tested-by: Johannes Goslar <jogo@kronberger-spiele.de>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js

index 1120d6f..b5bc5cf 100644 (file)
 define([
        'jquery',
        'TYPO3/CMS/Backend/Viewport',
+       'TYPO3/CMS/Backend/Icons',
        'jquery/autocomplete',
        'TYPO3/CMS/Backend/jquery.clearable'
-], function ($, Viewport) {
+], function ($, Viewport, Icons) {
        'use strict';
 
        var containerSelector = '#typo3-cms-backend-backend-toolbaritems-livesearchtoolbaritem';
@@ -82,11 +83,25 @@ define([
                                        + '</div>'
                                        + '';
                        },
+                       onSearchStart: function () {
+                               if(!$(toolbarItem).hasClass('loading')) {
+                                       $(toolbarItem).addClass('loading');
+                                       Icons.getIcon('spinner-circle-light', Icons.sizes.small, '', 'default', 'inline').done(function (markup) {
+                                               $(toolbarItem).find('.icon-apps-toolbar-menu-search').replaceWith(markup)
+                                       });
+                               }
+                       },
                        onSearchComplete: function(query, suggestions) {
                                if (!$(toolbarItem).hasClass('open') && $(searchFieldSelector).val().length > 1) {
                                        $(dropdownToggle).dropdown('toggle');
                                        $(searchFieldSelector).focus();
                                }
+                               if ($(toolbarItem).hasClass('loading')) {
+                                       $(toolbarItem).removeClass('loading');
+                                       Icons.getIcon('apps-toolbar-menu-search', Icons.sizes.small, '', 'default', 'inline').done(function (markup) {
+                                               $(toolbarItem).find('.icon-spinner-circle-light').replaceWith(markup)
+                                       });
+                               }
                        },
                        beforeRender: function(container) {
                                // Unset height, width and z-index again, should be fixed by the plugin at a later point