valitydev/wazuh-kibana-app
14
0
Fork 0
mirror of https://github.com/valitydev/wazuh-kibana-app.git synced 2024-11-06 18:05:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Navigate across autocomplete with ketyboard arrow keys

Browse Source
This commit is contained in:
JuanCarlos 2018-12-04 12:08:27 +01:00
parent fa8804bfcb
commit 395489c996
2 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/directives/wz-tag-filter/wz-tag-filter.html
View File

@ -3,11 +3,12 @@
<div class='wz-tags' ng-class='{focused: hasFocus}'>
<ul class='tag-list'>
<li ng-repeat='group in groupedTagList track by $index'>
<div ng-class="{grouped: group.length > 1}">
<div ng-class='{grouped: group.length > 1}'>
<div ng-repeat='tag in group track by $index'>
<div class='wz-tag-item'>
<span class='wz-tag-remove-button fa' ng-class="(tag.type === 'filter') ? 'fa-filter' : 'fa-search'"></span>
<span class=''>{{tag.value.name}} <span ng-show='tag.type === "filter"'>: {{tag.value.value}}</span></span>
<span class='wz-tag-remove-button fa' ng-class='(tag.type === "filter") ? "fa-filter" : "fa-search"'></span>
<span class=''>{{tag.value.name}} <span ng-show='tag.type === "filter"'>:
{{tag.value.value}}</span></span>
<a class='wz-tag-remove-button' ng-click='removeTag(tag.id)'>×</a>
</div>
<span class='wz-tag-item-connector' ng-show='$index != group.length - 1'>OR</span>
@ -17,13 +18,13 @@
</li>
</ul>
<input id='wz-search-filter-bar-input' class='wz-search-filter-bar-input input' type='text' ng-model='newTag'
ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)' ng-class='{"invalid-tag": newTag.invalid}'
placeholder='Add filter or search' ng-keyup='$event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)' ng-class='{'invalid-tag': newTag.invalid}'
placeholder='Add filter or search' ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
<div id='wz-search-filter-bar-autocomplete' class='wz-search-filter-bar-autocomplete' ng-show='isAutocomplete && autocompleteContent.list.length > 0'>
<p><b>{{autocompleteContent.title}}</b></p>
<ul id='wz-search-filter-bar-autocomplete-list'>
<li ng-repeat='element in autocompleteContent.list track by $index' ng-mousedown='autocompleteContent.isKey ? addTagKey(element) : addTagValue(element)'>
<span ng-if="element">{{element}}</span>
<span ng-if='element'>{{element}}</span>
</li>
</ul>
</div>

64
public/directives/wz-tag-filter/wz-tag-filter.js
View File

@ -77,20 +77,20 @@ app.directive('wzTagFilter', function () {
}
else {
if (!first) {
queryObj.query += ";";
queryObj.query += ';';
}
const twoOrMoreElements = group.length > 1;
if (twoOrMoreElements) {
queryObj.query += "("
queryObj.query += '('
}
group.filter(function (x) { return x.type === 'filter' }).forEach(function (tag, idx2) {
queryObj.query += tag.key + "=" + tag.value.value;
queryObj.query += tag.key + '=' + tag.value.value;
if (idx2 != group.length - 1) {
queryObj.query += ",";
queryObj.query += ',';
}
});
if (twoOrMoreElements) {
queryObj.query += ")"
queryObj.query += ')'
}
first = false;
}
@ -163,6 +163,9 @@ app.directive('wzTagFilter', function () {
};
$scope.addSearchKey = (e) => {
if ($scope.autocompleteEnter) {
$scope.autocompleteEnter = false;
}
$scope.getAutocompleteContent();
};
@ -174,6 +177,7 @@ app.directive('wzTagFilter', function () {
if (flag) {
input.focus();
}
$('#wz-search-filter-bar-autocomplete-list li').removeClass('selected');
}, 100);
}
@ -194,37 +198,35 @@ app.directive('wzTagFilter', function () {
// to ensure the random number provide enough bits.
var firstPart = (Math.random() * 46656) | 0;
var secondPart = (Math.random() * 46656) | 0;
firstPart = ("000" + firstPart.toString(36)).slice(-3);
secondPart = ("000" + secondPart.toString(36)).slice(-3);
firstPart = ('000' + firstPart.toString(36)).slice(-3);
secondPart = ('000' + secondPart.toString(36)).slice(-3);
return firstPart + secondPart;
}
$('#wz-search-filter-bar-input').bind('keydown', function (e) {
//let liSelected = document.getElementById('wz-search-filter-bar-autocomplete-list li.selected');
let liSelected = $('#wz-search-filter-bar-autocomplete-list li.selected');
if (e.which === 40) {
if (liSelected != 0) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
let $current = $('#wz-search-filter-bar-autocomplete-list li.selected');
if ($current.length === 0) {
$('#wz-search-filter-bar-autocomplete-list li').first().addClass('selected');
$current = $('#wz-search-filter-bar-autocomplete-list li.selected');
} else {
var $next;
switch (e.keyCode) {
case 13: // enter
$scope.autocompleteEnter = true;
$scope.autocompleteContent.isKey ? $scope.addTagKey($current.text().trim()) : $scope.addTagValue($current.text().trim());
break;
case 38: // if the UP key is pressed
$next = $current.prev();
break;
case 40: // if the DOWN key is pressed
$next = $current.next();
break;
}
} else if (e.which === 38) {
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.last().addClass('selected');
}
} else {
liSelected = li.last().addClass('selected');
if ($next && $next.length > 0 && (e.keyCode === 38 || e.keyCode === 40)) {
var input = document.getElementById('wz-search-filter-bar-input');
input.focus();
$('#wz-search-filter-bar-autocomplete-list li').removeClass('selected');
$next.addClass('selected');
}
}
});