Skip to content

Commit 231eb7e

Browse files
redoxredox
committed
Bump to 0.18.0
1 parent 8c5f50b commit 231eb7e

8 files changed

+229
-119
lines changed

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ For more information on semantic versioning, please visit http://semver.org/.
1616

1717
---
1818

19+
### 0.18.0 Apr 07, 2017
20+
21+
* Ability to customize the CSS classes used to render the DOM
22+
* Ensure the `autocomplete:cursorchanged` event is called on `mouseover` as well
23+
1924
### 0.17.3 Apr 04, 2017
2025

2126
* Standalone: ensure we actually use the Zepto object and not whatever is in `window.$`

‎dist/autocomplete.angular.js

+72-37
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* autocomplete.js 0.17.3
2+
* autocomplete.js 0.18.0
33
* https://github.com/algolia/autocomplete.js
44
* Copyright 2016 Algolia, Inc. and other contributors; Licensed MIT
55
*/
@@ -131,6 +131,7 @@
131131
openOnFocus: scope.options.openOnFocus,
132132
templates: scope.options.templates,
133133
debug: scope.options.debug,
134+
cssClasses: scope.options.cssClasses,
134135
datasets: scope.datasets
135136
});
136137
}
@@ -269,7 +270,11 @@
269270

270271
defer: function(fn) { setTimeout(fn, 0); },
271272

272-
noop: function() {}
273+
noop: function() {},
274+
275+
className: function(prefix, clazz, skipDot) {
276+
return (skipDot ? '' : '.') + prefix + '-' + clazz;
277+
}
273278
};
274279

275280

@@ -348,11 +353,12 @@
348353
this.autoselect = !!o.autoselect;
349354
this.openOnFocus = !!o.openOnFocus;
350355
this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
356+
this.cssClasses = o.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
351357
this.$node = buildDom(o);
352358

353-
$menu = this.$node.find('.aa-dropdown-menu');
354-
$input = this.$node.find('.aa-input');
355-
$hint = this.$node.find('.aa-hint');
359+
$menu = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.dropdownMenu));
360+
$input = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.input));
361+
$hint = this.$node.find(_.className(this.cssClasses.prefix, this.cssClasses.hint));
356362

357363
if (o.dropdownMenuContainer) {
358364
DOM.element(o.dropdownMenuContainer)
@@ -380,7 +386,7 @@
380386

381387
this.eventBus = o.eventBus || new EventBus({el: $input});
382388

383-
this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates})
389+
this.dropdown = new Typeahead.Dropdown({menu: $menu, datasets: o.datasets, templates: o.templates, cssClasses: this.cssClasses})
384390
.onSync('suggestionClicked', this._onSuggestionClicked, this)
385391
.onSync('cursorMoved', this._onCursorMoved, this)
386392
.onSync('cursorRemoved', this._onCursorRemoved, this)
@@ -683,7 +689,7 @@
683689
this.input.destroy();
684690
this.dropdown.destroy();
685691

686-
destroyDomStructure(this.$node);
692+
destroyDomStructure(this.$node, this.cssClasses);
687693

688694
this.$node = null;
689695
}
@@ -696,22 +702,25 @@
696702
var $hint;
697703

698704
$input = DOM.element(options.input);
699-
$wrapper = DOM.element(html.wrapper).css(css.wrapper);
705+
$wrapper = DOM.element(html.wrapper.replace('%ROOT%', options.cssClasses.root)).css(css.wrapper);
700706
// override the display property with the table-cell value
701707
// if the parent element is a table and the original input was a block
702708
// -> https://github.com/algolia/autocomplete.js/issues/16
703709
if ($input.css('display') === 'block' && $input.parent().css('display') === 'table') {
704710
$wrapper.css('display', 'table-cell');
705711
}
706-
$dropdown = DOM.element(html.dropdown).css(css.dropdown);
712+
var dropdownHtml = html.dropdown.
713+
replace('%PREFIX%', options.cssClasses.prefix).
714+
replace('%DROPDOWN_MENU%', options.cssClasses.dropdownMenu);
715+
$dropdown = DOM.element(dropdownHtml).css(css.dropdown);
707716
if (options.templates && options.templates.dropdownMenu) {
708717
$dropdown.html(_.templatify(options.templates.dropdownMenu)());
709718
}
710719
$hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
711720

712721
$hint
713722
.val('')
714-
.addClass('aa-hint')
723+
.addClass(_.className(options.cssClasses.prefix, options.cssClasses.hint, true))
715724
.removeAttr('id name placeholder required')
716725
.prop('readonly', true)
717726
.attr({autocomplete: 'off', spellcheck: 'false', tabindex: -1});
@@ -729,7 +738,7 @@
729738
});
730739

731740
$input
732-
.addClass('aa-input')
741+
.addClass(_.className(options.cssClasses.prefix, options.cssClasses.input, true))
733742
.attr({autocomplete: 'off', spellcheck: false})
734743
.css(options.hint ? css.input : css.inputWithNoHint);
735744

@@ -762,8 +771,8 @@
762771
};
763772
}
764773

765-
function destroyDomStructure($node) {
766-
var $input = $node.find('.aa-input');
774+
function destroyDomStructure($node, cssClasses) {
775+
var $input = $node.find(_.className(cssClasses.prefix, cssClasses.input));
767776

768777
// need to remove attrs that weren't previously defined and
769778
// revert attrs that originally had a value
@@ -777,7 +786,7 @@
777786

778787
$input
779788
.detach()
780-
.removeClass('aa-input')
789+
.removeClass(_.className(cssClasses.prefix, cssClasses.input, true))
781790
.insertAfter($node);
782791
if ($input.removeData) {
783792
$input.removeData(attrsKey);
@@ -1463,22 +1472,24 @@
14631472

14641473
this.isOpen = false;
14651474
this.isEmpty = true;
1475+
this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
14661476

14671477
// bound functions
14681478
onSuggestionClick = _.bind(this._onSuggestionClick, this);
14691479
onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
14701480
onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
14711481

1482+
var cssClass = _.className(this.cssClasses.prefix, this.cssClasses.suggestion);
14721483
this.$menu = DOM.element(o.menu)
1473-
.on('click.aa', '.aa-suggestion', onSuggestionClick)
1474-
.on('mouseenter.aa', '.aa-suggestion', onSuggestionMouseEnter)
1475-
.on('mouseleave.aa', '.aa-suggestion', onSuggestionMouseLeave);
1484+
.on('click.aa', cssClass, onSuggestionClick)
1485+
.on('mouseenter.aa', cssClass, onSuggestionMouseEnter)
1486+
.on('mouseleave.aa', cssClass, onSuggestionMouseLeave);
14761487

14771488
if (o.templates && o.templates.header) {
14781489
this.$menu.prepend(_.templatify(o.templates.header)());
14791490
}
14801491

1481-
this.datasets = _.map(o.datasets, function(oDataset) { return initializeDataset(that.$menu, oDataset); });
1492+
this.datasets = _.map(o.datasets, function(oDataset) { return initializeDataset(that.$menu, oDataset, o.cssClasses); });
14821493
_.each(this.datasets, function(dataset) {
14831494
var root = dataset.getRoot();
14841495
if (root && root.parent().length === 0) {
@@ -1541,21 +1552,20 @@
15411552
},
15421553

15431554
_getSuggestions: function getSuggestions() {
1544-
return this.$menu.find('.aa-suggestion');
1555+
return this.$menu.find(_.className(this.cssClasses.prefix, this.cssClasses.suggestion));
15451556
},
15461557

15471558
_getCursor: function getCursor() {
1548-
return this.$menu.find('.aa-cursor').first();
1559+
return this.$menu.find(_.className(this.cssClasses.prefix, this.cssClasses.cursor)).first();
15491560
},
15501561

15511562
_setCursor: function setCursor($el) {
1552-
$el.first().addClass('aa-cursor');
1553-
console.log('cursorMoved');
1563+
$el.first().addClass(_.className(this.cssClasses.prefix, this.cssClasses.cursor, true));
15541564
this.trigger('cursorMoved');
15551565
},
15561566

15571567
_removeCursor: function removeCursor() {
1558-
this._getCursor().removeClass('aa-cursor');
1568+
this._getCursor().removeClass(_.className(this.cssClasses.prefix, this.cssClasses.cursor, true));
15591569
},
15601570

15611571
_moveCursor: function moveCursor(increment) {
@@ -1711,8 +1721,8 @@
17111721
// ----------------
17121722
Dropdown.Dataset = Dataset;
17131723

1714-
function initializeDataset($menu, oDataset) {
1715-
return new Dropdown.Dataset(_.mixin({$menu: $menu}, oDataset));
1724+
function initializeDataset($menu, oDataset, cssClasses) {
1725+
return new Dropdown.Dataset(_.mixin({$menu: $menu, cssClasses: cssClasses}, oDataset));
17161726
}
17171727

17181728
module.exports = Dropdown;
@@ -1760,9 +1770,16 @@
17601770

17611771
this.templates = getTemplates(o.templates, this.displayFn);
17621772

1763-
this.$el = o.$menu && o.$menu.find('.aa-dataset-' + this.name).length > 0 ?
1764-
DOM.element(o.$menu.find('.aa-dataset-' + this.name)[0]) :
1765-
DOM.element(html.dataset.replace('%CLASS%', this.name));
1773+
this.cssClasses = _.mixin({}, css.defaultClasses, o.cssClasses || {});
1774+
1775+
var clazz = _.className(this.cssClasses.prefix, this.cssClasses.dataset);
1776+
this.$el = o.$menu && o.$menu.find(clazz + '-' + this.name).length > 0 ?
1777+
DOM.element(o.$menu.find(clazz + '-' + this.name)[0]) :
1778+
DOM.element(
1779+
html.dataset.replace('%CLASS%', this.name)
1780+
.replace('%PREFIX%', this.cssClasses.prefix)
1781+
.replace('%DATASET%', this.cssClasses.dataset)
1782+
);
17661783

17671784
this.$menu = o.$menu;
17681785
}
@@ -1820,8 +1837,8 @@
18201837
}
18211838

18221839
if (this.$menu) {
1823-
this.$menu.addClass('aa-' + (hasSuggestions ? 'with' : 'without') + '-' + this.name)
1824-
.removeClass('aa-' + (hasSuggestions ? 'without' : 'with') + '-' + this.name);
1840+
this.$menu.addClass(this.cssClasses.prefix + '-' + (hasSuggestions ? 'with' : 'without') + '-' + this.name)
1841+
.removeClass(this.cssClasses.prefix + '-' + (hasSuggestions ? 'without' : 'with') + '-' + this.name);
18251842
}
18261843

18271844
this.trigger('rendered');
@@ -1836,8 +1853,12 @@
18361853
var args = [].slice.call(arguments, 0);
18371854
var $suggestions;
18381855
var nodes;
1856+
var self = this;
18391857

1840-
$suggestions = DOM.element(html.suggestions).css(css.suggestions);
1858+
var suggestionsHtml = html.suggestions.
1859+
replace('%PREFIX%', this.cssClasses.prefix).
1860+
replace('%SUGGESTIONS%', this.cssClasses.suggestions);
1861+
$suggestions = DOM.element(suggestionsHtml).css(css.suggestions);
18411862

18421863
// jQuery#append doesn't support arrays as the first argument
18431864
// until version 1.8, see http://bugs.jquery.com/ticket/11231
@@ -1849,7 +1870,10 @@
18491870
function getSuggestionNode(suggestion) {
18501871
var $el;
18511872

1852-
$el = DOM.element(html.suggestion)
1873+
var suggestionHtml = html.suggestion.
1874+
replace('%PREFIX%', self.cssClasses.prefix).
1875+
replace('%SUGGESTION%', self.cssClasses.suggestion);
1876+
$el = DOM.element(suggestionHtml)
18531877
.append(that.templates.suggestion.apply(this, [suggestion].concat(args)));
18541878

18551879
$el.data(datasetKey, that.name);
@@ -1960,11 +1984,11 @@
19601984
'use strict';
19611985

19621986
module.exports = {
1963-
wrapper: '<span class="algolia-autocomplete"></span>',
1964-
dropdown: '<span class="aa-dropdown-menu"></span>',
1965-
dataset: '<div class="aa-dataset-%CLASS%"></div>',
1966-
suggestions: '<span class="aa-suggestions"></span>',
1967-
suggestion: '<div class="aa-suggestion"></div>'
1987+
wrapper: '<span class="%ROOT%"></span>',
1988+
dropdown: '<span class="%PREFIX%-%DROPDOWN_MENU%"></span>',
1989+
dataset: '<div class="%PREFIX%-%DATASET%-%CLASS%"></div>',
1990+
suggestions: '<span class="%PREFIX%-%SUGGESTIONS%"></span>',
1991+
suggestion: '<div class="%PREFIX%-%SUGGESTION%"></div>'
19681992
};
19691993

19701994

@@ -2023,6 +2047,17 @@
20232047
rtl: {
20242048
left: 'auto',
20252049
right: '0'
2050+
},
2051+
defaultClasses: {
2052+
root: 'algolia-autocomplete',
2053+
prefix: 'aa',
2054+
dropdownMenu: 'dropdown-menu',
2055+
input: 'input',
2056+
hint: 'hint',
2057+
suggestions: 'suggestions',
2058+
suggestion: 'suggestion',
2059+
cursor: 'cursor',
2060+
dataset: 'dataset'
20262061
}
20272062
};
20282063

‎dist/autocomplete.angular.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)