IE8 Compatibility

component.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "ianstormtaylor/previous-sibling": "*",
     "ianstormtaylor/next-sibling": "*",
+    "component/bind": "*",
     "component/debounce": "*",
     "component/pillbox": "*",
     "component/emitter": "*",
@@ -21,7 +22,12 @@
     "component/events": "*",
     "component/domify": "*",
     "component/query": "*",
-    "component/each": "*"
+    "component/query-zest": "*",
+    "component/each": "*",
+    "component/map": "*",
+    "component/indexof": "*",
+    "stephenmathieson/normalize": "*",
+    "matthewp/text": "*"
   },
   "development": {
     "visionmedia/mocha-matrix": "*",

index.js

@@ -13,9 +13,17 @@ var keyname = require('keyname');
 var events = require('events');
 var domify = require('domify');
 var query = require('query');
+var bind = require('bind');
 var each = require('each');
+var map = require('map');
+var indexOf = require('indexof');
+var normalize = require("normalize");
+var text = require('text');
 var tpl = domify(template);
 
+require('query-zest');
+
+
 /**
  * Export `Select`
  */
@@ -59,7 +67,7 @@ Emitter(Select.prototype);
 Select.prototype.bind = function(){
   this.events.bind('click .select-box', 'focus');
   this.events.bind('mouseover .select-option');
-  var onsearch = this.onsearch.bind(this);
+  var onsearch = bind(this, this.onsearch);
   this.input.onkeyup = debounce(onsearch, 300);
   this.docEvents.bind('touchstart', 'blur');
   this.inputEvents.bind('focus', 'show');
@@ -113,7 +121,7 @@ Select.prototype.multiple = function(label, opts){
   this.classes.add('select-multiple');
   this.box = new Pillbox(this.input, opts);
   this.box.events.unbind('keydown');
-  this.box.on('remove', this.deselect.bind(this));
+  this.box.on('remove', bind(this, this.deselect));
   return this;
 };
 
@@ -128,7 +136,7 @@ Select.prototype.multiple = function(label, opts){
 
 Select.prototype.add = function(name, value){
   var opt = option.apply(null, arguments);
-  opt.el.onmousedown = this.select.bind(this, name);
+  opt.el.onmousedown = bind(this, this.select, name);
   this.opts.appendChild(opt.el);
   this.options[opt.name] = opt;
   this.emit('add', opt);
@@ -167,7 +175,7 @@ Select.prototype.remove = function(name){
  */
 
 Select.prototype.empty = function(){
-  each(this.options, this.remove.bind(this));
+  each(this.options, bind(this, this.remove));
   return this;
 };
 
@@ -238,7 +246,7 @@ Select.prototype.deselect = function(name){
   // multiple
   if (this._multiple) {
     this.box.remove(opt.label);
-    var i = this._selected.indexOf(opt);
+    var i = indexOf(this._selected, opt);
     if (!~i) return this;
     this._selected.splice(i, 1);
     this.change();
@@ -396,7 +404,10 @@ Select.prototype.enable = function(name){
 
 Select.prototype.selected = function(arr){
   if (1 == arguments.length) {
-    arr.forEach(this.select, this);
+    var self = this;
+    each(arr, function (item) {
+      self.select(item);
+    });
     return this;
   }
 
@@ -411,7 +422,7 @@ Select.prototype.selected = function(arr){
  */
 
 Select.prototype.values = function(){
-  return this._selected.map(function(opt){
+  return map(this._selected, function(opt){
     return opt.value;
   });
 };
@@ -546,7 +557,7 @@ Select.prototype.previous = function(){
  * @api private
  */
 
-Select.prototype.onsearch = function(e){
+Select.prototype.onsearch = normalize(function(e){
   var key = keyname(e.which);
 
   // ignore
@@ -562,7 +573,7 @@ Select.prototype.onsearch = function(e){
   } else {
     this.showAll();
   }
-};
+});
 
 /**
  * on-keydown.
@@ -571,7 +582,7 @@ Select.prototype.onsearch = function(e){
  * @api private
  */
 
-Select.prototype.onkeydown = function(e){
+Select.prototype.onkeydown = normalize(function(e){
   var visible = this.visible()
     , box = this.box;
 
@@ -606,7 +617,7 @@ Select.prototype.onkeydown = function(e){
       this.deselect(item.name);
       break;
   }
-};
+});
 
 /**
  * on-mouseover
@@ -615,10 +626,10 @@ Select.prototype.onkeydown = function(e){
  * @api private
  */
 
-Select.prototype.onmouseover = function(e){
+Select.prototype.onmouseover = normalize(function(e){
   var name = e.target.getAttribute('data-name');
   this.highlight(name);
-};
+});
 
 /**
  * Emit change.
@@ -698,14 +709,14 @@ function option(obj, value, el){
   // option
   obj.label = obj.name;
   obj.name = obj.name.toLowerCase();
-  obj.value = obj.value == null 
+  obj.value = obj.value == null
     ? obj.name
     : obj.value;
 
   // element
   if (!obj.el) {
     obj.el = document.createElement('li');
-    obj.el.textContent = obj.label;
+    text(obj.el, obj.label);
   }
 
   // domify

test/test.js

@@ -28,7 +28,7 @@ describe('select()', function(){
     })
 
     it('should append the pillbox to `.select-box`', function(){
-      assert(dom('.pillbox', s.el).length());
+      assert(dom('.pillbox', s.el).length);
     })
   })
 
@@ -385,7 +385,7 @@ describe('select()', function(){
           .search('o')
           .opts;
 
-        assert(2 == dom('.select-option:not([hidden])', opts).length());
+        assert(2 == dom('.select-option:not([hidden])', opts).length);
       })
     })
 
@@ -398,7 +398,7 @@ describe('select()', function(){
         .search('o')
         .opts;
 
-      assert(3 == dom('.select-option:not([hidden])', opts).length());
+      assert(3 == dom('.select-option:not([hidden])', opts).length);
     })
   })
 })