better_select 0.0.4 → 0.1.0

data/.gitmodules

@@ -1,3 +1,12 @@
 [submodule "vendor"]
 	path = vendor
 	url = git@github.com:benastan/better_select.git
+[submodule "vendor/better_select"]
+	path = vendor/better_select
+	url = git@github.com:benastan/better_select.git
+[submodule "vendor/assets/better_select"]
+	path = vendor/assets/better_select
+	url = git@github.com:benastan/better_select.git
+[submodule "vendor/assets/javascripts/better_select"]
+	path = vendor/assets/javascripts/better_select
+	url = git@github.com:benastan/better_select.git

data/README.md

@@ -1,6 +1,6 @@
-# BetterSelect
+# BetterSelect (for Rails)
 
-TODO: Write a gem description
+Easily get better HTML Select elements into your rails projects.
 
 ## Installation
 
@@ -8,17 +8,25 @@ Add this line to your application's Gemfile:
 
     gem 'better_select'
 
+Or install it yourself as:
+
+    $ gem install better_select
+
 And then execute:
 
     $ bundle
 
-Or install it yourself as:
+Add to application.js:
 
-    $ gem install better_select
+    //= require 'better-select'
+
+Add to any stylesheet:
+
+    @import 'better-select';
 
 ## Usage
 
-TODO: Write usage instructions here
+See https://github.com/benastan/better_select for detailed usage.
 
 ## Contributing
 

data/better_select.gemspec

@@ -16,4 +16,5 @@ Gem::Specification.new do |gem|
   gem.version       = BetterSelect::VERSION
 
   gem.add_dependency "railties", "~> 3.1"
+  gem.add_dependency "underscore-rails"
 end

data/lib/better_select/version.rb

@@ -1,3 +1,3 @@
 module BetterSelect
-  VERSION = "0.0.4"
+  VERSION = "0.1.0"
 end

data/vendor/assets/javascripts/better-select.js

@@ -0,0 +1 @@
+//=require better_select/lib/better-select

data/vendor/assets/javascripts/better_select/Makefile

@@ -0,0 +1,4 @@
+compile:
+	coffee -co ./build ./lib/better-select.coffee
+	sass lib/better-select.css.scss  > ./build/better-select.css
+

data/vendor/assets/javascripts/better_select/README.md

@@ -0,0 +1,68 @@
+# BetterSelect
+
+HTML5 still hasn't gotten these right. Here's a simple JavaScript HTMLSelectElement
+replacer.
+
+## Installation
+
+Add to HTML web page:
+    
+    <!-- Underscore is BetterSelect's only dependency -->
+    <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
+    <script type="text/javascript" src="https://raw.github.com/benastan/better_select/master/build/better-select.js"></script>
+
+Or clone source:
+
+    git clone git@github.com:benastan/better_select.git
+
+## Usage
+
+Plain JavaScript:
+
+  <select id="boring-select"><option>What a bore!</option><option>This
+is boring!</option></select>
+  
+    boring_select = document.getElementById('boring-select')
+    better_select = new BetterSelect(boring_select)
+
+The BetterSelect instance offers a number of helpful properties, for
+example:
+
+    better_select.select // HTML Element of the replacement select.
+    better_select.dropdown // HTML Element containing the new options list.
+    better_select.selected_option // HTML Element containing the new options list.
+
+BetterSelect doesn't interfere with how the original select element
+operates. When the form submits, the value still comes from the select
+element itself.
+
+Additionally, you can attach events to the original element the same way
+as always:
+
+    ChangeHandler = function() { alert("It changed!") }
+    boring_select.addEventListener('change', ChangeHandler)
+
+Or, with jQuery:
+
+    $(boring_select).on('change', ChangeHandler)
+
+## CSS
+
+BetterSelect comes with a very limited amount of CSS -- just enough to
+make BetterSelect functional. All other styling choices are up to you.
+
+## TODO
+
+1. There are still a few ways that BetterSelect does not quite feel like
+   a standard select element. One is that when you type out a value when
+   focused, BetterSelect only focuses based on the first letter.
+2. Create themes.
+3. Code clean up.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/vendor/assets/{build → javascripts/better_select/build}/better-select.js

@@ -42,8 +42,7 @@
 
   addClass = function(tgt, className) {
     var classes;
-    classes = getClasses(tgt);
-    if (classes.indexOf(className) === -1) {
+    if ((classes = getClasses(tgt)).indexOf(className) === -1) {
       classes.push(className);
     }
     return setClasses(tgt, classes);
@@ -51,7 +50,7 @@
 
   removeClass = function(tgt, className) {
     var classes, index;
-    if (!(index = (classes = getClasses(tgt)).indexOf(className === -1))) {
+    if ((index = (classes = getClasses(tgt)).indexOf(className)) !== -1) {
       classes.splice(index, 1);
     }
     return setClasses(tgt, classes);
@@ -63,9 +62,7 @@
 
   build_element = function(what, orig, obj) {
     var elm;
-    elm = $$(_.template(obj["" + what + "_template"])(obj["process_" + what](orig)));
-    elm.orig = orig;
-    orig.better_version = elm;
+    ((elm = $$(_.template(obj["" + what + "_template"])(obj["process_" + what](orig)))).orig = orig).better_version = elm;
     elm.better_select = obj;
     return elm;
   };
@@ -81,10 +78,10 @@
     option.select = function() {
       this.orig.selected = 'selected';
       this.setAttribute('class', 'option selected');
-      if (bs.select.getAttribute('class').indexOf('open') !== -1) {
-        bs.toggle();
+      bs.set_selected(option);
+      if (bs.open) {
+        return bs.toggle();
       }
-      return bs.set_selected(option);
     };
     option.addEventListener('click', function() {
       return option.select();
@@ -96,6 +93,11 @@
     first_char = option.innerHTML.substr(0, 1).toLowerCase();
     if (!bs.options_by_first_char[first_char]) {
       bs.options_by_first_char[first_char] = [];
+      bs.options_by_first_char[first_char].sort = function() {
+        var sorted;
+        (sorted = _(this).sortBy('innerHTML')).unshift(0, this.length);
+        return this.splice.apply(this, sorted);
+      };
     }
     bs.options_by_first_char[first_char].push(option);
     bs.options_by_first_char[first_char].sort();
@@ -117,11 +119,12 @@
   BetterSelect = (function() {
 
     BetterSelect.prototype.defaults = {
-      positionDropdown: true
+      positionDropdown: true,
+      resizeDropdown: true
     };
 
     function BetterSelect(elm, options) {
-      var child, children, last_char, method, selected, _i, _len, _ref,
+      var child, children, method, selected, _i, _len, _ref,
         _this = this;
       if (!(elm && elm.tagName && elm.tagName === 'SELECT')) {
         return;
@@ -133,6 +136,7 @@
       selected = elm.selectedOptions;
       this.select = build_element('select', elm, this);
       _ref = this.select.children, this.selected_option = _ref[0], this.dropdown = _ref[1];
+      this.selected_option.better_select = this;
       if (elm.id) {
         this.select.id = "" + elm.id + "-better-select";
         this.dropdown.id = "" + elm.id + "-better-select-dropdown";
@@ -161,8 +165,14 @@
         this.default_selected[0].better_version.select();
       }
       this.selected_option.addEventListener('click', function() {
-        _this.toggle();
-        return _this.set_selected(_this.dropdown_selected_option);
+        if (_this.open) {
+          if (_this.focused_option) {
+            _this.focused_option.select();
+          }
+        } else {
+          _this.set_focused(_this.dropdown_selected_option);
+        }
+        return _this.toggle();
       });
       window.addEventListener('click', function(e) {
         if (!(e.target === _this.selected_option || e.target === _this.select || _this.options.indexOf(e.target) !== -1)) {
@@ -171,7 +181,7 @@
           }
         }
       });
-      last_char = false;
+      this.last_char = false;
       this.selected_option.addEventListener('focus', function() {
         document.body.style.overflow = 'hidden';
         return addClass(_this.select, 'focus');
@@ -184,58 +194,18 @@
         }
         return true;
       });
-      this.selected_option.addEventListener('keydown', function(e) {
+      this.selected_option.addEventListener('keyup', function(e) {
         if ([38, 40].indexOf(e.keyCode) !== -1) {
           return e.preventDefault();
         }
       });
-      this.selected_option.addEventListener('keyup', function(e) {
-        var char, keyCode, last_character, option;
-        if (_this.open === false) {
-          _this.toggle();
-        }
-        keyCode = e.keyCode;
-        switch (keyCode) {
-          case 38:
-            _this.set_focused(_this.options[(_this.focus_index -= 1) < 0 ? _this.focus_index = _this.options.length - 1 : _this.focus_index]);
-            break;
-          case 40:
-            _this.set_focused(_this.options[(_this.focus_index += 1) >= _this.options.length ? _this.focus_index = 0 : _this.focus_index]);
-            break;
-          case 13:
-            _this.focused_option.select();
-            break;
-          default:
-            if (keyCode > 47 && keyCode < 58) {
-              char = numbers[keyCode - 47];
-            } else if (keyCode > 64 && keyCode < 91) {
-              char = letters[keyCode - 65];
-            } else {
-              if (_this.focused_option) {
-                removeClass(_this.focused_option, 'focus');
-                _this.focused_option = false;
-                _this.focus_index = -1;
-              }
-              _this.toggle();
-            }
-            if (char && _this.options_by_first_char[char]) {
-              if (last_char !== char) {
-                _this.options_by_first_char[char].sort();
-              }
-              option = _this.options_by_first_char[char].shift();
-              _this.options_by_first_char[char].push(option);
-              _this.set_focused(option);
-              _this.focus_index = _this.options.indexOf(option);
-              last_character = char;
-            }
+      this.selected_option.addEventListener('keydown', function(e) {
+        return _this.process_key_event(e);
+      });
+      window.addEventListener('keydown', function(e) {
+        if (_this.open) {
+          return _this.process_key_event(e);
         }
-        _this.dropdown.addEventListener('click', function() {
-          return console.log(arguments);
-        });
-        e.preventDefault();
-        e.stopPropagation();
-        e.returnValue = false;
-        return false;
       });
     }
 
@@ -243,6 +213,61 @@
 
     BetterSelect.prototype.focus_index = -1;
 
+    BetterSelect.prototype.select_focused = function() {
+      if (this.focused_option) {
+        return this.focused_option.select();
+      }
+    };
+
+    BetterSelect.prototype.process_key_event = function(e) {
+      var char, isLetter, isNumber, keyCode, option;
+      keyCode = e.keyCode;
+      isNumber = keyCode > 47 && keyCode < 58;
+      isLetter = keyCode > 64 && keyCode < 91;
+      if (keyCode === 9 && this.open) {
+        return this.select_focused();
+      }
+      if (!([13, 38, 40].indexOf(keyCode) !== -1 || isLetter || isNumber)) {
+        return;
+      }
+      if ([13, 38, 40].indexOf(keyCode) !== -1 && this.open === false) {
+        this.toggle();
+      }
+      switch (keyCode) {
+        case 38:
+          this.set_focused(this.options[(this.focus_index -= 1) < 0 ? this.focus_index = this.options.length - 1 : this.focus_index]);
+          break;
+        case 40:
+          this.set_focused(this.options[(this.focus_index += 1) >= this.options.length ? this.focus_index = 0 : this.focus_index]);
+          break;
+        case 13:
+          this.select_focused();
+          break;
+        default:
+          if (isNumber) {
+            char = numbers[new String(keyCode - 48)];
+          } else if (isLetter) {
+            char = letters[keyCode - 65];
+          }
+          if (char && this.options_by_first_char[char]) {
+            if (!this.open) {
+              this.toggle();
+            }
+            if (this.last_char !== char) {
+              this.options_by_first_char[char].sort();
+            }
+            option = this.options_by_first_char[char].shift();
+            this.options_by_first_char[char].push(option);
+            this.set_focused(option);
+            this.focus_index = this.options.indexOf(option);
+            this.last_char = char;
+          }
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      return e.returnValue = false;
+    };
+
     BetterSelect.prototype.set_focused = function(option) {
       var class_for_selected,
         _this = this;
@@ -258,7 +283,8 @@
       }
       this.focused_option = option;
       this.focused_option.setAttribute("class", "option focus" + (class_for_selected(option)));
-      return this.focus_index = this.options.indexOf(this.focused_option);
+      this.focus_index = this.options.indexOf(this.focused_option);
+      return this.focused_option.scrollIntoView();
     };
 
     BetterSelect.prototype.open = false;
@@ -266,6 +292,9 @@
     BetterSelect.prototype.toggle = function() {
       var height, top;
       ((this.open = !this.open) ? addClass : removeClass)(this.select, 'open');
+      if (this.settings.resizeDropdown) {
+        this.dropdown.style.width = this.select.offsetWidth + 'px';
+      }
       if (this.settings.positionDropdown) {
         if (this.dropdown.offsetHeight > window.innerHeight) {
           height = window.innerHeight * .50;
@@ -279,8 +308,11 @@
         top = top || (getTop(this.select) - this.dropdown_selected_option.offsetTop);
         top = getTop(this.select) - (this.dropdown_selected_option.offsetTop - this.dropdown.scrollTop);
         this.dropdown.style.top = (top < 0 ? 0 : top) + 'px';
-        return this.dropdown.style.left = this.open ? getLeft(this.select) + 'px' : '-9999px';
+        this.dropdown.style.left = this.open ? getLeft(this.select) + 'px' : '-9999px';
       }
+      return _(this.options_by_first_char).each(function(options) {
+        return options.sort();
+      });
     };
 
     BetterSelect.prototype.reset = function(option) {
@@ -299,15 +331,16 @@
         this.selected_option.innerHTML = option.innerHTML;
         e = document.createEvent('Event');
         e.initEvent('change', true, true);
-        return this.select.orig.dispatchEvent(e);
+        this.select.orig.dispatchEvent(e);
       }
+      return this.selected_option.focus();
     };
 
     BetterSelect.prototype.option_template = '<div class="option"><%= innerHTML %></div>';
 
     BetterSelect.prototype.option_group_template = '<div class="optgroup"><div class="option-group-label"><%= label %></div></div>';
 
-    BetterSelect.prototype.select_template = '<div class="select"><a href="javascript:void(0)" class="selected-option"></a><div class="better-select-dropdown dropdown"></div></div>';
+    BetterSelect.prototype.select_template = '<div class="select better-select"><a href="javascript:void(0)" class="selected-option"></a><div class="better-select-dropdown dropdown"></div></div>';
 
     BetterSelect.prototype.process_option = function(option) {
       return option;

data/vendor/assets/{lib → javascripts/better_select/lib}/better-select.coffee

@@ -20,12 +20,11 @@ setClasses = (tgt, classes) ->
   tgt
 
 addClass = (tgt, className) ->
-  classes = getClasses tgt
-  classes.push(className) if classes.indexOf(className) is -1
+  classes.push(className) if (classes = getClasses tgt).indexOf(className) is -1
   setClasses tgt, classes
 
 removeClass = (tgt, className) ->
-  classes.splice(index, 1) unless index = (classes = getClasses tgt).indexOf className is -1
+  classes.splice(index, 1) unless (index = (classes = getClasses tgt).indexOf className) is -1
   setClasses tgt, classes
 
 letters = 'a b c d e f g h i j k l m n o p q r s t u v w x y z'.split ' '
@@ -38,20 +37,30 @@ build_element = (what, orig, obj) ->
 
 renderOption = (orig_option, bs) ->
   option = build_element 'option', orig_option, bs
+
   option.reset = ->
     @orig.selected = undefined
     @setAttribute 'class', 'option'
     bs.reset @
+
   option.select = ->
     @orig.selected = 'selected'
     @setAttribute 'class', 'option selected'
-    bs.toggle() if bs.select.getAttribute('class').indexOf('open') isnt -1
     bs.set_selected option
-  option.addEventListener 'click', -> option.select()
+    bs.toggle() if bs.open
+
+  option.addEventListener 'click', ->
+    option.select()
+
   option.addEventListener 'mouseover', -> option.better_select.set_focused option
+
   bs.options.push option
   first_char = option.innerHTML.substr(0, 1).toLowerCase()
-  bs.options_by_first_char[first_char] = [] unless bs.options_by_first_char[first_char]
+  unless bs.options_by_first_char[first_char]
+    bs.options_by_first_char[first_char] = []
+    bs.options_by_first_char[first_char].sort = ->
+      (sorted = _(@).sortBy 'innerHTML').unshift 0, @.length
+      @.splice.apply @, sorted
   bs.options_by_first_char[first_char].push option
   bs.options_by_first_char[first_char].sort()
   option
@@ -63,8 +72,11 @@ renderOptionGroup = (orig_group, bs) ->
   group
 
 class BetterSelect
+
   defaults:
     positionDropdown: true
+    resizeDropdown: true
+
   constructor: (elm, options) ->
     return unless elm && elm.tagName && elm.tagName is 'SELECT'
     @settings = _.extend {}, @defaults, options
@@ -74,17 +86,22 @@ class BetterSelect
     selected = elm.selectedOptions
     @select = build_element 'select', elm, @
     [@selected_option, @dropdown] = @select.children
+    @selected_option.better_select = @
+
     if elm.id
       @select.id = "#{elm.id}-better-select"
       @dropdown.id = "#{elm.id}-better-select-dropdown"
+
     @default_selected = [elm.children[elm.selectedIndex]]
     elm.parentNode.insertBefore @select, elm
     elm.parentNode.insertBefore elm, @select
     elm.style.display = 'none'
     children = elm.children
+
     if @settings.positionDropdown
       document.body.appendChild @dropdown
       @dropdown.style.left = '-9999px'
+
     for child in children
       switch child.tagName
         when 'OPTION'
@@ -92,65 +109,90 @@ class BetterSelect
         when 'OPTGROUP'
           method = renderOptionGroup
       @dropdown.appendChild(method child, @)
+
     @default_selected[0].better_version.select() if @default_selected
+
     @selected_option.addEventListener 'click', =>
+      if @open
+        @focused_option.select() if @focused_option
+      else
+        @set_focused @dropdown_selected_option
       @toggle()
-      @set_selected @dropdown_selected_option
+
     window.addEventListener 'click', (e) =>
       unless e.target == @selected_option || e.target == @select || @options.indexOf(e.target) isnt -1
         @toggle() if @open
-    last_char = false
+
+    @last_char = false
+
     @selected_option.addEventListener 'focus', =>
       document.body.style.overflow = 'hidden'
       addClass @select, 'focus'
+
     @selected_option.addEventListener 'blur', =>
       removeClass @select, 'focus'
       document.body.style.overflow = 'auto'
       @toggle() if @open is true
       true
-    @selected_option.addEventListener 'keydown', (e) => e.preventDefault() unless [38, 40].indexOf(e.keyCode) is -1
-    @selected_option.addEventListener 'keyup', (e) =>
-      @toggle() if @open is false
-      keyCode = e.keyCode
-      switch keyCode
-        when 38 then @set_focused @options[if (@focus_index -= 1) < 0 then @focus_index = @options.length - 1 else @focus_index]
-        when 40 then @set_focused @options[if (@focus_index += 1) >= @options.length then @focus_index = 0 else @focus_index]
-        when 13
-          @focused_option.select()
-        else
-          if keyCode > 47 && keyCode < 58
-            char = numbers[keyCode - 47]
-          else if keyCode > 64 && keyCode < 91
-            char = letters[keyCode - 65]
-          else
-            if @focused_option
-              removeClass @focused_option, 'focus'
-              @focused_option = false
-              @focus_index = -1
-            @toggle()
-          if char && @options_by_first_char[char]
-            @options_by_first_char[char].sort() unless last_char is char
-            option = @options_by_first_char[char].shift()
-            @options_by_first_char[char].push option
-            @set_focused option
-            @focus_index = @options.indexOf option
-            last_character = char
-      @dropdown.addEventListener('click', -> console.log arguments)
-      e.preventDefault()
-      e.stopPropagation()
-      e.returnValue = false
-      false
+
+    @selected_option.addEventListener 'keyup', (e) => e.preventDefault() unless [38, 40].indexOf(e.keyCode) is -1
+
+    @selected_option.addEventListener 'keydown', (e) => @process_key_event(e)
+
+    window.addEventListener 'keydown', (e) => @process_key_event(e) if @open
+
   focused_option: false
   focus_index: -1
+  select_focused: -> @focused_option.select() if @focused_option
+
+  process_key_event: (e) ->
+    keyCode = e.keyCode
+    isNumber = keyCode > 47 && keyCode < 58
+    isLetter = keyCode > 64 && keyCode < 91
+
+    return @select_focused() if keyCode is 9 && @open
+
+    return unless [13, 38, 40].indexOf(keyCode) isnt -1 || isLetter || isNumber
+
+    @toggle() if [13, 38, 40].indexOf(keyCode) isnt -1 && @open is false
+
+    switch keyCode
+      when 38 then @set_focused @options[if (@focus_index -= 1) < 0 then @focus_index = @options.length - 1 else @focus_index]
+      when 40 then @set_focused @options[if (@focus_index += 1) >= @options.length then @focus_index = 0 else @focus_index]
+      when 13 then @select_focused()
+      else
+        if isNumber
+          char = numbers[new String(keyCode - 48)]
+        else if isLetter
+          char = letters[keyCode - 65]
+
+        if char && @options_by_first_char[char]
+          @toggle() unless @open
+          @options_by_first_char[char].sort() unless @last_char is char
+          option = @options_by_first_char[char].shift()
+          @options_by_first_char[char].push option
+          @set_focused option
+          @focus_index = @options.indexOf option
+          @last_char = char
+
+    e.preventDefault()
+    e.stopPropagation()
+    e.returnValue = false
+
   set_focused: (option) ->
     class_for_selected = (option) => if @selected_option && option.innerHTML is @selected_option.innerHTML then " selected" else ""
     @focused_option.setAttribute('class', "option#{class_for_selected(@focused_option)}") if @focused_option
     @focused_option = option
     @focused_option.setAttribute("class", "option focus#{class_for_selected(option)}")
     @focus_index = @options.indexOf @focused_option
+    @focused_option.scrollIntoView()
+
   open: false
+
   toggle: ->
     (if @open = !@open then addClass else removeClass)(@select, 'open')
+    if @settings.resizeDropdown
+      @dropdown.style.width = @select.offsetWidth + 'px'
     if @settings.positionDropdown
       if @dropdown.offsetHeight > window.innerHeight
         height = window.innerHeight * .50
@@ -163,7 +205,10 @@ class BetterSelect
       top = getTop(@select) - (@dropdown_selected_option.offsetTop - @dropdown.scrollTop)
       @dropdown.style.top = (if top < 0 then 0 else top)  + 'px'
       @dropdown.style.left = if @open then getLeft(@select) + 'px' else '-9999px'
+    _(@options_by_first_char).each (options) -> options.sort()
+
   reset: (option) -> @default_selected[0].better_version.select() if @default_selected
+
   set_selected: (option) ->
     unless @selected_option.innerHTML == option.innerHTML
       removeClass(@dropdown_selected_option, 'selected') if @dropdown_selected_option
@@ -172,12 +217,13 @@ class BetterSelect
       e = document.createEvent('Event')
       e.initEvent 'change', true, true
       @select.orig.dispatchEvent e
+    @selected_option.focus()
+
   option_template: '<div class="option"><%= innerHTML %></div>'
   option_group_template: '<div class="optgroup"><div class="option-group-label"><%= label %></div></div>'
-  select_template: '<div class="select"><a href="javascript:void(0)" class="selected-option"></a><div class="better-select-dropdown dropdown"></div></div>'
+  select_template: '<div class="select better-select"><a href="javascript:void(0)" class="selected-option"></a><div class="better-select-dropdown dropdown"></div></div>'
   process_option: (option) -> option
   process_option_group: (option_group) -> option_group
   process_select: (select) -> select
 
-
 window.BetterSelect = BetterSelect