bootstrap-combobox-rails 0.0.2

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 denishaskin
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,31 @@
+# Bootstrap::Combobox::Rails
+
+Simple wrapping of bootstrap-combobox in a gem for easy deployment & maintenance.  Note this uses a forked version of bootstrap-combobox
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'bootstrap-combobox-rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install bootstrap-combobox-rails
+
+## Usage
+
+TODO: Verify these instructions:
+
+None?  The .js and .css will get included automatically?
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/lib/bootstrap-combobox-rails.rb

@@ -0,0 +1,11 @@
+require "bootstrap-combobox-rails/version"
+
+module Bootstrap
+  module Combobox
+    module Rails
+      class Engine < ::Rails::Engine
+        # Rails, will you please look in our vendor? kthx
+      end    
+    end
+  end
+end

data/lib/bootstrap-combobox-rails/version.rb

@@ -0,0 +1,7 @@
+module Bootstrap
+  module Combobox
+    module Rails
+      VERSION = "0.0.2"
+    end
+  end
+end

data/vendor/assets/README.md

@@ -0,0 +1,28 @@
+# Bootstrap Combobox
+
+We had need of a combobox at work and after looking around at the available options I was not happy with any of them.  The project had all it's styling based on Twitter's Bootstrap, so building on that made sense.
+
+## How to use it
+
+The dependencies are the Bootstrap stylesheet(CSS or LESS) and also the typeahead javascript plugin.  Include them and then the stylesheet(CSS or LESS) and javascript.
+
+Then just activate the plugin on a normal select box(suggest having a blank option first):
+
+    <select class="combobox">
+      <option></option>
+      <option value="PA">Pennsylvania</option>
+      <option value="CT">Connecticut</option>
+      <option value="NY">New York</option>
+      <option value="MD">Maryland</option>
+      <option value="VA">Virginia</option>
+    </select>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $('.combobox').combobox();
+      });
+    </script>
+
+## Live Example
+
+http://dl.dropbox.com/u/21368/bootstrap-combobox/index.html

data/vendor/assets/javascripts/bootstrap-combobox.js

@@ -0,0 +1,243 @@
+/* =============================================================
+ * bootstrap-combobox.js v1.1.1
+ * =============================================================
+ * Copyright 2012 Daniel Farrell
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================ */
+
+!function( $ ) {
+
+ "use strict";
+
+  var Combobox = function ( element, options ) {
+    this.options = $.extend({}, $.fn.combobox.defaults, options)
+    this.$source = $(element)
+    this.$container = this.setup()
+    this.$element = this.$container.find('input[type=text]')
+    this.$target = this.$container.find('input[type=hidden]')
+    this.$button = this.$container.find('.dropdown-toggle')
+    this.$menu = $(this.options.menu).appendTo('body')
+    this.matcher = this.options.matcher || this.matcher
+    this.sorter = this.options.sorter || this.sorter
+    this.highlighter = this.options.highlighter || this.highlighter
+    this.shown = false
+    this.selected = false
+    this.refresh()
+    this.transferAttributes()
+    this.listen()
+  }
+
+  /* NOTE: COMBOBOX EXTENDS BOOTSTRAP-TYPEAHEAD.js
+     ========================================== */
+
+  Combobox.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
+
+    constructor: Combobox
+
+  , setup: function () {
+      var combobox = $(this.options.template)
+      this.$source.before(combobox)
+      this.$source.hide()
+      return combobox
+    }
+
+  , parse: function () {
+      var that = this
+        , map = {}
+        , source = []
+        , selected = false
+      this.$source.find('option').each(function() {
+        var option = $(this)
+        if (option.val() === '') {
+          that.options.placeholder = option.text()
+          return
+        }
+        map[option.text()] = option.val()
+        source.push(option.text())
+        if(option.attr('selected')) selected = option.html()
+      })
+      this.map = map
+      if (selected) {
+        this.$element.val(selected)
+        this.$container.addClass('combobox-selected')
+        this.selected = true
+      }
+      return source
+    }
+
+  , transferAttributes: function() {
+    this.options.placeholder = this.$source.attr('data-placeholder') || this.options.placeholder
+    this.$element.attr('placeholder', this.options.placeholder)
+    this.$target.prop('name', this.$source.prop('name'))
+    this.$target.val(this.$source.val())
+    this.$source.removeAttr('name')  // Remove from source otherwise form will pass parameter twice.
+    this.$element.attr('required', this.$source.attr('required'))
+    this.$element.attr('rel', this.$source.attr('rel'))
+    this.$element.attr('title', this.$source.attr('title'))
+    this.$element.attr('class', this.$source.attr('class'))
+  }
+
+  , toggle: function () {
+    if (this.$container.hasClass('combobox-selected')) {
+      this.clearTarget()
+      this.triggerChange()
+      this.clearElement()
+    } else {
+      if (this.shown) {
+        this.hide()
+      } else {
+        this.clearElement()
+        this.lookup()
+      }
+    }
+  }
+
+  , clearElement: function () {
+    this.$element.val('').focus()
+  }
+
+  , clearTarget: function () {
+    this.$source.val('')
+    this.$target.val('')
+    this.$container.removeClass('combobox-selected')
+    this.selected = false
+  }
+
+  , triggerChange: function () {
+    this.$source.trigger('change')
+  }
+
+  , refresh: function () {
+    this.source = this.parse()
+    this.options.items = this.source.length
+  }
+
+  // modified typeahead function adding container and target handling
+  , select: function () {
+      var val = this.$menu.find('.active').attr('data-value')
+      this.$element.val(this.updater(val)).trigger('change')
+      this.$source.val(this.map[val]).trigger('change')
+      this.$target.val(this.map[val]).trigger('change')
+      this.$container.addClass('combobox-selected')
+      this.selected = true
+      return this.hide()
+    }
+
+  // modified typeahead function removing the blank handling and source function handling
+  , lookup: function (event) {
+      this.query = this.$element.val()
+      return this.process(this.source)
+    }
+
+  // modified typeahead function adding button handling and remove mouseleave
+  , listen: function () {
+      this.$element
+        .on('focus',    $.proxy(this.focus, this))
+        .on('blur',     $.proxy(this.blur, this))
+        .on('keypress', $.proxy(this.keypress, this))
+        .on('keyup',    $.proxy(this.keyup, this))
+
+      if (this.eventSupported('keydown')) {
+        this.$element.on('keydown', $.proxy(this.keydown, this))
+      }
+
+      this.$menu
+        .on('click', $.proxy(this.click, this))
+        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
+        .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
+
+      this.$button
+        .on('click', $.proxy(this.toggle, this))
+    }
+
+  // modified typeahead function to clear on type and prevent on moving around
+  , keyup: function (e) {
+      switch(e.keyCode) {
+        case 40: // down arrow
+        case 39: // right arrow
+        case 38: // up arrow
+        case 37: // left arrow
+        case 36: // home
+        case 35: // end
+        case 16: // shift
+        case 17: // ctrl
+        case 18: // alt
+          break
+
+        case 9: // tab
+        case 13: // enter
+          if (!this.shown) return
+          this.select()
+          break
+
+        case 27: // escape
+          if (!this.shown) return
+          this.hide()
+          break
+
+        default:
+          this.clearTarget()
+          this.lookup()
+      }
+
+      e.stopPropagation()
+      e.preventDefault()
+  }
+
+  // modified typeahead function to force a match and add a delay on hide
+  , blur: function (e) {
+      var that = this
+      this.focused = false
+      var val = this.$element.val()
+      if (!!this.options.force_match) {
+          if ( !this.selected && val !== '' ) {
+              this.$element.val('')
+              this.$source.val('').trigger('change')
+              this.$target.val('').trigger('change')
+          }
+      } else {
+          this.$target.val(val).trigger('change')
+      }
+      if (!this.mousedover && this.shown) setTimeout(function () { that.hide() }, 200)
+    }
+
+  // modified typeahead function to not hide
+  , mouseleave: function (e) {
+      this.mousedover = false
+    }
+  })
+
+  /* COMBOBOX PLUGIN DEFINITION
+   * =========================== */
+
+  $.fn.combobox = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('combobox')
+        , options = typeof option == 'object' && option
+      if(!data) $this.data('combobox', (data = new Combobox(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.combobox.defaults = {
+  template: '<div class="combobox-container"><input type="hidden" /><input type="text" autocomplete="off" /><span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"/><span class="combobox-clear"><i class="icon-remove"/></span></span></div>'
+  , menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
+  , item: '<li><a href="#"></a></li>'
+  , force_match: true
+  }
+
+  $.fn.combobox.Constructor = Combobox
+
+}( window.jQuery );

data/vendor/assets/javascripts/tests/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Bootstrap Combobox Test Suite</title>
+
+  <!-- jquery -->
+  <!--<script src="http://code.jquery.com/jquery-1.7.min.js"></script>-->
+  <script src="vendor/jquery.js"></script>
+  <script src="vendor/bootstrap-typeahead.js"></script>
+
+  <!-- qunit -->
+  <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
+  <script src="vendor/qunit.js"></script>
+
+  <!--  plugin sources -->
+  
+  <script src="../../js/bootstrap-combobox.js"></script>
+
+  <!-- unit tests -->
+  <script src="unit/bootstrap-combobox.js"></script>
+
+<body>
+  <div>
+    <h1 id="qunit-header">Bootstrap Combobox Test Suite</h1>
+    <h2 id="qunit-banner"></h2>
+    <h2 id="qunit-userAgent"></h2>
+    <ol id="qunit-tests"></ol>
+    <div id="qunit-fixture"></div>
+  </div>
+</body>
+</html>

data/vendor/assets/javascripts/tests/unit/bootstrap-combobox.js

@@ -0,0 +1,297 @@
+$(function () {
+
+    module("bootstrap-combobox")
+
+      test("should be defined on jquery object", function () {
+        ok($(document.body).combobox, 'combobox method is defined')
+      })
+
+      test("should return element", function () {
+        var $select = $('<select />')
+        ok($($select).combobox()[0] == $select[0], 'select returned')
+      })
+
+      test("should build combobox from a select", function() {
+        var $select = $('<select />')
+        $select.combobox()
+        ok($select.data('combobox').$source, 'has a source select')
+        ok($select.data('combobox').$container, 'has a container')
+        ok($select.data('combobox').$element, 'has a input element')
+        ok($select.data('combobox').$button, 'has a button')
+        ok($select.data('combobox').$target, 'has a target')
+      })
+
+      test("should listen to an input", function () {
+        var $select = $('<select />')
+          , combobox = $select.combobox().data('combobox')
+          , $input = combobox.$element
+        ok($._data($input[0], 'events').blur, 'has a blur event')
+        ok($._data($input[0], 'events').keypress, 'has a keypress event')
+        ok($._data($input[0], 'events').keyup, 'has a keyup event')
+        if (combobox.eventSupported('keydown')) {
+          ok($._data($input[0], 'events').keydown, 'has a keydown event')
+        } else {
+          ok($._data($input[0], 'events').keydown, 'does not have a keydown event')
+        }
+
+        combobox.$menu.remove()
+      })
+
+      test("should listen to an button", function () {
+        var $select = $('<select />')
+          , $button = $select.combobox().data('combobox').$button
+        ok($._data($button[0], 'events').click, 'has a click event')
+      })
+
+      test("should create a menu", function () {
+        var $select = $('<select />')
+        ok($select.combobox().data('combobox').$menu, 'has a menu')
+      })
+
+      test("should listen to the menu", function () {
+        var $select = $('<select />')
+          , $menu = $select.combobox().data('combobox').$menu
+
+        ok($._data($menu[0], 'events').mouseover, 'has a mouseover(pseudo: mouseenter)')
+        ok($._data($menu[0], 'events').click, 'has a click')
+      })
+
+      test("should show menu when query entered", function () {
+        var $select = $('<select><option></option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>').appendTo('body')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        $input.val('a')
+        combobox.lookup()
+
+        ok(combobox.$menu.is(":visible"), 'menu is visible')
+        equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
+        equal(combobox.$menu.find('.active').length, 1, 'one item is active')
+
+        combobox.$menu.remove()
+        $select.remove()
+        combobox.$container.remove()
+      })
+
+      test("should hide menu when query entered", function () {
+        stop()
+        var $select = $('<select><option></option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>').appendTo('body')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        $input.val('a')
+        combobox.lookup()
+
+        ok(combobox.$menu.is(":visible"), 'menu is visible')
+        equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
+        equal(combobox.$menu.find('.active').length, 1, 'one item is active')
+
+        $input.blur()
+
+        setTimeout(function () {
+          ok(!combobox.$menu.is(":visible"), "menu is no longer visible")
+          start()
+        }, 200)
+
+        combobox.$menu.remove()
+        $select.remove()
+        combobox.$container.remove()
+      })
+
+      test("should set next item when down arrow is pressed", function () {
+        var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        $input.val('a')
+        combobox.lookup()
+
+        ok(combobox.$menu.is(":visible"), 'menu is visible')
+        equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
+        equal(combobox.$menu.find('.active').length, 1, 'one item is active')
+        ok(combobox.$menu.find('li').first().hasClass('active'), "first item is active")
+
+        $input.trigger({
+          type: 'keypress'
+        , keyCode: 40
+        })
+
+        ok(combobox.$menu.find('li').first().next().hasClass('active'), "second item is active")
+
+
+        $input.trigger({
+          type: 'keypress'
+        , keyCode: 38
+        })
+
+        ok(combobox.$menu.find('li').first().hasClass('active'), "first item is active")
+
+        combobox.$menu.remove()
+        $select.remove()
+        combobox.$container.remove()
+      })
+
+
+      test("should set input and select value to selected item", function () {
+        var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
+          , combobox = $select.combobox().data('combobox')
+          , $input = combobox.$element
+          , $source = combobox.$source
+          , $target = combobox.$target
+          
+
+        $input.val('a')
+        combobox.lookup()
+
+        $(combobox.$menu.find('li')[2]).mouseover().click()
+
+        equal($input.val(), 'ac', 'input value was correctly set')
+        equal($source.val(), 'ac', 'select value was correctly set')
+        equal($target.val(), 'ac', 'hidden field value was correctly set')
+        ok(!combobox.$menu.is(':visible'), 'the menu was hidden')
+
+        combobox.$menu.remove()
+        $select.remove()
+        combobox.$container.remove()
+      })
+
+      test("should show menu when no item is selected and button is clicked", function () {
+        var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>').appendTo('body')
+          , $button = $select.combobox().data('combobox').$button
+          , combobox = $select.data('combobox')
+
+        $button.click()
+
+        ok(combobox.$menu.is(":visible"), 'menu is visible')
+        equal(combobox.$menu.find('li').length, 3, 'has 3 items in menu')
+        equal(combobox.$menu.find('.active').length, 1, 'one item is active')
+
+        combobox.$menu.remove()
+        $select.remove()
+        combobox.$container.remove()
+      })
+
+      test("should add class to container when an item is selected", function () {
+        var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        $input.val('a')
+        combobox.lookup()
+
+        $(combobox.$menu.find('li')[2]).mouseover().click()
+
+        ok(combobox.$container.hasClass('combobox-selected'), 'container has selected class')
+
+        combobox.$menu.remove()
+      })
+
+      test("should clear and focus input and select and remove class from container when button is clicked when item is selected", function () {
+        var $select = $('<select><option></option><option>aa</option><option>ab</option><option>ac</option></select>')
+          , combobox = $select.combobox().data('combobox')
+          , $input = combobox.$element
+          , $source = combobox.$source
+          , $target = combobox.$target
+
+        $input.val('a')
+        combobox.lookup()
+
+        $(combobox.$menu.find('li')[2]).mouseover().click()
+
+        equal($input.val(), 'ac', 'input value was correctly set')
+        equal($source.val(), 'ac', 'select value was correctly set')
+        equal($target.val(), 'ac', 'hidden field value was correctly set')
+
+        combobox.$button.mouseover().click()
+
+        equal($input.val(), '', 'input value was cleared correctly')
+        equal($select.val(), '', 'select value was cleared correctly')
+        // ok($input.is(":focus"), 'input has focus')
+
+        combobox.$menu.remove()
+      })
+
+      test("should set as selected if select was selected before load", function () {
+        var $select = $('<select><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.val(), 'ab', 'input value was correctly set')
+        equal($select.val(), 'ab', 'select value was correctly set')
+      })
+
+      test("should clear input on blur when value does not exist", function() {
+        var $select = $('<select><option>aa</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        $input.val('DOES NOT EXIST')
+        combobox.lookup()
+        $input.trigger('blur')
+
+        equal($input.val(), '', 'input value was correctly set')
+        equal($select.val(), 'aa', 'select value was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should set placeholder text on the input if specified text of no value option", function() {
+        var $select = $('<select><option value="">Pick One</option><option value="aa">aa</option><option value="ab">ab</option><option value="ac">ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('placeholder'), 'Pick One', 'input value was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should set placeholder text on the input if specified as an data attribute", function() {
+        var $select = $('<select data-placeholder="Type something..."><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('placeholder'), 'Type something...', 'input value was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should set required attribute the input if specified on the select", function() {
+        var $select = $('<select required="required"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('required'), 'required', 'required was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should copy classes to the input if specified on the select", function() {
+        var $select = $('<select class="input-small"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('class'), 'input-small', 'class was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should copy rel attribute to the input if specified on the select", function() {
+        var $select = $('<select rel="tooltip"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('rel'), 'tooltip', 'rel was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should copy title attribute to the input if specified on the select", function() {
+        var $select = $('<select title="A title"><option></option><option>aa</option><option selected>ab</option><option>ac</option></select>')
+          , $input = $select.combobox().data('combobox').$element
+          , combobox = $select.data('combobox')
+
+        equal($input.attr('title'), 'A title', 'title was correctly set')
+
+        combobox.$menu.remove()
+      })
+})