v1.0.0

Signed-off-by: Steve Piron <steve@basedigital.io>

Author: Steve Piron

README.md

@@ -1,2 +1,14 @@
-# resize-select
+# jQuery auto width select
 A jQuery plugin that resizes selects to to width of their selected option.
+
+## Settings
+Option | Type | Default | Description
+------ | ---- | ------- | -----------
+iconWidth | integer | 0 | The width of the icon (if any), or more likely the width of the padding over which the icon is applied as background image. Only useful if the `select` isn't set or doesn't inherit of `box-sizing: border-box`
+classes | string | false | The classes to be applied on the temporary element to inherit the same font properties as the select, space-separated.
+
+### Dependencies
+jQuery
+
+### License
+Copyright © Steve Piron

sp.auto-width-select.js

@@ -0,0 +1,74 @@
+/**!
+ * @author Steve Piron <https://twitter.com/stevepiron>
+ * @requires jQuery
+ *
+ * A jQuery plugin that resizes selects to to width of their selected option.
+ */
+(function( $ ) {
+
+    var defaults;
+    var params;
+
+    // ====================================================================== //
+    // Functions
+    // ====================================================================== //
+
+    /**
+     * 1. Create a dummy `span` element using the ame text as the selected
+     *    (current) option.
+     * 2. Append it to the body to get its width, then remove it.
+     * 3. Resize the original select.
+     */
+    function resizeIt( $select ) {
+        /* [1] */
+        var text = $select.find('option:selected').text();
+        var className = (params.classes) ? ' class="'+params.classes+'"' : '';
+        var $dummyOption = $('<span'+className+'>').html(text);
+
+        /* [2] */
+        $dummyOption.appendTo('body');
+        var width = $dummyOption.width();
+        $dummyOption.remove();
+
+        /* [3] */
+        $select.width(width + params.iconWidth);
+    }
+
+    // ====================================================================== //
+    // Plugin
+    // ====================================================================== //
+
+    $.fn.spAutoWidthSelect = function( options ) {
+
+        /**
+         * Note: using `return` keeps jQuery's chaining possibility
+         */
+        return this.each(function() {
+
+            var $this = $(this);
+
+            defaults = {
+                iconWidth: 0,
+                classes: false
+            };
+
+            params = $.extend( defaults, options );
+
+            // ============================================================== //
+            // On ready
+            // ============================================================== //
+
+            resizeIt( $this );
+
+            // ============================================================== //
+            // On change
+            // ============================================================== //
+
+            $this.on('change', function(){
+                resizeIt( $(this) );
+            });
+
+        });
+    };
+
+}( jQuery ));