From a615a4a298b45643841f1cb33e0e5fbf4c012163 Mon Sep 17 00:00:00 2001
From: Markus Sommer <markussom@posteo.de>
Date: Fri, 2 Jun 2017 16:10:47 +0200
Subject: [PATCH] [FEATURE] Add spinner on loading search result
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>
---
.../Resources/Public/JavaScript/LiveSearch.js | 17 ++++++++++++++++-
1 file changed, 16 insertions(+), 1 deletion(-)
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js b/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
index 1120d6f12edf..b5bc5cfd3e7a 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
@@ -19,9 +19,10 @@
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
--
GitLab