Merge branch 'develop' into cursorchanged-fired-on-hover

Author: redox

README.md

@@ -279,6 +279,17 @@ When initializing an autocomplete, there are a number of options you can configu
   * `header` – the header to prepend to the dropdown menu
   * `footer` – the footer to append to the dropdown menu
 
+* `cssClasses` – An optional hash overriding the default css classes.
+  * `root` – the root classes. Defaults to `algolia-autocomplete`.
+  * `prefix` – the CSS class prefix of all nested elements. Defaults to `aa`.
+  * `dropdownMenu` – the dropdown menu CSS class. Defaults to `dropdownMenu`.
+  * `input` – the input CSS class. Defaults to `input`.
+  * `hint` – the hint CSS class. Defaults to `hint`.
+  * `suggestions` – the suggestions list CSS class. Defaults to `suggestions`.
+  * `suggestion` – the suggestion wrapper CSS class. Defaults to `suggestion`.
+  * `cursor` – the cursor CSS class. Defaults to `cursor`.
+  * `dataset` – the dataset CSS class. Defaults to `dataset`.
+
 ```html
 <script type="text/template" id="my-custom-menu-template">
   <div class="my-custom-menu">

src/angular/directive.js

@@ -71,6 +71,7 @@ angular.module('algolia.autocomplete', [])
             openOnFocus: scope.options.openOnFocus,
             templates: scope.options.templates,
             debug: scope.options.debug,
+            cssClasses: scope.options.cssClasses,
             datasets: scope.datasets
           });
         }

src/autocomplete/css.js

@@ -49,6 +49,17 @@ var css = {
   rtl: {
     left: 'auto',
     right: '0'
+  },
+  defaultClasses: {
+    root: 'algolia-autocomplete',
+    prefix: 'aa',
+    dropdownMenu: 'dropdown-menu',
+    input: 'input',
+    hint: 'hint',
+    suggestions: 'suggestions',
+    suggestion: 'suggestion',
+    cursor: 'cursor',
+    dataset: 'dataset'
   }
 };
 

src/autocomplete/dataset.js

@@ -36,9 +36,16 @@ function Dataset(o) {
 
   this.templates = getTemplates(o.templates, this.displayFn);
 
-  this.$el = o.$menu && o.$menu.find('.aa-dataset-' + this.name).length > 0 ?
-    DOM.element(o.$menu.find('.aa-dataset-' + this.name)[0]) :
-    DOM.element(html.dataset.replace('%CLASS%', this.name));
+  this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
+
+  var clazz = _.className(this.cssClasses.prefix, this.cssClasses.dataset);
+  this.$el = o.$menu && o.$menu.find(clazz + '-' + this.name).length > 0 ?
+    DOM.element(o.$menu.find(clazz + '-' + this.name)[0]) :
+    DOM.element(
+      html.dataset.replace('%CLASS%', this.name)
+        .replace('%PREFIX%', this.cssClasses.prefix)
+        .replace('%DATASET%', this.cssClasses.dataset)
+    );
 
   this.$menu = o.$menu;
 }
@@ -96,8 +103,8 @@ _.mixin(Dataset.prototype, EventEmitter, {
     }
 
     if (this.$menu) {
-      this.$menu.addClass('aa-' + (hasSuggestions ? 'with' : 'without') + '-' + this.name)
-        .removeClass('aa-' + (hasSuggestions ? 'without' : 'with') + '-' + this.name);
+      this.$menu.addClass(this.cssClasses.prefix + '-' + (hasSuggestions ? 'with' : 'without') + '-' + this.name)
+        .removeClass(this.cssClasses.prefix + '-' + (hasSuggestions ? 'without' : 'with') + '-' + this.name);
     }
 
     this.trigger('rendered');
@@ -112,8 +119,12 @@ _.mixin(Dataset.prototype, EventEmitter, {
       var args = [].slice.call(arguments, 0);
       var $suggestions;
       var nodes;
+      var self = this;
 
-      $suggestions = DOM.element(html.suggestions).css(css.suggestions);
+      var suggestionsHtml = html.suggestions.
+        replace('%PREFIX%', this.cssClasses.prefix).
+        replace('%SUGGESTIONS%', this.cssClasses.suggestions);
+      $suggestions = DOM.element(suggestionsHtml).css(css.suggestions);
 
       // jQuery#append doesn't support arrays as the first argument
       // until version 1.8, see http://bugs.jquery.com/ticket/11231
@@ -125,7 +136,10 @@ _.mixin(Dataset.prototype, EventEmitter, {
       function getSuggestionNode(suggestion) {
         var $el;
 
-        $el = DOM.element(html.suggestion)
+        var suggestionHtml = html.suggestion.
+          replace('%PREFIX%', self.cssClasses.prefix).
+          replace('%SUGGESTION%', self.cssClasses.suggestion);
+        $el = DOM.element(suggestionHtml)
           .append(that.templates.suggestion.apply(this, [suggestion].concat(args)));
 
         $el.data(datasetKey, that.name);

src/autocomplete/dropdown.js

@@ -30,22 +30,24 @@ function Dropdown(o) {
 
   this.isOpen = false;
   this.isEmpty = true;
+  this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
 
   // bound functions
   onSuggestionClick = _.bind(this._onSuggestionClick, this);
   onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
   onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
 
+  var cssClass = _.className(this.cssClasses.prefix, this.cssClasses.suggestion);
   this.$menu = DOM.element(o.menu)
-    .on('click.aa', '.aa-suggestion', onSuggestionClick)
-    .on('mouseenter.aa', '.aa-suggestion', onSuggestionMouseEnter)
-    .on('mouseleave.aa', '.aa-suggestion', onSuggestionMouseLeave);
+    .on('click.aa', cssClass, onSuggestionClick)
+    .on('mouseenter.aa', cssClass, onSuggestionMouseEnter)
+    .on('mouseleave.aa', cssClass, onSuggestionMouseLeave);
 
   if (o.templates && o.templates.header) {
     this.$menu.prepend(_.templatify(o.templates.header)());
   }
 
-  this.datasets = _.map(o.datasets, function(oDataset) { return initializeDataset(that.$menu, oDataset); });
+  this.datasets = _.map(o.datasets, function(oDataset) { return initializeDataset(that.$menu, oDataset, o.cssClasses); });
   _.each(this.datasets, function(dataset) {
     var root = dataset.getRoot();
     if (root && root.parent().length === 0) {
@@ -108,20 +110,20 @@ _.mixin(Dropdown.prototype, EventEmitter, {
   },
 
   _getSuggestions: function getSuggestions() {
-    return this.$menu.find('.aa-suggestion');
+    return this.$menu.find(_.className(this.cssClasses.prefix, this.cssClasses.suggestion));
   },
 
   _getCursor: function getCursor() {
-    return this.$menu.find('.aa-cursor').first();
+    return this.$menu.find(_.className(this.cssClasses.prefix, this.cssClasses.cursor)).first();
   },
 
   _setCursor: function setCursor($el) {
-    $el.first().addClass('aa-cursor');
+    $el.first().addClass(_.className(this.cssClasses.prefix, this.cssClasses.cursor, true));
     this.trigger('cursorMoved');
   },
 
   _removeCursor: function removeCursor() {
-    this._getCursor().removeClass('aa-cursor');
+    this._getCursor().removeClass(_.className(this.cssClasses.prefix, this.cssClasses.cursor, true));
   },
 
   _moveCursor: function moveCursor(increment) {
@@ -277,8 +279,8 @@ _.mixin(Dropdown.prototype, EventEmitter, {
 // ----------------
 Dropdown.Dataset = Dataset;
 
-function initializeDataset($menu, oDataset) {
-  return new Dropdown.Dataset(_.mixin({$menu: $menu}, oDataset));
+function initializeDataset($menu, oDataset, cssClasses) {
+  return new Dropdown.Dataset(_.mixin({$menu: $menu, cssClasses: cssClasses}, oDataset));
 }
 
 module.exports = Dropdown;

src/autocomplete/html.js

@@ -1,9 +1,9 @@
 'use strict';
 
 module.exports = {
-  wrapper: '<span class="algolia-autocomplete"></span>',
-  dropdown: '<span class="aa-dropdown-menu"></span>',
-  dataset: '<div class="aa-dataset-%CLASS%"></div>',
-  suggestions: '<span class="aa-suggestions"></span>',
-  suggestion: '<div class="aa-suggestion"></div>'
+  wrapper: '<span class="%ROOT%"></span>',
+  dropdown: '<span class="%PREFIX%-%DROPDOWN_MENU%"></span>',
+  dataset: '<div class="%PREFIX%-%DATASET%-%CLASS%"></div>',
+  suggestions: '<span class="%PREFIX%-%SUGGESTIONS%"></span>',
+  suggestion: '<div class="%PREFIX%-%SUGGESTION%"></div>'
 };

src/autocomplete/typeahead.js

@@ -30,11 +30,12 @@ function Typeahead(o) {
   this.autoselect = !!o.autoselect;
   this.openOnFocus = !!o.openOnFocus;
   this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+  this.cssClasses = o.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
   this.$node = buildDom(o);
 
-  $menu = this.$node.find('.aa-dropdown-menu');
-  $input = this.$node.find('.aa-input');
-  $hint = this.$node.find('.aa-hint');
+  $menu = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.dropdownMenu));
+  $input = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.input));
+  $hint = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.hint));
 
   if (o.dropdownMenuContainer) {
     DOM.element(o.dropdownMenuContainer)
@@ -62,7 +63,7 @@ function Typeahead(o) {
 
   this.eventBus = o.eventBus || new EventBus({el: $input});
 
-  this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates})
+  this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates, cssClasses: this.cssClasses})
     .onSync('suggestionClicked', this._onSuggestionClicked, this)
     .onSync('cursorMoved', this._onCursorMoved, this)
     .onSync('cursorRemoved', this._onCursorRemoved, this)
@@ -365,7 +366,7 @@ _.mixin(Typeahead.prototype, {
     this.input.destroy();
     this.dropdown.destroy();
 
-    destroyDomStructure(this.$node);
+    destroyDomStructure(this.$node, this.cssClasses);
 
     this.$node = null;
   }
@@ -378,22 +379,25 @@ function buildDom(options) {
   var $hint;
 
   $input = DOM.element(options.input);
-  $wrapper = DOM.element(html.wrapper).css(css.wrapper);
+  $wrapper = DOM.element(html.wrapper.replace('%ROOT%', options.cssClasses.root)).css(css.wrapper);
   // override the display property with the table-cell value
   // if the parent element is a table and the original input was a block
   //  -> https://github.com/algolia/autocomplete.js/issues/16
   if ($input.css('display') === 'block' && $input.parent().css('display') === 'table') {
     $wrapper.css('display', 'table-cell');
   }
-  $dropdown = DOM.element(html.dropdown).css(css.dropdown);
+  var dropdownHtml = html.dropdown.
+    replace('%PREFIX%', options.cssClasses.prefix).
+    replace('%DROPDOWN_MENU%', options.cssClasses.dropdownMenu);
+  $dropdown = DOM.element(dropdownHtml).css(css.dropdown);
   if (options.templates && options.templates.dropdownMenu) {
     $dropdown.html(_.templatify(options.templates.dropdownMenu)());
   }
   $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
 
   $hint
     .val('')
-    .addClass('aa-hint')
+    .addClass(_.className(options.cssClasses.prefix, options.cssClasses.hint, true))
     .removeAttr('id name placeholder required')
     .prop('readonly', true)
     .attr({autocomplete: 'off', spellcheck: 'false', tabindex: -1});
@@ -411,7 +415,7 @@ function buildDom(options) {
   });
 
   $input
-    .addClass('aa-input')
+    .addClass(_.className(options.cssClasses.prefix, options.cssClasses.input, true))
     .attr({autocomplete: 'off', spellcheck: false})
     .css(options.hint ? css.input : css.inputWithNoHint);
 
@@ -444,8 +448,8 @@ function getBackgroundStyles($el) {
   };
 }
 
-function destroyDomStructure($node) {
-  var $input = $node.find('.aa-input');
+function destroyDomStructure($node, cssClasses) {
+  var $input = $node.find(_.className(cssClasses.prefix, cssClasses.input));
 
   // need to remove attrs that weren't previously defined and
   // revert attrs that originally had a value
@@ -459,7 +463,7 @@ function destroyDomStructure($node) {
 
   $input
     .detach()
-    .removeClass('aa-input')
+    .removeClass(_.className(cssClasses.prefix, cssClasses.input, true))
     .insertAfter($node);
   if ($input.removeData) {
     $input.removeData(attrsKey);

src/common/utils.js

@@ -82,5 +82,9 @@ module.exports = {
 
   defer: function(fn) { setTimeout(fn, 0); },
 
-  noop: function() {}
+  noop: function() {},
+
+  className: function(prefix, clazz, skipDot) {
+    return (skipDot ? '' : '.') + prefix + '-' + clazz;
+  }
 };

src/jquery/plugin.js

@@ -58,6 +58,7 @@ methods = {
         openOnFocus: o.openOnFocus,
         templates: o.templates,
         debug: o.debug,
+        cssClasses: o.cssClasses,
         datasets: datasets
       });
 

src/standalone/index.js

@@ -45,6 +45,7 @@ function autocomplete(selector, options, datasets, typeaheadObject) {
       openOnFocus: options.openOnFocus,
       templates: options.templates,
       debug: options.debug,
+      cssClasses: options.cssClasses,
       datasets: datasets
     });
 

test/unit/typeahead_spec.js

@@ -687,6 +687,38 @@ describe('Typeahead', function() {
     });
   });
 
+  describe('when instantiated with a custom CSS classes', function() {
+    beforeEach(function() {
+      appendSetFixtures(fixtures.html.customMenu);
+
+      this.view.destroy();
+      this.view = new Typeahead({
+        input: this.$input,
+        hint: true,
+        cssClasses: {
+          root: 'my-root',
+          prefix: 'pp',
+          dropdownMenu: 'my-menu',
+          input: 'my-bar',
+          hint: 'my-clue',
+          suggestions: 'list',
+          suggestion: 'item',
+          cursor: 'pointer',
+          dataset: 'resultset'
+        },
+        datasets: {}
+      });
+    });
+
+    it('should include the template in the menu', function() {
+      var $fixture = $('#jasmine-fixtures');
+      expect($fixture.find('.my-root').length).toEqual(1);
+      expect($fixture.find('.my-root .pp-my-menu').length).toEqual(1);
+      expect($fixture.find('.my-root .pp-my-bar').length).toEqual(1);
+      expect($fixture.find('.my-root .pp-my-clue').length).toEqual(1);
+    });
+  });
+
   describe('when instantiated with a custom menu container', function() {
     beforeEach(function() {
       appendSetFixtures(fixtures.html.customMenuContainer);