coveo-search-ui
Version:
Coveo JavaScript Search Framework
144 lines (138 loc) • 5.08 kB
JavaScript
webpackJsonpCoveo__temporary([84],{
/***/ 64:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Dom_1 = __webpack_require__(1);
var Strings_1 = __webpack_require__(6);
var _ = __webpack_require__(0);
var GlobalExports_1 = __webpack_require__(3);
/**
* A dropdown widget with standard styling.
*/
var Dropdown = /** @class */ (function () {
/**
* Creates a new `Dropdown`.
* @param onChange The function to call when the dropdown selected value changes. This function takes the current
* `Dropdown` instance as an argument.
* @param listOfValues The selectable values to display in the dropdown.
* @param getDisplayValue An optional function to modify the display values, rather than using the values as they
* appear in the `listOfValues`.
* @param label The label to use for the input for accessibility purposes.
*/
function Dropdown(onChange, listOfValues, getDisplayValue, label) {
if (onChange === void 0) { onChange = function (dropdown) { }; }
if (getDisplayValue === void 0) { getDisplayValue = Strings_1.l; }
this.onChange = onChange;
this.listOfValues = listOfValues;
this.getDisplayValue = getDisplayValue;
this.label = label;
this.optionsElement = [];
this.buildContent();
this.select(0, false);
this.bindEvents();
}
Dropdown.doExport = function () {
GlobalExports_1.exportGlobally({
Dropdown: Dropdown
});
};
/**
* Resets the dropdown.
*/
Dropdown.prototype.reset = function () {
this.select(0, false);
};
Dropdown.prototype.setId = function (id) {
Dom_1.$$(this.element).setAttribute('id', id);
};
/**
* Gets the element on which the dropdown is bound.
* @returns {HTMLElement} The dropdown element.
*/
Dropdown.prototype.getElement = function () {
return this.element;
};
/**
* Gets the currently selected dropdown value.
* @returns {string} The currently selected dropdown value.
*/
Dropdown.prototype.getValue = function () {
return this.selectElement.value;
};
/**
* Selects a value from the dropdown [`listofValues`]{@link Dropdown.listOfValues}.
* @param index The 0-based index position of the value to select in the `listOfValues`.
* @param executeOnChange Indicates whether to execute the [`onChange`]{@link Dropdown.onChange} function when this
* method changes the dropdown selection.
*/
Dropdown.prototype.select = function (index, executeOnChange) {
if (executeOnChange === void 0) { executeOnChange = true; }
this.selectOption(this.optionsElement[index], executeOnChange);
};
/**
* Gets the element on which the dropdown is bound.
* @returns {HTMLElement} The dropdown element.
*/
Dropdown.prototype.build = function () {
return this.element;
};
/**
* Sets the dropdown value.
* @param value The value to set the dropdown to.
*/
Dropdown.prototype.setValue = function (value) {
var _this = this;
_.each(this.optionsElement, function (option) {
if (Dom_1.$$(option).getAttribute('data-value') == value) {
_this.selectOption(option);
}
});
};
Dropdown.prototype.selectOption = function (option, executeOnChange) {
if (executeOnChange === void 0) { executeOnChange = true; }
this.selectElement.value = option.value;
if (executeOnChange) {
this.onChange(this);
}
};
Dropdown.prototype.buildContent = function () {
var _this = this;
this.selectElement = Dom_1.$$('select', {
className: 'coveo-dropdown'
}).el;
if (this.label) {
this.selectElement.setAttribute('aria-label', Strings_1.l(this.label));
}
var selectOptions = this.buildOptions();
_.each(selectOptions, function (opt) {
Dom_1.$$(_this.selectElement).append(opt);
});
this.element = this.selectElement;
};
Dropdown.prototype.buildOptions = function () {
var _this = this;
var ret = [];
_.each(this.listOfValues, function (value) {
ret.push(_this.buildOption(value));
});
return ret;
};
Dropdown.prototype.buildOption = function (value) {
var option = Dom_1.$$('option');
option.setAttribute('data-value', value);
option.setAttribute('value', value);
option.text(this.getDisplayValue(value));
this.optionsElement.push(option.el);
return option.el;
};
Dropdown.prototype.bindEvents = function () {
var _this = this;
Dom_1.$$(this.selectElement).on('change', function () { return _this.onChange(_this); });
};
return Dropdown;
}());
exports.Dropdown = Dropdown;
/***/ })
});
//# sourceMappingURL=Dropdown__65d8de8a9f769489e2ff.js.map