From: Jörn Friedrich Dreyer Date: Wed, 17 Dec 2014 17:49:39 +0000 (+0100) Subject: move search results below filelist, show hint when results are off screen, use js... X-Git-Tag: v8.0.0alpha2~46^2~38 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=606f802b7be0cb6f2f6d99c547e432bb8cd27994;p=nextcloud-server.git move search results below filelist, show hint when results are off screen, use js plugin mechanism --- diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 6f31715499b..a75ad57c833 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -540,7 +540,7 @@ a.action>img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: .3; - height: 70px; + height: 60px; } .summary:hover, @@ -551,8 +551,6 @@ table tr.summary td { } .summary td { - padding-top: 20px; - padding-bottom: 150px; border-bottom: none; } .summary .info { diff --git a/apps/files/index.php b/apps/files/index.php index 64b49c3bf1f..767cb156ca2 100644 --- a/apps/files/index.php +++ b/apps/files/index.php @@ -38,6 +38,7 @@ OCP\Util::addscript('files', 'jquery-visibility'); OCP\Util::addscript('files', 'filesummary'); OCP\Util::addscript('files', 'breadcrumb'); OCP\Util::addscript('files', 'filelist'); +OCP\Util::addscript('files', 'search'); \OCP\Util::addScript('files', 'favoritesfilelist'); \OCP\Util::addScript('files', 'tagsplugin'); diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 09cb3d3287d..08017e3fef1 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1640,21 +1640,14 @@ }, filter:function(query) { this.$fileList.find('tr').each(function(i,e) { - if ($(e).data('file').toString().toLowerCase().indexOf(query.toLowerCase()) !== -1) { - $(e).addClass("searchresult"); - } else { - $(e).removeClass("searchresult"); + if ($(e).data('file').toString().toLowerCase().indexOf(query.toLowerCase()) === -1) { + $(e).hide(); } }); - //do not use scrollto to prevent removing searchresult css class - var first = this.$fileList.find('tr.searchresult').first(); - if (first.exists()) { - $(window).scrollTop(first.position().top); - } }, unfilter:function() { - this.$fileList.find('tr.searchresult').each(function(i,e) { - $(e).removeClass("searchresult"); + this.$fileList.find('tr:hidden').each(function(i,e) { + $(e).show(); }); }, /** diff --git a/apps/files/js/search.js b/apps/files/js/search.js new file mode 100644 index 00000000000..a2d3a261259 --- /dev/null +++ b/apps/files/js/search.js @@ -0,0 +1,118 @@ +/* + * Copyright (c) 2014 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ +(function() { + if (!OCA.Files) { + OCA.Files = {}; + } + OCA.Files.Search = { + attach: function(search) { + search.setFilter('files', function (query) { + if (query) { + if (OCA.Files) { + OCA.Files.App.fileList.filter(query); + } + } else { + if (OCA.Files) { + OCA.Files.App.fileList.unfilter(); + } + } + }); + + search.setRenderer('folder', OCA.Files.Search.renderFolderResult); + search.setRenderer('file', OCA.Files.Search.renderFileResult); + search.setRenderer('audio', OCA.Files.Search.renderAudioResult); + search.setRenderer('image', OCA.Files.Search.renderImageResult); + + search.setHandler('folder', OCA.Files.Search.handleFolderClick); + search.setHandler(['file', 'audio', 'image'], OCA.Files.Search.handleFileClick); + }, + renderFolderResult: function($row, result) { + /*render folder icon, show path beneath filename, + show size and last modified date on the right */ + // backward compatibility: + if (typeof result.mime !== 'undefined') { + result.mime_type = result.mime; + } else if (typeof result.mime_type !== 'undefined') { + result.mime = result.mime_type; + } + + var $pathDiv = $('
').text(result.path) + $row.find('td.info div.name').after($pathDiv).text(result.name); + + $row.find('td.result a').attr('href', result.link); + $row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')'); + }, + renderFileResult: function($row, result) { + /*render preview icon, show path beneath filename, + show size and last modified date on the right */ + // backward compatibility: + if (typeof result.mime !== 'undefined') { + result.mime_type = result.mime; + } else if (typeof result.mime_type !== 'undefined') { + result.mime = result.mime_type; + } + + $pathDiv = $('
').text(result.path); + $row.find('td.info div.name').after($pathDiv).text(result.name); + + $row.find('td.result a').attr('href', result.link); + + if (OCA.Files) { + OCA.Files.App.fileList.lazyLoadPreview({ + path: result.path, + mime: result.mime, + callback: function (url) { + $row.find('td.icon').css('background-image', 'url(' + url + ')'); + } + }); + } else { + // FIXME how to get mime icon if not in files app + var mimeicon = result.mime.replace('/', '-'); + $row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/' + mimeicon) + ')'); + var dir = OC.dirname(result.path); + if (dir === '') { + dir = '/'; + } + $row.find('td.info a').attr('href', + OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir: dir, scrollto: result.name}) + ); + } + }, + renderAudioResult: function($row, result) { + /*render preview icon, show path beneath filename, + show size and last modified date on the right + show Artist and Album */ + }, + renderImageResult: function($row, result) { + /*render preview icon, show path beneath filename, + show size and last modified date on the right + show width and height */ + }, + handleFolderClick: function($row, result, event) { + // open folder + if (OCA.Files) { + OCA.Files.App.fileList.changeDirectory(result.path); + return false; + } else { + return true; + } + }, + handleFileClick: function($row, result, event) { + if (OCA.Files) { + OCA.Files.App.fileList.changeDirectory(OC.dirname(result.path)); + OCA.Files.App.fileList.scrollTo(result.name); + return false; + } else { + return true; + } + } + }; +})(); +OC.Plugins.register('OCA.Search', OCA.Files.Search); diff --git a/core/js/js.js b/core/js/js.js index 9d38a8c77fe..8bcd546b420 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -309,7 +309,7 @@ var OC={ * @param {string} query the search query */ search: function (query) { - OC.Search.search(query, 0, 30); + OC.Search.search(query, null, 0, 30); }, /** * Dialog helper for jquery dialogs. @@ -601,41 +601,6 @@ OC.search.customResults = {}; */ OC.search.resultTypes = {}; -/** - * @namespace OC.Search - */ -OC.Search = { - /** - * contains closures that are called to format search results - */ - formatter:{}, - setFormatter: function(type, formatter) { - this.formatter[type] = formatter; - }, - hasFormatter: function(type) { - return typeof this.formatter[type] !== 'undefined'; - }, - getFormatter: function(type) { - return this.formatter[type]; - }, - /** - * contains closures that are called when a search result has been clicked - */ - handler:{}, - setHandler: function(type, handler) { - this.handler[type] = handler; - }, - hasHandler: function(type) { - return typeof this.handler[type] !== 'undefined'; - }, - getHandler: function(type) { - return this.handler[type]; - }, - currentResult:-1, - lastQuery:'', - lastResults:{} -}; - OC.addStyle.loaded=[]; OC.addScript.loaded=[]; diff --git a/lib/base.php b/lib/base.php index 551d0afbd78..34fa178ebf7 100644 --- a/lib/base.php +++ b/lib/base.php @@ -363,7 +363,6 @@ class OC { OC_Util::addScript("config"); //OC_Util::addScript( "multiselect" ); OC_Util::addScript('search', 'search'); - OC_Util::addScript('search', 'result'); OC_Util::addScript("oc-requesttoken"); OC_Util::addScript("apps"); OC_Util::addVendorScript('snapjs/dist/latest/snap'); diff --git a/lib/private/search.php b/lib/private/search.php index 22f92534cbd..a29a4762b68 100644 --- a/lib/private/search.php +++ b/lib/private/search.php @@ -40,17 +40,19 @@ class Search implements ISearch { * @return array An array of OC\Search\Result's */ public function search($query, array $inApps = array()) { - return $this->searchPaged($query, $inApps, 0, 0); + // old apps might assume they get all results, so we set size 0 + return $this->searchPaged($query, $inApps, 1, 0); } /** * Search all providers for $query * @param string $query - * @param int $page + * @param string[] $inApps optionally limit results to the given apps + * @param int $page pages start at page 1 * @param int $size, 0 = all * @return array An array of OC\Search\Result's */ - public function searchPaged($query, $page = 0, $size = 30) { + public function searchPaged($query, array $inApps = array(), $page = 1, $size = 30) { $this->initProviders(); $results = array(); foreach($this->providers as $provider) { @@ -63,7 +65,7 @@ class Search implements ISearch { } else if ($provider instanceof Provider) { $providerResults = $provider->search($query); if ($size > 0) { - $slicedResults = array_slice($providerResults, $page * $size, $size); + $slicedResults = array_slice($providerResults, ($page - 1) * $size, $size); $results = array_merge($results, $slicedResults); } else { $results = array_merge($results, $providerResults); diff --git a/lib/public/isearch.php b/lib/public/isearch.php index 84e450afe6f..fe58f202d66 100644 --- a/lib/public/isearch.php +++ b/lib/public/isearch.php @@ -41,11 +41,12 @@ interface ISearch { /** * Search all providers for $query * @param string $query - * @param int $page + * @param string[] $inApps optionally limit results to the given apps + * @param int $page pages start at page 1 * @param int $size * @return array An array of OCP\Search\Result's */ - public function searchPaged($query, $page = 0, $size = 30); + public function searchPaged($query, array $inApps = array(), $page = 1, $size = 30); /** * Register a new search provider to search with diff --git a/lib/public/search/pagedprovider.php b/lib/public/search/pagedprovider.php index 97da1dd2c85..10c36cfc483 100644 --- a/lib/public/search/pagedprovider.php +++ b/lib/public/search/pagedprovider.php @@ -44,15 +44,16 @@ abstract class PagedProvider extends Provider { * @return array An array of OCP\Search\Result's */ public function search($query) { - $this->searchPaged($query, 0, 0); + // old apps might assume they get all results, so we set size 0 + $this->searchPaged($query, 1, 0); } /** * Search for $query * @param string $query - * @param int $limit, 0 = unlimited - * @param int $offset + * @param int $page pages start at page 1 + * @param int $size, 0 = all * @return array An array of OCP\Search\Result's */ - abstract public function searchPaged($query, $limit, $offset); + abstract public function searchPaged($query, $page, $size); } diff --git a/search/ajax/search.php b/search/ajax/search.php index e26432d1eb2..5bd810aacfd 100644 --- a/search/ajax/search.php +++ b/search/ajax/search.php @@ -41,7 +41,7 @@ if (isset($_GET['inApps'])) { if (isset($_GET['page'])) { $page = (int)$_GET['page']; } else { - $page = 0; + $page = 1; } if (isset($_GET['size'])) { $size = (int)$_GET['size']; @@ -49,7 +49,7 @@ if (isset($_GET['size'])) { $size = 30; } if($query) { - $result = \OC::$server->getSearch()->search($query, $inApps, $page, $size); + $result = \OC::$server->getSearch()->searchPaged($query, $inApps, $page, $size); OC_JSON::encodedPrint($result); } else { diff --git a/search/css/results.css b/search/css/results.css index 5dbfa2bd50e..bf9a7871d17 100644 --- a/search/css/results.css +++ b/search/css/results.css @@ -6,9 +6,7 @@ background-color:#fff; overflow-x:hidden; overflow-y: auto; - position:fixed; text-overflow:ellipsis; - top:0; padding-top: 45px; height: 100%; box-sizing: border-box; @@ -18,6 +16,18 @@ box-sizing: content-box; } +#searchresults #status { + background-color:#ccc; + height: 24px; + padding: 17px 15px; +} +#searchresults #status.fixed { + position: fixed; + bottom: 0; + width: 100%; + z-index: 10; +} + #searchresults table { border-spacing:0; table-layout:fixed; diff --git a/search/js/result.js b/search/js/result.js deleted file mode 100644 index 217d66dc1e3..00000000000 --- a/search/js/result.js +++ /dev/null @@ -1,83 +0,0 @@ -/* - * Copyright (c) 2014 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -//FIXME move to files? -$(document).ready(function() { - // wait for other apps/extensions to register their event handlers and file actions - // in the "ready" clause - _.defer(function() { - OC.Search.setFormatter('file', function ($row, result) { - // backward compatibility: - if (typeof result.mime !== 'undefined') { - result.mime_type = result.mime; - } else if (typeof result.mime_type !== 'undefined') { - result.mime = result.mime_type; - } - - $pathDiv = $('
').text(result.path); - $row.find('td.info div.name').after($pathDiv).text(result.name); - - $row.find('td.result a').attr('href', result.link); - - if (OCA.Files) { - OCA.Files.App.fileList.lazyLoadPreview({ - path: result.path, - mime: result.mime, - callback: function (url) { - $row.find('td.icon').css('background-image', 'url(' + url + ')'); - } - }); - } else { - // FIXME how to get mime icon if not in files app - var mimeicon = result.mime.replace('/', '-'); - $row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/' + mimeicon) + ')'); - var dir = OC.dirname(result.path); - if (dir === '') { - dir = '/'; - } - $row.find('td.info a').attr('href', - OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir: dir, scrollto: result.name}) - ); - } - }); - OC.Search.setHandler('file', function ($row, result, event) { - if (OCA.Files) { - OCA.Files.App.fileList.changeDirectory(OC.dirname(result.path)); - OCA.Files.App.fileList.scrollTo(result.name); - return false; - } else { - return true; - } - }); - - OC.Search.setFormatter('folder', function ($row, result) { - // backward compatibility: - if (typeof result.mime !== 'undefined') { - result.mime_type = result.mime; - } else if (typeof result.mime_type !== 'undefined') { - result.mime = result.mime_type; - } - - var $pathDiv = $('
').text(result.path) - $row.find('td.info div.name').after($pathDiv).text(result.name); - - $row.find('td.result a').attr('href', result.link); - $row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')'); - }); - OC.Search.setHandler('folder', function ($row, result, event) { - if (OCA.Files) { - OCA.Files.App.fileList.changeDirectory(result.path); - return false; - } else { - return true; - } - }); - }); -}); diff --git a/search/js/search.js b/search/js/search.js index 7a6428bce33..8791b98cfdd 100644 --- a/search/js/search.js +++ b/search/js/search.js @@ -36,17 +36,31 @@ var that = this; /** - * contains closures that are called to format search results + * contains closures that are called to filter the current content */ - var formatters = {}; - this.setFormatter = function(type, formatter) { - formatters[type] = formatter; + var filters = {}; + this.setFilter = function(type, filter) { + filters[type] = filter; }; - this.hasFormatter = function(type) { - return typeof formatters[type] !== 'undefined'; + this.hasFilter = function(type) { + return typeof filters[type] !== 'undefined'; }; - this.getFormatter = function(type) { - return formatters[type]; + 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]; }; /** @@ -73,25 +87,33 @@ * Do a search query and display the results * @param {string} query the search query */ - this.search = _.debounce(function(query, page, size) { + this.search = _.debounce(function(query, inApps, page, size) { if(query) { OC.addStyle('search','results'); if (typeof page !== 'number') { - page = 0; + 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 (query === lastPage && page === lastPage && currentResult !== -1) { + if ($searchResults && query === lastQuery && page === lastPage&& size === lastSize) { return; } - $.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, page:page, size:size }, function(results) { - lastQuery = query; - lastPage = page; - lastSize = size; + lastQuery = query; + lastPage = page; + lastSize = size; + $.getJSON(OC.generateUrl('search/ajax/search.php'), {query:query, inApps:inApps, page:page, size:size }, function(results) { lastResults = results; - if (page === 0) { + if (page === 1) { showResults(results); } else { addResults(results); @@ -99,29 +121,69 @@ }); } }, 500); + + function getCurrentApp() { + 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 $searchResults = false; + var $wrapper = false; + var $status = false; + const summaryAndStatusHeight = 118; + function isStatusOffScreen() { + return $searchResults.position().top + summaryAndStatusHeight > window.innerHeight; + } + + function placeStatus() { + if (isStatusOffScreen()) { + $status.addClass('fixed'); + } else { + $status.removeClass('fixed'); + } + } function showResults(results) { if (results.length === 0) { return; } if (!$searchResults) { - var $parent = $('
'); - $('#app-content').append($parent); - $parent.load(OC.webroot + '/search/templates/part.results.html', function () { - $searchResults = $parent.find('#searchresults'); - $searchResults.click(function (event) { - that.hideResults(); - event.stopPropagation(); + $wrapper = $('
'); + $('#app-content') + .append($wrapper) + .find('.viewcontainer').css('min-height', 'initial'); + $wrapper.load(OC.webroot + '/search/templates/part.results.html', function () { + $searchResults = $wrapper.find('#searchresults'); + $searchResults.on('click', 'tr.result', function (event) { + var $row = $(this); + var item = $row.data('result'); + if(that.hasHandler(item.type)){ + var result = that.getHandler(item.type)($row, result, event); + that.hideResults(); + return result; + } + }); + $searchResults.on('click', '#status', function (event) { + event.preventDefault(); + scrollToResults(); + return false; }); $(document).click(function (event) { that.hideResults(); - if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system - FileList.unfilter(); + if(that.hasFilter(getCurrentApp())) { + that.getFilter(getCurrentApp())(''); } }); - $searchResults.on('scroll', _.bind(onScroll, this)); + $('#app-content').on('scroll', _.bind(onScroll, this)); lastResults = results; + $status = $searchResults.find('#status') + .text(t('search', '{count} Search results', {count:results.length}, results.length)); + placeStatus(); showResults(results); }); } else { @@ -147,8 +209,8 @@ /** * Give plugins the ability to customize the search results. see result.js for examples */ - if (that.hasFormatter(result.type)) { - that.getFormatter(result.type)($row, result); + if (that.hasRenderer(result.type)) { + that.getRenderer(result.type)($row, result); } else { // for backward compatibility add text div $row.find('td.info div.name').addClass('result'); @@ -166,7 +228,7 @@ if (result) { var $result = $(result); var currentOffset = $searchResults.scrollTop(); - $searchResults.animate({ + $('#app-content').animate({ // Scrolling to the top of the new result scrollTop: currentOffset + $result.offset().top - $result.height() * 2 }, { @@ -179,17 +241,10 @@ this.hideResults = function() { if ($searchResults) { $searchResults.hide(); - if ($searchBox.val().length > 2) { - $searchBox.val(''); - if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system - FileList.unfilter(); - } - } - if ($searchBox.val().length === 0) { - if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system - FileList.unfilter(); - } - } + $searchBox.val(''); + $wrapper.remove(); + $searchResults = false; + $wrapper = false; } }; @@ -212,16 +267,13 @@ } } else if(event.keyCode === 27) { //esc that.hideResults(); - if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system - FileList.unfilter(); - } } else { var query = $searchBox.val(); if (lastQuery !== query) { lastQuery = query; currentResult = -1; - if (FileList && typeof FileList.filter === 'function') { //TODO add hook system - FileList.filter(query); + if(that.hasFilter(getCurrentApp())) { + that.getFilter(getCurrentApp())(query); } if (query.length > 2) { that.search(query); @@ -239,14 +291,39 @@ * This appends/renders the next page of entries when reaching the bottom. */ function onScroll(e) { - if ( $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) { - that.search(lastQuery, lastPage + 1); + if ($searchResults) { + //if ( $searchResults && $searchResults.scrollTop() + $searchResults.height() > $searchResults.find('table').height() - 300 ) { + // that.search(lastQuery, lastPage + 1); + //} + placeStatus(); } } + /** + * scrolls the search results to the top + */ + 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) { event.preventDefault(); }); + + OC.Plugins.attach('OCA.Search', this); } }; OCA.Search = Search; @@ -257,10 +334,10 @@ $(document).ready(function() { }); /** - * @deprecated use get/setFormatter() instead + * @deprecated use get/setRenderer() instead */ OC.search.customResults = {}; /** - * @deprecated use get/setFormatter() instead + * @deprecated use get/setRenderer() instead */ OC.search.resultTypes = {}; \ No newline at end of file diff --git a/search/templates/part.results.html b/search/templates/part.results.html index 451df7b143f..d82a72c1199 100644 --- a/search/templates/part.results.html +++ b/search/templates/part.results.html @@ -1,5 +1,5 @@
- +
{message}