Add back custom events.

karma.conf.js

@@ -15,6 +15,7 @@ files = [
   'src/css.js',
   'src/highlight.js',
   'src/lru_cache.js',
+  'src/event_bus.js',
   'src/event_emitter.js',
   'src/persistent_storage.js',
   'src/transport.js',

src/typeahead_view.js

@@ -26,6 +26,8 @@ var TypeaheadView = (function() {
     $input = this.$node.find('.tt-input');
     $hint = this.$node.find('.tt-hint');
 
+    this.eventBus = new EventBus({ el: $input });
+
     sections = initializeSections(o.sections);
 
     this.dropdown = new DropdownView({ menu: $menu, sections: sections })
@@ -86,10 +88,14 @@ var TypeaheadView = (function() {
 
     _onOpened: function onOpened() {
       this._updateHint();
+
+      this.eventBus.trigger('opened');
     },
 
     _onClosed: function onClosed() {
       this.input.clearHint();
+
+      this.eventBus.trigger('closed');
     },
 
     _onFocused: function onFocused() {
@@ -197,6 +203,8 @@ var TypeaheadView = (function() {
       if (hint && query !== hint && this.input.isCursorAtEnd()) {
         datum = this.dropdown.getDatumForTopSuggestion();
         datum && this.input.setInputValue(datum.value);
+
+        this.eventBus.trigger('autocompleted', datum.raw);
       }
     },
 
@@ -212,7 +220,7 @@ var TypeaheadView = (function() {
       // defer the closing of the dropdown otherwise it'll stay open
       _.defer(_.bind(this.dropdown.close, this.dropdown));
 
-      // TODO: trigger an event
+      this.eventBus.trigger('selected', datum.raw);
     }
 
     // ### public

test/typeahead_view_spec.js

@@ -11,11 +11,11 @@ describe('TypeaheadView', function() {
     setFixtures(fixtures.html.textInput);
 
     $fixture = $('#jasmine-fixtures');
-    $input = $fixture.find('input');
+    this.$input = $fixture.find('input');
 
     testDatum = fixtures.normalized.simple[0];
 
-    this.view = new TypeaheadView({ input: $input, sections: {} });
+    this.view = new TypeaheadView({ input: this.$input, sections: {} });
     this.input = this.view.input;
     this.dropdown = this.view.dropdown;
   });
@@ -26,8 +26,12 @@ describe('TypeaheadView', function() {
     });
 
     it('should select the datum', function() {
+      var $e, spy;
+
+      this.$input.on('typeahead:selected', spy = jasmine.createSpy());
       this.dropdown.trigger('suggestionClicked');
 
+      expect(spy).toHaveBeenCalled();
       expect(this.input.clearHint).toHaveBeenCalled();
       expect(this.input.setQuery).toHaveBeenCalledWith(testDatum.value)
       expect(this.input.setInputValue)
@@ -105,6 +109,16 @@ describe('TypeaheadView', function() {
 
       expect(this.input.setHintValue).toHaveBeenCalledWith(testDatum.value);
     });
+
+    it('should trigger typeahead:opened', function() {
+      var spy;
+
+      this.$input.on('typeahead:opened', spy = jasmine.createSpy());
+
+      this.dropdown.trigger('opened');
+
+      expect(spy).toHaveBeenCalled();
+    });
   });
 
   describe('when dropdown triggers closed', function() {
@@ -113,6 +127,16 @@ describe('TypeaheadView', function() {
 
       expect(this.input.clearHint).toHaveBeenCalled();
     });
+
+    it('should trigger typeahead:closed', function() {
+      var spy;
+
+      this.$input.on('typeahead:closed', spy = jasmine.createSpy());
+
+      this.dropdown.trigger('closed');
+
+      expect(spy).toHaveBeenCalled();
+    });
   });
 
   describe('when input triggers focused', function() {
@@ -137,11 +161,13 @@ describe('TypeaheadView', function() {
     });
 
     it('should select the datum', function() {
-      var $e;
+      var $e, spy;
 
       $e = jasmine.createSpyObj('event', ['preventDefault']);
+      this.$input.on('typeahead:selected', spy = jasmine.createSpy());
       this.input.trigger('enterKeyed', $e);
 
+      expect(spy).toHaveBeenCalled();
       expect(this.input.clearHint).toHaveBeenCalled();
       expect(this.input.setQuery).toHaveBeenCalledWith(testDatum.value)
       expect(this.input.setInputValue)
@@ -167,11 +193,13 @@ describe('TypeaheadView', function() {
       });
 
       it('should select the datum', function() {
-        var $e;
+        var $e, spy;
 
         $e = jasmine.createSpyObj('event', ['preventDefault']);
+        this.$input.on('typeahead:selected', spy = jasmine.createSpy());
         this.input.trigger('tabKeyed', $e);
 
+        expect(spy).toHaveBeenCalled();
         expect(this.input.clearHint).toHaveBeenCalled();
         expect(this.input.setQuery).toHaveBeenCalledWith(testDatum.value)
         expect(this.input.setInputValue)
@@ -192,14 +220,18 @@ describe('TypeaheadView', function() {
 
     describe('when cursor is not in use', function() {
       it('should autocomplete', function() {
+        var spy;
+
         this.input.getQuery.andReturn('bi');
         this.input.getHintValue.andReturn(testDatum.value);
         this.input.isCursorAtEnd.andReturn(true);
         this.dropdown.getDatumForTopSuggestion.andReturn(testDatum);
+        this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
 
         this.input.trigger('tabKeyed');
 
         expect(this.input.setInputValue).toHaveBeenCalledWith(testDatum.value);
+        expect(spy).toHaveBeenCalled();
       });
     });
   });
@@ -248,29 +280,37 @@ describe('TypeaheadView', function() {
 
   describe('when input triggers leftKeyed', function() {
     it('should autocomplete if language is rtl', function() {
+      var spy;
+
       this.view.dir = 'rtl';
       this.input.getQuery.andReturn('bi');
       this.input.getHintValue.andReturn(testDatum.value);
       this.input.isCursorAtEnd.andReturn(true);
       this.dropdown.getDatumForTopSuggestion.andReturn(testDatum);
+      this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
 
       this.input.trigger('leftKeyed');
 
       expect(this.input.setInputValue).toHaveBeenCalledWith(testDatum.value);
+      expect(spy).toHaveBeenCalled();
     });
   });
 
   describe('when input triggers rightKeyed', function() {
     it('should autocomplete if language is ltr', function() {
+      var spy;
+
       this.view.dir = 'ltr';
       this.input.getQuery.andReturn('bi');
       this.input.getHintValue.andReturn(testDatum.value);
       this.input.isCursorAtEnd.andReturn(true);
       this.dropdown.getDatumForTopSuggestion.andReturn(testDatum);
+      this.$input.on('typeahead:autocompleted', spy = jasmine.createSpy());
 
       this.input.trigger('rightKeyed');
 
       expect(this.input.setInputValue).toHaveBeenCalledWith(testDatum.value);
+      expect(spy).toHaveBeenCalled();
     });
   });