343cc2200cc9cee6f7780ccb642f2d68824a47b8
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / LiveSearch.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Module: TYPO3/CMS/Backend/LiveSearch
16 * Global search to deal with everything in the backend that is search-related
17 * @exports TYPO3/CMS/Backend/LiveSearch
18 */
19 define([
20 'jquery',
21 'TYPO3/CMS/Backend/Viewport',
22 'TYPO3/CMS/Backend/Icons',
23 'jquery/autocomplete',
24 'TYPO3/CMS/Backend/jquery.clearable'
25 ], function($, Viewport, Icons) {
26 'use strict';
27
28 var containerSelector = '#typo3-cms-backend-backend-toolbaritems-livesearchtoolbaritem';
29 var toolbarItem = '.t3js-toolbar-item-search';
30 var dropdownToggle = '.t3js-toolbar-search-dropdowntoggle';
31 var searchFieldSelector = '.t3js-topbar-navigation-search-field';
32 var formSelector = '.t3js-topbar-navigation-search';
33 var url = TYPO3.settings.ajaxUrls['livesearch'];
34
35 Viewport.Topbar.Toolbar.registerEvent(function() {
36 $(searchFieldSelector).autocomplete({
37 // ajax options
38 serviceUrl: url,
39 paramName: 'q',
40 dataType: 'json',
41 minChars: 2,
42 width: '100%',
43 groupBy: 'typeLabel',
44 containerClass: toolbarItem.substr(1, toolbarItem.length),
45 appendTo: containerSelector + ' .dropdown-menu',
46 forceFixPosition: false,
47 preserveInput: true,
48 showNoSuggestionNotice: true,
49 triggerSelectOnValidInput: false,
50 preventBadQueries: false,
51 noSuggestionNotice: '<h3 class="dropdown-headline">' + TYPO3.lang['liveSearch_listEmptyText'] + '</h3>'
52 + '<p>' + TYPO3.lang['liveSearch_helpTitle'] + '</p>'
53 + '<hr>'
54 + '<p>' + TYPO3.lang['liveSearch_helpDescription'] + '<br>' + TYPO3.lang['liveSearch_helpDescriptionPages'] + '</p>',
55 // put the AJAX results in the right format
56 transformResult: function(response) {
57 return {
58 suggestions: $.map(response, function(dataItem) {
59 return {value: dataItem.title, data: dataItem};
60 })
61 };
62 },
63 formatGroup: function(suggestion, category, i) {
64 var html = '';
65 // add a divider if it's not the first group
66 if (i > 0) {
67 html = '<hr>';
68 }
69 return html + '<h3 class="dropdown-headline">' + category + '</h3>';
70 },
71 // Rendering of each item
72 formatResult: function(suggestion, value, i) {
73 return ''
74 + '<div class="dropdown-table">'
75 + '<div class="dropdown-table-row">'
76 + '<div class="dropdown-table-column dropdown-table-icon">' + suggestion.data.iconHTML + '</div>'
77 + '<div class="dropdown-table-column dropdown-table-title">'
78 + '<a class="dropdown-table-title-ellipsis dropdown-list-link" href="#" data-pageid="' + suggestion.data.pageId + '" data-target="' + suggestion.data.editLink + '">'
79 + suggestion.data.title
80 + '</a>'
81 + '</div>'
82 + '</div>'
83 + '</div>'
84 + '';
85 },
86 onSearchStart: function() {
87 if (!$(toolbarItem).hasClass('loading')) {
88 $(toolbarItem).addClass('loading');
89 Icons.getIcon('spinner-circle-light', Icons.sizes.small, '', 'default', 'inline').done(function(markup) {
90 $(toolbarItem).find('.icon-apps-toolbar-menu-search').replaceWith(markup)
91 });
92 }
93 },
94 onSearchComplete: function(query, suggestions) {
95 if (!$(toolbarItem).hasClass('open') && $(searchFieldSelector).val().length > 1) {
96 $(dropdownToggle).dropdown('toggle');
97 $(searchFieldSelector).focus();
98 }
99 if ($(toolbarItem).hasClass('loading')) {
100 $(toolbarItem).removeClass('loading');
101 Icons.getIcon('apps-toolbar-menu-search', Icons.sizes.small, '', 'default', 'inline').done(function(markup) {
102 $(toolbarItem).find('.icon-spinner-circle-light').replaceWith(markup)
103 });
104 }
105 },
106 beforeRender: function(container) {
107 container.append('<hr><div>' +
108 '<a href="#" class="btn btn-primary pull-right t3js-live-search-show-all">' +
109 TYPO3.lang['liveSearch_showAllResults'] +
110 '</a>' +
111 '</div>');
112 if (!$(toolbarItem).hasClass('open')) {
113 $(dropdownToggle).dropdown('toggle');
114 $(searchFieldSelector).focus();
115 }
116 },
117 onHide: function() {
118 if ($(toolbarItem).hasClass('open')) {
119 $(dropdownToggle).dropdown('toggle');
120 }
121 }
122 });
123
124 // set up the events
125 $(containerSelector).on('click', '.t3js-live-search-show-all', function(evt) {
126 evt.preventDefault();
127 TYPO3.ModuleMenu.App.showModule('web_list', 'id=0&search_levels=-1&search_field=' + encodeURIComponent($(searchFieldSelector).val()));
128 $(searchFieldSelector).val('').trigger('change');
129 });
130 if ($(searchFieldSelector).length) {
131 $('.' + $(searchFieldSelector).autocomplete().options.containerClass).on('click.autocomplete', '.dropdown-list-link', function(evt) {
132 evt.preventDefault();
133 jump($(this).data('target'), 'web_list', 'web', $(this).data('pageid'));
134 $(searchFieldSelector).val('').trigger('change');
135 });
136 }
137
138 // Unset height, width and z-index
139 $(toolbarItem).removeAttr('style');
140
141 $(searchFieldSelector).clearable({
142 onClear: function() {
143 if ($(toolbarItem).hasClass('open')) {
144 $(dropdownToggle).dropdown('toggle');
145 }
146 }
147 });
148
149 // Prevent submitting the search form
150 $(formSelector).submit(function(evt) {
151 evt.preventDefault();
152 });
153 });
154
155 });