feat(DOM): add an align class (#108)

algolia · Jun 10, 2016 · 9421897 · 9421897
1 parent 17d0c75
commit 9421897
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/lib/DocSearch.js b/src/lib/DocSearch.js
@@ -52,6 +52,7 @@ class DocSearch {
 
     this.client = algoliasearch(this.appId, this.apiKey);
     this.client.addAlgoliaAgent('docsearch.js ' + version);
+
     this.autocomplete = autocomplete(this.input, autocompleteOptions, [{
       source: this.getAutocompleteSource(),
       templates: {
@@ -62,7 +63,11 @@ class DocSearch {
     this.autocomplete.on(
       'autocomplete:selected',
       this.handleSelected.bind(null, this.autocomplete.autocomplete)
-    );
+    )
+    this.autocomplete.on(
+      'autocomplete:shown',
+       this.handleShown.bind(null, this.input)
+    )
   }
 
   /**
@@ -184,6 +189,27 @@ class DocSearch {
     input.setVal('');
     window.location.href = suggestion.url;
   }
+
+  handleShown(input, event) {
+    var middleOfInput = input.offset().left + input.width() / 2;
+    var middleOfWindow = $(document).width() / 2;
+
+    if (isNaN(middleOfWindow)) {
+      middleOfWindow = 900;
+    }
+
+    var alignClass = middleOfInput - middleOfWindow >= 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
+    var otherAlignClass = middleOfInput - middleOfWindow < 0 ? 'algolia-autocomplete-right' : 'algolia-autocomplete-left';
+
+    var autocompleteWrapper = $('.algolia-autocomplete');
+    if (! autocompleteWrapper.hasClass(alignClass)) {
+      autocompleteWrapper.addClass(alignClass)
+    }
+
+    if (autocompleteWrapper.hasClass(otherAlignClass)) {
+      autocompleteWrapper.removeClass(otherAlignClass);
+    }
+  }
 }
 
 export default DocSearch;

diff --git a/test/DocSearch-test.js b/test/DocSearch-test.js
@@ -207,15 +207,15 @@ describe('DocSearch', () => {
       expect(AutoComplete.calledOnce).toBe(true);
       expect(AutoComplete.calledWith($input, 'bar')).toBe(true);
     });
-    it('should listen to the selected event of autocomplete', () => {
+    it('should listen to the selected and shown event of autocomplete', () => {
       // Given
       let options = defaultOptions;
 
       // When
       new DocSearch(options);
 
       // Then
-      expect(autocomplete.on.calledOnce).toBe(true);
+      expect(autocomplete.on.calledTwice).toBe(true);
       expect(autocomplete.on.calledWith('autocomplete:selected')).toBe(true);
     });
   });
@@ -389,6 +389,25 @@ describe('DocSearch', () => {
     });
   });
 
+  describe('handleShown', () => {
+    it('should add an alignment class', () => {
+      // Given
+      const options = {
+        apiKey: 'key',
+        indexName: 'foo',
+        inputSelector: '#input'
+      };
+
+      // When
+      let ds = new DocSearch(options);
+
+      ds.autocomplete.trigger('autocomplete:shown');
+
+      expect($('.algolia-autocomplete').attr('class')).toEqual('algolia-autocomplete algolia-autocomplete-left');
+
+    });
+  });
+
   describe('formatHits', () => {
     it('should not mutate the input', () => {
       // Given