+```
+
### SortBy
#### Options
diff --git a/src/widgets/index.js b/src/widgets/index.js
index 4a06f39672..487b2af354 100644
--- a/src/widgets/index.js
+++ b/src/widgets/index.js
@@ -26,7 +26,7 @@ export {
export { default as numericMenu } from './numeric-menu/numeric-menu';
export { default as pagination } from './pagination/pagination.js';
export { default as rangeInput } from './range-input/range-input.js';
-export { default as searchBox } from '../widgets/search-box/search-box.js';
+export { default as searchBox } from './search-box/search-box.js';
export { default as rangeSlider } from './range-slider/range-slider.js';
export { default as sortBy } from './sort-by/sort-by.js';
export { default as ratingMenu } from './rating-menu/rating-menu';
diff --git a/src/widgets/search-box/__tests__/__snapshots__/search-box-test.js.snap b/src/widgets/search-box/__tests__/__snapshots__/search-box-test.js.snap
new file mode 100644
index 0000000000..b0b7a61252
--- /dev/null
+++ b/src/widgets/search-box/__tests__/__snapshots__/search-box-test.js.snap
@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`searchBox() markup renders correctly 1`] = `
+
+
+
+`;
diff --git a/src/widgets/search-box/__tests__/search-box-test.js b/src/widgets/search-box/__tests__/search-box-test.js
index 15a89dc55f..d893037726 100644
--- a/src/widgets/search-box/__tests__/search-box-test.js
+++ b/src/widgets/search-box/__tests__/search-box-test.js
@@ -1,12 +1,6 @@
import searchBox from '../search-box';
import EventEmitter from 'events';
-function createHTMLNodeFromString(string) {
- const parent = document.createElement('div');
- parent.innerHTML = string;
- return parent.firstChild;
-}
-
const onHistoryChange = () => {};
describe('searchBox()', () => {
@@ -55,17 +49,15 @@ describe('searchBox()', () => {
it('add a reset button inside the div', () => {
widget = searchBox(opts);
widget.init({ state, helper, onHistoryChange });
- const button = container.getElementsByTagName('button');
+ const button = container.querySelectorAll('button[type="reset"]');
expect(button).toHaveLength(1);
});
- it('add a magnifier inside the div', () => {
+ it('add a submit inside the div', () => {
widget = searchBox(opts);
widget.init({ state, helper, onHistoryChange });
- const magnifier = container.getElementsByClassName(
- 'ais-search-box--magnifier'
- );
- expect(magnifier).toHaveLength(1);
+ const submit = container.querySelectorAll('button[type="submit"]');
+ expect(submit).toHaveLength(1);
});
it('sets default HTML attribute to the input', () => {
@@ -75,7 +67,7 @@ describe('searchBox()', () => {
expect(input.getAttribute('autocapitalize')).toEqual('off');
expect(input.getAttribute('autocomplete')).toEqual('off');
expect(input.getAttribute('autocorrect')).toEqual('off');
- expect(input.getAttribute('class')).toEqual('ais-search-box--input');
+ expect(input.getAttribute('class')).toEqual('ais-SearchBox-input');
expect(input.getAttribute('placeholder')).toEqual('');
expect(input.getAttribute('role')).toEqual('textbox');
expect(input.getAttribute('spellcheck')).toEqual('false');
@@ -84,70 +76,46 @@ describe('searchBox()', () => {
it('supports cssClasses option', () => {
opts.cssClasses = {
- root: ['root-class', 'cx'],
- input: 'input-class',
+ root: ['root', 'customRoot'],
+ form: 'form',
+ input: 'input',
+ reset: 'reset',
+ resetIcon: 'resetIcon',
+ loadingIndicator: 'loadingIndicator',
+ loadingIcon: 'loadingIcon',
+ submit: 'submit',
};
widget = searchBox(opts);
widget.init({ state, helper, onHistoryChange });
- const actualRootClasses = container
- .querySelector('input')
- .parentNode.getAttribute('class');
- const actualInputClasses = container
- .querySelector('input')
- .getAttribute('class');
- const expectedRootClasses = 'ais-search-box root-class cx';
- const expectedInputClasses = 'ais-search-box--input input-class';
-
- expect(actualRootClasses).toEqual(expectedRootClasses);
- expect(actualInputClasses).toEqual(expectedInputClasses);
- });
- });
-
- describe('targeting an input', () => {
- it('reuse the existing input', () => {
- container = document.body.appendChild(document.createElement('input'));
- widget = searchBox({ container });
- widget.init({ state, helper, onHistoryChange });
- expect(container.tagName).toEqual('INPUT');
- expect(container.getAttribute('autocapitalize')).toEqual('off');
- expect(container.getAttribute('autocomplete')).toEqual('off');
- expect(container.getAttribute('autocorrect')).toEqual('off');
- expect(container.getAttribute('class')).toEqual('ais-search-box--input');
- expect(container.getAttribute('placeholder')).toEqual('');
- expect(container.getAttribute('role')).toEqual('textbox');
- expect(container.getAttribute('spellcheck')).toEqual('false');
- expect(container.getAttribute('type')).toEqual('text');
- });
- it('passes HTML attributes', () => {
- container = createHTMLNodeFromString(
- ''
+ expect(container.querySelector('.ais-SearchBox').classList).toContain(
+ 'root'
);
- widget = searchBox({ container });
- widget.init({ state, helper, onHistoryChange });
- expect(container.getAttribute('id')).toEqual('foo');
- expect(container.getAttribute('class')).toEqual(
- 'my-class ais-search-box--input'
+ expect(container.querySelector('.ais-SearchBox').classList).toContain(
+ 'customRoot'
);
- expect(container.getAttribute('placeholder')).toEqual('Search');
- });
-
- it('supports cssClasses', () => {
- container = createHTMLNodeFromString('');
- widget = searchBox({
- container,
- cssClasses: { root: 'root-class', input: 'input-class' },
- });
- widget.init({ state, helper, onHistoryChange });
-
- const actualRootClasses = container.parentNode.getAttribute('class');
- const actualInputClasses = container.getAttribute('class');
- const expectedRootClasses = 'ais-search-box root-class';
- const expectedInputClasses = 'my-class ais-search-box--input input-class';
-
- expect(actualRootClasses).toEqual(expectedRootClasses);
- expect(actualInputClasses).toEqual(expectedInputClasses);
+ expect(
+ container.querySelector('.ais-SearchBox-form').classList
+ ).toContain('form');
+ expect(
+ container.querySelector('.ais-SearchBox-input').classList
+ ).toContain('input');
+ expect(
+ container.querySelector('.ais-SearchBox-reset').classList
+ ).toContain('reset');
+ expect(
+ container.querySelector('.ais-SearchBox-resetIcon').classList
+ ).toContain('resetIcon');
+ expect(
+ container.querySelector('.ais-SearchBox-submit').classList
+ ).toContain('submit');
+ expect(
+ container.querySelector('.ais-SearchBox-loadingIndicator').classList
+ ).toContain('loadingIndicator');
+ expect(
+ container.querySelector('.ais-SearchBox-loadingIcon').classList
+ ).toContain('loadingIcon');
});
});
@@ -161,50 +129,19 @@ describe('searchBox()', () => {
widget.init({ state, helper, onHistoryChange });
// Then
- const wrapper = container.querySelectorAll('div.ais-search-box')[0];
- const input = container.querySelectorAll('input')[0];
+ const wrapper = container.querySelector('.ais-SearchBox');
+ const input = container.querySelector('.ais-SearchBox-input');
expect(wrapper.contains(input)).toEqual(true);
- expect(wrapper.getAttribute('class')).toEqual('ais-search-box');
- });
-
- it('when targeting an input', () => {
- // Given
- container = document.body.appendChild(document.createElement('input'));
- widget = searchBox({ container });
-
- // When
- widget.init({ state, helper, onHistoryChange });
-
- // Then
- const wrapper = container.parentNode;
- expect(wrapper.getAttribute('class')).toEqual('ais-search-box');
- });
-
- it('can be disabled with wrapInput:false', () => {
- // Given
- container = document.createElement('div');
- widget = searchBox({ container, wrapInput: false });
-
- // When
- widget.init({ state, helper, onHistoryChange });
-
- // Then
- const wrapper = container.querySelectorAll('div.ais-search-box');
- const input = container.querySelectorAll('input')[0];
- expect(wrapper).toHaveLength(0);
- expect(container.firstChild).toEqual(input);
});
});
describe('reset', () => {
let defaultInitOptions;
let defaultWidgetOptions;
- let $;
beforeEach(() => {
container = document.createElement('div');
- $ = container.querySelectorAll.bind(container);
defaultWidgetOptions = { container };
defaultInitOptions = { state, helper, onHistoryChange };
});
@@ -217,7 +154,8 @@ describe('searchBox()', () => {
widget.init(defaultInitOptions);
// Then
- expect($('.ais-search-box--reset-wrapper')[0].style.display).toBe('none');
+ const element = container.querySelector('.ais-SearchBox-reset');
+ expect(element.hasAttribute('hidden')).toBe(true);
});
it('should be shown when there is a query', () => {
@@ -229,9 +167,8 @@ describe('searchBox()', () => {
simulateInputEvent('test', 'tes', widget, helper, state, container);
// Then
- expect($('.ais-search-box--reset-wrapper')[0].style.display).toBe(
- 'block'
- );
+ const element = container.querySelector('.ais-SearchBox-reset');
+ expect(element.getAttribute('hidden')).toBe('');
});
it('should clear the query', () => {
@@ -240,20 +177,22 @@ describe('searchBox()', () => {
widget.init(defaultInitOptions);
simulateInputEvent('test', 'tes', widget, helper, state, container);
+ const element = container.querySelector('.ais-SearchBox-reset');
// When
- $('.ais-search-box--reset-wrapper')[0].click();
+ element.click();
// Then
expect(helper.setQuery).toHaveBeenCalled();
expect(helper.search).toHaveBeenCalled();
+ expect(document.activeElement).toBe(container.querySelector('input'));
});
it('should let the user define its own string template', () => {
// Given
widget = searchBox({
...defaultWidgetOptions,
- reset: {
- template: '',
+ templates: {
+ reset: '',
},
});
@@ -268,18 +207,18 @@ describe('searchBox()', () => {
// Given
widget = searchBox({
...defaultWidgetOptions,
- reset: false,
+ showReset: false,
});
// When
widget.init(defaultInitOptions);
// Then
- expect($('.ais-search-box--reset-wrapper')).toHaveLength(0);
+ expect(document.querySelectorAll('ais-SearchBox-reset')).toHaveLength(0);
});
});
- describe('magnifier', () => {
+ describe('submit', () => {
let defaultInitOptions;
let defaultWidgetOptions;
@@ -293,9 +232,7 @@ describe('searchBox()', () => {
// Given
widget = searchBox({
...defaultWidgetOptions,
- magnifier: {
- template: 'Foobar',
- },
+ templates: { submit: '
Foobar' },
});
// When
@@ -304,300 +241,27 @@ describe('searchBox()', () => {
// Then
expect(container.innerHTML).toContain('Foobar');
});
- });
-
- describe('poweredBy', () => {
- let defaultInitOptions;
- let defaultWidgetOptions;
- let $;
-
- beforeEach(() => {
- container = document.createElement('div');
- $ = container.querySelectorAll.bind(container);
- defaultWidgetOptions = { container };
- defaultInitOptions = { state, helper, onHistoryChange };
- });
- it('should not add the element with default options', () => {
- // Given
- widget = searchBox(defaultWidgetOptions);
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect($('.ais-search-box--powered-by')).toHaveLength(0);
- });
-
- it('should not add the element with poweredBy: false', () => {
+ it('should not be present if showSubmit is `false`', () => {
// Given
widget = searchBox({
...defaultWidgetOptions,
- poweredBy: false,
+ showSubmit: false,
});
// When
widget.init(defaultInitOptions);
// Then
- expect($('.ais-search-box--powered-by')).toHaveLength(0);
- });
-
- it('should add the element with poweredBy: true', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: true,
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect($('.ais-search-box--powered-by')).toHaveLength(1);
- });
-
- it('should contain a link to Algolia with poweredBy: true', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: true,
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- const actual = $('.ais-search-box--powered-by-link');
- const url = `https://www.algolia.com/?utm_source=instantsearch.js&utm_medium=website&utm_content=${
- location.hostname
- }&utm_campaign=poweredby`;
- expect(actual).toHaveLength(1);
- expect(actual[0].tagName).toEqual('A');
- expect(actual[0].innerHTML).toEqual('Algolia');
- expect(actual[0].getAttribute('href')).toEqual(url);
- });
-
- it('should let user add its own CSS classes with poweredBy.cssClasses', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- cssClasses: {
- root: 'myroot',
- link: 'mylink',
- },
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- const root = $('.myroot');
- const link = $('.mylink');
- expect(root).toHaveLength(1);
- expect(link).toHaveLength(1);
- expect(link[0].tagName).toEqual('A');
- expect(link[0].innerHTML).toEqual('Algolia');
- });
-
- it('should still apply default CSS classes even if user provides its own', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- cssClasses: {
- root: 'myroot',
- link: 'mylink',
- },
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- const root = $('.ais-search-box--powered-by');
- const link = $('.ais-search-box--powered-by-link');
- expect(root).toHaveLength(1);
- expect(link).toHaveLength(1);
- });
-
- it('should let the user define its own string template', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- template: '
',
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar');
- expect($('.should-be-found')).toHaveLength(1);
- });
- });
-
- describe('input event listener', () => {
- beforeEach(() => {
- container = document.body.appendChild(document.createElement('input'));
- });
-
- describe('instant search', () => {
- beforeEach(() => {
- widget = searchBox({ container });
- });
-
- it('performs a search on any change', () => {
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.search).toHaveBeenCalled();
- });
-
- it('sets the query on any change', () => {
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- });
-
- it('does nothing when query is the same as state', () => {
- simulateInputEvent('test', 'test', widget, helper, state, container);
- expect(helper.setQuery).not.toHaveBeenCalled();
- expect(helper.search).not.toHaveBeenCalled();
- });
- });
-
- describe('non-instant search and input event', () => {
- beforeEach(() => {
- widget = searchBox({ container, searchOnEnterKeyPressOnly: true });
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- });
-
- it('updates the query', () => {
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- });
-
- it('does not search', () => {
- expect(helper.search).toHaveBeenCalledTimes(0);
- });
- });
-
- describe('using a queryHook', () => {
- it('calls the queryHook', () => {
- const queryHook = jest.fn();
- widget = searchBox({ container, queryHook });
- simulateInputEvent(
- 'queryhook input',
- 'tes',
- widget,
- helper,
- state,
- container
- );
- expect(queryHook).toHaveBeenCalledTimes(1);
- expect(queryHook).toHaveBeenLastCalledWith(
- 'queryhook input',
- expect.any(Function)
- );
- });
-
- it('does not perform a search by default', () => {
- const queryHook = jest.fn();
- widget = searchBox({ container, queryHook });
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(0);
- expect(helper.search).not.toHaveBeenCalled();
- });
-
- it('when calling the provided search function', () => {
- const queryHook = jest.fn((query, search) => search(query));
- widget = searchBox({ container, queryHook });
- simulateInputEvent('oh rly?', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- expect(helper.setQuery).toHaveBeenLastCalledWith('oh rly?');
- expect(helper.search).toHaveBeenCalled();
- });
-
- it('can override the query', () => {
- const queryHook = jest.fn((originalQuery, search) => search('hi mom!'));
- widget = searchBox({ container, queryHook });
- simulateInputEvent('come.on.', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenLastCalledWith('hi mom!');
- });
+ expect(
+ container.querySelectorAll('.ais-search-box--submit')
+ ).toHaveLength(0);
});
});
describe('keyup', () => {
beforeEach(() => {
- container = document.body.appendChild(document.createElement('input'));
+ container = document.body.appendChild(document.createElement('div'));
});
describe('instant search', () => {
@@ -613,7 +277,7 @@ describe('searchBox()', () => {
describe('non-instant search', () => {
beforeEach(() => {
- widget = searchBox({ container, searchOnEnterKeyPressOnly: true });
+ widget = searchBox({ container, searchAsYouType: false });
helper.state.query = 'tes';
widget.init({ state: helper.state, helper, onHistoryChange });
});
@@ -621,30 +285,31 @@ describe('searchBox()', () => {
it('performs the search on keyup if ', () => {
// simulateInputEvent('test', 'tes', widget, helper, state, container);
// simulateKeyUpEvent({keyCode: 13}, widget, helper, state, container);
- container.value = 'test';
+ const input = container.querySelector('input');
+ input.value = 'test';
const e1 = new window.Event('input');
- container.dispatchEvent(e1);
+ input.dispatchEvent(e1);
expect(helper.setQuery).toHaveBeenCalledTimes(1);
expect(helper.search).toHaveBeenCalledTimes(0);
// setQuery is mocked and does not apply the modification of the helper
// we have to set it ourselves
- helper.state.query = container.value;
+ helper.state.query = input.value;
- const e2 = new window.Event('keyup', { keyCode: 13 });
- Object.defineProperty(e2, 'keyCode', { get: () => 13 });
- container.dispatchEvent(e2);
+ const e2 = new window.Event('submit');
+ input.parentElement.dispatchEvent(e2);
expect(helper.setQuery).toHaveBeenCalledTimes(1);
expect(helper.search).toHaveBeenCalledTimes(1);
});
it("doesn't perform the search on keyup if not ", () => {
- container.value = 'test';
+ const input = container.querySelector('input');
+ input.value = 'test';
const event = new window.Event('keyup', { keyCode: 42 });
Object.defineProperty(event, 'keyCode', { get: () => 42 });
- container.dispatchEvent(event);
+ input.dispatchEvent(event);
expect(helper.setQuery).toHaveBeenCalledTimes(0);
expect(helper.search).toHaveBeenCalledTimes(0);
@@ -654,7 +319,7 @@ describe('searchBox()', () => {
it('updates the input on history update', () => {
let cb;
- container = document.body.appendChild(document.createElement('input'));
+ container = document.body.appendChild(document.createElement('div'));
widget = searchBox({ container });
widget.init({
state,
@@ -663,68 +328,29 @@ describe('searchBox()', () => {
cb = fn;
},
});
- expect(container.value).toBe('');
- container.blur();
+ const input = container.querySelector('input');
+ expect(input.value).toBe('');
+ input.blur();
cb({ query: 'iphone' });
- expect(container.value).toBe('iphone');
+ expect(input.value).toBe('iphone');
});
it('handles external updates', () => {
- container = document.body.appendChild(document.createElement('input'));
- container.value = 'initial';
- widget = searchBox({ container });
- widget.init({ state, helper, onHistoryChange });
- container.blur();
- widget.render({
- helper: { state: { query: 'new value' } },
- searchMetadata: { isSearchStalled: false },
- });
- expect(container.value).toBe('new value');
- });
-
- it('does not update the input value when focused', () => {
- const input = document.createElement('input');
- container = document.body.appendChild(input);
- container.value = 'initial';
+ container = document.body.appendChild(document.createElement('div'));
widget = searchBox({ container });
widget.init({ state, helper, onHistoryChange });
- input.focus();
+ const input = container.querySelector('input');
+ input.blur();
widget.render({
helper: { state: { query: 'new value' } },
searchMetadata: { isSearchStalled: false },
});
- expect(container.value).toBe('initial');
+ expect(input.value).toBe('new value');
});
describe('autofocus', () => {
beforeEach(() => {
- container = document.body.appendChild(document.createElement('input'));
- container.focus = jest.fn();
- container.setSelectionRange = jest.fn();
- });
-
- describe('when auto', () => {
- beforeEach(() => {
- widget = searchBox({ container, autofocus: 'auto' });
- });
-
- it('is called if search is empty', () => {
- // Given
- helper.state.query = '';
- // When
- widget.init({ state, helper, onHistoryChange });
- // Then
- expect(container.focus).toHaveBeenCalled();
- });
-
- it('is not called if search is not empty', () => {
- // Given
- helper.state.query = 'foo';
- // When
- widget.init({ state, helper, onHistoryChange });
- // Then
- expect(container.focus).not.toHaveBeenCalled();
- });
+ container = document.body.appendChild(document.createElement('div'));
});
describe('when true', () => {
@@ -738,7 +364,7 @@ describe('searchBox()', () => {
// When
widget.init({ state, helper, onHistoryChange });
// Then
- expect(container.focus).toHaveBeenCalled();
+ expect(document.activeElement).toBe(container.querySelector('input'));
});
it('is called if search is not empty', () => {
@@ -747,7 +373,7 @@ describe('searchBox()', () => {
// When
widget.init({ state, helper, onHistoryChange });
// Then
- expect(container.focus).toHaveBeenCalled();
+ expect(document.activeElement).toBe(container.querySelector('input'));
});
it('forces cursor to be at the end of the query', () => {
@@ -756,7 +382,8 @@ describe('searchBox()', () => {
// When
widget.init({ state, helper, onHistoryChange });
// Then
- expect(container.setSelectionRange).toHaveBeenLastCalledWith(3, 3);
+ expect(container.querySelector('input').selectionStart).toEqual(3);
+ expect(container.querySelector('input').selectionEnd).toEqual(3);
});
});
@@ -771,7 +398,9 @@ describe('searchBox()', () => {
// When
widget.init({ state, helper, onHistoryChange });
// Then
- expect(container.focus).not.toHaveBeenCalled();
+ expect(document.activeElement).not.toBe(
+ container.querySelector('input')
+ );
});
it('is not called if search is not empty', () => {
@@ -780,10 +409,25 @@ describe('searchBox()', () => {
// When
widget.init({ state, helper, onHistoryChange });
// Then
- expect(container.focus).not.toHaveBeenCalled();
+ expect(document.activeElement).not.toBe(
+ container.querySelector('input')
+ );
});
});
});
+
+ describe('markup', () => {
+ it('renders correctly', () => {
+ container = document.createElement('div');
+ widget = searchBox({ container });
+
+ widget.init({ state, helper, onHistoryChange });
+
+ const wrapper = container.querySelector('.ais-SearchBox');
+
+ expect(wrapper).toMatchSnapshot();
+ });
+ });
});
function simulateKeyUpEvent(args, widget, helper, state, container) {
@@ -803,7 +447,7 @@ function simulateInputEvent(
stateQuery,
widget,
helper,
- state,
+ _state,
container
) {
if (query === undefined) {
diff --git a/src/widgets/search-box/defaultTemplates.js b/src/widgets/search-box/defaultTemplates.js
index a9da5ba542..3000dfdb15 100644
--- a/src/widgets/search-box/defaultTemplates.js
+++ b/src/widgets/search-box/defaultTemplates.js
@@ -1,59 +1,33 @@
/* eslint max-len: 0 */
export default {
- poweredBy: `
-
Foobar
',
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar');
- });
-
- it('should let the user define its own Hogan template', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- template: 'Foobar--{{url}}
',
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar--https://www.algolia.com/');
- });
-
- it('should let the user define its own function template', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- template: data => `Foobar--${data.url}
`,
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar--https://www.algolia.com/');
- });
-
- it('should gracefully handle templates with leading spaces', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- template: `
-
- Foobar
`,
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar');
- });
-
- it('should handle templates not wrapped in a node', () => {
- // Given
- widget = searchBox({
- ...defaultWidgetOptions,
- poweredBy: {
- template: 'Foobar ',
- },
- });
-
- // When
- widget.init(defaultInitOptions);
-
- // Then
- expect(container.innerHTML).toContain('Foobar');
- expect($('.should-be-found')).toHaveLength(1);
- });
- });
-
- describe('input event listener', () => {
- beforeEach(() => {
- container = document.body.appendChild(document.createElement('input'));
- });
-
- describe('instant search', () => {
- beforeEach(() => {
- widget = searchBox({ container });
- });
-
- it('performs a search on any change', () => {
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.search).toHaveBeenCalled();
- });
-
- it('sets the query on any change', () => {
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- });
-
- it('does nothing when query is the same as state', () => {
- simulateInputEvent('test', 'test', widget, helper, state, container);
- expect(helper.setQuery).not.toHaveBeenCalled();
- expect(helper.search).not.toHaveBeenCalled();
- });
- });
-
- describe('non-instant search and input event', () => {
- beforeEach(() => {
- widget = searchBox({ container, searchOnEnterKeyPressOnly: true });
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- });
-
- it('updates the query', () => {
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- });
-
- it('does not search', () => {
- expect(helper.search).toHaveBeenCalledTimes(0);
- });
- });
-
- describe('using a queryHook', () => {
- it('calls the queryHook', () => {
- const queryHook = jest.fn();
- widget = searchBox({ container, queryHook });
- simulateInputEvent(
- 'queryhook input',
- 'tes',
- widget,
- helper,
- state,
- container
- );
- expect(queryHook).toHaveBeenCalledTimes(1);
- expect(queryHook).toHaveBeenLastCalledWith(
- 'queryhook input',
- expect.any(Function)
- );
- });
-
- it('does not perform a search by default', () => {
- const queryHook = jest.fn();
- widget = searchBox({ container, queryHook });
- simulateInputEvent('test', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(0);
- expect(helper.search).not.toHaveBeenCalled();
- });
-
- it('when calling the provided search function', () => {
- const queryHook = jest.fn((query, search) => search(query));
- widget = searchBox({ container, queryHook });
- simulateInputEvent('oh rly?', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenCalledTimes(1);
- expect(helper.setQuery).toHaveBeenLastCalledWith('oh rly?');
- expect(helper.search).toHaveBeenCalled();
- });
-
- it('can override the query', () => {
- const queryHook = jest.fn((originalQuery, search) => search('hi mom!'));
- widget = searchBox({ container, queryHook });
- simulateInputEvent('come.on.', 'tes', widget, helper, state, container);
- expect(helper.setQuery).toHaveBeenLastCalledWith('hi mom!');
- });
+ expect(
+ container.querySelectorAll('.ais-search-box--submit')
+ ).toHaveLength(0);
});
});
describe('keyup', () => {
beforeEach(() => {
- container = document.body.appendChild(document.createElement('input'));
+ container = document.body.appendChild(document.createElement('div'));
});
describe('instant search', () => {
@@ -613,7 +277,7 @@ describe('searchBox()', () => {
describe('non-instant search', () => {
beforeEach(() => {
- widget = searchBox({ container, searchOnEnterKeyPressOnly: true });
+ widget = searchBox({ container, searchAsYouType: false });
helper.state.query = 'tes';
widget.init({ state: helper.state, helper, onHistoryChange });
});
@@ -621,30 +285,31 @@ describe('searchBox()', () => {
it('performs the search on keyup if
- Search by
- Algolia
-
`,
reset: `
-
+
`,
- magnifier: `
-
-
-
+ submit: `
+
`,
loadingIndicator: `
-
-
-
`,
};
diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js
index adbf371731..dbd0ac5bb2 100644
--- a/src/widgets/search-box/search-box.js
+++ b/src/widgets/search-box/search-box.js
@@ -1,67 +1,42 @@
import forEach from 'lodash/forEach';
import cx from 'classnames';
-import { bemHelper, getContainerNode, renderTemplate } from '../../lib/utils';
+import { getContainerNode, renderTemplate } from '../../lib/utils';
import connectSearchBox from '../../connectors/search-box/connectSearchBox';
import defaultTemplates from './defaultTemplates';
+import { component } from '../../lib/suit';
-const bem = bemHelper('ais-search-box');
-const KEY_ENTER = 13;
-const KEY_SUPPRESS = 8;
+const suit = component('SearchBox');
const renderer = ({
containerNode,
cssClasses,
placeholder,
- poweredBy,
templates,
autofocus,
- searchOnEnterKeyPressOnly,
- wrapInput,
- reset,
- magnifier,
- loadingIndicator,
- // eslint-disable-next-line complexity
+ searchAsYouType,
+ showReset,
+ showSubmit,
+ showLoadingIndicator,
}) => (
{ refine, clear, query, onHistoryChange, isSearchStalled },
isFirstRendering
) => {
if (isFirstRendering) {
- const INPUT_EVENT = window.addEventListener ? 'input' : 'propertychange';
- const input = createInput(containerNode);
- const isInputTargeted = input === containerNode;
- let queryFromInput = query;
-
- if (isInputTargeted) {
- // To replace the node, we need to create an intermediate node
- const placeholderNode = document.createElement('div');
- input.parentNode.insertBefore(placeholderNode, input);
- const parentNode = input.parentNode;
- const wrappedInput = wrapInput ? wrapInputFn(input, cssClasses) : input;
- parentNode.replaceChild(wrappedInput, placeholderNode);
-
- const initialInputValue = input.value;
-
- // if the input contains a value, we provide it to the state
- if (initialInputValue) {
- queryFromInput = initialInputValue;
- refine(initialInputValue, false);
- }
- } else {
- const wrappedInput = wrapInput ? wrapInputFn(input, cssClasses) : input;
- containerNode.appendChild(wrappedInput);
- }
-
- if (magnifier) addMagnifier(input, magnifier, templates);
- if (reset) addReset(input, reset, templates, clear);
- if (loadingIndicator)
- addLoadingIndicator(input, loadingIndicator, templates);
-
- addDefaultAttributesToInput(placeholder, input, queryFromInput, cssClasses);
+ const input = document.createElement('input');
+ const wrappedInput = wrapInputFn(input, cssClasses);
+ containerNode.appendChild(wrappedInput);
- // Optional "powered by Algolia" widget
- if (poweredBy) {
- addPoweredBy(input, poweredBy, templates);
+ if (showSubmit) {
+ addSubmit(input, cssClasses, templates);
}
+ if (showReset) {
+ addReset(input, cssClasses, templates, clear);
+ }
+ if (showLoadingIndicator) {
+ addLoadingIndicator(input, cssClasses, templates);
+ }
+
+ addDefaultAttributesToInput(placeholder, input, query, cssClasses);
// When the page is coming from BFCache
// (https://developer.mozilla.org/en-US/docs/Working_with_BFCache)
@@ -73,7 +48,7 @@ const renderer = ({
// - use back button
// - input query is empty (because autocomplete = off)
window.addEventListener('pageshow', () => {
- input.value = queryFromInput;
+ input.value = query;
});
// Update value when query change outside of the input
@@ -81,76 +56,65 @@ const renderer = ({
input.value = fullState.query || '';
});
- if (autofocus === true || (autofocus === 'auto' && queryFromInput === '')) {
+ if (autofocus === true) {
input.focus();
- input.setSelectionRange(queryFromInput.length, queryFromInput.length);
+ input.setSelectionRange(query.length, query.length);
}
- // search on enter
- if (searchOnEnterKeyPressOnly) {
- addListener(input, INPUT_EVENT, e => {
- refine(getValue(e), false);
+ const form = input.parentElement;
+
+ if (searchAsYouType) {
+ input.addEventListener('input', event => {
+ refine(event.currentTarget.value);
});
- addListener(input, 'keyup', e => {
- if (e.keyCode === KEY_ENTER) refine(getValue(e));
+ form.addEventListener('submit', event => {
+ event.preventDefault();
+ input.blur();
});
} else {
- addListener(input, INPUT_EVENT, getInputValueAndCall(refine));
-
- // handle IE8 weirdness where BACKSPACE key will not trigger an input change..
- // can be removed as soon as we remove support for it
- if (INPUT_EVENT === 'propertychange' || window.attachEvent) {
- addListener(
- input,
- 'keyup',
- ifKey(KEY_SUPPRESS, getInputValueAndCall(refine))
- );
- }
+ input.addEventListener('input', event => {
+ refine(event.currentTarget.value, false);
+ });
+ form.addEventListener('submit', event => {
+ refine(input.value);
+ event.preventDefault();
+ input.blur();
+ });
}
- } else {
- renderAfterInit({
- containerNode,
- query,
- loadingIndicator,
- isSearchStalled,
- });
- }
- if (reset) {
- const resetBtnSelector = `.${cx(bem('reset-wrapper'))}`;
- // hide reset button when there is no query
- const resetButton =
- containerNode.tagName === 'INPUT'
- ? containerNode.parentNode.querySelector(resetBtnSelector)
- : containerNode.querySelector(resetBtnSelector);
- resetButton.style.display = query && query.trim() ? 'block' : 'none';
+ return;
}
-};
-function renderAfterInit({
- containerNode,
- query,
- loadingIndicator,
- isSearchStalled,
-}) {
- const input = getInput(containerNode);
+ const input = containerNode.querySelector('input');
const isFocused = document.activeElement === input;
+
if (!isFocused && query !== input.value) {
input.value = query;
}
- if (loadingIndicator) {
- const rootElement =
- containerNode.tagName === 'INPUT'
- ? containerNode.parentNode
- : containerNode.firstChild;
+ if (showLoadingIndicator) {
+ const loadingIndicatorElement = containerNode.querySelector(
+ `.${cssClasses.loadingIndicator}`
+ );
+
if (isSearchStalled) {
- rootElement.classList.add('ais-stalled-search');
+ loadingIndicatorElement.removeAttribute('hidden');
} else {
- rootElement.classList.remove('ais-stalled-search');
+ loadingIndicatorElement.setAttribute('hidden', '');
}
}
-}
+
+ if (showReset) {
+ const resetElement = containerNode.querySelector(`.${cssClasses.reset}`);
+ const isUserTyping = Boolean(query && query.trim());
+
+ if (isUserTyping && !isSearchStalled) {
+ resetElement.removeAttribute('hidden');
+ } else {
+ resetElement.setAttribute('hidden', '');
+ }
+ }
+};
const disposer = containerNode => () => {
const range = document.createRange(); // IE10+
@@ -162,68 +126,51 @@ const usage = `Usage:
searchBox({
container,
[ placeholder ],
- [ cssClasses.{input,poweredBy} ],
- [ poweredBy=false || poweredBy.{template, cssClasses.{root,link}} ],
- [ wrapInput ],
- [ autofocus ],
- [ searchOnEnterKeyPressOnly ],
- [ queryHook ]
- [ reset=true || reset.{template, cssClasses.{root}} ]
+ [ cssClasses.{root, input, reset, submit, loadingIndicator} ],
+ [ autofocus = false ],
+ [ searchAsYouType = true ],
+ [ showReset = true ],
+ [ showSubmit = true ],
+ [ showLoadingIndicator = true ],
+ [ queryHook ],
+ [ templates.{reset, submit, loadingIndicator} ],
})`;
/**
- * @typedef {Object} SearchBoxPoweredByCSSClasses
- * @property {string|string[]} [root] CSS class to add to the root element.
- * @property {string|string[]} [link] CSS class to add to the link element.
- */
-
-/**
- * @typedef {Object} SearchBoxPoweredByOption
- * @property {function|string} template Template used for displaying the link. Can accept a function or a Hogan string.
- * @property {SearchBoxPoweredByCSSClasses} [cssClasses] CSS classes added to the powered-by badge.
- */
-
-/**
- * @typedef {Object} SearchBoxResetOption
- * @property {function|string} template Template used for displaying the button. Can accept a function or a Hogan string.
- * @property {{root: string}} [cssClasses] CSS classes added to the reset button.
- */
-
-/**
- * @typedef {Object} SearchBoxLoadingIndicatorOption
- * @property {function|string} template Template used for displaying the button. Can accept a function or a Hogan string.
- * @property {{root: string}} [cssClasses] CSS classes added to the loading-indicator element.
+ * @typedef {Ojbect} SearchBoxTemplates
+ * @property {function|string} submit Template used for displaying the submit. Can accept a function or a Hogan string.
+ * @property {function|string} reset Template used for displaying the button. Can accept a function or a Hogan string.
+ * @property {function|string} loadingIndicator Template used for displaying the button. Can accept a function or a Hogan string.
*/
/**
* @typedef {Object} SearchBoxCSSClasses
- * @property {string|string[]} [root] CSS class to add to the
- * wrapping `` (if `wrapInput` set to `true`).
- * @property {string|string[]} [input] CSS class to add to the input.
- */
-
-/**
- * @typedef {Object} SearchBoxMagnifierOption
- * @property {function|string} template Template used for displaying the magnifier. Can accept a function or a Hogan string.
- * @property {{root: string}} [cssClasses] CSS classes added to the magnifier.
+ * @property {string|string[]} [root] CSS class to add to the wrapping `
`
+ * @property {string|string[]} [form] CSS class to add to the form
+ * @property {string|string[]} [input] CSS class to add to the input.
+ * @property {string|string[]} [reset] CSS classes added to the reset button.
+ * @property {string|string[]} [resetIcon] CSS classes added to the reset icon.
+ * @property {string|string[]} [loadingIndicator] CSS classes added to the loading indicator element.
+ * @property {string|string[]} [loadingIcon] CSS classes added to the loading indicator icon.
+ * @property {string|string[]} [submit] CSS classes added to the submit.
*/
/**
* @typedef {Object} SearchBoxWidgetOptions
- * @property {string|HTMLElement} container CSS Selector or HTMLElement to insert the widget. If the CSS selector or the HTMLElement is an existing input, the widget will use it.
- * @property {string} [placeholder] Input's placeholder.
- * @property {boolean|SearchBoxPoweredByOption} [poweredBy=false] Define if a "powered by Algolia" link should be added near the input.
- * @property {boolean|SearchBoxResetOption} [reset=true] Define if a reset button should be added in the input when there is a query.
- * @property {boolean|SearchBoxMagnifierOption} [magnifier=true] Define if a magnifier should be added at beginning of the input to indicate a search input.
- * @property {boolean|SearchBoxLoadingIndicatorOption} [loadingIndicator=false] Define if a loading indicator should be added at beginning of the input to indicate that search is currently stalled.
- * @property {boolean} [wrapInput=true] Wrap the input in a `div.ais-search-box`.
- * @property {boolean|string} [autofocus="auto"] autofocus on the input.
- * @property {boolean} [searchOnEnterKeyPressOnly=false] If set, trigger the search
+ * @property {string|HTMLElement} container CSS Selector or HTMLElement to insert the widget
+ * @property {string} [placeholder] The placeholder of the input
+ * @property {boolean} [autofocus=false] Whether the input should be autofocused
+ * @property {boolean} [searchAsYouType=true] If set, trigger the search
* once `` is pressed only.
- * @property {SearchBoxCSSClasses} [cssClasses] CSS classes to add.
- * @property {function} [queryHook] A function that will be called every time a new search would be done. You
- * will get the query as first parameter and a search(query) function to call as the second parameter.
- * This queryHook can be used to debounce the number of searches done from the searchBox.
+ * @property {boolean} [showReset=true] Whether to show the reset button
+ * @property {boolean} [showSubmit=true] Whether to show the submit button
+ * @property {boolean} [showLoadingIndicator=true] Whether to show the loading indicator (replaces the submit if
+ * the search is stalled)
+ * @property {SearchBoxCSSClasses} [cssClasses] CSS classes to add
+ * @property {SearchBoxTemplates} [templates] Templates used for customizing the rendering of the searchbox
+ * @property {function} [queryHook] A function that is called every time a new search is done. You
+ * will get the query as the first parameter and a search (query) function to call as the second parameter.
+ * This `queryHook` can be used to debounce the number of searches done from the search box.
*/
/**
@@ -243,25 +190,20 @@ searchBox({
* instantsearch.widgets.searchBox({
* container: '#q',
* placeholder: 'Search for products',
- * autofocus: false,
- * poweredBy: true,
- * reset: true,
- * loadingIndicator: false
* })
* );
*/
export default function searchBox({
container,
placeholder = '',
- cssClasses = {},
- poweredBy = false,
- wrapInput = true,
- autofocus = 'auto',
- searchOnEnterKeyPressOnly = false,
- reset = true,
- magnifier = true,
- loadingIndicator = false,
+ cssClasses: userCssClasses = {},
+ autofocus = false,
+ searchAsYouType = true,
+ showReset = true,
+ showSubmit = true,
+ showLoadingIndicator = true,
queryHook,
+ templates,
} = {}) {
if (!container) {
throw new Error(usage);
@@ -269,28 +211,60 @@ export default function searchBox({
const containerNode = getContainerNode(container);
- // Only possible values are 'auto', true and false
- if (typeof autofocus !== 'boolean') {
- autofocus = 'auto';
+ if (containerNode.tagName === 'INPUT') {
+ // eslint-disable-next-line
+ // FIXME: the link should be updated when the documentation is migrated in the main Algolia doc
+ throw new Error(
+ `[InstantSearch.js] Since in version 3, \`container\` can not be an \`input\` anymore.
+
+Learn more in the [migration guide](https://community.algolia.com/instantsearch.js/v3/guides/v3-migration.html).`
+ );
}
- // Convert to object if only set to true
- if (poweredBy === true) {
- poweredBy = {};
+ // eslint-disable-next-line
+ // FIXME: the link should be updated when the documentation is migrated in the main Algolia doc
+ if (typeof autofocus !== 'boolean') {
+ throw new Error(
+ `[InstantSearch.js] Since in version 3, \`autofocus\` only supports boolean values.
+
+Learn more in the [migration guide](https://community.algolia.com/instantsearch.js/v3/guides/v3-migration.html).`
+ );
}
+ const cssClasses = {
+ root: cx(suit(), userCssClasses.root),
+ form: cx(suit({ descendantName: 'form' }), userCssClasses.form),
+ input: cx(suit({ descendantName: 'input' }), userCssClasses.input),
+ submit: cx(suit({ descendantName: 'submit' }), userCssClasses.submit),
+ submitIcon: cx(
+ suit({ descendantName: 'submitIcon' }),
+ userCssClasses.submitIcon
+ ),
+ reset: cx(suit({ descendantName: 'reset' }), userCssClasses.reset),
+ resetIcon: cx(
+ suit({ descendantName: 'resetIcon' }),
+ userCssClasses.resetIcon
+ ),
+ loadingIndicator: cx(
+ suit({ descendantName: 'loadingIndicator' }),
+ userCssClasses.loadingIndicator
+ ),
+ loadingIcon: cx(
+ suit({ descendantName: 'loadingIcon' }),
+ userCssClasses.loadingIcon
+ ),
+ };
+
const specializedRenderer = renderer({
containerNode,
cssClasses,
placeholder,
- poweredBy,
- templates: defaultTemplates,
+ templates: { ...defaultTemplates, ...templates },
autofocus,
- searchOnEnterKeyPressOnly,
- wrapInput,
- reset,
- magnifier,
- loadingIndicator,
+ searchAsYouType,
+ showReset,
+ showSubmit,
+ showLoadingIndicator,
});
try {
@@ -299,62 +273,11 @@ export default function searchBox({
disposer(containerNode)
);
return makeWidget({ queryHook });
- } catch (e) {
+ } catch (error) {
throw new Error(usage);
}
}
-// the 'input' event is triggered when the input value changes
-// in any case: typing, copy pasting with mouse..
-// 'onpropertychange' is the IE8 alternative until we support IE8
-// but it's flawed: http://help.dottoro.com/ljhxklln.php
-
-function createInput(containerNode) {
- // Returns reference to targeted input if present, or create a new one
- if (containerNode.tagName === 'INPUT') {
- return containerNode;
- }
- return document.createElement('input');
-}
-
-function getInput(containerNode) {
- // Returns reference to targeted input if present, or look for it inside
- if (containerNode.tagName === 'INPUT') {
- return containerNode;
- }
- return containerNode.querySelector('input');
-}
-
-function wrapInputFn(input, cssClasses) {
- // Wrap input in a .ais-search-box div
- const wrapper = document.createElement('div');
- const CSSClassesToAdd = cx(bem(null), cssClasses.root).split(' ');
- CSSClassesToAdd.forEach(cssClass => wrapper.classList.add(cssClass));
- wrapper.appendChild(input);
- return wrapper;
-}
-
-function addListener(el, type, fn) {
- if (el.addEventListener) {
- el.addEventListener(type, fn);
- } else {
- el.attachEvent(`on${type}`, fn);
- }
-}
-
-function getValue(e) {
- return (e.currentTarget ? e.currentTarget : e.srcElement).value;
-}
-
-function ifKey(expectedKeyCode, func) {
- return actualEvent =>
- actualEvent.keyCode === expectedKeyCode && func(actualEvent);
-}
-
-function getInputValueAndCall(func) {
- return actualEvent => func(getValue(actualEvent));
-}
-
function addDefaultAttributesToInput(placeholder, input, query, cssClasses) {
const defaultAttributes = {
autocapitalize: 'off',
@@ -376,8 +299,7 @@ function addDefaultAttributesToInput(placeholder, input, query, cssClasses) {
});
// Add classes
- const CSSClassesToAdd = cx(bem('input'), cssClasses.input).split(' ');
- CSSClassesToAdd.forEach(cssClass => input.classList.add(cssClass));
+ input.className = cssClasses.input;
}
/**
@@ -385,152 +307,96 @@ function addDefaultAttributesToInput(placeholder, input, query, cssClasses) {
* it should reset the query.
* @private
* @param {HTMLElement} input the DOM node of the input of the searchbox
- * @param {object} reset the user options (cssClasses and template)
- * @param {object} $2 the default templates
+ * @param {object} cssClasses the object containing all the css classes
+ * @param {object} templates the templates object
* @param {function} clearFunction function called when the element is activated (clicked)
- * @returns {undefined} returns nothing
+ * @returns {undefined} Modifies the input
*/
-function addReset(input, reset, { reset: resetTemplate }, clearFunction) {
- reset = {
- cssClasses: {},
- template: resetTemplate,
- ...reset,
- };
-
- const resetCSSClasses = {
- root: cx(bem('reset'), reset.cssClasses.root),
- };
-
+function addReset(input, cssClasses, templates, clearFunction) {
const stringNode = renderTemplate({
- templateKey: 'template',
- templates: reset,
+ templateKey: 'reset',
+ templates,
data: {
- cssClasses: resetCSSClasses,
+ cssClasses,
},
});
- const htmlNode = createNodeFromString(stringNode, cx(bem('reset-wrapper')));
+ const node = document.createElement('button');
+ node.className = cssClasses.reset;
+ node.setAttribute('hidden', '');
+ node.type = 'reset';
+ node.title = 'Clear the search query';
+ node.innerHTML = stringNode;
- input.parentNode.appendChild(htmlNode);
+ input.parentNode.appendChild(node);
- htmlNode.addEventListener('click', event => {
- event.preventDefault();
+ node.addEventListener('click', () => {
+ input.focus();
clearFunction();
});
}
/**
- * Adds a magnifying glass in the searchbox widget
+ * Adds a button with a magnifying glass in the searchbox widget
* @private
* @param {HTMLElement} input the DOM node of the input of the searchbox
- * @param {object} magnifier the user options (cssClasses and template)
- * @param {object} $2 the default templates
- * @returns {undefined} returns nothing
+ * @param {object} cssClasses the user options (cssClasses and template)
+ * @param {object} templates the object containing all the templates
+ * @returns {undefined} Modifies the input
*/
-function addMagnifier(input, magnifier, { magnifier: magnifierTemplate }) {
- magnifier = {
- cssClasses: {},
- template: magnifierTemplate,
- ...magnifier,
- };
-
- const magnifierCSSClasses = {
- root: cx(bem('magnifier'), magnifier.cssClasses.root),
- };
-
+function addSubmit(input, cssClasses, templates) {
const stringNode = renderTemplate({
- templateKey: 'template',
- templates: magnifier,
+ templateKey: 'submit',
+ templates,
data: {
- cssClasses: magnifierCSSClasses,
+ cssClasses,
},
});
- const htmlNode = createNodeFromString(
- stringNode,
- cx(bem('magnifier-wrapper'))
- );
+ const node = document.createElement('button');
+ node.className = cssClasses.submit;
+ node.type = 'submit';
+ node.title = 'Submit the search query';
+ node.innerHTML = stringNode;
- input.parentNode.appendChild(htmlNode);
+ input.parentNode.appendChild(node);
}
-function addLoadingIndicator(
- input,
- loadingIndicator,
- { loadingIndicator: loadingIndicatorTemplate }
-) {
- loadingIndicator = {
- cssClasses: {},
- template: loadingIndicatorTemplate,
- ...loadingIndicator,
- };
-
- const loadingIndicatorCSSClasses = {
- root: cx(bem('loading-indicator'), loadingIndicator.cssClasses.root),
- };
-
+/**
+ * Adds a loading indicator (spinner) to the search box
+ * @param {DomElement} input DOM element where to add the loading indicator
+ * @param {Object} cssClasses css classes definition
+ * @param {Object} templates templates of the widget
+ * @returns {undefined} Modifies the input
+ */
+function addLoadingIndicator(input, cssClasses, templates) {
const stringNode = renderTemplate({
- templateKey: 'template',
- templates: loadingIndicator,
+ templateKey: 'loadingIndicator',
+ templates,
data: {
- cssClasses: loadingIndicatorCSSClasses,
+ cssClasses,
},
});
- const htmlNode = createNodeFromString(
- stringNode,
- cx(bem('loading-indicator-wrapper'))
- );
+ const node = document.createElement('span');
+ node.setAttribute('hidden', '');
+ node.className = cssClasses.loadingIndicator;
+ node.innerHTML = stringNode;
- input.parentNode.appendChild(htmlNode);
+ input.parentNode.appendChild(node);
}
-/**
- * Adds a powered by in the searchbox widget
- * @private
- * @param {HTMLElement} input the DOM node of the input of the searchbox
- * @param {object} poweredBy the user options (cssClasses and template)
- * @param {object} templates the default templates
- * @returns {undefined} returns nothing
- */
-function addPoweredBy(input, poweredBy, { poweredBy: poweredbyTemplate }) {
- // Default values
- poweredBy = {
- cssClasses: {},
- template: poweredbyTemplate,
- ...poweredBy,
- };
-
- const poweredByCSSClasses = {
- root: cx(bem('powered-by'), poweredBy.cssClasses.root),
- link: cx(bem('powered-by-link'), poweredBy.cssClasses.link),
- };
-
- const url =
- 'https://www.algolia.com/?' +
- 'utm_source=instantsearch.js&' +
- 'utm_medium=website&' +
- `utm_content=${location.hostname}&` +
- 'utm_campaign=poweredby';
-
- const stringNode = renderTemplate({
- templateKey: 'template',
- templates: poweredBy,
- data: {
- cssClasses: poweredByCSSClasses,
- url,
- },
- });
+function wrapInputFn(input, cssClasses) {
+ const wrapper = document.createElement('div');
+ wrapper.className = cssClasses.root;
- const htmlNode = createNodeFromString(stringNode);
+ const form = document.createElement('form');
+ form.className = cssClasses.form;
+ form.noValidate = true;
+ form.action = ''; // show search button on iOS keyboard
- input.parentNode.insertBefore(htmlNode, input.nextSibling);
-}
+ form.appendChild(input);
+ wrapper.appendChild(form);
-// Cross-browser way to create a DOM node from a string. We wrap in
-// a `span` to make sure we have one and only one node.
-function createNodeFromString(stringNode, rootClassname = '') {
- const tmpNode = document.createElement('div');
- tmpNode.innerHTML = `${stringNode.trim()}`;
- return tmpNode.firstChild;
+ return wrapper;
}