Clean up addon

addon/components/auto-complete.js

@@ -1,45 +1,44 @@
 import Ember from "ember";
-import KeyCodes from '../utilities/key-codes';
+import KeyCodes from "../utilities/key-codes";
 const { get, set } = Ember;
 
 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);
     }
   }
 });