better_select 0.0.3 → 0.0.4

data/vendor/build/better-select.js

@@ -0,0 +1,330 @@
+// Generated by CoffeeScript 1.3.3
+(function() {
+  var $$, BetterSelect, addClass, build_element, getClasses, getLeft, getPos, getTop, letters, numbers, removeClass, renderOption, renderOptionGroup, setClasses;
+
+  $$ = function(html) {
+    var elm;
+    elm = document.createElement('div');
+    elm.innerHTML = html;
+    if (elm.children.length > 1) {
+      return elm.children;
+    } else {
+      return elm.children[0];
+    }
+  };
+
+  getPos = function(tgt, method) {
+    var pos;
+    pos = 0;
+    while (tgt) {
+      pos += tgt[method];
+      tgt = tgt.offsetParent;
+    }
+    return pos;
+  };
+
+  getTop = function(tgt) {
+    return getPos(tgt, 'offsetTop');
+  };
+
+  getLeft = function(tgt) {
+    return getPos(tgt, 'offsetLeft');
+  };
+
+  getClasses = function(tgt) {
+    return tgt.getAttribute('class').split(' ');
+  };
+
+  setClasses = function(tgt, classes) {
+    tgt.setAttribute('class', classes.join(' '));
+    return tgt;
+  };
+
+  addClass = function(tgt, className) {
+    var classes;
+    classes = getClasses(tgt);
+    if (classes.indexOf(className) === -1) {
+      classes.push(className);
+    }
+    return setClasses(tgt, classes);
+  };
+
+  removeClass = function(tgt, className) {
+    var classes, index;
+    if (!(index = (classes = getClasses(tgt)).indexOf(className === -1))) {
+      classes.splice(index, 1);
+    }
+    return 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(' ');
+
+  numbers = '0 1 2 3 4 5 6 7 8 9 0'.split(' ');
+
+  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.better_select = obj;
+    return elm;
+  };
+
+  renderOption = function(orig_option, bs) {
+    var first_char, option;
+    option = build_element('option', orig_option, bs);
+    option.reset = function() {
+      this.orig.selected = void 0;
+      this.setAttribute('class', 'option');
+      return bs.reset(this);
+    };
+    option.select = function() {
+      this.orig.selected = 'selected';
+      this.setAttribute('class', 'option selected');
+      if (bs.select.getAttribute('class').indexOf('open') !== -1) {
+        bs.toggle();
+      }
+      return bs.set_selected(option);
+    };
+    option.addEventListener('click', function() {
+      return option.select();
+    });
+    option.addEventListener('mouseover', function() {
+      return option.better_select.set_focused(option);
+    });
+    bs.options.push(option);
+    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].push(option);
+    bs.options_by_first_char[first_char].sort();
+    return option;
+  };
+
+  renderOptionGroup = function(orig_group, bs) {
+    var child, group, _i, _len, _ref;
+    group = build_element('option_group', orig_group, bs);
+    _ref = orig_group.children;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      child = _ref[_i];
+      group.appendChild(renderOption(child, bs));
+    }
+    bs.option_groups.push(group);
+    return group;
+  };
+
+  BetterSelect = (function() {
+
+    BetterSelect.prototype.defaults = {
+      positionDropdown: true
+    };
+
+    function BetterSelect(elm, options) {
+      var child, children, last_char, method, selected, _i, _len, _ref,
+        _this = this;
+      if (!(elm && elm.tagName && elm.tagName === 'SELECT')) {
+        return;
+      }
+      this.settings = _.extend({}, this.defaults, options);
+      this.options = [];
+      this.options_by_first_char = {};
+      this.option_groups = [];
+      selected = elm.selectedOptions;
+      this.select = build_element('select', elm, this);
+      _ref = this.select.children, this.selected_option = _ref[0], this.dropdown = _ref[1];
+      if (elm.id) {
+        this.select.id = "" + elm.id + "-better-select";
+        this.dropdown.id = "" + elm.id + "-better-select-dropdown";
+      }
+      this.default_selected = [elm.children[elm.selectedIndex]];
+      elm.parentNode.insertBefore(this.select, elm);
+      elm.parentNode.insertBefore(elm, this.select);
+      elm.style.display = 'none';
+      children = elm.children;
+      if (this.settings.positionDropdown) {
+        document.body.appendChild(this.dropdown);
+        this.dropdown.style.left = '-9999px';
+      }
+      for (_i = 0, _len = children.length; _i < _len; _i++) {
+        child = children[_i];
+        switch (child.tagName) {
+          case 'OPTION':
+            method = renderOption;
+            break;
+          case 'OPTGROUP':
+            method = renderOptionGroup;
+        }
+        this.dropdown.appendChild(method(child, this));
+      }
+      if (this.default_selected) {
+        this.default_selected[0].better_version.select();
+      }
+      this.selected_option.addEventListener('click', function() {
+        _this.toggle();
+        return _this.set_selected(_this.dropdown_selected_option);
+      });
+      window.addEventListener('click', function(e) {
+        if (!(e.target === _this.selected_option || e.target === _this.select || _this.options.indexOf(e.target) !== -1)) {
+          if (_this.open) {
+            return _this.toggle();
+          }
+        }
+      });
+      last_char = false;
+      this.selected_option.addEventListener('focus', function() {
+        document.body.style.overflow = 'hidden';
+        return addClass(_this.select, 'focus');
+      });
+      this.selected_option.addEventListener('blur', function() {
+        removeClass(_this.select, 'focus');
+        document.body.style.overflow = 'auto';
+        if (_this.open === true) {
+          _this.toggle();
+        }
+        return true;
+      });
+      this.selected_option.addEventListener('keydown', 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.dropdown.addEventListener('click', function() {
+          return console.log(arguments);
+        });
+        e.preventDefault();
+        e.stopPropagation();
+        e.returnValue = false;
+        return false;
+      });
+    }
+
+    BetterSelect.prototype.focused_option = false;
+
+    BetterSelect.prototype.focus_index = -1;
+
+    BetterSelect.prototype.set_focused = function(option) {
+      var class_for_selected,
+        _this = this;
+      class_for_selected = function(option) {
+        if (_this.selected_option && option.innerHTML === _this.selected_option.innerHTML) {
+          return " selected";
+        } else {
+          return "";
+        }
+      };
+      if (this.focused_option) {
+        this.focused_option.setAttribute('class', "option" + (class_for_selected(this.focused_option)));
+      }
+      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);
+    };
+
+    BetterSelect.prototype.open = false;
+
+    BetterSelect.prototype.toggle = function() {
+      var height, top;
+      ((this.open = !this.open) ? addClass : removeClass)(this.select, 'open');
+      if (this.settings.positionDropdown) {
+        if (this.dropdown.offsetHeight > window.innerHeight) {
+          height = window.innerHeight * .50;
+          this.dropdown.style.height = height + 'px';
+          this.dropdown.style['overflow-y'] = 'auto';
+          if (this.dropdown_selected_option.offsetTop > height || this.adjust_height) {
+            this.dropdown_selected_option.scrollIntoView();
+            this.adjust_height = true;
+          }
+        }
+        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';
+      }
+    };
+
+    BetterSelect.prototype.reset = function(option) {
+      if (this.default_selected) {
+        return this.default_selected[0].better_version.select();
+      }
+    };
+
+    BetterSelect.prototype.set_selected = function(option) {
+      var e;
+      if (this.selected_option.innerHTML !== option.innerHTML) {
+        if (this.dropdown_selected_option) {
+          removeClass(this.dropdown_selected_option, 'selected');
+        }
+        addClass(this.dropdown_selected_option = option, 'selected');
+        this.selected_option.innerHTML = option.innerHTML;
+        e = document.createEvent('Event');
+        e.initEvent('change', true, true);
+        return this.select.orig.dispatchEvent(e);
+      }
+    };
+
+    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.process_option = function(option) {
+      return option;
+    };
+
+    BetterSelect.prototype.process_option_group = function(option_group) {
+      return option_group;
+    };
+
+    BetterSelect.prototype.process_select = function(select) {
+      return select;
+    };
+
+    return BetterSelect;
+
+  })();
+
+  window.BetterSelect = BetterSelect;
+
+}).call(this);

data/vendor/lib/better-select.coffee

@@ -0,0 +1,183 @@
+$$ = (html) ->
+  elm = document.createElement 'div'
+  elm.innerHTML = html
+  if elm.children.length > 1 then elm.children else elm.children[0]
+
+getPos = (tgt, method) ->
+  pos = 0
+  while tgt
+    pos += tgt[method]
+    tgt = tgt.offsetParent
+  pos
+
+getTop = (tgt) -> getPos tgt, 'offsetTop'
+getLeft = (tgt) -> getPos tgt, 'offsetLeft'
+
+getClasses = (tgt) -> tgt.getAttribute('class').split ' '
+
+setClasses = (tgt, classes) ->
+  tgt.setAttribute 'class', classes.join ' '
+  tgt
+
+addClass = (tgt, className) ->
+  classes = getClasses tgt
+  classes.push(className) if classes.indexOf(className) is -1
+  setClasses tgt, classes
+
+removeClass = (tgt, className) ->
+  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 ' '
+numbers = '0 1 2 3 4 5 6 7 8 9 0'.split ' '
+
+build_element = (what, orig, obj) ->
+  ((elm = $$ _.template(obj["#{what}_template"]) obj["process_#{what}"] orig).orig = orig).better_version = elm
+  elm.better_select = obj
+  elm
+
+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()
+  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]
+  bs.options_by_first_char[first_char].push option
+  bs.options_by_first_char[first_char].sort()
+  option
+
+renderOptionGroup = (orig_group, bs) ->
+  group = build_element 'option_group', orig_group, bs
+  group.appendChild(renderOption child, bs) for child in orig_group.children
+  bs.option_groups.push group
+  group
+
+class BetterSelect
+  defaults:
+    positionDropdown: true
+  constructor: (elm, options) ->
+    return unless elm && elm.tagName && elm.tagName is 'SELECT'
+    @settings = _.extend {}, @defaults, options
+    @options = []
+    @options_by_first_char = {}
+    @option_groups = []
+    selected = elm.selectedOptions
+    @select = build_element 'select', elm, @
+    [@selected_option, @dropdown] = @select.children
+    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'
+          method = renderOption
+        when 'OPTGROUP'
+          method = renderOptionGroup
+      @dropdown.appendChild(method child, @)
+    @default_selected[0].better_version.select() if @default_selected
+    @selected_option.addEventListener 'click', =>
+      @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
+    @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
+  focused_option: false
+  focus_index: -1
+  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
+  open: false
+  toggle: ->
+    (if @open = !@open then addClass else removeClass)(@select, 'open')
+    if @settings.positionDropdown
+      if @dropdown.offsetHeight > window.innerHeight
+        height = window.innerHeight * .50
+        @dropdown.style.height = height + 'px'
+        @dropdown.style['overflow-y'] = 'auto'
+        if @dropdown_selected_option.offsetTop > height || @adjust_height
+          @dropdown_selected_option.scrollIntoView()
+          @adjust_height = true
+      top = top || (getTop(@select) - @dropdown_selected_option.offsetTop)
+      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'
+  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
+      addClass @dropdown_selected_option = option, 'selected'
+      @selected_option.innerHTML = option.innerHTML
+      e = document.createEvent('Event')
+      e.initEvent 'change', true, true
+      @select.orig.dispatchEvent e
+  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>'
+  process_option: (option) -> option
+  process_option_group: (option_group) -> option_group
+  process_select: (select) -> select
+
+
+window.BetterSelect = BetterSelect

data/vendor/lib/better-select.css.scss

@@ -0,0 +1,32 @@
+.better-select-dropdown {
+  position: fixed;
+
+  .option {
+    cursor: pointer;
+  }
+}
+
+.select {
+  position: static;
+
+  &.dont-position-dropdown {
+    position: relative;
+
+    .dropdown {
+      top: 100%;
+      left: -99999px;
+    }
+  }
+
+  &.open {
+    &.dont-position-dropdown {
+      .dropdown {
+        left: 0px;
+      }
+    }
+  }
+
+  .selected-option {
+    cursor: pointer;
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: better_select
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
   prerelease: 
 platform: ruby
 authors:
@@ -10,7 +10,23 @@ autorequire:
 bindir: bin
 cert_chain: []
 date: 2012-12-18 00:00:00.000000000 Z
-dependencies: []
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.1'
 description: A better HTMLSelectElement replacement
 email:
 - bennyjbergstein@gmail.com
@@ -24,13 +40,30 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- better_select_rails.gemspec
+- better_select.gemspec
 - lib/better_select.rb
 - lib/better_select/engine.rb
 - lib/better_select/version.rb
+- vendor/assets/better_select.gemspec
+- vendor/assets/build/better-select.css
+- vendor/assets/build/better-select.js
+- vendor/assets/javascripts/better-select.js.coffee
+- vendor/assets/lib/better-select.coffee
+- vendor/assets/lib/better-select.css.scss
+- vendor/assets/LICENSE
+- vendor/assets/Makefile
+- vendor/assets/README.md
+- vendor/assets/stylesheets/better-select.css.scss
+- vendor/build/better-select.css
+- vendor/build/better-select.js
 - vendor/javascripts/better-select.js.coffee
+- vendor/lib/better-select.coffee
+- vendor/lib/better-select.css.scss
+- vendor/LICENSE
+- vendor/Makefile
+- vendor/README.md
 - vendor/stylesheets/better-select.css.scss
-homepage: http://www.benjaminbergstein.com
+homepage: http://www.benjaminberstein.com
 licenses: []
 post_install_message: 
 rdoc_options: []