Merge pull request #9912 from nextcloud/search-standard
New search standard and user search
This commit is contained in:
commit
625bdf0e6c
|
@ -20,14 +20,14 @@ pipeline:
|
||||||
- ./build/vue-builds.sh ./settings/js/settings-vue.js
|
- ./build/vue-builds.sh ./settings/js/settings-vue.js
|
||||||
when:
|
when:
|
||||||
matrix:
|
matrix:
|
||||||
TESTS: vue-builds
|
TESTS: vue-build-settings
|
||||||
vue-build-updatenotification:
|
vue-build-updatenotification:
|
||||||
image: node
|
image: node
|
||||||
commands:
|
commands:
|
||||||
- ./build/vue-builds.sh ./apps/updatenotification/js/merged.js
|
- ./build/vue-builds.sh ./apps/updatenotification/js/merged.js
|
||||||
when:
|
when:
|
||||||
matrix:
|
matrix:
|
||||||
TESTS: vue-builds
|
TESTS: vue-build-updatenotification
|
||||||
checkers:
|
checkers:
|
||||||
image: nextcloudci/php7.0:php7.0-19
|
image: nextcloudci/php7.0:php7.0-19
|
||||||
commands:
|
commands:
|
||||||
|
@ -683,7 +683,8 @@ pipeline:
|
||||||
matrix:
|
matrix:
|
||||||
include:
|
include:
|
||||||
- TESTS: checkers
|
- TESTS: checkers
|
||||||
- TESTS: vue-builds
|
- TESTS: vue-build-settings
|
||||||
|
- TESTS: vue-build-updatenotification
|
||||||
- TESTS: nodb-codecov
|
- TESTS: nodb-codecov
|
||||||
ENABLE_REDIS: true
|
ENABLE_REDIS: true
|
||||||
- TESTS: db-codecov
|
- TESTS: db-codecov
|
||||||
|
|
|
@ -603,7 +603,7 @@ table tr.summary td {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
}
|
}
|
||||||
.summary .info {
|
.summary .info {
|
||||||
margin-left: 40px;
|
margin-left: 35px; /* td has padding of 15, col width is 50 */
|
||||||
}
|
}
|
||||||
|
|
||||||
table.dragshadow {
|
table.dragshadow {
|
||||||
|
|
|
@ -139,7 +139,7 @@
|
||||||
this.fileList = fileList;
|
this.fileList = fileList;
|
||||||
};
|
};
|
||||||
|
|
||||||
OC.Plugins.register('OCA.Search', this);
|
OC.Plugins.register('OCA.Search.Core', this);
|
||||||
},
|
},
|
||||||
attach: function(search) {
|
attach: function(search) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
|
@ -299,32 +299,35 @@ body {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#emptycontent, .emptycontent {
|
/* EMPTY CONTENT DISPLAY ------------------------------------------------------------ */
|
||||||
|
|
||||||
|
#emptycontent,
|
||||||
|
.emptycontent {
|
||||||
color: nc-lighten($color-main-text, 53%);
|
color: nc-lighten($color-main-text, 53%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 30vh;
|
margin-top: 30vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
#app-sidebar & {
|
||||||
|
|
||||||
#app-sidebar #emptycontent, #app-sidebar .emptycontent {
|
|
||||||
margin-top: 10vh;
|
margin-top: 10vh;
|
||||||
}
|
}
|
||||||
|
.emptycontent-search {
|
||||||
#emptycontent.emptycontent-search, .emptycontent.emptycontent-search {
|
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
h2 {
|
||||||
#emptycontent h2, .emptycontent h2 {
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
}
|
}
|
||||||
|
[class^='icon-'],
|
||||||
#emptycontent [class^='icon-'], .emptycontent [class^='icon-'], #emptycontent [class*=' icon-'], .emptycontent [class*=' icon-'] {
|
[class*='icon-'] {
|
||||||
background-size: 64px;
|
background-size: 64px;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
margin: 0 auto 15px;
|
margin: 0 auto 15px;
|
||||||
|
&:not([class^='icon-loading']),
|
||||||
|
&:not([class*='icon-loading']) {
|
||||||
opacity: .4;
|
opacity: .4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#00d400" stroke-width="2" fill="none"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#46ba61" stroke-width="2" fill="none"/></svg>
|
||||||
|
|
Before Width: | Height: | Size: 183 B After Width: | Height: | Size: 183 B |
|
@ -1,105 +0,0 @@
|
||||||
/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
|
|
||||||
This file is licensed under the Affero General Public License version 3 or later.
|
|
||||||
See the COPYING-README file. */
|
|
||||||
|
|
||||||
#searchresults {
|
|
||||||
background-color: #fff;
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding-top: 65px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: 75;
|
|
||||||
/* account for margin-bottom in files list */
|
|
||||||
margin-top: -250px;
|
|
||||||
}
|
|
||||||
#searchresults.filter-empty {
|
|
||||||
/* remove whitespace on bottom when no search results, to fix layout */
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#searchresults * {
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults .status {
|
|
||||||
background-color: rgba(255, 255, 255, .85);
|
|
||||||
height: 12px;
|
|
||||||
padding: 28px 0 28px 56px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.has-selection:not(.hidden) ~ #searchresults .status {
|
|
||||||
padding-left: 105px;
|
|
||||||
}
|
|
||||||
#searchresults .status.fixed {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults .status .spinner {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
#searchresults table {
|
|
||||||
border-spacing:0;
|
|
||||||
table-layout:fixed;
|
|
||||||
top:0;
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults td {
|
|
||||||
padding: 5px 14px;
|
|
||||||
font-style: normal;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
#searchresults td.icon {
|
|
||||||
text-align: right;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 5px 0;
|
|
||||||
background-position: right center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.has-selection:not(.hidden) ~ #searchresults td.icon {
|
|
||||||
width: 91px;
|
|
||||||
background-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults tr.template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults .name,
|
|
||||||
#searchresults .text,
|
|
||||||
#searchresults .path {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
#searchresults .text {
|
|
||||||
white-space: normal;
|
|
||||||
color: #545454;
|
|
||||||
}
|
|
||||||
#searchresults .path {
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
#searchresults .text em {
|
|
||||||
color: #545454;
|
|
||||||
font-weight: bold;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults tr.result * {
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchresults tr.current {
|
|
||||||
background-color:#ddd;
|
|
||||||
}
|
|
|
@ -0,0 +1,102 @@
|
||||||
|
/*
|
||||||
|
* @copyright Copyright (c) 2018 Jan-Christoph Borchardt <hey@jancborchardt.net>
|
||||||
|
*
|
||||||
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
|
* @author Jan-Christoph Borchardt <hey@jancborchardt.net>
|
||||||
|
*
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
#searchresults {
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding-top: 51px; /* table row is 51px height */
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 75;
|
||||||
|
/* account for margin-bottom in files list */
|
||||||
|
margin-top: -250px;
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
table-layout: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
&.result {
|
||||||
|
border-bottom: 1px solid $color-border;
|
||||||
|
* {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&.current {
|
||||||
|
background-color: nc-darken($color-main-background, 3%);
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 5px 9px;
|
||||||
|
font-style: normal;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-bottom: none;
|
||||||
|
&.icon {
|
||||||
|
text-align: right;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 5px 0;
|
||||||
|
background-position: right center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.has-selection:not(.hidden) ~ &.icon {
|
||||||
|
width: 50px;
|
||||||
|
padding-left: 41px;
|
||||||
|
background-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.text,
|
||||||
|
.path {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
white-space: normal;
|
||||||
|
color: #545454;
|
||||||
|
}
|
||||||
|
.path {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.text em {
|
||||||
|
color: #545454;
|
||||||
|
font-weight: bold;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&.filter-empty {
|
||||||
|
/* remove whitespace on bottom when no search results, to fix layout */
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
.status.summary .info {
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||||
* later. See the COPYING file.
|
*
|
||||||
|
* @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
|
* @class OCA.Search
|
||||||
* @classdesc
|
|
||||||
*
|
*
|
||||||
* The Search class manages a search queries and their results
|
* The Search class manages a search
|
||||||
*
|
*
|
||||||
* @param $searchBox container element with existing markup for the #searchbox form
|
* This is a simple method. Register a new search with your function as references.
|
||||||
* @param $searchResults container element for results und status message
|
* The events will forward the search or reset directly
|
||||||
|
*
|
||||||
|
* @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) {
|
var Search = function(searchCallback, resetCallback) {
|
||||||
this.initialize($searchBox, $searchResults);
|
this.initialize(searchCallback, resetCallback);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof OC
|
* @memberof OC
|
||||||
*/
|
*/
|
||||||
Search.prototype = {
|
Search.prototype = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initialize the search box
|
* Initialize the search box
|
||||||
*
|
*
|
||||||
* @param $searchBox container element with existing markup for the #searchbox form
|
* @param {function} searchCallback the function to run on a query search
|
||||||
* @param $searchResults container element for results und status message
|
* @param {function} resetCallback the function to run when the user reset the form
|
||||||
* @private
|
|
||||||
*/
|
*/
|
||||||
initialize: function($searchBox, $searchResults) {
|
initialize: function(searchCallback, resetCallback) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
if (typeof searchCallback !== 'function') {
|
||||||
|
throw 'searchCallback must be a function';
|
||||||
|
}
|
||||||
|
if (typeof resetCallback !== 'function') {
|
||||||
|
throw 'resetCallback must be a function';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.searchCallback = searchCallback;
|
||||||
|
this.resetCallback = resetCallback;
|
||||||
|
console.debug('New search handler registered');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* contains closures that are called to filter the current content
|
* Search
|
||||||
*/
|
*/
|
||||||
var filters = {};
|
this.search = function(event) {
|
||||||
this.setFilter = function(type, filter) {
|
event.preventDefault();
|
||||||
filters[type] = filter;
|
var query = document.getElementById('searchbox').value;
|
||||||
};
|
self.searchCallback(query);
|
||||||
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
|
* Reset form
|
||||||
*/
|
*/
|
||||||
var renderers = {};
|
this.reset = function(event) {
|
||||||
this.setRenderer = function(type, renderer) {
|
event.preventDefault();
|
||||||
renderers[type] = renderer;
|
document.getElementById('searchbox').value = '';
|
||||||
};
|
self.resetCallback();
|
||||||
this.hasRenderer = function(type) {
|
|
||||||
return typeof renderers[type] !== 'undefined';
|
|
||||||
};
|
|
||||||
this.getRenderer = function(type) {
|
|
||||||
return renderers[type];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
// Show search
|
||||||
* contains closures that are called when a search result has been clicked
|
document.getElementById('searchbox').style.display = 'block';
|
||||||
*/
|
|
||||||
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;
|
// Register input event
|
||||||
var lastQuery = '';
|
document
|
||||||
var lastInApps = [];
|
.getElementById('searchbox')
|
||||||
var lastPage = 0;
|
.addEventListener('input', _.debounce(this.search, 500), true);
|
||||||
var lastSize = 30;
|
document
|
||||||
var lastResults = [];
|
.querySelector('form.searchbox')
|
||||||
var timeoutID = null;
|
.addEventListener('submit', _.debounce(this.search, 500), true);
|
||||||
|
|
||||||
this.getLastQuery = function() {
|
// Register reset
|
||||||
return lastQuery;
|
document
|
||||||
};
|
.querySelector('form.searchbox')
|
||||||
|
.addEventListener('reset', _.debounce(this.reset, 500), true);
|
||||||
|
|
||||||
/**
|
// Register esc key shortcut reset if focused
|
||||||
* Do a search query and display the results
|
document.addEventListener('keyup', function(event) {
|
||||||
* @param {string} query the search query
|
if (event.defaultPrevented) {
|
||||||
* @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;
|
return;
|
||||||
}
|
}
|
||||||
window.clearTimeout(timeoutID);
|
|
||||||
timeoutID = window.setTimeout(function() {
|
|
||||||
lastQuery = query;
|
|
||||||
lastInApps = inApps;
|
|
||||||
lastPage = page;
|
|
||||||
lastSize = size;
|
|
||||||
|
|
||||||
//show spinner
|
var key = event.key || event.keyCode;
|
||||||
$searchResults.removeClass('hidden');
|
if (
|
||||||
$status.addClass('status');
|
document.getElementById('searchbox') === document.activeElement &&
|
||||||
$status.html(t('core', 'Searching other places')+'<img class="spinner" alt="search in progress" src="'+OC.webroot+'/core/img/loading.gif" />');
|
document.getElementById('searchbox').value === ''
|
||||||
|
|
||||||
// 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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function showResults(results) {
|
|
||||||
lastResults = results;
|
|
||||||
$searchResults.find('tr.result').remove();
|
|
||||||
$searchResults.removeClass('hidden');
|
|
||||||
addResults(results);
|
|
||||||
}
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Event handler for when scrolling the list container.
|
|
||||||
* This appends/renders the next page of entries when reaching the bottom.
|
|
||||||
*/
|
|
||||||
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));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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();
|
|
||||||
});
|
|
||||||
|
|
||||||
$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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(document).keyup(function(event) {
|
|
||||||
if(event.keyCode === 27) { //esc
|
|
||||||
$searchBox.val('');
|
|
||||||
if(self.hasFilter(getCurrentApp())) {
|
|
||||||
self.getFilter(getCurrentApp())('');
|
|
||||||
}
|
|
||||||
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();
|
if (key === 'Escape' || key === 'Esc' || key === 27) {
|
||||||
$searchBox.select();
|
_.debounce(self.reset, 500);
|
||||||
event.preventDefault();
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$searchResults.on('click', 'tr.result', function (event) {
|
// Register ctrl+F key shortcut to focus
|
||||||
var $row = $(this);
|
document.addEventListener('keydown', function(event) {
|
||||||
var item = $row.data('result');
|
if (event.defaultPrevented) {
|
||||||
if(self.hasHandler(item.type)){
|
|
||||||
var result = self.getHandler(item.type)($row, item, event);
|
|
||||||
$searchBox.val('');
|
|
||||||
if(self.hasFilter(getCurrentApp())) {
|
|
||||||
self.getFilter(getCurrentApp())('');
|
|
||||||
}
|
|
||||||
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;
|
return;
|
||||||
}
|
}
|
||||||
if ($searchResults.length === 0) {
|
|
||||||
$searchBox.hide();
|
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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
OCA.Search = Search;
|
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 = {};
|
|
||||||
|
|
|
@ -0,0 +1,447 @@
|
||||||
|
/*
|
||||||
|
* @copyright Copyright (c) 2014 Jörn Friedrich Dreyer <jfd@owncloud.com>
|
||||||
|
*
|
||||||
|
* @author Jörn Friedrich Dreyer <jfd@owncloud.com>
|
||||||
|
* @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/>.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
/**
|
||||||
|
* @class OCA.Search.Core
|
||||||
|
* @classdesc
|
||||||
|
*
|
||||||
|
* The Search class manages a search queries and their results
|
||||||
|
*
|
||||||
|
* @param $searchBox container element with existing markup for the #searchbox form
|
||||||
|
* @param $searchResults container element for results und status message
|
||||||
|
*/
|
||||||
|
var Search = function($searchBox, $searchResults) {
|
||||||
|
this.initialize($searchBox, $searchResults);
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* @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
|
||||||
|
*/
|
||||||
|
initialize: function($searchBox, $searchResults) {
|
||||||
|
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) {
|
||||||
|
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 emptycontent');
|
||||||
|
$status.html('<div class="icon-loading"></div><h2>' + t('core', 'Searching other places') + '</h2>');
|
||||||
|
|
||||||
|
// 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showResults(results) {
|
||||||
|
lastResults = results;
|
||||||
|
$searchResults.find('tr.result').remove();
|
||||||
|
$searchResults.removeClass('hidden');
|
||||||
|
addResults(results);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 summary');
|
||||||
|
$status.text(n('core','{count} search result in another folder','{count} search results in other folders', count,{ count: count }));
|
||||||
|
$status.html('<span class="info">' + n( 'core', '{count} search result in another folder', '{count} search results in other folders', count, { count: count } ) + '</span>');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event handler for when scrolling the list container.
|
||||||
|
* This appends/renders the next page of entries when reaching the bottom.
|
||||||
|
*/
|
||||||
|
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));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
$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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$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())('');
|
||||||
|
}
|
||||||
|
self.hideResults();
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$searchResults.on('click', '#status', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
scrollToResults();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
placeStatus();
|
||||||
|
|
||||||
|
OC.Plugins.attach('OCA.Search.Core', this);
|
||||||
|
|
||||||
|
// Finally use default Search registration
|
||||||
|
return new OCA.Search(
|
||||||
|
// Search handler
|
||||||
|
function(query) {
|
||||||
|
if (lastQuery !== query) {
|
||||||
|
currentResult = -1;
|
||||||
|
if (query.length > 2) {
|
||||||
|
self.search(query);
|
||||||
|
} else {
|
||||||
|
self.hideResults();
|
||||||
|
}
|
||||||
|
if (self.hasFilter(getCurrentApp())) {
|
||||||
|
self.getFilter(getCurrentApp())(query);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Reset handler
|
||||||
|
function() {
|
||||||
|
if ($searchBox.val() === '') {
|
||||||
|
if (self.hasFilter(getCurrentApp())) {
|
||||||
|
self.getFilter(getCurrentApp())('');
|
||||||
|
}
|
||||||
|
self.hideResults();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
OCA.Search.Core = 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.Core(
|
||||||
|
$('#searchbox'),
|
||||||
|
$('#searchresults')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
_.defer(function() {
|
||||||
|
OC.Search = new OCA.Search.Core(
|
||||||
|
$('#searchbox'),
|
||||||
|
$('#searchresults')
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @deprecated use get/setRenderer() instead
|
||||||
|
*/
|
||||||
|
OC.search.customResults = {};
|
||||||
|
/**
|
||||||
|
* @deprecated use get/setRenderer() instead
|
||||||
|
*/
|
||||||
|
OC.search.resultTypes = {};
|
|
@ -1,4 +1,3 @@
|
||||||
<div id="status"></div>
|
|
||||||
<table>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr class="template">
|
<tr class="template">
|
||||||
|
@ -11,3 +10,4 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div id="status"><span></span></div>
|
|
@ -101,7 +101,7 @@
|
||||||
<?php p($l->t('Search'));?>
|
<?php p($l->t('Search'));?>
|
||||||
</label>
|
</label>
|
||||||
<input id="searchbox" type="search" name="query"
|
<input id="searchbox" type="search" name="query"
|
||||||
value="" required
|
value="" required class="hidden"
|
||||||
autocomplete="off">
|
autocomplete="off">
|
||||||
<button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button>
|
<button class="icon-close-white" type="reset"><span class="hidden-visually"><?php p($l->t('Reset search'));?></span></button>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -115,7 +115,9 @@ class OC_Template extends \OC\Template\Base {
|
||||||
OC_Util::addVendorStyle('select2/select2', null, true);
|
OC_Util::addVendorStyle('select2/select2', null, true);
|
||||||
OC_Util::addStyle('jquery.ocdialog');
|
OC_Util::addStyle('jquery.ocdialog');
|
||||||
OC_Util::addTranslations("core", null, true);
|
OC_Util::addTranslations("core", null, true);
|
||||||
|
OC_Util::addStyle('search', 'results');
|
||||||
OC_Util::addScript('search', 'search', true);
|
OC_Util::addScript('search', 'search', true);
|
||||||
|
OC_Util::addScript('search', 'searchprovider');
|
||||||
OC_Util::addScript('merged-template-prepend', null, true);
|
OC_Util::addScript('merged-template-prepend', null, true);
|
||||||
OC_Util::addScript('jquery-ui-fixes');
|
OC_Util::addScript('jquery-ui-fixes');
|
||||||
OC_Util::addScript('files/fileinfo');
|
OC_Util::addScript('files/fileinfo');
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -157,6 +157,7 @@ export default {
|
||||||
defaultQuota: defaultQuota,
|
defaultQuota: defaultQuota,
|
||||||
loading: false,
|
loading: false,
|
||||||
scrolled: false,
|
scrolled: false,
|
||||||
|
searchQuery: '',
|
||||||
newUser: {
|
newUser: {
|
||||||
id:'',
|
id:'',
|
||||||
displayName:'',
|
displayName:'',
|
||||||
|
@ -186,6 +187,11 @@ export default {
|
||||||
* the watch won't be triggered. We need to initialize it.
|
* the watch won't be triggered. We need to initialize it.
|
||||||
*/
|
*/
|
||||||
this.setNewUserDefaultGroup(this.$route.params.selectedGroup);
|
this.setNewUserDefaultGroup(this.$route.params.selectedGroup);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register search
|
||||||
|
*/
|
||||||
|
this.userSearch = new OCA.Search(this.search, this.resetSearch);
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
settings() {
|
settings() {
|
||||||
|
@ -294,11 +300,22 @@ export default {
|
||||||
this.$store.dispatch('getUsers', {
|
this.$store.dispatch('getUsers', {
|
||||||
offset: this.usersOffset,
|
offset: this.usersOffset,
|
||||||
limit: this.usersLimit,
|
limit: this.usersLimit,
|
||||||
group: this.selectedGroup !== 'disabled' ? this.selectedGroup : ''
|
group: this.selectedGroup !== 'disabled' ? this.selectedGroup : '',
|
||||||
|
search: this.searchQuery
|
||||||
})
|
})
|
||||||
.then((response) => { response ? $state.loaded() : $state.complete() });
|
.then((response) => { response ? $state.loaded() : $state.complete() });
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/* SEARCH */
|
||||||
|
search(query) {
|
||||||
|
this.searchQuery = query;
|
||||||
|
this.$store.commit('resetUsers');
|
||||||
|
this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
|
||||||
|
},
|
||||||
|
resetSearch() {
|
||||||
|
this.search('');
|
||||||
|
},
|
||||||
|
|
||||||
resetForm() {
|
resetForm() {
|
||||||
// revert form to original state
|
// revert form to original state
|
||||||
Object.assign(this.newUser, this.$options.data.call(this).newUser);
|
Object.assign(this.newUser, this.$options.data.call(this).newUser);
|
||||||
|
|
|
@ -33,6 +33,7 @@ sync(store, router);
|
||||||
// bind to window
|
// bind to window
|
||||||
Vue.prototype.t = t;
|
Vue.prototype.t = t;
|
||||||
Vue.prototype.OC = OC;
|
Vue.prototype.OC = OC;
|
||||||
|
Vue.prototype.OCA = OCA;
|
||||||
Vue.prototype.oc_userconfig = oc_userconfig;
|
Vue.prototype.oc_userconfig = oc_userconfig;
|
||||||
Vue.prototype.oc_current_user = oc_current_user;
|
Vue.prototype.oc_current_user = oc_current_user;
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<app-navigation :menu="menu" />
|
<app-navigation :menu="menu" />
|
||||||
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
||||||
<app-list :category="category" :app="currentApp" :search="search"></app-list>
|
<app-list :category="category" :app="currentApp" :search="searchQuery"></app-list>
|
||||||
<div id="app-sidebar" v-if="id && currentApp">
|
<div id="app-sidebar" v-if="id && currentApp">
|
||||||
<app-details :category="category" :app="currentApp"></app-details>
|
<app-details :category="category" :app="currentApp"></app-details>
|
||||||
</div>
|
</div>
|
||||||
|
@ -63,8 +63,11 @@ export default {
|
||||||
appList,
|
appList,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setSearch(search) {
|
setSearch(query) {
|
||||||
this.search = search;
|
this.searchQuery = query;
|
||||||
|
},
|
||||||
|
resetSearch() {
|
||||||
|
this.setSearch('');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
|
@ -74,16 +77,14 @@ export default {
|
||||||
this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
|
this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// TODO: remove jQuery once we have a proper standardisation of the search
|
/**
|
||||||
$('#searchbox').show();
|
* Register search
|
||||||
let self = this;
|
*/
|
||||||
$('#searchbox').change(function(e) {
|
this.appSearch = new OCA.Search(this.setSearch, this.resetSearch);
|
||||||
self.setSearch($('#searchbox').val());
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
search: ''
|
searchQuery: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
Loading…
Reference in New Issue