diff options
Diffstat (limited to 'core/search/js/search.js')
| -rw-r--r-- | core/search/js/search.js | 468 |
1 files changed, 93 insertions, 375 deletions
diff --git a/core/search/js/search.js b/core/search/js/search.js index b4175c49a3e..20d7f0f915f 100644 --- a/core/search/js/search.js +++ b/core/search/js/search.js @@ -1,421 +1,139 @@ -/** - * ownCloud - core +/* + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * - * This file is licensed under the Affero General Public License version 3 or - * later. See the COPYING file. + * @author John Molakvoæ <skjnldsv@protonmail.com> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. * - * @author Jörn Friedrich Dreyer <jfd@owncloud.com> - * @copyright Jörn Friedrich Dreyer 2014 */ +(function() { + 'use strict'; -(function () { /** * @class OCA.Search - * @classdesc * - * The Search class manages a search queries and their results + * The Search class manages a search + * + * This is a simple method. Register a new search with your function as references. + * The events will forward the search or reset directly * - * @param $searchBox container element with existing markup for the #searchbox form - * @param $searchResults container element for results und status message + * @param {function} searchCallback the function to run on a query search + * @param {function} resetCallback the function to run when the user reset the form */ - var Search = function($searchBox, $searchResults) { - this.initialize($searchBox, $searchResults); + var Search = function(searchCallback, resetCallback) { + this.initialize(searchCallback, resetCallback); }; + /** * @memberof OC */ Search.prototype = { - /** * Initialize the search box * - * @param $searchBox container element with existing markup for the #searchbox form - * @param $searchResults container element for results und status message - * @private + * @param {function} searchCallback the function to run on a query search + * @param {function} resetCallback the function to run when the user reset the form */ - initialize: function($searchBox, $searchResults) { + initialize: function(searchCallback, resetCallback) { var self = this; - /** - * contains closures that are called to filter the current content - */ - var filters = {}; - this.setFilter = function(type, filter) { - filters[type] = filter; - }; - this.hasFilter = function(type) { - return typeof filters[type] !== 'undefined'; - }; - this.getFilter = function(type) { - return filters[type]; - }; - - /** - * contains closures that are called to render search results - */ - var renderers = {}; - this.setRenderer = function(type, renderer) { - renderers[type] = renderer; - }; - this.hasRenderer = function(type) { - return typeof renderers[type] !== 'undefined'; - }; - this.getRenderer = function(type) { - return renderers[type]; - }; - - /** - * contains closures that are called when a search result has been clicked - */ - var handlers = {}; - this.setHandler = function(type, handler) { - handlers[type] = handler; - }; - this.hasHandler = function(type) { - return typeof handlers[type] !== 'undefined'; - }; - this.getHandler = function(type) { - return handlers[type]; - }; - - var currentResult = -1; - var lastQuery = ''; - var lastInApps = []; - var lastPage = 0; - var lastSize = 30; - var lastResults = []; - var timeoutID = null; - - this.getLastQuery = function() { - return lastQuery; - }; - - /** - * Do a search query and display the results - * @param {string} query the search query - * @param inApps - * @param page - * @param size - */ - this.search = function(query, inApps, page, size) { - if (query) { - OC.addStyle('core/search','results'); - if (typeof page !== 'number') { - page = 1; - } - if (typeof size !== 'number') { - size = 30; - } - if (typeof inApps !== 'object') { - var currentApp = getCurrentApp(); - if(currentApp) { - inApps = [currentApp]; - } else { - inApps = []; - } - } - // prevent double pages - if ($searchResults && query === lastQuery && page === lastPage && size === lastSize) { - return; - } - window.clearTimeout(timeoutID); - timeoutID = window.setTimeout(function() { - lastQuery = query; - lastInApps = inApps; - lastPage = page; - lastSize = size; - - //show spinner - $searchResults.removeClass('hidden'); - $status.addClass('status'); - $status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading.gif" />'); - - // do the actual search query - $.getJSON(OC.generateUrl('core/search'), {query:query, inApps:inApps, page:page, size:size }, function(results) { - lastResults = results; - if (page === 1) { - showResults(results); - } else { - addResults(results); - } - }); - }, 500); - } - }; - - //TODO should be a core method, see https://github.com/owncloud/core/issues/12557 - function getCurrentApp() { - var content = document.getElementById('content'); - if (content) { - var classList = document.getElementById('content').className.split(/\s+/); - for (var i = 0; i < classList.length; i++) { - if (classList[i].indexOf('app-') === 0) { - return classList[i].substr(4); - } - } - } - return false; - } - - var $status = $searchResults.find('#status'); - // summaryAndStatusHeight is a constant - var summaryAndStatusHeight = 118; - - function isStatusOffScreen() { - return $searchResults.position() && - ($searchResults.position().top + summaryAndStatusHeight > window.innerHeight); - } - - function placeStatus() { - if (isStatusOffScreen()) { - $status.addClass('fixed'); - } else { - $status.removeClass('fixed'); - } + if (typeof searchCallback !== 'function') { + throw 'searchCallback must be a function'; } - function showResults(results) { - lastResults = results; - $searchResults.find('tr.result').remove(); - $searchResults.removeClass('hidden'); - addResults(results); + if (typeof resetCallback !== 'function') { + throw 'resetCallback must be a function'; } - function addResults(results) { - var $template = $searchResults.find('tr.template'); - jQuery.each(results, function (i, result) { - var $row = $template.clone(); - $row.removeClass('template'); - $row.addClass('result'); - - $row.data('result', result); - - // generic results only have four attributes - $row.find('td.info div.name').text(result.name); - $row.find('td.info a').attr('href', result.link); - /** - * Give plugins the ability to customize the search results. see result.js for examples - */ - if (self.hasRenderer(result.type)) { - $row = self.getRenderer(result.type)($row, result); - } else { - // for backward compatibility add text div - $row.find('td.info div.name').addClass('result'); - $row.find('td.result div.name').after('<div class="text"></div>'); - $row.find('td.result div.text').text(result.name); - if (OC.search.customResults && OC.search.customResults[result.type]) { - OC.search.customResults[result.type]($row, result); - } - } - if ($row) { - $searchResults.find('tbody').append($row); - } - }); - var count = $searchResults.find('tr.result').length; - $status.data('count', count); - if (count === 0) { - $status.addClass('emptycontent').removeClass('status'); - $status.html(''); - $status.append($('<div>').addClass('icon-search')); - var error = t('core', 'No search results in other folders for {tag}{filter}{endtag}', {filter:lastQuery}); - $status.append($('<h2>').html(error.replace('{tag}', '<strong>').replace('{endtag}', '</strong>'))); - } else { - $status.removeClass('emptycontent').addClass('status'); - $status.text(n('core', '{count} search result in another folder', '{count} search results in other folders', count, {count:count})); - } - } - function renderCurrent() { - var result = $searchResults.find('tr.result')[currentResult]; - if (result) { - var $result = $(result); - var currentOffset = $('#app-content').scrollTop(); - $('#app-content').animate({ - // Scrolling to the top of the new result - scrollTop: currentOffset + $result.offset().top - $result.height() * 2 - }, { - duration: 100 - }); - $searchResults.find('tr.result.current').removeClass('current'); - $result.addClass('current'); - } - } - this.hideResults = function() { - $searchResults.addClass('hidden'); - $searchResults.find('tr.result').remove(); - lastQuery = false; - }; - this.clear = function() { - self.hideResults(); - if(self.hasFilter(getCurrentApp())) { - self.getFilter(getCurrentApp())(''); - } - $searchBox.val(''); - $searchBox.blur(); - }; + this.searchCallback = searchCallback; + this.resetCallback = resetCallback; + console.debug('New search handler registered'); /** - * Event handler for when scrolling the list container. - * This appends/renders the next page of entries when reaching the bottom. + * Search */ - function onScroll() { - if ($searchResults && lastQuery !== false && lastResults.length > 0) { - var resultsBottom = $searchResults.offset().top + $searchResults.height(); - var containerBottom = $searchResults.offsetParent().offset().top + - $searchResults.offsetParent().height(); - if ( resultsBottom < containerBottom * 1.2 ) { - self.search(lastQuery, lastInApps, lastPage + 1); - } - placeStatus(); - } - } - - $('#app-content').on('scroll', _.bind(onScroll, this)); + this.search = function(event) { + event.preventDefault(); + var query = document.getElementById('searchbox').value; + self.searchCallback(query); + }; /** - * scrolls the search results to the top + * Reset form */ - function scrollToResults() { - setTimeout(function() { - if (isStatusOffScreen()) { - var newScrollTop = $('#app-content').prop('scrollHeight') - $searchResults.height(); - console.log('scrolling to ' + newScrollTop); - $('#app-content').animate({ - scrollTop: newScrollTop - }, { - duration: 100, - complete: function () { - scrollToResults(); - } - }); - } - }, 150); - } - - $('form.searchbox').submit(function(event) { + this.reset = function(event) { event.preventDefault(); - }); + document.getElementById('searchbox').value = ''; + self.resetCallback(); + }; - $searchBox.on('search', function () { - if($searchBox.val() === '') { - if(self.hasFilter(getCurrentApp())) { - self.getFilter(getCurrentApp())(''); - } - self.hideResults(); - } - }); - $searchBox.keyup(function(event) { - if (event.keyCode === 13) { //enter - if(currentResult > -1) { - var result = $searchResults.find('tr.result a')[currentResult]; - window.location = $(result).attr('href'); - } - } else if(event.keyCode === 38) { //up - if(currentResult > 0) { - currentResult--; - renderCurrent(); - } - } else if(event.keyCode === 40) { //down - if(lastResults.length > currentResult + 1){ - currentResult++; - renderCurrent(); - } - } else { - var query = $searchBox.val(); - if (lastQuery !== query) { - currentResult = -1; - if (query.length > 2) { - self.search(query); - } else { - self.hideResults(); - } - if(self.hasFilter(getCurrentApp())) { - self.getFilter(getCurrentApp())(query); - } - } + // Show search + document.getElementById('searchbox').style.display = 'block'; + + // Register input event + document + .getElementById('searchbox') + .addEventListener('input', _.debounce(this.search, 500), true); + document + .querySelector('form.searchbox') + .addEventListener('submit', _.debounce(this.search, 500), true); + + // Register reset + document + .querySelector('form.searchbox') + .addEventListener('reset', _.debounce(this.reset, 500), true); + + // Register esc key shortcut reset if focused + document.addEventListener('keyup', function(event) { + if (event.defaultPrevented) { + return; } - }); - $(document).keyup(function(event) { - if(event.keyCode === 27) { //esc - $searchBox.val(''); - if(self.hasFilter(getCurrentApp())) { - self.getFilter(getCurrentApp())(''); + + var key = event.key || event.keyCode; + if ( + document.getElementById('searchbox') === document.activeElement && + document.getElementById('searchbox').value === '' + ) { + if (key === 'Escape' || key === 'Esc' || key === 27) { + _.debounce(self.reset, 500); } - self.hideResults(); } }); - $(document).keydown(function(event) { - if ((event.ctrlKey || event.metaKey) && // Ctrl or Command (OSX) - !event.shiftKey && - event.keyCode === 70 && // F - self.hasFilter(getCurrentApp()) && // Search is enabled - !$searchBox.is(':focus') // if searchbox is already focused do nothing (fallback to browser default) - ) { - $searchBox.focus(); - $searchBox.select(); - event.preventDefault(); + // Register ctrl+F key shortcut to focus + document.addEventListener('keydown', function(event) { + if (event.defaultPrevented) { + return; } - }); - $searchResults.on('click', 'tr.result', function (event) { - var $row = $(this); - var item = $row.data('result'); - if(self.hasHandler(item.type)){ - var result = self.getHandler(item.type)($row, item, event); - $searchBox.val(''); - if(self.hasFilter(getCurrentApp())) { - self.getFilter(getCurrentApp())(''); + var key = event.key || event.keyCode; + if (document.getElementById('searchbox') !== document.activeElement) { + if ( + (event.ctrlKey || event.metaKey) && // CTRL or mac CMD + !event.shiftKey && // Not SHIFT + (key === 'f' || key === 70) // F + ) { + event.preventDefault(); + document.getElementById('searchbox').focus(); + document.getElementById('searchbox').select(); } - self.hideResults(); - return result; } }); - $searchResults.on('click', '#status', function (event) { - event.preventDefault(); - scrollToResults(); - return false; - }); - placeStatus(); - - OC.Plugins.attach('OCA.Search', this); - - // hide search file if search is not enabled - if(self.hasFilter(getCurrentApp())) { - return; - } - if ($searchResults.length === 0) { - $searchBox.hide(); - } } }; + OCA.Search = Search; })(); - -$(document).ready(function() { - var $searchResults = $('#searchresults'); - if ($searchResults.length > 0) { - $searchResults.addClass('hidden'); - $('#app-content') - .find('.viewcontainer').css('min-height', 'initial'); - $searchResults.load(OC.webroot + '/core/search/templates/part.results.html', function () { - OC.Search = new OCA.Search($('#searchbox'), $('#searchresults')); - }); - } else { - _.defer(function() { - OC.Search = new OCA.Search($('#searchbox'), $('#searchresults')); - }); - } - $('#searchbox + .icon-close-white').click(function() { - OC.Search.clear(); - $('#searchbox').focus(); - }); -}); - -/** - * @deprecated use get/setRenderer() instead - */ -OC.search.customResults = {}; -/** - * @deprecated use get/setRenderer() instead - */ -OC.search.resultTypes = {}; |