Skip to content

Commit 9421897

Browse files
author
maxiloc
authored
feat(DOM): add an align class (#108)
1 parent 17d0c75 commit 9421897

File tree

2 files changed

+48
-3
lines changed

2 files changed

+48
-3
lines changed

src/lib/DocSearch.js

+27-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ class DocSearch {
5252

5353
this.client = algoliasearch(this.appId, this.apiKey);
5454
this.client.addAlgoliaAgent('docsearch.js ' + version);
55+
5556
this.autocomplete = autocomplete(this.input, autocompleteOptions, [{
5657
source: this.getAutocompleteSource(),
5758
templates: {
@@ -62,7 +63,11 @@ class DocSearch {
6263
this.autocomplete.on(
6364
'autocomplete:selected',
6465
this.handleSelected.bind(null, this.autocomplete.autocomplete)
65-
);
66+
)
67+
this.autocomplete.on(
68+
'autocomplete:shown',
69+
this.handleShown.bind(null, this.input)
70+
)
6671
}
6772

6873
/**
@@ -184,6 +189,27 @@ class DocSearch {
184189
input.setVal('');
185190
window.location.href = suggestion.url;
186191
}
192+
193+
handleShown(input, event) {
194+
var middleOfInput = input.offset().left + input.width() / 2;
195+
var middleOfWindow = $(document).width() / 2;
196+
197+
if (isNaN(middleOfWindow)) {
198+
middleOfWindow = 900;
199+
}
200+
201+
var alignClass = middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
202+
var otherAlignClass = middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
203+
204+
var autocompleteWrapper = $('.algolia-autocomplete');
205+
if (! autocompleteWrapper.hasClass(alignClass)) {
206+
autocompleteWrapper.addClass(alignClass)
207+
}
208+
209+
if (autocompleteWrapper.hasClass(otherAlignClass)) {
210+
autocompleteWrapper.removeClass(otherAlignClass);
211+
}
212+
}
187213
}
188214

189215
export default DocSearch;

test/DocSearch-test.js

+21-2
Original file line numberDiff line numberDiff line change
@@ -207,15 +207,15 @@ describe('DocSearch', () => {
207207
expect(AutoComplete.calledOnce).toBe(true);
208208
expect(AutoComplete.calledWith($input, 'bar')).toBe(true);
209209
});
210-
it('should listen to the selected event of autocomplete', () => {
210+
it('should listen to the selected and shown event of autocomplete', () => {
211211
// Given
212212
let options = defaultOptions;
213213

214214
// When
215215
new DocSearch(options);
216216

217217
// Then
218-
expect(autocomplete.on.calledOnce).toBe(true);
218+
expect(autocomplete.on.calledTwice).toBe(true);
219219
expect(autocomplete.on.calledWith('autocomplete:selected')).toBe(true);
220220
});
221221
});
@@ -389,6 +389,25 @@ describe('DocSearch', () => {
389389
});
390390
});
391391

392+
describe('handleShown', () => {
393+
it('should add an alignment class', () => {
394+
// Given
395+
const options = {
396+
apiKey: 'key',
397+
indexName: 'foo',
398+
inputSelector: '#input'
399+
};
400+
401+
// When
402+
let ds = new DocSearch(options);
403+
404+
ds.autocomplete.trigger('autocomplete:shown');
405+
406+
expect($('.algolia-autocomplete').attr('class')).toEqual('algolia-autocomplete algolia-autocomplete-left');
407+
408+
});
409+
});
410+
392411
describe('formatHits', () => {
393412
it('should not mutate the input', () => {
394413
// Given

0 commit comments

Comments
 (0)