define([
'jquery',
'underscore',
'mage/template',
"matchMedia",
'jquery/ui',
'mage/translate'
], function ($, _, mageTemplate, mediaCheck) {
'use strict';
/**
* Check wether the incoming string is not empty or if doesn't consist of spaces.
*
* @param {String} value - Value to check.
* @returns {Boolean}
*/
function isEmpty(value) {
return (value.length === 0) || (value == null) || /^\s+$/.test(value);
}
$.widget('mage.quickSearch', {
options: {
autocomplete: 'off',
minSearchLength: 2,
responseFieldElements: 'ul li',
selectClass: 'selected',
template:
'<li class="<%- data.row_class %>" id="qs-option-<%- data.index %>" role="option">' +
'<span class="qs-option-name">' +
' <%- data.title %>' +
'</span>' +
'<span aria-hidden="true" class="amount">' +
'<%- data.num_results %>' +
'</span>' +
'</li>',
submitBtn: 'button[type="submit"]',
searchLabel: '[data-role=minisearch-label]',
isExpandable: null
},
_create: function () {
this.responseList = {
indexList: null,
selected: null
};
this.autoComplete = $(this.options.destinationSelector);
this.searchForm = $(this.options.formSelector);
this.submitBtn = this.searchForm.find(this.options.submitBtn)[0];
this.searchLabel = $(this.options.searchLabel);
this.isExpandable = this.options.isExpandable;
_.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');
this.submitBtn.disabled = true;
this.element.attr('autocomplete', this.options.autocomplete);
mediaCheck({
media: '(max-width: 768px)',
entry: function () {
this.isExpandable = true;
}.bind(this),
exit: function () {
this.isExpandable = false;
this.element.removeAttr('aria-expanded');
}.bind(this)
});
this.searchLabel.on('click', function (e) {
// allow input to lose its' focus when clicking on label
if (this.isExpandable && this.isActive()) {
e.preventDefault();
}
}.bind(this));
this.element.on('blur', $.proxy(function () {
setTimeout($.proxy(function () {
if (this.autoComplete.is(':hidden')) {
this.setActiveState(false);
}
this.autoComplete.hide();
this._updateAriaHasPopup(false);
}, this), 250);
}, this));
this.element.trigger('blur');
this.element.on('focus', this.setActiveState.bind(this, true));
this.element.on('keydown', this._onKeyDown);
this.element.on('input propertychange', this._onPropertyChange);
this.searchForm.on('submit', $.proxy(function() {
this._onSubmit();
this._updateAriaHasPopup(false);
}, this));
},
