https://app.belegebox.de/core/search/js/search.js

1/*
2 * @copyright Copyright (c) 2018 John Molakvoæ <[email protected]>
3 *
4 * @author John Molakvoæ <[email protected]>
5 *
6 * @license GNU AGPL version 3 or any later version
7 *
8 * This program is free software: you can redistribute it and/or modify
9 * it under the terms of the GNU Affero General Public License as
10 * published by the Free Software Foundation, either version 3 of the
11 * License, or (at your option) any later version.
12 *
13 * This program is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16 * GNU Affero General Public License for more details.
17 *
18 * You should have received a copy of the GNU Affero General Public License
19 * along with this program. If not, see <http://www.gnu.org/licenses/>.
20 *
21 */
22(function() {
23	'use strict';
24
25	/**
26	 * @class Search
27	 * @memberOf OCA
28	 *
29	 * The Search class manages a search
30	 *
31	 * This is a simple method. Register a new search with your function as references.
32	 * The events will forward the search or reset directly
33	 *
34	 * @param {function} searchCallback the function to run on a query search
35	 * @param {function} resetCallback the function to run when the user reset the form
36	 */
37	var Search = function(searchCallback, resetCallback) {
38		this.initialize(searchCallback, resetCallback);
39	};
40
41	/**
42	 * @memberof OC
43	 */
44	Search.prototype = {
45		/**
46		 * Initialize the search box
47		 *
48		 * @param {function} searchCallback the function to run on a query search
49		 * @param {function} resetCallback the function to run when the user reset the form
50		 */
51		initialize: function(searchCallback, resetCallback) {
52
53			var self = this;
54
55			if (typeof searchCallback !== 'function') {
56				throw new Error('searchCallback must be a function');
57			}
58			if (typeof resetCallback !== 'function') {
59				throw new Error('resetCallback must be a function');
60			}
61			if (!document.getElementById('searchbox')) {
62				throw new Error('searchBox not available');
63			}
64
65			this.searchCallback = searchCallback;
66			this.resetCallback = resetCallback;
67			console.debug('New search handler registered');
68
69			/**
70			 * Search
71			 */
72			this.search = function(event) {
73				event.preventDefault();
74				var query = document.getElementById('searchbox').value;
75				self.searchCallback(query);
76			};
77
78			/**
79			 * Reset form
80			 */
81			this.reset = function(event) {
82				event.preventDefault();
83				document.getElementById('searchbox').value = '';
84				self.resetCallback();
85			};
86
87			// Show search
88			document.getElementById('searchbox').style.display = 'block';
89
90			// Register input event
91			document
92				.getElementById('searchbox')
93				.addEventListener('input', _.debounce(self.search, 500), true);
94			document
95				.querySelector('form.searchbox')
96				.addEventListener('submit', function(event) {
97					// Avoid form submit
98					event.preventDefault();
99					_.debounce(self.search, 500);
100				}, true);
101
102			// Register reset
103			document
104				.querySelector('form.searchbox')
105				.addEventListener('reset', _.debounce(self.reset, 500), true);
106
107			// Register esc key shortcut reset if focused
108			document.addEventListener('keyup', function(event) {
109				if (event.defaultPrevented) {
110					return;
111				}
112
113				var key = event.key || event.keyCode;
114				if (
115					document.getElementById('searchbox') === document.activeElement &&
116					document.getElementById('searchbox').value === ''
117				) {
118					if (key === 'Escape' || key === 'Esc' || key === 27) {
119						_.debounce(self.reset, 500);
120					}
121				}
122			});
123
124			// Register ctrl+F key shortcut to focus
125			document.addEventListener('keydown', function(event) {
126				if (event.defaultPrevented) {
127					return;
128				}
129
130				var key = event.key || event.keyCode;
131				if (document.getElementById('searchbox') !== document.activeElement) {
132					if (
133						(event.ctrlKey || event.metaKey) && // CTRL or mac CMD
134						!event.shiftKey &&					// Not SHIFT
135						(key === 'f' || key === 70)			// F
136					) {
137						event.preventDefault();
138						document.getElementById('searchbox').focus();
139						document.getElementById('searchbox').select();
140					}
141				}
142			});
143		}
144	};
145
146	OCA.Search = Search;
147})();