import jQ from "jquery";
import Class from "../../../helpers/class"
/**
* Custom the result menu for autocomplete feature
*/
class AutocompleteMenuCustom {
/**
* @constructs
* @param {Object} autocomplete the ui-autocomplete object
*/
constructor(autocomplete) {
this.autocomplete = autocomplete;
return this.init();
}
/**
* Initialize the AutocompleteMenuCustom
*/
init() {
var menuWidget = this.autocomplete.menu;
var itemSelector = '.' + Class.searchSuggestionItem + '.' + Class.searchUiAutocompleteItem;
// Change menu-items seletor
menuWidget._setOption('items', itemSelector);
// Remove "selected" class when move to first or class item
menuWidget._setOption('blur', this._blur.bind(menuWidget));
// Custom isFirstItem method of menu widget
menuWidget.isFirstItem = this._isFirstItem.bind(menuWidget);
// Custom isLastItem method of menu widget
menuWidget.isLastItem = this._isLastItem.bind(menuWidget);
// Custom _move function of menu widget for search box
menuWidget._move = this._move.bind(menuWidget);
return this.autocomplete;
}
/**
* Bind the bur event on the search input
* @param {Event} event ui-autocomplete event
* @param {Object} autocompleteUi ui-autocomplete object
*/
_blur(event, autocompleteUi) {
if (autocompleteUi.item) {
jQ(autocompleteUi.item).removeClass('selected');
}
}
/**
* Check if the selected item is the first item
*/
_isFirstItem() {
if (this.active) {
var menuItems = this.element.find(this.options.items);
return !(menuItems.index(this.active));
} else {
return false;
}
}
/**
* Check if the selected item is the last item
*/
_isLastItem() {
if (this.active) {
var menuItems = this.element.find(this.options.items);
var index = menuItems.index(this.active) + 1;
return !(menuItems.length - index);
} else {
return false;
}
}
/**
* Bind move event on the instant search result
* @param {String} direction The direction of event
* @param {String} filter Next or Prev
* @param {Event} event The ui-autocomplete event
*/
_move(direction, filter, event) {
var next;
var menuItems = this.element.find(this.options.items);
if (this.active) {
if ( direction === "first" || direction === "last" ) {
} else {
var index = 0;
if (direction == 'next') {
index = menuItems.index(this.active) + 1;
} else {
index = menuItems.index(this.active) - 1;
}
next = menuItems.eq(index);
}
}
// Focus to the first item if haven't had active element
if (!next || !next.length || !this.active) {
next = this.element.find( this.options.items )[ filter ]();
}
next.addClass('selected');
this.focus(event, next);
}
}
export default AutocompleteMenuCustom;