Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-17 16:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added tag autosuggestion when no input provided

Browse Source 
Shows the most popular tag names/values.
As requested on #121
This commit is contained in:
Dan Brown 2016-06-04 15:37:28 +01:00
parent 246d1621f5
commit eec9c05518
3 changed files with 72 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/Http/Controllers/TagController.php
View File

@ -55,7 +55,7 @@ class TagController extends Controller
*/ */
public function getNameSuggestions(Request $request) public function getNameSuggestions(Request $request)
{ {
$searchTerm = $request->get('search'); $searchTerm = $request->has('search') ? $request->get('search') : false;
$suggestions = $this->tagRepo->getNameSuggestions($searchTerm); $suggestions = $this->tagRepo->getNameSuggestions($searchTerm);
return response()->json($suggestions); return response()->json($suggestions);
} }
@ -66,7 +66,7 @@ class TagController extends Controller
*/ */
public function getValueSuggestions(Request $request) public function getValueSuggestions(Request $request)
{ {
$searchTerm = $request->get('search'); $searchTerm = $request->has('search') ? $request->get('search') : false;
$tagName = $request->has('name') ? $request->get('name') : false; $tagName = $request->has('name') ? $request->get('name') : false;
$suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName); $suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName);
return response()->json($suggestions); return response()->json($suggestions);

32
app/Repos/TagRepo.php
View File

@ -58,34 +58,48 @@ class TagRepo
/** /**
* Get tag name suggestions from scanning existing tag names. * Get tag name suggestions from scanning existing tag names.
* If no search term is given the 50 most popular tag names are provided.
* @param $searchTerm * @param $searchTerm
* @return array * @return array
*/ */
public function getNameSuggestions($searchTerm) public function getNameSuggestions($searchTerm = false)
{ {
if ($searchTerm === '') return []; $query = $this->tag->select('*', \DB::raw('count(*) as count'))->groupBy('name');
$query = $this->tag->where('name', 'LIKE', $searchTerm . '%')->groupBy('name')->orderBy('name', 'desc');
if ($searchTerm) {
$query = $query->where('name', 'LIKE', $searchTerm . '%')->orderBy('name', 'desc');
} else {
$query = $query->orderBy('count', 'desc')->take(50);
}
$query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type'); $query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
return $query->get(['name'])->pluck('name'); return $query->get(['name'])->pluck('name');
} }
/** /**
* Get tag value suggestions from scanning existing tag values. * Get tag value suggestions from scanning existing tag values.
* If no search is given the 50 most popular values are provided.
* Passing a tagName will only find values for a tags with a particular name.
* @param $searchTerm * @param $searchTerm
* @param $tagName * @param $tagName
* @return array * @return array
*/ */
public function getValueSuggestions($searchTerm, $tagName = false) public function getValueSuggestions($searchTerm = false, $tagName = false)
{ {
if ($searchTerm === '') return []; $query = $this->tag->select('*', \DB::raw('count(*) as count'))->groupBy('value');
$query = $this->tag->where('value', 'LIKE', $searchTerm . '%')->groupBy('value')->orderBy('value', 'desc');
if ($tagName !== false) { if ($searchTerm) {
$query = $query->where('name', '=', $tagName); $query = $query->where('value', 'LIKE', $searchTerm . '%')->orderBy('value', 'desc');
} else {
$query = $query->orderBy('count', 'desc')->take(50);
} }
if ($tagName !== false) $query = $query->where('name', '=', $tagName);
$query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type'); $query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
return $query->get(['value'])->pluck('value'); return $query->get(['value'])->pluck('value');
} }
/** /**
* Save an array of tags to an entity * Save an array of tags to an entity
* @param Entity $entity * @param Entity $entity

92
resources/assets/js/directives.js
View File

@ -166,7 +166,7 @@ module.exports = function (ngApp, events) {
}; };
}]); }]);
ngApp.directive('tinymce', ['$timeout', function($timeout) { ngApp.directive('tinymce', ['$timeout', function ($timeout) {
return { return {
restrict: 'A', restrict: 'A',
scope: { scope: {
@ -204,8 +204,8 @@ module.exports = function (ngApp, events) {
scope.tinymce.extraSetups.push(tinyMceSetup); scope.tinymce.extraSetups.push(tinyMceSetup);
// Custom tinyMCE plugins // Custom tinyMCE plugins
tinymce.PluginManager.add('customhr', function(editor) { tinymce.PluginManager.add('customhr', function (editor) {
editor.addCommand('InsertHorizontalRule', function() { editor.addCommand('InsertHorizontalRule', function () {
var hrElem = document.createElement('hr'); var hrElem = document.createElement('hr');
var cNode = editor.selection.getNode(); var cNode = editor.selection.getNode();
var parentNode = cNode.parentNode; var parentNode = cNode.parentNode;
@ -231,7 +231,7 @@ module.exports = function (ngApp, events) {
} }
}]); }]);
ngApp.directive('markdownInput', ['$timeout', function($timeout) { ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
return { return {
restrict: 'A', restrict: 'A',
scope: { scope: {
@ -255,7 +255,7 @@ module.exports = function (ngApp, events) {
scope.$on('markdown-update', (event, value) => { scope.$on('markdown-update', (event, value) => {
element.val(value); element.val(value);
scope.mdModel= value; scope.mdModel = value;
scope.mdChange(markdown(value)); scope.mdChange(markdown(value));
}); });
@ -263,7 +263,7 @@ module.exports = function (ngApp, events) {
} }
}]); }]);
ngApp.directive('markdownEditor', ['$timeout', function($timeout) { ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
return { return {
restrict: 'A', restrict: 'A',
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
@ -303,7 +303,7 @@ module.exports = function (ngApp, events) {
if (now - lastScroll > scrollDebounceTime) { if (now - lastScroll > scrollDebounceTime) {
setScrollHeights() setScrollHeights()
} }
let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight)); let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent; let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
display.scrollTop(displayScrollY); display.scrollTop(displayScrollY);
lastScroll = now; lastScroll = now;
@ -341,11 +341,11 @@ module.exports = function (ngApp, events) {
} }
} }
}]); }]);
ngApp.directive('toolbox', [function() { ngApp.directive('toolbox', [function () {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs) { link: function (scope, elem, attrs) {
// Get common elements // Get common elements
const $buttons = elem.find('[tab-button]'); const $buttons = elem.find('[tab-button]');
@ -356,7 +356,7 @@ module.exports = function (ngApp, events) {
$toggle.click((e) => { $toggle.click((e) => {
elem.toggleClass('open'); elem.toggleClass('open');
}); });
// Set an active tab/content by name // Set an active tab/content by name
function setActive(tabName, openToolbox) { function setActive(tabName, openToolbox) {
$buttons.removeClass('active'); $buttons.removeClass('active');
@ -370,7 +370,7 @@ module.exports = function (ngApp, events) {
setActive($content.first().attr('tab-content'), false); setActive($content.first().attr('tab-content'), false);
// Handle tab button click // Handle tab button click
$buttons.click(function(e) { $buttons.click(function (e) {
let name = $(this).attr('tab-button'); let name = $(this).attr('tab-button');
setActive(name, true); setActive(name, true);
}); });
@ -378,11 +378,11 @@ module.exports = function (ngApp, events) {
} }
}]); }]);
ngApp.directive('tagAutosuggestions', ['$http', function($http) { ngApp.directive('tagAutosuggestions', ['$http', function ($http) {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs) { link: function (scope, elem, attrs) {
// Local storage for quick caching. // Local storage for quick caching.
const localCache = {}; const localCache = {};
@ -399,49 +399,49 @@ module.exports = function (ngApp, events) {
let active = 0; let active = 0;
// Listen to input events on autosuggest fields // Listen to input events on autosuggest fields
elem.on('input', '[autosuggest]', function(event) { elem.on('input focus', '[autosuggest]', function (event) {
let $input = $(this); let $input = $(this);
let val = $input.val(); let val = $input.val();
let url = $input.attr('autosuggest'); let url = $input.attr('autosuggest');
let type = $input.attr('autosuggest-type'); let type = $input.attr('autosuggest-type');
// No suggestions until at least 3 chars
if (val.length < 3) {
if (isShowing) {
$suggestionBox.hide();
isShowing = false;
}
return;
}
// Add name param to request if for a value // Add name param to request if for a value
if (type.toLowerCase() === 'value') { if (type.toLowerCase() === 'value') {
let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first(); let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
let nameVal = $nameInput.val(); let nameVal = $nameInput.val();
if (nameVal === '') return; if (nameVal !== '') {
url += '?name=' + encodeURIComponent(nameVal); url += '?name=' + encodeURIComponent(nameVal);
console.log(url); }
} }
let suggestionPromise = getSuggestions(val.slice(0, 3), url); let suggestionPromise = getSuggestions(val.slice(0, 3), url);
suggestionPromise.then(suggestions => { suggestionPromise.then(suggestions => {
if (val.length > 2) { if (val.length === 0) {
suggestions = suggestions.filter(item => { displaySuggestions($input, suggestions.slice(0, 6));
return item.toLowerCase().indexOf(val.toLowerCase()) !== -1; } else {
}).slice(0, 4); suggestions = suggestions.filter(item => {
displaySuggestions($input, suggestions); return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
} }).slice(0, 4);
displaySuggestions($input, suggestions);
}
}); });
}); });
// Hide autosuggestions when input loses focus. // Hide autosuggestions when input loses focus.
// Slight delay to allow clicks. // Slight delay to allow clicks.
elem.on('blur', '[autosuggest]', function(event) { let lastFocusTime = 0;
elem.on('blur', '[autosuggest]', function (event) {
let startTime = Date.now();
setTimeout(() => { setTimeout(() => {
$suggestionBox.hide(); if (lastFocusTime < startTime) {
isShowing = false; $suggestionBox.hide();
isShowing = false;
}
}, 200) }, 200)
}); });
elem.on('focus', '[autosuggest]', function (event) {
lastFocusTime = Date.now();
});
elem.on('keydown', '[autosuggest]', function (event) { elem.on('keydown', '[autosuggest]', function (event) {
if (!isShowing) return; if (!isShowing) return;
@ -451,12 +451,12 @@ module.exports = function (ngApp, events) {
// Down arrow // Down arrow
if (event.keyCode === 40) { if (event.keyCode === 40) {
let newActive = (active === suggestCount-1) ? 0 : active + 1; let newActive = (active === suggestCount - 1) ? 0 : active + 1;
changeActiveTo(newActive, suggestionElems); changeActiveTo(newActive, suggestionElems);
} }
// Up arrow // Up arrow
else if (event.keyCode === 38) { else if (event.keyCode === 38) {
let newActive = (active === 0) ? suggestCount-1 : active - 1; let newActive = (active === 0) ? suggestCount - 1 : active - 1;
changeActiveTo(newActive, suggestionElems); changeActiveTo(newActive, suggestionElems);
} }
// Enter or tab key // Enter or tab key
@ -482,6 +482,7 @@ module.exports = function (ngApp, events) {
// Display suggestions on a field // Display suggestions on a field
let prevSuggestions = []; let prevSuggestions = [];
function displaySuggestions($input, suggestions) { function displaySuggestions($input, suggestions) {
// Hide if no suggestions // Hide if no suggestions
@ -518,7 +519,8 @@ module.exports = function (ngApp, events) {
if (i === 0) { if (i === 0) {
suggestion.className = 'active' suggestion.className = 'active'
active = 0; active = 0;
}; }
;
$suggestionBox[0].appendChild(suggestion); $suggestionBox[0].appendChild(suggestion);
} }
@ -537,17 +539,17 @@ module.exports = function (ngApp, events) {
// Get suggestions & cache // Get suggestions & cache
function getSuggestions(input, url) { function getSuggestions(input, url) {
let hasQuery = url.indexOf('?') !== -1; let hasQuery = url.indexOf('?') !== -1;
let searchUrl = url + (hasQuery?'&':'?') + 'search=' + encodeURIComponent(input); let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
// Get from local cache if exists // Get from local cache if exists
if (localCache[searchUrl]) { if (typeof localCache[searchUrl] !== 'undefined') {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolve(localCache[input]); resolve(localCache[searchUrl]);
}); });
} }
return $http.get(searchUrl).then((response) => { return $http.get(searchUrl).then(response => {
localCache[input] = response.data; localCache[searchUrl] = response.data;
return response.data; return response.data;
}); });
} }