Merge pull request #190 from SassNinja/master

forceRenderAbove option

Author: lcdsantos

README.md

@@ -248,6 +248,14 @@ $('select').selectric({
    */
   allowWrap: true,
 
+  /*
+   * Type: Boolean
+   * Description: By default the options box gets opened above if it's outside the window.
+   *              In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
+   *              you may force opening above.
+   */
+  forceRenderAbove: false,
+
   /*
    * Type: Object
    * Description: Customize select "multiple" behavior

bower.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "main": "public/jquery.selectric.js",
   "title": "jQuery Selectric",
   "author": {

public/demo.html

@@ -269,6 +269,22 @@ <h3>Custom markup for items box</h3>
       </div>
     </div>
 
+    <div class="demo">
+      <h3>Force render above</h3>
+
+      <div class="view">
+        <select id="forceRenderAbove">
+          <option value="lorem">lorem</option>
+          <option value="ipsum">ipsum</option>
+          <option value="dolor">dolor</option>
+        </select>
+      </div>
+
+      <div class="code">
+        <pre><code class="language-javascript">$('select').selectric({ forceRenderAbove: true });</code></pre>
+      </div>
+    </div>
+
     <div class="demo-spacer"></div>
   </div>
 

public/index.html

@@ -335,6 +335,14 @@ <h2>Options</h2>
      */
     allowWrap: true,
 
+    /*
+     * Type: Boolean
+     * Description: By default the options box gets opened above if it's outside the window.
+     *              In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
+     *              you may force opening above.
+     */
+    forceRenderAbove: false,
+
     /*
      * Type: Object
      * Description: Customize select "multiple" behavior

public/jquery.selectric.js

@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric ϟ v1.11.1 (Jan 10 2017) - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric ϟ v1.12.0 (Jul 03 2017) - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2017 Leonardo Santos; MIT License
  *
@@ -187,7 +187,7 @@
        * @return {string}       The string transformed to dash-case.
        */
       toDash: function(str) {
-        return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
       },
 
       /**
@@ -565,7 +565,7 @@
           itemData.selected                 ? 'selected' : ''
         ]),
         $.isFunction(itemBuilder)
-          ? _this.utils.format(itemBuilder(itemData), itemData)
+          ? _this.utils.format(itemBuilder(itemData, this.$element, index), itemData)
           : _this.utils.format(itemBuilder, filteredItemData)
       );
     },
@@ -770,21 +770,26 @@
     /** Detect if the options box is inside the window */
     isInViewport: function() {
       var _this = this;
-      var scrollTop = $win.scrollTop();
-      var winHeight = $win.height();
-      var uiPosX = _this.elements.outerWrapper.offset().top;
-      var uiHeight = _this.elements.outerWrapper.outerHeight();
 
-      var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
-      var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
+      if (_this.options.forceRenderAbove === true) {
+        _this.elements.outerWrapper.addClass(_this.classes.above);
+      } else {
+        var scrollTop = $win.scrollTop();
+        var winHeight = $win.height();
+        var uiPosX = _this.elements.outerWrapper.offset().top;
+        var uiHeight = _this.elements.outerWrapper.outerHeight();
+
+        var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
+        var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
 
-      // If it does not fit below, only render it
-      // above it fit's there.
-      // It's acceptable that the user needs to
-      // scroll the viewport to see the cut off UI
-      var renderAbove = !fitsDown && fitsAbove;
+        // If it does not fit below, only render it
+        // above it fit's there.
+        // It's acceptable that the user needs to
+        // scroll the viewport to see the cut off UI
+        var renderAbove = !fitsDown && fitsAbove;
 
-      _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+        _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+      }
     },
 
     /**
@@ -1075,6 +1080,7 @@
     preventWindowScroll  : true,
     inheritOriginalWidth : false,
     allowWrap            : true,
+    forceRenderAbove     : false,
     stopPropagation      : true,
     optionsItemBuilder   : '{text}', // function(itemData, element, index)
     labelBuilder         : '{text}', // function(currItem)

public/jquery.selectric.min.js

@@ -160,6 +160,8 @@
 
     $('#basic').selectric();
 
+    $('#forceRenderAbove').selectric({ forceRenderAbove: true });
+
     /*------------------------------------*/
 
     // Cache the target element

public/lib/demo.js

@@ -1,5 +1,5 @@
 /*======================================
-  Selectric v1.11.1
+  Selectric v1.12.0
 ======================================*/
 
 .selectric-wrapper {

public/selectric.css

@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "title": "jQuery Selectric",
   "author": {
     "name": "Leonardo Santos",