Merge pull request #59 from jharding/41-add-destroy-method

Add destroy method

src/js/dataset.js

@@ -20,7 +20,7 @@ var Dataset = (function() {
     this.limit = o.limit || 10;
     this._customMatcher = o.matcher || null;
     this._customRanker = o.ranker || null;
-    this._ttl_ms = o.ttl_ms || 3 * 24 * 60 * 60 * 1000; // 3 days;
+    this._ttl_ms = utils.isNumber(o.ttl_ms) ? o.ttl_ms : 24 * 60 * 60 * 1000;
 
     this.keys = {
       version: 'version',

src/js/dropdown_view.js

@@ -15,10 +15,10 @@ var DropdownView = (function() {
     this.isMouseOverDropdown;
 
     this.$menu = $(o.menu)
-    .on('mouseenter', this._handleMouseenter)
-    .on('mouseleave', this._handleMouseleave)
-    .on('mouseover', '.tt-suggestions > .tt-suggestion', this._handleMouseover)
-    .on('click', '.tt-suggestions > .tt-suggestion', this._handleSelection);
+    .on('mouseenter.tt', this._handleMouseenter)
+    .on('mouseleave.tt', this._handleMouseleave)
+    .on('click.tt', '.tt-suggestion', this._handleSelection)
+    .on('mouseover.tt', '.tt-suggestion', this._handleMouseover);
   }
 
   utils.mixin(DropdownView.prototype, EventTarget, {
@@ -81,6 +81,12 @@ var DropdownView = (function() {
     // public methods
     // --------------
 
+    destroy: function() {
+      this.$menu.off('.tt');
+
+      this.$menu = null;
+    },
+
     hideUnlessMouseIsOverDropdown: function() {
       // this helps detect the scenario a blur event has triggered
       // this function. we don't want to hide the menu in that case

src/js/input_view.js

@@ -28,20 +28,20 @@ var InputView = (function() {
 
     this.$hint = $(o.hint);
     this.$input = $(o.input)
-    .on('blur', this._handleBlur)
-    .on('focus', this._handleFocus)
-    .on('keydown', this._handleSpecialKeyEvent);
+    .on('blur.tt', this._handleBlur)
+    .on('focus.tt', this._handleFocus)
+    .on('keydown.tt', this._handleSpecialKeyEvent);
 
     // ie7 and ie8 don't support the input event
     // ie9 doesn't fire the input event when characters are removed
     // not sure if ie10 is compatible
     if (!utils.isMsie()) {
-      this.$input.on('input', this._compareQueryToInputValue);
+      this.$input.on('input.tt', this._compareQueryToInputValue);
     }
 
     else {
       this.$input
-      .on('keydown keypress cut paste', function(e) {
+      .on('keydown.tt keypress.tt cut.tt paste.tt', function(e) {
         // if a special key triggered this, ignore it
         if (that.specialKeyCodeMap[e.which || e.keyCode]) { return; }
 
@@ -92,6 +92,13 @@ var InputView = (function() {
     // public methods
     // --------------
 
+    destroy: function() {
+      this.$hint.off('.tt');
+      this.$input.off('.tt');
+
+      this.$hint = this.$input = this.$overflowHelper = null;
+    },
+
     focus: function() {
       this.$input.focus();
     },

src/js/typeahead.js

@@ -68,6 +68,14 @@
           typeahead: new TypeaheadView({ input: this, datasets: datasets })
         });
       });
+    },
+
+    destroy: function() {
+      this.each(function() {
+        var view = $(this).data('typeahead');
+
+        view && view.destroy();
+      });
     }
   };
 

src/js/typeahead_view.js

@@ -202,6 +202,18 @@ var TypeaheadView = (function() {
       if (hint !== '' && query !== hint) {
         this.inputView.setInputValue(hint);
       }
+    },
+
+    // public methods
+    // --------------
+
+    destroy: function() {
+      this.inputView.destroy();
+      this.dropdownView.destroy();
+
+      destroyDomStructure(this.$node);
+
+      this.$node = null;
     }
   });
 
@@ -217,6 +229,14 @@ var TypeaheadView = (function() {
       return null;
     }
 
+    // store the original values of the attrs that get modified
+    // so modifications can be reverted on destroy
+    $input.data('ttAttrs', {
+      dir: $input.attr('dir'),
+      autocomplete: $input.attr('autocomplete'),
+      spellcheck: $input.attr('spellcheck')
+    });
+
     // ie7 does not like it when dir is set to auto,
     // it does not like it one bit
     try { !$input.attr('dir') && $input.attr('dir', 'auto'); } catch (e) {}
@@ -229,4 +249,18 @@ var TypeaheadView = (function() {
     .prepend($hint)
     .append(html.dropdown);
   }
+
+  function destroyDomStructure($node) {
+    var $input = $node.find('.tt-query');
+
+    // need to remove attrs that weren't previously defined and
+    // revert attrs that originally had a value
+    utils.each($input.data('ttAttrs'), function(key, val) {
+      utils.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
+    });
+
+    $input.detach().removeClass('tt-query').insertAfter($node);
+
+    $node.remove();
+  }
 })();

test/dropdown_view_spec.js

@@ -122,6 +122,20 @@ describe('DropdownView', function() {
     });
   });
 
+  describe('#destroy', function() {
+    beforeEach(function() {
+      this.dropdownView.destroy();
+    });
+
+    it('should remove event listeners', function() {
+      expect($._data(this.$menu, 'events')).toBeUndefined();
+    });
+
+    it('should drop references to DOM elements', function() {
+      expect(this.dropdownView.$menu).toBeNull();
+    });
+  });
+
   describe('#hide', function() {
     var spy;
 

test/input_view_spec.js

@@ -141,6 +141,23 @@ describe('InputView', function() {
     });
   });
 
+  describe('#destroy', function() {
+    beforeEach(function() {
+      this.inputView.destroy();
+    });
+
+    it('should remove event listeners', function() {
+      expect($._data(this.$hint, 'events')).toBeUndefined();
+      expect($._data(this.$input, 'events')).toBeUndefined();
+    });
+
+    it('should drop references to DOM elements', function() {
+      expect(this.inputView.$hint).toBeNull();
+      expect(this.inputView.$input).toBeNull();
+      expect(this.inputView.$overflowHelper).toBeNull();
+    });
+  });
+
   describe('#focus', function() {
     beforeEach(function() {
       this.inputView.focus();

test/typeahead_view_spec.js

@@ -449,6 +449,32 @@ describe('TypeaheadView', function() {
     });
   });
 
+  describe('#destroy', function() {
+    beforeEach(function() {
+      this.$input = this.typeaheadView.$node.find('.tt-query');
+      this.typeaheadView.destroy();
+    });
+
+    it('should destroy inputView', function() {
+      expect(this.inputView.destroy).toHaveBeenCalled();
+    });
+
+    it('should destroy dropdownView', function() {
+      expect(this.dropdownView.destroy).toHaveBeenCalled();
+    });
+
+    it('should revert DOM modifications', function() {
+      expect(this.$input).not.toHaveClass('tt-query');
+      expect(this.$input.parent('.twitter-typeahead')).not.toExist();
+      expect(this.$input.siblings('.tt-hint')).not.toExist();
+      expect(this.$input.siblings('.tt-dropdown-menu')).not.toExist();
+    });
+
+    it('should drop references to DOM elements', function() {
+      expect(this.typeaheadView.$node).toBeNull();
+    });
+  });
+
   // spec helpers
   // ------------