e604abc037bc4ea0b7d33160b99a717b9c1a2237
[moodle.git] / contentbank / amd / src / search.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * Search methods for finding contents in the content bank.
18  *
19  * @module     core_contentbank/search
20  * @package    core_contentbank
21  * @copyright  2020 Sara Arjona <sara@moodle.com>
22  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
23  */
25 import $ from 'jquery';
26 import selectors from 'core_contentbank/selectors';
27 import {get_string as getString} from 'core/str';
28 import Pending from 'core/pending';
29 import {debounce} from 'core/utils';
31 /**
32  * Set up the search.
33  *
34  * @method init
35  */
36 export const init = () => {
37     const pendingPromise = new Pending();
39     const root = $(selectors.regions.contentbank);
40     registerListenerEvents(root);
42     pendingPromise.resolve();
43 };
45 /**
46  * Register contentbank search related event listeners.
47  *
48  * @method registerListenerEvents
49  * @param {Object} root The root element for the contentbank.
50  */
51 const registerListenerEvents = (root) => {
53     const searchInput = root.find(selectors.elements.searchinput)[0];
55     root.on('click', selectors.actions.search, function(e) {
56         e.preventDefault();
57         toggleSearchResultsView(root, searchInput.value);
58     });
60     root.on('click', selectors.actions.clearSearch, function(e) {
61         e.preventDefault();
62         searchInput.value = "";
63         searchInput.focus();
64         toggleSearchResultsView(root, searchInput.value);
65     });
67     // The search input is also triggered.
68     searchInput.addEventListener('input', debounce(() => {
69         // Display the search results.
70         toggleSearchResultsView(root, searchInput.value);
71     }, 300));
73 };
75 /**
76  * Toggle (display/hide) the search results depending on the value of the search query.
77  *
78  * @method toggleSearchResultsView
79  * @param {HTMLElement} body The root element for the contentbank.
80  * @param {String} searchQuery The search query.
81  */
82 const toggleSearchResultsView = async(body, searchQuery) => {
83     const clearSearchButton = body.find(selectors.elements.clearsearch)[0];
84     const searchIcon = body.find(selectors.elements.searchicon)[0];
86     const navbarBreadcrumb = body.find(selectors.elements.cbnavbarbreadcrumb)[0];
87     const navbarTotal = body.find(selectors.elements.cbnavbartotalsearch)[0];
88     // Update the results.
89     const filteredContents = filterContents(body, searchQuery);
90     if (searchQuery.length > 0) {
91         // As the search query is present, search results should be displayed.
93         // Display the "clear" search button in the activity chooser search bar.
94         searchIcon.classList.add('d-none');
95         clearSearchButton.classList.remove('d-none');
97         // Change the cb-navbar to display total items found.
98         navbarBreadcrumb.classList.add('d-none');
99         navbarTotal.innerHTML = await getString('itemsfound', 'core_contentbank', filteredContents.length);
100         navbarTotal.classList.remove('d-none');
101     } else {
102         // As search query is not present, the search results should be removed.
104         // Hide the "clear" search button in the activity chooser search bar.
105         clearSearchButton.classList.add('d-none');
106         searchIcon.classList.remove('d-none');
108         // Display again the breadcrumb in the navbar.
109         navbarBreadcrumb.classList.remove('d-none');
110         navbarTotal.classList.add('d-none');
111     }
112 };
114 /**
115  * Return the list of contents which have a name that matches the given search term.
116  *
117  * @method filterContents
118  * @param {HTMLElement} body The root element for the contentbank.
119  * @param {String} searchTerm The search term to match.
120  * @return {Array}
121  */
122 const filterContents = (body, searchTerm) => {
123     const contents = Array.from(body.find(selectors.elements.listitem));
124     const searchResults = [];
125     contents.forEach((content) => {
126         const contentName = content.getAttribute('data-name');
127         if (searchTerm === '' || contentName.toLowerCase().includes(searchTerm.toLowerCase())) {
128             // The content matches the search criteria so it should be displayed and hightlighted.
129             searchResults.push(content);
130             const contentNameElement = content.querySelector(selectors.regions.cbcontentname);
131             contentNameElement.innerHTML = highlight(contentName, searchTerm);
132             content.classList.remove('d-none');
133         } else {
134             content.classList.add('d-none');
135         }
136     });
138     return searchResults;
139 };
141 /**
142  * Highlight a given string in a text.
143  *
144  * @method highlight
145  * @param  {String} text The whole text.
146  * @param  {String} highlightText The piece of text to highlight.
147  * @return {String}
148  */
149 const highlight = (text, highlightText) => {
150     let result = text;
151     if (highlightText !== '') {
152         const pos = text.toLowerCase().indexOf(highlightText.toLowerCase());
153         if (pos > -1) {
154             result = text.substr(0, pos) + '<span class="matchtext">' + text.substr(pos, highlightText.length) + '</span>' +
155                 text.substr(pos + highlightText.length);
156         }
157     }
159     return result;
160 };