Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
168 lines (149 sloc) 6.69 KB
import 'styling/_Searchbox';
import { exportGlobally } from '../../GlobalExports';
import { $$ } from '../../utils/Dom';
import { SVGDom } from '../../utils/SVGDom';
import { SVGIcons } from '../../utils/SVGIcons';
import { SearchBoxResize } from '../../utils/SearchBoxResize';
import { Component } from '../Base/Component';
import { IComponentBindings } from '../Base/ComponentBindings';
import { ComponentOptions } from '../Base/ComponentOptions';
import { Initialization } from '../Base/Initialization';
import { IOmniboxOptions, Omnibox } from '../Omnibox/Omnibox';
import { Querybox } from '../Querybox/Querybox';
import { SearchButton } from '../SearchButton/SearchButton';
import { each, extend } from 'underscore';
export interface ISearchboxOptions extends IOmniboxOptions {
addSearchButton?: boolean;
enableOmnibox?: boolean;
height?: number;
}
/**
* The `Searchbox` component allows you to conveniently instantiate two components which end users frequently use to
* enter and submit queries.
*
* This component attaches itself to a `div` element and takes care of instantiating either a
* [`Querybox`]{@link Querybox} or an [`Omnibox`]{@link Omnibox} component (see the
* [`enableOmnibox`]{@link Searchbox.options.enableOmnibox} option). Optionally, the `Searchbox` can also instantiate a
* [`SearchButton`]{@link SearchButton} component, and append it inside the same `div` (see the
* [`addSearchButton`]{@link Searchbox.options.addSearchButton} option).
*/
export class Searchbox extends Component {
static ID = 'Searchbox';
static parent = Omnibox;
static doExport = () => {
exportGlobally({
Searchbox: Searchbox,
SearchButton: SearchButton,
Omnibox: Omnibox,
Querybox: Querybox
});
};
/**
* Possible options for the {@link Searchbox}
* @componentOptions
*/
static options: ISearchboxOptions = {
/**
* Specifies whether to instantiate a [`SearchButton`]{@link SearchButton} component.
*
* Default value is `true`.
*/
addSearchButton: ComponentOptions.buildBooleanOption({ defaultValue: true }),
/**
* A custom height for the search box (in pixels).
*
* Note: Avoid setting this option if you want to modify the search box styling through custom CSS.
*
* Minimum value is `25`
*
* Default behavior: The most specific CSS rules targeting HTML elements generated by the Searchbox component are used
* (e.g., if you are only using the default CoveoFullSearch.css stylesheet with no further styling customizations,
* the search box height will be set to 50 pixels by default).
*/
height: ComponentOptions.buildNumberOption({ min: 25 }),
/**
* Specifies whether to instantiate an [`Omnibox`]{@link Omnibox} component.
*
* When this option is `false`, the `Searchbox` instantiates a [`Querybox`]{@link Querybox} component instead.
*
* **Note:**
* > You can use configuration options specific to the component you choose to instantiate with the `Searchbox`.
*
* **Examples:**
*
* In this first case, the `Searchbox` instantiates a `Querybox` component. You can configure this `Querybox`
* instance using any of the `Querybox` component options, such as
* [`triggerQueryOnClear`]{@link Querybox.options.triggerQueryOnClear}.
* ```html
* <div class='CoveoSearchbox' data-trigger-query-on-clear='true'></div>
* ```
*
* In this second case, the `Searchbox` instantiates an `Omnibox` component. You can configure this `Omnibox`
* instance using any of the `Omnibox` component options, such as
* [`placeholder`]{@link Omnibox.options.placeholder}.
* Moreover, since the `Omnibox` component inherits all of the `Querybox` component options, the
* `data-trigger-query-on-clear` option from the previous example would also work on this `Omnibox` instance.
* ```html
* <div class='CoveoSearchbox' data-enable-omnibox='true' data-placeholder='Please enter a query'></div>
* ```
*
* Default value is `true`.
*/
enableOmnibox: ComponentOptions.buildBooleanOption({ defaultValue: true })
};
/**
* The [`SearchButton`]{@link SearchButton} component instance.
*/
public searchButton: SearchButton;
/**
* The component instance which allows end users to input queries.
*
* Can be either a [`Querybox`]{@link Querybox} or an [`Omnibox`]{@link Omnibox} component, depending on the value of
* [`enableOmnibox`]{@link Searchbox.options.enableOmnibox}.
*/
public searchbox: Querybox | Omnibox;
/**
* Creates a new `Searchbox` component. Creates a new `Coveo.Magicbox` instance and wraps magic box methods (`onblur`,
* `onsubmit`, etc.). Binds event on `buildingQuery` and on redirection (for standalone box).
* @param element The HTMLElement on which to instantiate the component. This cannot be an HTMLInputElement for
* technical reasons.
* @param options The options for the `Searchbox component`. These will merge with the options from the component set
* directly on the `HTMLElement`.
* @param bindings The bindings that the component requires to function normally. If not set, these will be
* automatically resolved (with a slower execution time).
*/
constructor(public element: HTMLElement, public options?: ISearchboxOptions, bindings?: IComponentBindings) {
super(element, Searchbox.ID, bindings);
this.options = ComponentOptions.initComponentOptions(element, Searchbox, options);
if (this.options.inline) {
$$(element).addClass('coveo-inline');
}
const div = document.createElement('div');
this.element.appendChild(div);
if (this.options.addSearchButton) {
const anchor = $$('a');
this.element.appendChild(anchor.el);
this.searchButton = new SearchButton(anchor.el, undefined, bindings);
}
if (this.options.enableOmnibox) {
this.searchbox = new Omnibox(div, this.options, bindings);
} else {
this.searchbox = new Querybox(div, this.options, bindings);
}
const magicBoxIcon = $$(this.element).find('.magic-box-icon');
magicBoxIcon.innerHTML = SVGIcons.icons.mainClear;
SVGDom.addClassToSVGInContainer(magicBoxIcon, 'magic-box-clear-svg');
if (this.options.height) {
$$(element).addClass('coveo-custom-height');
SearchBoxResize.resize(this.element, options.height);
}
}
}
Searchbox.options = { ...Searchbox.options, ...Omnibox.options, ...Querybox.options };
// Only parse omnibox option if omnibox is enabled
each(<any>Searchbox.options, (value, key: string) => {
if (key in Omnibox.options && !(key in Querybox.options)) {
Searchbox.options[key] = extend({ depend: 'enableOmnibox' }, value);
}
});
Initialization.registerAutoCreateComponent(Searchbox);
You can’t perform that action at this time.