coveo-search-ui
Version:
Coveo JavaScript Search Framework
869 lines (847 loc) • 40.1 kB
JavaScript
webpackJsonpCoveo__temporary([29],{
/***/ 131:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ResponsiveDropdownContent_1 = __webpack_require__(94);
var ResponsiveComponentsUtils = /** @class */ (function () {
function ResponsiveComponentsUtils() {
}
ResponsiveComponentsUtils.shouldDrawFacetSlider = function (root, facetSliderElement) {
return ResponsiveDropdownContent_1.ResponsiveDropdownContent.isTargetInsideOpenedDropdown(facetSliderElement) || !this.isSmallFacetActivated(root);
};
ResponsiveComponentsUtils.isSmallTabsActivated = function (root) {
return root.hasClass(this.smallTabsClassName);
};
ResponsiveComponentsUtils.isSmallFacetActivated = function (root) {
return root.hasClass(this.smallFacetClassName);
};
ResponsiveComponentsUtils.isSmallRecommendationActivated = function (root) {
return root.hasClass(this.smallRecommendationClassName);
};
ResponsiveComponentsUtils.activateSmallTabs = function (root) {
root.addClass(this.smallTabsClassName);
};
ResponsiveComponentsUtils.deactivateSmallTabs = function (root) {
root.removeClass(this.smallTabsClassName);
};
ResponsiveComponentsUtils.activateSmallFacet = function (root) {
root.addClass(this.smallFacetClassName);
};
ResponsiveComponentsUtils.deactivateSmallFacet = function (root) {
root.removeClass(this.smallFacetClassName);
};
ResponsiveComponentsUtils.activateSmallRecommendation = function (root) {
root.addClass(this.smallRecommendationClassName);
};
ResponsiveComponentsUtils.deactivateSmallRecommendation = function (root) {
root.removeClass(this.smallRecommendationClassName);
};
ResponsiveComponentsUtils.smallTabsClassName = 'coveo-small-tabs';
ResponsiveComponentsUtils.smallFacetClassName = 'coveo-small-facets';
ResponsiveComponentsUtils.smallRecommendationClassName = 'coveo-small-recommendation';
return ResponsiveComponentsUtils;
}());
exports.ResponsiveComponentsUtils = ResponsiveComponentsUtils;
/***/ }),
/***/ 202:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
__webpack_require__(675);
var underscore_1 = __webpack_require__(0);
var InitializationEvents_1 = __webpack_require__(17);
var QueryEvents_1 = __webpack_require__(11);
var GlobalExports_1 = __webpack_require__(3);
var Assert_1 = __webpack_require__(5);
var Model_1 = __webpack_require__(18);
var QueryStateModel_1 = __webpack_require__(13);
var SearchEndpoint_1 = __webpack_require__(53);
var AccessibleButton_1 = __webpack_require__(15);
var Dom_1 = __webpack_require__(1);
var Utils_1 = __webpack_require__(4);
var AnalyticsActionListMeta_1 = __webpack_require__(10);
var Component_1 = __webpack_require__(7);
var ComponentOptions_1 = __webpack_require__(8);
var Initialization_1 = __webpack_require__(2);
var ResponsiveTabs_1 = __webpack_require__(676);
/**
* The Tab component renders a widget that allows the end user to select a specific search interface.
*
* This component attaches itself to a `div` element. It is in charge of adding an advanced expression to the outgoing
* query in order to refine the results.
*
* The Tab component can also hide and show different parts of the UI. For each individual component in the UI, you can
* specify whether you wish to include or exclude that component when the user selects a certain Tab (see [Using Components
* Only on Specific Tabs](https://docs.coveo.com/en/508/javascript-search-framework/using-components-only-on-specific-tabs)).
*
* **Setting a New Endpoint for a Tab:**
*
* A Tab can use a custom endpoint when performing a query. Of course, you need to make sure that the endpoint exists in
* the array of Coveo.SearchEndpoint.endpoints (see {@link SearchEndpoint.endpoints}).
*
* ```
* Coveo.SearchEndpoint.endpoints["specialEndpoint"] = new Coveo.SearchEndpoint({
* restUri : 'https://somewhere.com/rest/search'
* })
*
* [ ... ]
*
* <div class='CoveoTab' data-endpoint='specialEndpoint'></div>
*
* ```
*/
var Tab = /** @class */ (function (_super) {
__extends(Tab, _super);
/**
* Creates a new Tab. Binds on buildingQuery event as well as an event on click of the element.
* @param element The HTMLElement on which to instantiate the component. Normally a `div`.
* @param options The options for the Tab component.
* @param bindings The bindings that the component requires to function normally. If not set, these will be
* automatically resolved (with a slower execution time).
*/
function Tab(element, options, bindings) {
var _this = _super.call(this, element, Tab.ID, bindings) || this;
_this.element = element;
_this.options = options;
_this.options = ComponentOptions_1.ComponentOptions.initComponentOptions(element, Tab, options);
_this.bind.onRootElement(QueryEvents_1.QueryEvents.buildingQuery, function (args) { return _this.handleBuildingQuery(args); });
_this.bind.onRootElement(InitializationEvents_1.InitializationEvents.afterInitialization, function () { return _this.handleAfterInitialization(); });
_this.bind.onQueryState(Model_1.MODEL_EVENTS.CHANGE_ONE, QueryStateModel_1.QUERY_STATE_ATTRIBUTES.T, function (args) {
return _this.handleQueryStateChanged(args);
});
new AccessibleButton_1.AccessibleButton()
.withElement(element)
.withSelectAction(function () { return _this.select(); })
.withTitle(_this.options.caption)
.withOwner(_this.bind)
.build();
_this.render();
ResponsiveTabs_1.ResponsiveTabs.init(_this.root, _this, _this.options);
return _this;
}
/**
* Selects the current Tab.
*
* Also logs the `interfaceChange` event in the usage analytics with the new current {@link Tab.options.id} as metada
* and triggers a new query.
*/
Tab.prototype.select = function () {
if (!this.disabled) {
var state = {
t: this.options.id,
sort: this.options.sort || QueryStateModel_1.QueryStateModel.defaultAttributes.sort
};
if (this.options.layout) {
state.layout = this.options.layout;
}
this.queryStateModel.setMultiple(state);
this.usageAnalytics.logSearchEvent(AnalyticsActionListMeta_1.analyticsActionCauseList.interfaceChange, {
interfaceChangeTo: this.options.id
});
this.queryController.executeQuery();
}
};
/**
* Indicates whether the HTMLElement argument is included in the Tab. *Included* elements are shown when the Tab is
* selected, whereas *excluded* elements are not.
* @param element The HTMLElement to verify.
* @returns {boolean} `true` if the HTMLElement is included in the Tab; `false` if it is excluded.
*/
Tab.prototype.isElementIncludedInTab = function (element) {
Assert_1.Assert.exists(element);
var includedTabs = this.splitListOfTabs(element.getAttribute('data-tab'));
var excludedTabs = this.splitListOfTabs(element.getAttribute('data-tab-not'));
Assert_1.Assert.check(!(includedTabs.length != 0 && excludedTabs.length != 0), 'You cannot both explicitly include and exclude an element from tabs.');
return ((includedTabs.length != 0 && underscore_1.indexOf(includedTabs, this.options.id) != -1) ||
(excludedTabs.length != 0 && underscore_1.indexOf(excludedTabs, this.options.id) == -1) ||
(includedTabs.length == 0 && excludedTabs.length == 0));
};
Tab.prototype.render = function () {
var icon = this.options.icon;
if (Utils_1.Utils.isNonEmptyString(icon)) {
var iconSpan = Dom_1.$$('span').el;
Dom_1.$$(iconSpan).addClass(['coveo-icon', icon]);
this.element.insertBefore(iconSpan, this.element.firstChild);
}
var caption = this.options.caption;
if (Utils_1.Utils.isNonEmptyString(caption)) {
var captionP = document.createElement('p');
Dom_1.$$(captionP).text(caption);
this.element.appendChild(captionP);
}
};
Tab.prototype.handleBuildingQuery = function (data) {
Assert_1.Assert.exists(data);
if (!this.disabled && this.isSelected()) {
data.queryBuilder.tab = this.options.id;
if (Utils_1.Utils.isNonEmptyString(this.options.expression)) {
if (this.options.constant) {
data.queryBuilder.constantExpression.add(this.options.expression);
}
else {
data.queryBuilder.advancedExpression.add(this.options.expression);
}
}
if (this.options.enableDuplicateFiltering) {
data.queryBuilder.enableDuplicateFiltering = true;
}
if (this.options.pipeline != null) {
data.queryBuilder.pipeline = this.options.pipeline;
}
if (this.options.maximumAge != null) {
data.queryBuilder.maximumAge = this.options.maximumAge;
}
}
};
Tab.prototype.handleQueryStateChanged = function (data) {
Assert_1.Assert.exists(data);
if (!this.disabled && this.isSelected()) {
Dom_1.$$(this.element).addClass('coveo-selected');
this.queryController.setEndpoint(this.options.endpoint);
this.showAndHideAppropriateElements();
}
else {
Dom_1.$$(this.element).removeClass('coveo-selected');
}
};
Tab.prototype.handleAfterInitialization = function () {
if (this.isSelected() && this.options.layout) {
this.queryStateModel.set(QueryStateModel_1.QUERY_STATE_ATTRIBUTES.LAYOUT, this.options.layout);
}
};
Tab.prototype.isSelected = function () {
var activeTab = this.queryStateModel.get(QueryStateModel_1.QueryStateModel.attributesEnum.t);
return activeTab == this.options.id;
};
Tab.prototype.showAndHideAppropriateElements = function () {
var _this = this;
var showElements = [];
var hideElements = [];
underscore_1.each(Dom_1.$$(this.root).findAll('[data-tab],[data-tab-not]'), function (element) {
if (_this.isElementIncludedInTab(element)) {
_this.toggleAllComponentsUnder(element, true);
showElements.push(element);
}
else {
_this.toggleAllComponentsUnder(element, false);
hideElements.push(element);
}
});
Dom_1.$$(this.root).one(QueryEvents_1.QueryEvents.querySuccess, function () {
underscore_1.each(showElements, function (elem) { return Dom_1.$$(elem).removeClass('coveo-tab-disabled'); });
underscore_1.each(hideElements, function (elem) { return Dom_1.$$(elem).addClass('coveo-tab-disabled'); });
});
};
Tab.prototype.splitListOfTabs = function (value) {
if (Utils_1.Utils.exists(value)) {
return underscore_1.map(value.split(','), function (tab) { return Utils_1.Utils.trim(tab); });
}
else {
return [];
}
};
Tab.prototype.toggleAllComponentsUnder = function (element, enable) {
Assert_1.Assert.exists(element);
var togglePossibleComponent = function (possibleComponent) {
var possibleCmp = Component_1.Component.get(possibleComponent, undefined, true);
if (possibleCmp) {
if (enable) {
possibleCmp.enable();
}
else {
possibleCmp.disable();
}
}
};
togglePossibleComponent(element);
underscore_1.each(Dom_1.$$(element).findAll('*'), function (el) {
togglePossibleComponent(el);
});
};
Tab.prototype.enable = function () {
_super.prototype.enable.call(this);
this.element.style.display = '';
};
Tab.prototype.disable = function () {
_super.prototype.disable.call(this);
this.element.style.display = 'none';
};
Tab.ID = 'Tab';
Tab.doExport = function () {
GlobalExports_1.exportGlobally({
Tab: Tab
});
};
/**
* The options for a Tab
* @componentOptions
*/
Tab.options = {
/**
* Specifies a unique ID for the Tab.
*
* Specifying a value for this option is necessary for this component to work.
*/
id: ComponentOptions_1.ComponentOptions.buildStringOption({ required: true, section: 'Common Options' }),
/**
* Specifies the caption of the Tab.
*
* Specifying a value for this option is necessary for this component to work.
*/
caption: ComponentOptions_1.ComponentOptions.buildLocalizedStringOption({ required: true, section: 'Common Options' }),
/**
* Specifies an icon to use for the Tab.
*
* @deprecated This options is mostly kept for legacy reasons. If possible, you should avoid using it.
*/
icon: ComponentOptions_1.ComponentOptions.buildStringOption(),
/**
* Specifies an advanced expression or filter that the Tab should add to any outgoing query.
*
* **Example:**
*
* `@objecttype==Message`
*
* Default value is `undefined` and the Tab applies no additional expression or filter to the query.
*/
expression: ComponentOptions_1.ComponentOptions.buildQueryExpressionOption({ section: 'Common Options' }),
/**
* Specifies the {@link SearchEndpoint} to point to when performing queries from within the Tab.
*
* By default, the Tab uses the "default" endpoint.
*/
endpoint: ComponentOptions_1.ComponentOptions.buildCustomOption(function (endpoint) { return (endpoint != null ? SearchEndpoint_1.SearchEndpoint.endpoints[endpoint] : null); }),
/**
* Specifies the default sort criteria to use when selecting the Tab. A {@link Sort} component with the same
* parameter needs to be present in the search interface in order for this option to function properly.
*
* **Examples:**
*
* - `data-sort='relevancy'`
* - `data-sort='date descending'`
*
* Default value is `undefined` and the normal {@link Sort} component behavior applies.
*/
sort: ComponentOptions_1.ComponentOptions.buildStringOption(),
/**
* Specifies the default layout to display when the user selects the Tab (see {@link ResultList.options.layout} and
* {@link ResultLayout}).
*
* See the {@link ValidLayout} type for the list of possible values.
*
* If not specified, it will default to 'list'.
*
* See also [Result Layouts](https://docs.coveo.com/en/360/).
*
* Default value is `undefined` and the component selects the first available layout.
*/
layout: ComponentOptions_1.ComponentOptions.buildStringOption(),
/**
* Specifies whether to include the {@link Tab.options.expression} in the constant part of the query.
*
* The index specially optimizes the constant part of the query to execute faster. However, you must be careful not
* to include dynamic query expressions, otherwise the cache will lose its efficiency.
*
* Default value is `true`.
*/
constant: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'Filtering' }),
/**
* Whether to filter out duplicates, so that items resembling one another only appear once in the query results.
*
* **Notes:**
* - Two items must be at least 85% similar to one another to be considered duplicates.
* - When a pair of duplicates is found, only the higher-ranked item of the two is kept in the result set.
* - Enabling this feature can make the total result count less precise, as only the requested page of query results is submitted to duplicate filtering.
* - The default value for this option can be modified through the {@link SearchInterface} component.
*/
enableDuplicateFiltering: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: false }),
/**
* Specifies the name of the query pipeline to use for the queries when the Tab is selected.
*
* You can specify a value for this option if your index is in a Coveo Cloud organization in which pipelines have
* been created (see [Adding and Managing Query Pipelines](https://docs.coveo.com/en/1791/)).
*
* Default value is `undefined`, which means that pipeline selection conditions defined in the Coveo Cloud
* organization apply.
*/
pipeline: ComponentOptions_1.ComponentOptions.buildStringOption(),
/**
* Specifies the maximum age (in milliseconds) that cached query results can have to still be usable as results
* instead of performing a new query on the index from within the Tab. The cache is located in the Coveo Search API
* (which resides between the index and the search interface).
*
* If cached results that are older than the age you specify in this option are available, a new query will be
* performed on the index anyhow.
*
* On high-volume public web sites, specifying a higher value for this option can greatly improve query response
* time at the cost of result freshness.
*
* **Note:**
*
* > It is also possible to set a maximum cache age for the entire {@link SearchInterface} rather than for a single
* > Tab (see {@link SearchInterface.options.maximumAge}).
*
* Default value is `undefined` and the Coveo Search API determines the maximum cache age. This is typically
* equivalent to 30 minutes (see [maximumAge](https://docs.coveo.com/en/13#operation/searchUsingPost-maximumAge)).
*/
maximumAge: ComponentOptions_1.ComponentOptions.buildNumberOption(),
/**
* Specifies whether to enable responsive mode for tabs. Responsive mode makes overflowing tabs disappear, instead
* making them available using a dropdown button. Responsive tabs are enabled either when tabs overflow or when the
* width of the search interface becomes too small.
*
* Disabling responsive mode for one Tab also disables it for all tabs. Therefore, you only need to set this option
* to `false` on one Tab to disable responsive mode.
*
* Default value is `true`.
*
* @availablesince [October 2016 Release (v1.1550.5)](https://docs.coveo.com/en/309/#october-2016-release-v115505)
*/
enableResponsiveMode: ComponentOptions_1.ComponentOptions.buildBooleanOption({ defaultValue: true, section: 'ResponsiveOptions' }),
/**
* Specifies the label of the button that allows to show the hidden tabs when in responsive mode.
*
* If more than one Tab in the search interface specifies a value for this option, then the framework uses the first
* occurrence of the option.
*
* The default value is `"More"`.
*/
dropdownHeaderLabel: ComponentOptions_1.ComponentOptions.buildLocalizedStringOption({ section: 'ResponsiveOptions' })
};
return Tab;
}(Component_1.Component));
exports.Tab = Tab;
Initialization_1.Initialization.registerAutoCreateComponent(Tab);
/***/ }),
/***/ 675:
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }),
/***/ 676:
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
__webpack_require__(677);
var underscore_1 = __webpack_require__(0);
var InitializationEvents_1 = __webpack_require__(17);
var Logger_1 = __webpack_require__(9);
var Strings_1 = __webpack_require__(6);
var Dom_1 = __webpack_require__(1);
var EventsUtils_1 = __webpack_require__(138);
var SVGDom_1 = __webpack_require__(16);
var SVGIcons_1 = __webpack_require__(12);
var Utils_1 = __webpack_require__(4);
var Component_1 = __webpack_require__(7);
var SearchInterface_1 = __webpack_require__(19);
var Tab_1 = __webpack_require__(202);
var ResponsiveComponents_1 = __webpack_require__(55);
var ResponsiveComponentsManager_1 = __webpack_require__(62);
var ResponsiveComponentsUtils_1 = __webpack_require__(131);
var AccessibleButton_1 = __webpack_require__(15);
var popper_js_1 = __webpack_require__(98);
var KeyboardUtils_1 = __webpack_require__(25);
var ResponsiveTabs = /** @class */ (function () {
function ResponsiveTabs(coveoRoot, ID) {
this.coveoRoot = coveoRoot;
this.ID = ID;
this.ignoreNextDocumentClick = false;
this.dropdownHeaderLabel = this.getDropdownHeaderLabel();
this.searchInterface = Component_1.Component.get(this.coveoRoot.el, SearchInterface_1.SearchInterface, false);
this.dropdownContent = this.buildDropdownContent();
this.dropdownHeader = this.buildDropdownHeader();
this.bindDropdownContentEvents();
this.bindDropdownHeaderEvents();
this.tabSection = Dom_1.$$(this.coveoRoot.find('.coveo-tab-section'));
this.manageTabSwapping();
this.bindNukeEvents();
this.initialTabOrder = this.tabsInTabSection.slice();
}
ResponsiveTabs.init = function (root, component, options) {
this.logger = new Logger_1.Logger('ResponsiveTabs');
if (!Dom_1.$$(root).find('.coveo-tab-section')) {
this.logger.info('No element with class coveo-tab-section. Responsive tabs cannot be enabled.');
return;
}
ResponsiveComponentsManager_1.ResponsiveComponentsManager.register(ResponsiveTabs, Dom_1.$$(root), Tab_1.Tab.ID, component, options);
};
ResponsiveTabs.prototype.handleResizeEvent = function () {
if (this.needSmallMode() && !ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.isSmallTabsActivated(this.coveoRoot)) {
this.changeToSmallMode();
}
else if (!this.needSmallMode() && ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.isSmallTabsActivated(this.coveoRoot)) {
this.changeToLargeMode();
}
if (this.shouldAddTabsToDropdown()) {
this.addTabsToDropdown();
}
else if (this.shouldRemoveTabsFromDropdown()) {
this.removeTabsFromDropdown();
}
if (this.isDropdownOpen()) {
this.positionPopup();
}
};
ResponsiveTabs.prototype.needSmallMode = function () {
// Ignore everything if the responsiveMode is not auto.
if (!this.searchInterface) {
return this.shouldAutoModeResolveToSmall();
}
switch (this.searchInterface.responsiveComponents.getResponsiveMode()) {
case 'small':
case 'medium':
return true;
case 'auto':
default:
return this.shouldAutoModeResolveToSmall();
}
};
ResponsiveTabs.prototype.shouldAutoModeResolveToSmall = function () {
var mediumWidth = this.searchInterface
? this.searchInterface.responsiveComponents.getMediumScreenWidth()
: new ResponsiveComponents_1.ResponsiveComponents().getMediumScreenWidth();
if (this.coveoRoot.width() <= mediumWidth) {
return true;
}
else if (!ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.isSmallTabsActivated(this.coveoRoot)) {
return this.isOverflowing(this.tabSection.el);
}
else {
return this.isLargeFormatOverflowing();
}
};
ResponsiveTabs.prototype.changeToSmallMode = function () {
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.activateSmallTabs(this.coveoRoot);
};
ResponsiveTabs.prototype.changeToLargeMode = function () {
this.emptyDropdown();
this.cleanUpDropdown();
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.deactivateSmallTabs(this.coveoRoot);
};
ResponsiveTabs.prototype.shouldAddTabsToDropdown = function () {
return ((this.isOverflowing(this.tabSection.el) || this.tabSection.el.clientWidth === 0) &&
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.isSmallTabsActivated(this.coveoRoot));
};
ResponsiveTabs.prototype.addTabsToDropdown = function () {
var currentTab;
if (!this.tabSection.find("." + ResponsiveTabs.TAB_IN_DROPDOWN_HEADER_CSS_CLASS)) {
var facetDropdownHeader = this.tabSection.find('.coveo-facet-dropdown-header');
if (facetDropdownHeader) {
this.dropdownHeader.insertBefore(facetDropdownHeader);
}
else {
this.tabSection.el.appendChild(this.dropdownHeader.el);
}
}
for (var i = this.initialTabOrder.length - 1; i >= 0; i--) {
currentTab = this.initialTabOrder[i];
if (this.tabIsSelected(currentTab) && i > 0) {
currentTab = this.initialTabOrder[--i];
}
this.addToDropdownIfNeeded(currentTab);
if (!this.isOverflowing(this.tabSection.el)) {
break;
}
}
};
ResponsiveTabs.prototype.shouldRemoveTabsFromDropdown = function () {
return (!this.isOverflowing(this.tabSection.el) &&
this.tabSection.el.clientWidth !== 0 &&
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.isSmallTabsActivated(this.coveoRoot) &&
!this.isDropdownEmpty());
};
ResponsiveTabs.prototype.removeTabsFromDropdown = function () {
var _this = this;
var dropdownTabs = this.tabsInTabDropdown;
var current;
while (!this.isOverflowing(this.tabSection.el) && !this.isDropdownEmpty()) {
current = dropdownTabs.shift();
this.removeFromDropdownIfNeeded(current);
this.fromDropdownToTabSection(Dom_1.$$(current));
}
if (this.isOverflowing(this.tabSection.el)) {
var unselectedTabs = underscore_1.filter(this.tabsInTabSection, function (tab) { return !_this.tabIsSelected(tab); });
this.addToDropdownIfNeeded(unselectedTabs.pop());
}
if (this.isDropdownEmpty()) {
this.cleanUpDropdown();
}
};
ResponsiveTabs.prototype.emptyDropdown = function () {
var _this = this;
if (!this.isDropdownEmpty()) {
var dropdownTabs = this.tabsInTabDropdown;
while (!this.isDropdownEmpty()) {
var current = dropdownTabs.shift();
this.removeFromDropdownIfNeeded(current);
}
this.initialTabOrder.forEach(function (tab) { return _this.tabSection.append(tab); });
}
};
ResponsiveTabs.prototype.isLargeFormatOverflowing = function () {
var virtualTabSection = Dom_1.$$(this.tabSection.el.cloneNode(true));
var dropdownHeader = virtualTabSection.find("." + ResponsiveTabs.TAB_IN_DROPDOWN_HEADER_CSS_CLASS);
if (dropdownHeader) {
virtualTabSection.el.removeChild(dropdownHeader);
}
virtualTabSection.el.style.position = 'absolute';
virtualTabSection.el.style.visibility = 'hidden';
if (!this.isDropdownEmpty()) {
underscore_1.each(this.dropdownContent.findAll('.CoveoTab'), function (tab) {
virtualTabSection.el.appendChild(tab.cloneNode(true));
});
}
virtualTabSection.insertBefore(this.tabSection.el);
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.deactivateSmallTabs(this.coveoRoot);
var isOverflowing = this.isOverflowing(this.tabSection.el) || this.isOverflowing(virtualTabSection.el);
ResponsiveComponentsUtils_1.ResponsiveComponentsUtils.activateSmallTabs(this.coveoRoot);
virtualTabSection.detach();
return isOverflowing;
};
ResponsiveTabs.prototype.isOverflowing = function (el) {
return el.clientWidth < el.scrollWidth;
};
ResponsiveTabs.prototype.buildDropdownHeader = function () {
var dropdownHeader = Dom_1.$$('a', { className: "coveo-dropdown-header " + ResponsiveTabs.TAB_IN_DROPDOWN_HEADER_CSS_CLASS });
var content = Dom_1.$$('p');
content.text(this.dropdownHeaderLabel);
var icon = Dom_1.$$('span', { className: 'coveo-more-tabs' }, SVGIcons_1.SVGIcons.icons.arrowDown);
SVGDom_1.SVGDom.addClassToSVGInContainer(icon.el, 'coveo-more-tabs-svg');
content.el.appendChild(icon.el);
dropdownHeader.el.appendChild(content.el);
return dropdownHeader;
};
ResponsiveTabs.prototype.bindDropdownHeaderEvents = function () {
var _this = this;
var toggle = function (event) {
if (_this.isDropdownOpen()) {
_this.closeDropdown();
}
else {
_this.openDropdown();
}
if (event.type === 'click') {
_this.ignoreNextDocumentClick = true;
}
};
new AccessibleButton_1.AccessibleButton()
.withElement(this.dropdownHeader)
.withSelectAction(toggle)
.withLabel(this.getDropdownHeaderLabel())
.build();
};
ResponsiveTabs.prototype.buildDropdownContent = function () {
var dropdownContent = Dom_1.$$('div', {
className: 'coveo-tab-list-container ' + SearchInterface_1.SearchInterface.SMALL_INTERFACE_CLASS_NAME
});
var contentList = Dom_1.$$('ol', { className: 'coveo-tab-list' });
dropdownContent.el.appendChild(contentList.el);
return dropdownContent;
};
ResponsiveTabs.prototype.bindDropdownContentEvents = function () {
var _this = this;
this.dropdownClickListener = function () {
if (_this.isDropdownOpen()) {
_this.ignoreNextDocumentClick = true;
}
};
this.documentClickListener = function (event) {
if (!_this.ignoreNextDocumentClick) {
_this.closeDropdown();
}
_this.ignoreNextDocumentClick = false;
};
Dom_1.$$(this.dropdownHeader).on('click', this.dropdownClickListener);
Dom_1.$$(this.dropdownContent).on('click', this.dropdownClickListener);
};
ResponsiveTabs.prototype.isDropdownOpen = function () {
return this.dropdownHeader.hasClass(ResponsiveTabs.ACTIVE_DROPDOWN_CSS_CLASS);
};
ResponsiveTabs.prototype.closeDropdown = function () {
Dom_1.$$(document.documentElement).off('click', this.documentClickListener);
this.dropdownContent.detach();
this.dropdownHeader.removeClass(ResponsiveTabs.ACTIVE_DROPDOWN_CSS_CLASS);
};
ResponsiveTabs.prototype.openDropdown = function () {
Dom_1.$$(document.documentElement).on('click', this.documentClickListener);
this.positionPopup();
this.dropdownHeader.addClass(ResponsiveTabs.ACTIVE_DROPDOWN_CSS_CLASS);
};
ResponsiveTabs.prototype.addToDropdownIfNeeded = function (tab) {
if (!this.canAddTabToDropdown(tab)) {
return;
}
Dom_1.$$(tab).addClass(ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
var list = Dom_1.$$(this.dropdownContent.find('ol'));
var listElement = Dom_1.$$('li', null, tab);
list.prepend(listElement.el);
};
ResponsiveTabs.prototype.removeFromDropdownIfNeeded = function (tab) {
if (!this.canRemoveTabFromDropdown(tab)) {
return;
}
Dom_1.$$(tab).removeClass(ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
Dom_1.$$(tab.parentElement).detach();
};
ResponsiveTabs.prototype.canAddTabToDropdown = function (tab) {
return tab && !this.tabIsInDropdown(tab) && this.dropdownHeader;
};
ResponsiveTabs.prototype.canRemoveTabFromDropdown = function (tab) {
return tab && this.tabIsInDropdown(tab) && this.dropdownContent;
};
ResponsiveTabs.prototype.cleanUpDropdown = function () {
this.dropdownHeader.removeClass(ResponsiveTabs.ACTIVE_DROPDOWN_CSS_CLASS);
this.dropdownHeader.detach();
this.dropdownContent.detach();
};
ResponsiveTabs.prototype.isDropdownEmpty = function () {
if (this.dropdownContent) {
var tabs = this.dropdownContent.findAll('.CoveoTab');
return tabs.length == 0;
}
return false;
};
ResponsiveTabs.prototype.manageTabSwapping = function () {
var _this = this;
underscore_1.each(this.coveoRoot.findAll('.' + Component_1.Component.computeCssClassNameForType(this.ID)), function (tabElement) {
var tab = Dom_1.$$(tabElement);
var fadeOutFadeIn = function (event) {
var lastTabInSection = _this.tabsInTabSection.pop();
if (event.propertyName == 'opacity') {
if (tab.el.style.opacity == '0') {
Dom_1.$$(lastTabInSection).addClass(ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
tab.replaceWith(lastTabInSection);
tab.removeClass(ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
_this.fromDropdownToTabSection(tab);
// Because of the DOM manipulation, sometimes the animation will not trigger. Accessing the computed styles makes sure
// the animation will happen.
window.getComputedStyle(tab.el).opacity;
window.getComputedStyle(lastTabInSection).opacity;
tab.el.style.opacity = lastTabInSection.style.opacity = '1';
}
else if (tab.el.style.opacity == '1') {
_this.closeDropdown();
EventsUtils_1.EventsUtils.removePrefixedEvent(tab.el, 'TransitionEnd', fadeOutFadeIn);
_this.handleResizeEvent();
}
}
};
var swapOnSelect = function () {
if (_this.tabIsInDropdown(tab)) {
var lastTabInSection = _this.tabsInTabSection.pop();
if (lastTabInSection) {
EventsUtils_1.EventsUtils.addPrefixedEvent(tab.el, 'TransitionEnd', fadeOutFadeIn);
tab.el.style.opacity = lastTabInSection.style.opacity = '0';
}
}
};
tab.on('click', function () { return swapOnSelect(); });
tab.on('keyup', KeyboardUtils_1.KeyboardUtils.keypressAction(KeyboardUtils_1.KEYBOARD.ENTER, swapOnSelect));
tab.on('blur', function (e) {
if (e.relatedTarget && !_this.tabIsInDropdown(e.relatedTarget)) {
_this.closeDropdown();
}
});
});
};
ResponsiveTabs.prototype.bindNukeEvents = function () {
var _this = this;
Dom_1.$$(this.coveoRoot).on(InitializationEvents_1.InitializationEvents.nuke, function () {
Dom_1.$$(document.documentElement).off('click', _this.documentClickListener);
});
};
ResponsiveTabs.prototype.positionPopup = function () {
this.dropdownContent.insertAfter(this.dropdownHeader.el);
new popper_js_1.default(this.dropdownHeader.el, this.dropdownContent.el, {
modifiers: {
preventOverflow: {
boundariesElement: this.coveoRoot.el
}
}
});
};
ResponsiveTabs.prototype.fromDropdownToTabSection = function (tab) {
var lastTabInTabSection = underscore_1.last(this.tabsInTabSection);
if (!lastTabInTabSection) {
this.tabSection.prepend(tab.el);
return;
}
var comesAfterInitialTabOrder = this.initialTabOrder.indexOf(tab.el) > this.initialTabOrder.indexOf(lastTabInTabSection);
if (comesAfterInitialTabOrder) {
tab.insertAfter(lastTabInTabSection);
}
else {
tab.insertBefore(lastTabInTabSection);
}
};
ResponsiveTabs.prototype.getDropdownHeaderLabel = function () {
var dropdownHeaderLabel;
underscore_1.each(Dom_1.$$(this.coveoRoot.find('.coveo-tab-section')).findAll('.' + Component_1.Component.computeCssClassName(Tab_1.Tab)), function (tabElement) {
var tab = Component_1.Component.get(tabElement, Tab_1.Tab);
if (!dropdownHeaderLabel && tab && tab.options.dropdownHeaderLabel) {
dropdownHeaderLabel = tab.options.dropdownHeaderLabel;
}
});
if (!dropdownHeaderLabel) {
dropdownHeaderLabel = Strings_1.l(ResponsiveTabs.DROPDOWN_HEADER_LABEL_DEFAULT_VALUE);
}
return dropdownHeaderLabel;
};
ResponsiveTabs.prototype.tabIsSelected = function (tab) {
return Dom_1.$$(tab).hasClass('coveo-selected');
};
ResponsiveTabs.prototype.tabIsInDropdown = function (tab) {
return Dom_1.$$(tab).hasClass(ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
};
Object.defineProperty(ResponsiveTabs.prototype, "tabsInTabSection", {
get: function () {
var _this = this;
var tabsInSection = [];
underscore_1.each(this.tabSection.children(), function (childElement) {
if (Utils_1.Utils.isHtmlElement(childElement)) {
var child = Dom_1.$$(childElement);
var childHasTabCssClassName = child.hasClass(Component_1.Component.computeCssClassNameForType(_this.ID));
if (!_this.tabIsInDropdown(child) && childHasTabCssClassName) {
tabsInSection.push(child.el);
}
}
});
return tabsInSection;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ResponsiveTabs.prototype, "tabsInTabDropdown", {
get: function () {
if (!this.dropdownContent) {
return [];
}
return this.dropdownContent.findAll("." + ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS);
},
enumerable: true,
configurable: true
});
ResponsiveTabs.DROPDOWN_HEADER_LABEL_DEFAULT_VALUE = 'More';
ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS = 'coveo-tab-dropdown';
ResponsiveTabs.TAB_IN_DROPDOWN_HEADER_CSS_CLASS = ResponsiveTabs.TAB_IN_DROPDOWN_CSS_CLASS + "-header";
ResponsiveTabs.ACTIVE_DROPDOWN_CSS_CLASS = 'coveo-dropdown-header-active';
return ResponsiveTabs;
}());
exports.ResponsiveTabs = ResponsiveTabs;
/***/ }),
/***/ 677:
/***/ (function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ })
});
//# sourceMappingURL=Tab__65d8de8a9f769489e2ff.js.map