diff --git a/addon/components/auto-complete.js b/addon/components/auto-complete.js index d37b80a..6149cd2 100644 --- a/addon/components/auto-complete.js +++ b/addon/components/auto-complete.js @@ -1,5 +1,5 @@ import Ember from "ember"; -import KeyCodes from '../utilities/key-codes'; +import KeyCodes from "../utilities/key-codes"; const { get, set } = Ember; var focusOutEvent; @@ -7,39 +7,38 @@ var focusOutEvent; const VISIBLE = "visible"; const HIDDEN = "hidden"; -function getNewHighlightIndex(direction, index, length) { - if (direction === "down" && index < length - 1) { - return index + 1; - } else if (direction === "up" && index > 0) { - return index - 1; - } - return index; -} - -function keepHighlightInView(event) { - var highlighted = document.getElementsByClassName("tt-cursor")[0]; - if (highlighted) { - if (KeyCodes.keyPressed(event) === "downArrow") { - highlighted.scrollIntoView(false); - } else if (KeyCodes.keyPressed(event) === "upArrow") { - highlighted.scrollIntoView(); - } - } -} export default Ember.Component.extend({ + _keepHighlightInView(event) { + let highlighted = this.$(".tt-cursor")[0]; + if (highlighted) { + if (KeyCodes.keyPressed(event) === "downArrow") { + highlighted.scrollIntoView(false); + } else if (KeyCodes.keyPressed(event) === "upArrow") { + highlighted.scrollIntoView(); + } + } + }, + _getNewHighlightIndex(direction, index, length) { + if (direction === "down" && index < length - 1) { + return index + 1; + } else if (direction === "up" && index > 0) { + return index - 1; + } + return index; + }, layoutName: "components/auto-complete", highlightIndex: -1, visibility: HIDDEN, hideWhenNoSuggestions: false, - inputClass: '', + inputClass: "", inputClazz: Ember.computed(function () { - return "typeahead text-input " + this.get('inputClass'); + return "typeahead text-input " + this.get("inputClass"); }), suggestions: [], - optionsToMatch: function() { + optionsToMatch() { return this.get("options"); }, - keyUp: function (event) { + keyUp(event) { if (KeyCodes.keyPressed(event) === "escape") { this.set("visibility", HIDDEN); } else if (!KeyCodes.isEscapedCode(event)) { @@ -50,29 +49,27 @@ export default Ember.Component.extend({ this.set("inputVal", Ember.$(event.target).val()); this.setVisible(); } - keepHighlightInView(event); + this._keepHighlightInView(event); }, - focusIn: function () { + focusIn() { if (this.get("visibility") === HIDDEN) { this.setVisible(); } }, - focusOut: function () { + focusOut() { clearTimeout(focusOutEvent); - var self = this; - var func = function () { - if (self.isDestroyed) { + focusOutEvent = Ember.run.later(this, () => { + if (this.isDestroyed) { return; } - self.set("visibility", HIDDEN); - if (!self.get("selectedFromList") && !self.hasInputMatchingSuggestion()) { - self.set("inputVal", ""); - self.set("selectedValue", ""); + this.set("visibility", HIDDEN); + if (!this.get("selectedFromList") && !this.hasInputMatchingSuggestion()) { + this.set("inputVal", ""); + this.set("selectedValue", ""); } - }; - focusOutEvent = Ember.run.later(this, func, 200); + }, 200); }, - keyDown: function (event) { + keyDown(event) { if (this.get("visibility") !== HIDDEN) { if (KeyCodes.keyPressed(event) === "downArrow") { this.highlight("down"); @@ -92,45 +89,45 @@ export default Ember.Component.extend({ } }, - onInput: Ember.observer('selectedValue', function() { - var options = this.get("options"); - var input = this.getWithDefault("selectedValue", ""); + onInput: Ember.observer("selectedValue", function() { + let options = this.get("options"); + let input = this.getWithDefault("selectedValue", ""); this.set("suggestions", this.determineSuggestions(options, input)); }), - highlight: function (direction) { - var length = this.get("suggestions").length; - var currentHighlight = this.get("highlightIndex"); - var nextHighlight = getNewHighlightIndex(direction, currentHighlight, length); + highlight(direction) { + let length = this.get("suggestions").length; + let currentHighlight = this.get("highlightIndex"); + let nextHighlight = this._getNewHighlightIndex(direction, currentHighlight, length); if (currentHighlight >= 0) { - var suggestion = this.get("suggestions").objectAt(currentHighlight); + let suggestion = this.get("suggestions").objectAt(currentHighlight); set(suggestion, "highlight", false); } - var newSelectedItem = this.get("suggestions").objectAt(nextHighlight); + let newSelectedItem = this.get("suggestions").objectAt(nextHighlight); set(newSelectedItem, "highlight", true); this.set("selectableSuggestion", newSelectedItem); this.set("highlightIndex", nextHighlight); }, - hasInputMatchingSuggestion: function() { - var suggestions = this.get('suggestions'); - var input = this.getWithDefault('selectedValue', '').toLowerCase(); + hasInputMatchingSuggestion() { + let suggestions = this.get("suggestions"); + let input = this.getWithDefault("selectedValue", "").toLowerCase(); if (suggestions.length !== 1) { return false; } - return input === get(suggestions[0], this.get('valueProperty')).toLowerCase(); + return input === get(suggestions[0], this.get("valueProperty")).toLowerCase(); }, setVisible(){ - let visible = !this.get('hideWhenNoSuggestions') || this.get('suggestions').length > 0; - this.set('visibility', (visible ? VISIBLE : HIDDEN)); + let visible = !this.get("hideWhenNoSuggestions") || this.get("suggestions").length > 0; + this.set("visibility", (visible ? VISIBLE : HIDDEN)); }, actions: { - selectItem: function (item) { - var valueProperty = this.get("valueProperty"); + selectItem(item) { + let valueProperty = this.get("valueProperty"); this.set("selectedFromList", true); this.set("selectedValue", get(item, valueProperty)); - this.sendAction('selectItem', item); + this.sendAction("selectItem", item); } } });