Added onRefresh option, added inheritOriginalWidth option, changed from Grunt to gulp

Author: lcdsantos

.gitignore

@@ -1,5 +1,6 @@
 package.json
-Gruntfile.js
+gulpfile.js
 node_modules
 .npm-debug.log
-tmp
+tmp
+.sass-cache

Gruntfile.js

@@ -214,7 +214,7 @@ Initialize **jQuery Selectric:**
 ```html
 <script>
 $(function(){
-	$('select').selectric();
+  $('select').selectric();
 });
 </script>
 ```
@@ -246,6 +246,12 @@ $(function(){
     <td>Function</td>
     <td>Function called when select options close</td>
   </tr>
+  <tr>
+    <td>onRefresh</td>
+    <td>function() {}</td>
+    <td>Function</td>
+    <td>Function called when the Selectric is refreshed</td>
+  </tr>
   <tr>
     <td>maxHeight</td>
     <td>300</td>
@@ -315,6 +321,12 @@ $(function(){
     <td>Boolean</td>
     <td>Prevent scroll on window when using mouse wheel inside options box to match common browsers behavior.</td>
   </tr>
+  <tr>
+    <td>inheritOriginalWidth</td>
+    <td>false</td>
+    <td>Boolean</td>
+    <td>Inherit width from original element</td>
+  </tr>
 </table>
 
 ##Public methods:

README.md

@@ -1,7 +1,7 @@
 {
   "name": "jquery-selectric",
   "description": "Fast, simple and light jQuery plugin to customize HTML selects",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "keywords": [
     "select",
     "selectbox",

bower.json

@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric Ϟ v1.7.2 - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric Ϟ v1.7.3 (2014-08-25) - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2014 Leonardo Santos; Dual licensed: MIT/GPL
  *
@@ -24,6 +24,7 @@
       defaults = {
         onOpen: $.noop,
         onClose: $.noop,
+        onRefresh: $.noop,
         onChange: function(elm) { $(elm).change(); },
         maxHeight: 300,
         keySearchTimeout: 500,
@@ -33,6 +34,7 @@
         expandToItemText: false,
         responsive: false,
         preventWindowScroll: true,
+        inheritOriginalWidth: false,
         customClass: {
           prefix: pluginName,
           postfixes: classList,
@@ -102,7 +104,8 @@
 
           // Generate classNames for elements
           var customClass = _this.options.customClass,
-              postfixes = customClass.postfixes.split(' ');
+              postfixes = customClass.postfixes.split(' '),
+              originalWidth = $original.width();
 
           $.each(classList.split(' '), function(i, elm){
             var c = customClass.prefix + postfixes[i];
@@ -119,13 +122,17 @@
             open    : _open,
             close   : _close,
             destroy : _destroy,
-            refresh : _populate,
+            refresh : _refresh,
             init    : _init
           };
 
           $original.on(eventTriggers).wrap('<div class="' + _this.classes.hideselect + '">');
           $.extend(_this, eventTriggers);
 
+          if ( _this.options.inheritOriginalWidth && originalWidth > 0 ) {
+            $outerWrapper.width(originalWidth);
+          }
+
           isEnabled = true;
 
           _populate();
@@ -241,6 +248,11 @@
             $input.prop('disabled', true);
         }
 
+        function _refresh() {
+          _this.options.onRefresh(element);
+          _populate();
+        }
+
         // Behavior when system keys is pressed
         function _handleSystemKeys(e) {
           var key = e.keyCode || e.which;

dist/jquery.selectric.js

@@ -1,3 +1,6 @@
+/*======================================================================
+  Selectric
+======================================================================*/
 .selectricWrapper {
   position: relative;
   margin: 0 0 10px;
@@ -15,7 +18,6 @@
   position: relative;
   border-radius: 2px;
 }
-
 .selectric .label {
   display: block;
   white-space: nowrap;
@@ -27,7 +29,6 @@
   color: #444;
   min-height: 18px;
 }
-
 .selectric .button {
   display: block;
   position: absolute;
@@ -38,9 +39,9 @@
   color: #BBB;
   text-align: center;
   font: 0/0 a;
-  *font: 20px/30px Lucida Sans Unicode,Arial Unicode MS,Arial;
+  /* IE Fix */
+  *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
 }
-
 .selectric .button:after {
   content: " ";
   position: absolute;
@@ -59,25 +60,20 @@
 .selectricHover .selectric {
   border-color: #CCC;
 }
-
 .selectricHover .selectric .button {
   color: #888;
 }
-
 .selectricHover .selectric .button:after {
   border-top-color: #888;
 }
 
 .selectricOpen {
   z-index: 9999;
 }
-
 .selectricOpen .selectric {
   border-color: #CCC;
   background: #F0F0F0;
-  z-index: 9999;
 }
-
 .selectricOpen .selectricItems {
   display: block;
 }
@@ -87,7 +83,10 @@
   opacity: 0.5;
   cursor: default;
   -webkit-touch-callout: none;
-  user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .selectricHideSelect {
@@ -96,7 +95,6 @@
   width: 0;
   height: 0;
 }
-
 .selectricHideSelect select {
   position: absolute;
   left: -100%;
@@ -125,6 +123,7 @@
   display: block !important;
 }
 
+/* Items box */
 .selectricItems {
   display: none;
   position: absolute;
@@ -133,24 +132,21 @@
   left: 0;
   background: #F9F9F9;
   border: 1px solid #CCC;
-  z-index: 9998;
+  z-index: -1;
   box-shadow: 0 0 10px -6px;
 }
-
 .selectricAbove .selectricItems {
   top: auto;
   bottom: 100%;
 }
-
-.selectricItems ul,.selectricItems li {
+.selectricItems ul, .selectricItems li {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 12px;
   line-height: 20px;
   min-height: 20px;
 }
-
 .selectricItems li {
   display: block;
   padding: 5px;
@@ -159,21 +155,18 @@
   color: #666;
   cursor: pointer;
 }
-
 .selectricItems li.selected {
   background: #EFEFEF;
   color: #444;
   border-top-color: #E0E0E0;
 }
-
 .selectricItems li:hover {
   background: #F0F0F0;
   color: #444;
 }
-
 .selectricItems li.disabled {
   background: #F5F5F5;
   color: #BBB;
   border-top-color: #FAFAFA;
   cursor: default;
-}
+}