jquery-selectric-rails 1.9.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 550481339156e1e8f2043e57f5207e7be844abf8
+  data.tar.gz: c9d9451249cbbba393119388261b2a261f568aa0
+SHA512:
+  metadata.gz: 6874fdd45dc68f1eeb4c29afe4b4fadd9a40c0bcd4c0d3f985f75404766a8f9817c274c9424b7ea9314125143248f5297fe2918424e94ccaced2c814ad899aa8
+  data.tar.gz: dc9da3bb34206a0c48cbaec2cb3194b604cd27a723319ed4a9449b8a0f598a42ad12fa59c08c57a574bcc2afd6e6c829bf465ba9fd7223af06061f41ddb9fd9c

data/README.md

@@ -0,0 +1,48 @@
+# jQuery::Selectric::Rails
+
+This gem provides [jQuery Selectric](https://github.com/lcdsantos/jQuery-Selectric) plugin for your Rails application.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'jquery-selectric-rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jquery-selectric-rails
+
+## Usage
+
+### Include the Redactor assets
+
+Add to your `application.js`:
+
+      //= require jquery.selectric
+
+Add to your `application.css`:
+
+      *= require jquery.selectric
+
+
+Or if you are using SASS:
+
+      @import('jquery.selectric');
+
+### Initialize
+
+For each select that you want to apply jQuery Selectric, add the "selectric" class and ensure it has a unique ID:
+
+    <%= select_tag :my_select, options_for_select(['option1', 'option2']), class: "selectric" %>
+
+## 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/jquery/selectric/rails.rb

@@ -0,0 +1,11 @@
+require 'jquery/selectric/rails/version'
+
+module Jquery
+  module Selectric
+    module Rails
+      class Engine < ::Rails::Engine
+
+      end
+    end
+  end
+end

data/lib/jquery/selectric/rails/version.rb

@@ -0,0 +1,7 @@
+module Jquery
+  module Selectric
+    module Rails
+      VERSION = '1.9.3'
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.selectric.js

@@ -0,0 +1,5 @@
+//= require lib/jquery.selectric
+$(function() {
+  $('select.selectric').selectric();
+});
+

data/vendor/assets/javascripts/lib/jquery.selectric.js

@@ -0,0 +1,538 @@
+;(function($) {
+    'use strict';
+
+    var pluginName = 'selectric',
+        classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Hover Responsive Above Scroll Group GroupLabel',
+        bindSufix = '.sl',
+        defaults = {
+            onChange: function(elm) { $(elm).change(); },
+            maxHeight: 300,
+            keySearchTimeout: 500,
+            arrowButtonMarkup: '<b class="button">&#x25be;</b>',
+            disableOnMobile: true,
+            openOnHover: false,
+            hoverIntentTimeout: 500,
+            expandToItemText: false,
+            responsive: false,
+            preventWindowScroll: true,
+            inheritOriginalWidth: false,
+            allowWrap: true,
+            customClass: {
+                prefix: pluginName,
+                camelCase: false,
+                overwrite: true
+            },
+            optionsItemBuilder: '{text}', // function(itemData, element, index)
+            labelBuilder: '{text}' // function(currItem)
+        },
+        hooks = {
+            add: function(callbackName, hookName, fn) {
+                if ( !this[callbackName] )
+                    this[callbackName] = {};
+
+                this[callbackName][hookName] = fn;
+            },
+            remove: function(callbackName, hookName) {
+                delete this[callbackName][hookName];
+            }
+        },
+        _utils = {
+            // Replace diacritics
+            replaceDiacritics: function(s) {
+                // /[\340-\346]/g, // a
+                // /[\350-\353]/g, // e
+                // /[\354-\357]/g, // i
+                // /[\362-\370]/g, // o
+                // /[\371-\374]/g, // u
+                // /[\361]/g,      // n
+                // /[\347]/g,      // c
+                // /[\377]/g       // y
+                var d = '40-46 50-53 54-57 62-70 71-74 61 47 77'.replace(/\d+/g, '\\3$&').split(' '),
+                    k = d.length;
+
+                while (k--)
+                    s = s.toLowerCase().replace(RegExp('[' + d[k] + ']', 'g'), 'aeiouncy'.charAt(k));
+
+                return s;
+            },
+            // https://gist.github.com/atesgoral/984375
+            format: function(f) {var a=arguments;return(""+f).replace(/{(\d+|(\w+))}/g,function(s,i,p) {return p&&a[1]?a[1][p]:a[i]})},
+            nextEnabledItem: function(selectItems, selected) {
+                while ( selectItems[ selected = (selected + 1) % selectItems.length ].disabled ) {}
+                return selected;
+            },
+            previousEnabledItem: function(selectItems, selected) {
+                while ( selectItems[ selected = (selected > 0 ? selected : selectItems.length) - 1 ].disabled ) {}
+                return selected;
+            },
+            toDash: function(str) {
+                return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+            },
+            triggerCallback: function(fn, scope) {
+                var elm = scope.element,
+                    func = scope.options['on' + fn];
+
+                if ( $.isFunction(func) )
+                    func.call(elm, elm, scope);
+
+                if ( hooks[fn] ) {
+                    $.each(hooks[fn], function() {
+                        this.call(elm, elm, scope);
+                    });
+                }
+
+                $(elm).trigger(pluginName + '-' + _utils.toDash(fn), scope);
+            }
+        },
+        $doc = $(document),
+        $win = $(window),
+        Selectric = function(element, opts) {
+            var _this = this,
+                $original = $(element),
+                $input, $items, $itemsScroll, $wrapper, $label, $outerWrapper, $li,
+                isOpen = false,
+                isEnabled = false,
+                selected,
+                currValue,
+                itemsHeight,
+                itemsInnerHeight,
+                finalWidth,
+                optionsLength,
+                eventTriggers,
+                isMobile = /android|ip(hone|od|ad)/i.test(navigator.userAgent),
+                tabindex = $original.prop('tabindex'),
+                labelBuilder;
+
+            function _init(opts) {
+                _this.options = $.extend(true, {}, defaults, _this.options, opts);
+                _this.classes = {};
+                _this.element = element;
+
+                _utils.triggerCallback('BeforeInit', _this);
+
+                // Disable on mobile browsers
+                if ( _this.options.disableOnMobile && isMobile ) {
+                    _this.disableOnMobile = true;
+                    return;
+                }
+
+                // Preserve data
+                _destroy(true);
+
+                // Generate classNames for elements
+                var customClass   = _this.options.customClass,
+                    postfixes     = classList.split(' '),
+                    originalWidth = $original.width();
+
+                $.each(postfixes, function(i, currClass) {
+                    var c = customClass.prefix + '-' + currClass;
+                    _this.classes[currClass.toLowerCase()] = customClass.camelCase ? c : _utils.toDash(c);
+                });
+
+                $input        = $('<input/>', { 'class': _this.classes.input, 'readonly': isMobile });
+                $items        = $('<div/>',   { 'class': _this.classes.items, 'tabindex': -1 });
+                $itemsScroll  = $('<div/>',   { 'class': _this.classes.scroll });
+                $wrapper      = $('<div/>',   { 'class': customClass.prefix, 'html': _this.options.arrowButtonMarkup });
+                $label        = $('<p class="label"/>');
+                $outerWrapper = $original.wrap('<div>').parent().append($wrapper.prepend($label), $items, $input);
+
+                eventTriggers = {
+                    open    : _open,
+                    close   : _close,
+                    destroy : _destroy,
+                    refresh : _refresh,
+                    init    : _init
+                };
+
+                $original.on(eventTriggers).wrap('<div class="' + _this.classes.hideselect + '">');
+                $.extend(_this, eventTriggers);
+
+                labelBuilder = _this.options.labelBuilder;
+
+                if ( _this.options.inheritOriginalWidth && originalWidth > 0 )
+                    $outerWrapper.width(originalWidth);
+
+                _populate();
+            }
+
+            // Generate options markup and event binds
+            function _populate() {
+                _this.items = [];
+
+                var $options = $original.children(),
+                    _$li = '<ul>',
+                    $justOptions = $original.find('option'),
+                    selectedIndex = $justOptions.index($justOptions.filter(':selected')),
+                    currIndex = 0;
+
+                currValue = (selected = ~selectedIndex ? selectedIndex : 0);
+
+                if ( optionsLength = $options.length ) {
+                    // Build options markup
+                    $options.each(function() {
+                        var $elm = $(this);
+
+                        if ( $elm.is('optgroup') ) {
+                            var groupDisabled = $elm.prop('disabled'),
+                                $children = $elm.children();
+
+                            _$li += _utils.format('<ul class="{1}"><li class="{2}">{3}</li>',
+                                $.trim([_this.classes.group, groupDisabled ? 'disabled' : '', $elm.prop('class')].join(' ')),
+                                _this.classes.grouplabel,
+                                $elm.prop('label')
+                            );
+
+                            if ( groupDisabled ) {
+                                $children.prop('disabled', true);
+                            }
+
+                            $children.each(buildOption);
+
+                            _$li += '</ul>';
+                        } else {
+                            buildOption.call($elm);
+                        }
+
+                        function buildOption() {
+                            var $elm = $(this),
+                                optionText = $elm.html(),
+                                selectDisabled = $elm.prop('disabled'),
+                                itemBuilder = _this.options.optionsItemBuilder;
+
+                            _this.items[currIndex] = {
+                                element  : $elm,
+                                value    : $elm.val(),
+                                text     : optionText,
+                                slug     : _utils.replaceDiacritics(optionText),
+                                disabled : selectDisabled
+                            };
+
+                            _$li += _utils.format('<li data-index="{1}" class="{2}">{3}</li>',
+                                currIndex,
+                                $.trim([currIndex == currValue ? 'selected' : '', currIndex == optionsLength - 1 ? 'last' : '', selectDisabled ? 'disabled' : ''].join(' ')),
+                                $.isFunction(itemBuilder) ? itemBuilder(_this.items[currIndex], $elm, currIndex) : _utils.format(itemBuilder, _this.items[currIndex])
+                            );
+
+                            currIndex++;
+                        }
+                    });
+
+                    $items.append( $itemsScroll.html(_$li + '</ul>') );
+
+                    $label.html(
+                        $.isFunction(labelBuilder) ? labelBuilder(_this.items[currValue]) : _utils.format(labelBuilder, _this.items[currValue])
+                    )
+                }
+
+                $wrapper.add($original).add($outerWrapper).add($input).off(bindSufix);
+
+                $outerWrapper.prop('class', [
+                    _this.classes.wrapper,
+                    _this.options.customClass.overwrite ?
+                        $original.prop('class').replace(/\S+/g, _this.options.customClass.prefix + '-$&') :
+                        $original.prop('class'),
+                    _this.options.responsive ? _this.classes.responsive : ''
+                ].join(' '));
+
+                if ( !$original.prop('disabled') ) {
+                    isEnabled = true;
+
+                    // Not disabled, so... Removing disabled class and bind hover
+                    $outerWrapper.removeClass(_this.classes.disabled).on('mouseenter' + bindSufix + ' mouseleave' + bindSufix, function(e) {
+                        $(this).toggleClass(_this.classes.hover);
+
+                        // Delay close effect when openOnHover is true
+                        if ( _this.options.openOnHover ) {
+                            clearTimeout(_this.closeTimer);
+                            e.type == 'mouseleave' ? _this.closeTimer = setTimeout(_close, _this.options.hoverIntentTimeout) : _open();
+                        }
+                    });
+
+                    // Toggle open/close
+                    $wrapper.on('click' + bindSufix, function(e) {
+                        isOpen ? _close() : _open(e);
+                    });
+
+                    $input
+                        .prop({
+                            tabindex: tabindex,
+                            disabled: false
+                        })
+                        .on('keypress' + bindSufix, _handleSystemKeys)
+                        .on('keydown' + bindSufix, function(e) {
+                            _handleSystemKeys(e);
+
+                            // Clear search
+                            clearTimeout(_this.resetStr);
+                            _this.resetStr = setTimeout(function() {
+                                $input.val('');
+                            }, _this.options.keySearchTimeout);
+
+                            var key = e.keyCode || e.which;
+
+                            // If it's a directional key
+                            // 37 => Left
+                            // 38 => Up
+                            // 39 => Right
+                            // 40 => Down
+                            if ( key > 36 && key < 41 ) {
+                                if ( !_this.options.allowWrap ) {
+                                    if ( (key < 39 && selected == 0) || (key > 38 && (selected + 1) == _this.items.length) ) {
+                                        return;
+                                    }
+                                }
+
+                                _select(_utils[(key < 39 ? 'previous' : 'next') + 'EnabledItem'](_this.items, selected));
+                            }
+                        })
+                        .on('focusin' + bindSufix, function(e) {
+                            // Stupid, but necessary... Prevent the flicker when
+                            // focusing out and back again in the browser window
+                            $input.one('blur', function() {
+                                $input.blur();
+                            });
+
+                            isOpen || _open(e);
+                        })
+                        .on('oninput' in $input[0] ? 'input' : 'keyup', function() {
+                            if ( $input.val().length ) {
+                                // Search in select options
+                                $.each(_this.items, function(i, elm) {
+                                    if ( RegExp('^' + $input.val(), 'i').test(elm.slug) && !elm.disabled ) {
+                                        _select(i);
+                                        return false;
+                                    }
+                                });
+                            }
+                        });
+
+                    $original.prop('tabindex', false);
+
+                    // Remove styles from items box
+                    // Fix incorrect height when refreshed is triggered with fewer options
+                    $li = $('li', $items.removeAttr('style')).on({
+                        // Prevent <input> blur on Chrome
+                        mousedown: function(e) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        },
+                        click: function() {
+                            // The second parameter is to close the box after click
+                            _select($(this).data('index'), true);
+
+                            // Chrome doesn't close options box if select is wrapped with a label
+                            // We need to 'return false' to avoid that
+                            return false;
+                        }
+                    }).filter('[data-index]');
+                } else {
+                    $outerWrapper.addClass(_this.classes.disabled);
+                    $input.prop('disabled', true);
+                }
+
+                _utils.triggerCallback('Init', _this);
+            }
+
+            function _refresh() {
+                _utils.triggerCallback('Refresh', _this);
+                _populate();
+            }
+
+            // Behavior when system keys is pressed
+            function _handleSystemKeys(e) {
+                var key = e.keyCode || e.which;
+
+                if ( key == 13 ) {
+                    e.preventDefault();
+                }
+
+                // Tab / Enter / ESC
+                if ( /^(9|13|27)$/.test(key) ) {
+                    e.stopPropagation();
+                    _select(selected, true);
+                }
+            }
+
+            // Set options box width/height
+            function _calculateOptionsDimensions() {
+                // Calculate options box height
+                // Set a temporary class on the hidden parent of the element
+                var hiddenChildren = $items.closest(':visible').children(':hidden').addClass(_this.classes.tempshow),
+                    maxHeight = _this.options.maxHeight,
+                    itemsWidth = $items.outerWidth(),
+                    wrapperWidth = $wrapper.outerWidth() - (itemsWidth - $items.width());
+
+                // Set the dimensions, minimum is wrapper width, expand for long items if option is true
+                if ( !_this.options.expandToItemText || wrapperWidth > itemsWidth )
+                    finalWidth = wrapperWidth;
+                else {
+                    // Make sure the scrollbar width is included
+                    $items.css('overflow', 'scroll');
+
+                    // Set a really long width for $outerWrapper
+                    $outerWrapper.width(9e4);
+                    finalWidth = $items.width();
+                    // Set scroll bar to auto
+                    $items.css('overflow', '');
+                    $outerWrapper.width('');
+                }
+
+                $items.width(finalWidth).height() > maxHeight && $items.height(maxHeight);
+
+                // Remove the temporary class
+                hiddenChildren.removeClass(_this.classes.tempshow);
+            }
+
+            // Open the select options box
+            function _open(e) {
+                _utils.triggerCallback('BeforeOpen', _this);
+
+                if ( e ) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                if ( isEnabled ) {
+                    _calculateOptionsDimensions();
+
+                    // Find any other opened instances of select and close it
+                    $('.' + _this.classes.hideselect, '.' + _this.classes.open).children()[pluginName]('close');
+
+                    isOpen = true;
+                    itemsHeight = $items.outerHeight();
+                    itemsInnerHeight = $items.height();
+
+                    // Toggle options box visibility
+                    $outerWrapper.addClass(_this.classes.open);
+
+                    // Give dummy input focus
+                    $input.val('').is(':focus') || $input.focus();
+
+                    $doc.on('click' + bindSufix, _close).on('scroll' + bindSufix, _isInViewport);
+                    _isInViewport();
+
+                    // Prevent window scroll when using mouse wheel inside items box
+                    if ( _this.options.preventWindowScroll ) {
+                        $doc.on('mousewheel' + bindSufix + ' DOMMouseScroll' + bindSufix, '.' + _this.classes.scroll, function(e) {
+                            var orgEvent = e.originalEvent,
+                                scrollTop = $(this).scrollTop(),
+                                deltaY = 0;
+
+                            if ( 'detail'      in orgEvent ) { deltaY = orgEvent.detail * -1; }
+                            if ( 'wheelDelta'  in orgEvent ) { deltaY = orgEvent.wheelDelta;  }
+                            if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
+                            if ( 'deltaY'      in orgEvent ) { deltaY = orgEvent.deltaY * -1; }
+
+                            if ( scrollTop == (this.scrollHeight - itemsInnerHeight) && deltaY < 0 || scrollTop == 0 && deltaY > 0 ) {
+                                e.preventDefault();
+                            }
+                        });
+                    }
+
+                    _detectItemVisibility(selected);
+
+                    _utils.triggerCallback('Open', _this);
+                }
+            }
+
+            // Detect is the options box is inside the window
+            function _isInViewport() {
+                $outerWrapper.toggleClass(_this.classes.above, $outerWrapper.offset().top + $outerWrapper.outerHeight() + itemsHeight > $win.scrollTop() + $win.height());
+            }
+
+            // Close the select options box
+            function _close() {
+                _utils.triggerCallback('BeforeClose', _this);
+
+                if ( currValue != selected ) {
+                    _utils.triggerCallback('BeforeChange', _this);
+
+                    var text = _this.items[selected].text;
+
+                    // Apply changed value to original select
+                    $original
+                        .prop('selectedIndex', currValue = selected)
+                        .data('value', text);
+
+                    // Change label text
+                    $label.html(
+                        $.isFunction(labelBuilder) ? labelBuilder(_this.items[selected]) : _utils.format(labelBuilder, _this.items[selected])
+                    )
+
+                    _utils.triggerCallback('Change', _this);
+                }
+
+                // Remove custom events on document
+                $doc.off(bindSufix);
+
+                // Remove visible class to hide options box
+                $outerWrapper.removeClass(_this.classes.open);
+
+                isOpen = false;
+
+                _utils.triggerCallback('Close', _this);
+            }
+
+            // Select option
+            function _select(index, close) {
+                // Parameter index is required
+                if ( index == undefined ) {
+                    return;
+                }
+
+                // If element is disabled, can't select it
+                if ( !_this.items[index].disabled ) {
+                    // If 'close' is false (default), the options box won't close after
+                    // each selected item, this is necessary for keyboard navigation
+                    $li
+                        .removeClass('selected')
+                        .eq(selected = index)
+                        .addClass('selected');
+
+                    _detectItemVisibility(index);
+                    close && _close();
+                }
+            }
+
+            // Detect if currently selected option is visible and scroll the options box to show it
+            function _detectItemVisibility(index) {
+                var liHeight = $li.eq(index).outerHeight(),
+                    liTop = $li[index].offsetTop,
+                    itemsScrollTop = $itemsScroll.scrollTop(),
+                    scrollT = liTop + liHeight * 2;
+
+                $itemsScroll.scrollTop(
+                    scrollT > itemsScrollTop + itemsHeight ? scrollT - itemsHeight :
+                        liTop - liHeight < itemsScrollTop ? liTop - liHeight :
+                            itemsScrollTop
+                );
+            }
+
+            // Unbind and remove
+            function _destroy(preserveData) {
+                if ( isEnabled ) {
+                    $items.add($wrapper).add($input).remove();
+                    !preserveData && $original.removeData(pluginName).removeData('value');
+                    $original.prop('tabindex', tabindex).off(bindSufix).off(eventTriggers).unwrap().unwrap();
+                    isEnabled = false;
+                }
+            }
+
+            _init(opts);
+        };
+
+    // A really lightweight plugin wrapper around the constructor,
+    // preventing against multiple instantiations
+    $.fn[pluginName] = function(args) {
+        return this.each(function() {
+            var data = $.data(this, pluginName);
+
+            if ( data && !data.disableOnMobile )
+                (''+args === args && data[args]) ? data[args]() : data.init(args);
+            else
+                $.data(this, pluginName, new Selectric(this, args));
+        });
+    };
+
+    $.fn[pluginName].hooks = hooks;
+}(jQuery));

data/vendor/assets/stylesheets/jquery.selectric.css

@@ -0,0 +1,191 @@
+/*======================================
+  Selectric v1.9.3
+======================================*/
+.selectric-wrapper {
+    position: relative;
+    cursor: pointer;
+}
+
+.selectric-responsive {
+    width: 100%;
+}
+
+.selectric {
+    border: 1px solid #DDD;
+    background: #F8F8F8;
+    position: relative;
+}
+.selectric .label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 38px 0 10px;
+    font-size: 12px;
+    line-height: 38px;
+    color: #444;
+    height: 38px;
+}
+.selectric .button {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 38px;
+    height: 38px;
+    color: #BBB;
+    text-align: center;
+    font: 0/0 a;
+    *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial;
+}
+.selectric .button:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+    border-top-color: #BBB;
+    border-bottom: none;
+}
+
+.selectric-hover .selectric {
+    border-color: #C4C4C4;
+}
+.selectric-hover .selectric .button {
+    color: #A2A2A2;
+}
+.selectric-hover .selectric .button:after {
+    border-top-color: #A2A2A2;
+}
+
+.selectric-open {
+    z-index: 9999;
+}
+.selectric-open .selectric {
+    border-color: #C4C4C4;
+}
+.selectric-open .selectric-items {
+    display: block;
+}
+
+.selectric-disabled {
+    filter: alpha(opacity=50);
+    opacity: 0.5;
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.selectric-hide-select {
+    position: relative;
+    overflow: hidden;
+    width: 0;
+    height: 0;
+}
+.selectric-hide-select select {
+    position: absolute;
+    left: -100%;
+    display: none;
+}
+
+.selectric-input {
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    outline: none !important;
+    border: none !important;
+    *font: 0/0 a !important;
+    background: none !important;
+}
+
+.selectric-temp-show {
+    position: absolute !important;
+    visibility: hidden !important;
+    display: block !important;
+}
+
+/* Items box */
+.selectric-items {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: #F8F8F8;
+    border: 1px solid #C4C4C4;
+    z-index: -1;
+    box-shadow: 0 0 10px -6px;
+}
+.selectric-items .selectric-scroll {
+    height: 100%;
+    overflow: auto;
+}
+.selectric-above .selectric-items {
+    top: auto;
+    bottom: 100%;
+}
+.selectric-items ul, .selectric-items li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    line-height: 20px;
+    min-height: 20px;
+}
+.selectric-items li {
+    display: block;
+    padding: 8px;
+    border-top: 1px solid #FFF;
+    border-bottom: 1px solid #EEE;
+    color: #666;
+    cursor: pointer;
+}
+.selectric-items li.selected {
+    background: #EFEFEF;
+    color: #444;
+}
+.selectric-items li:hover {
+    background: #F0F0F0;
+    color: #444;
+}
+.selectric-items .disabled {
+    filter: alpha(opacity=50);
+    opacity: 0.5;
+    cursor: default !important;
+    background: none !important;
+    color: #666 !important;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.selectric-items .selectric-group .selectric-group-label {
+    font-weight: bold;
+    padding-left: 10px;
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background: none;
+    color: #444;
+}
+.selectric-items .selectric-group.disabled li {
+    filter: alpha(opacity=100);
+    opacity: 1;
+}
+.selectric-items .selectric-group li {
+    padding-left: 25px;
+}

data/vendor/assets/stylesheets/jquery.selectric.css.scss

@@ -0,0 +1,208 @@
+$main-color: #DDD;
+$secondary-color: #BBB;
+$bg-color: #F8F8F8;
+$text-color: #444;
+$height: 40px;
+$spacing: 10px;
+$border-width: 1px;
+$inner-height: $height - ($border-width * 2);
+
+.selectric-wrapper {
+  position: relative;
+  cursor: pointer;
+}
+
+.selectric-responsive {
+  width: 100%;
+}
+
+.selectric {
+  border: $border-width solid $main-color;
+  background: $bg-color;
+  position: relative;
+
+  .label {
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin: 0 $inner-height 0 $spacing;
+	font-size: 12px;
+	line-height: $inner-height;
+	color: $text-color;
+	height: $inner-height;
+  }
+
+  .button {
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: $inner-height;
+	height: $inner-height;
+	color: $secondary-color;
+	text-align: center;
+	font: 0/0 a;
+	*font: 20px/#{$inner-height} Lucida Sans Unicode, Arial Unicode MS, Arial;
+
+	&:after {
+	  content: " ";
+	  position: absolute;
+	  top: 0;
+	  right: 0;
+	  bottom: 0;
+	  left: 0;
+	  margin: auto;
+	  width: 0;
+	  height: 0;
+	  border: 4px solid transparent;
+	  border-top-color: $secondary-color;
+	  border-bottom: none;
+	}
+  }
+}
+
+.selectric-hover .selectric {
+  border-color: darken($main-color, 10%);
+
+  .button {
+	color: darken($secondary-color, 10%);
+
+	&:after {
+	  border-top-color: darken($secondary-color, 10%);
+	}
+  }
+}
+
+.selectric-open {
+  z-index: 9999;
+
+  .selectric {
+	border-color: darken($main-color, 10%);
+  }
+
+  .selectric-items {
+	display: block;
+  }
+}
+
+.selectric-disabled {
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  cursor: default;
+  user-select: none;
+}
+
+.selectric-hide-select {
+  position: relative;
+  overflow: hidden;
+  width: 0;
+  height: 0;
+
+  select {
+	position: absolute;
+	left: -100%;
+	display: none;
+  }
+}
+
+.selectric-input {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  outline: none !important;
+  border: none !important;
+  *font: 0/0 a !important;
+  background: none !important;
+}
+
+.selectric-temp-show {
+  position: absolute !important;
+  visibility: hidden !important;
+  display: block !important;
+}
+
+/* Items box */
+.selectric-items {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: $bg-color;
+  border: 1px solid darken($main-color, 10%);
+  z-index: -1;
+  box-shadow: 0 0 10px -6px;
+
+  .selectric-scroll {
+	height: 100%;
+	overflow: auto;
+  }
+
+  .selectric-above & {
+	top: auto;
+	bottom: 100%;
+  }
+
+  ul, li {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	font-size: 12px;
+	line-height: 20px;
+	min-height: 20px;
+  }
+
+  li {
+	display: block;
+	padding: 8px;
+	border-top: 1px solid #FFF;
+	border-bottom: 1px solid #EEE;
+	color: #666;
+	cursor: pointer;
+
+	&.selected {
+	  background: #EFEFEF;
+	  color: #444;
+	}
+
+	&:hover {
+	  background: #F0F0F0;
+	  color: #444;
+	}
+  }
+
+  .disabled {
+	filter: alpha(opacity=50);
+	opacity: 0.5;
+	cursor: default !important;
+	background: none !important;
+	color: #666 !important;
+	user-select: none;
+  }
+
+  .selectric-group {
+	.selectric-group-label {
+	  font-weight: bold;
+	  padding-left: 10px;
+	  cursor: default;
+	  user-select: none;
+	  background: none;
+	  color: #444;
+	}
+
+	&.disabled li {
+	  filter: alpha(opacity=100);
+	  opacity: 1;
+	}
+
+	li {
+	  padding-left: 25px;
+	}
+  }
+}

metadata

@@ -0,0 +1,111 @@
+--- !ruby/object:Gem::Specification
+name: jquery-selectric-rails
+version: !ruby/object:Gem::Version
+  version: 1.9.3
+platform: ruby
+authors:
+- Michael Johann
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-09-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.4'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '10.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.4'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '10.4'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+description: This gem contains the jquery selectric plugin for Rails applications
+email:
+- mjohann@rails-experts.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/jquery/selectric/rails.rb
+- lib/jquery/selectric/rails/version.rb
+- vendor/assets/javascripts/jquery.selectric.js
+- vendor/assets/javascripts/lib/jquery.selectric.js
+- vendor/assets/stylesheets/jquery.selectric.css
+- vendor/assets/stylesheets/jquery.selectric.css.scss
+homepage: https://github.com/malagant/jquery-selectric-rails
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: jQuery Selectric integrated into the asset pipeline
+test_files: []