Merge pull request #202 from SassNinja/master

lcdsantos · web-flow · commit a53ed51e47ce · 2017-08-22T17:21:43.000-03:00
forceRenderBelow option
diff --git a/README.md b/README.md
@@ -256,6 +256,13 @@ $('select').selectric({
    */
   forceRenderAbove: false,
 
+  /*
+   * Type: Boolean
+   * Description: In some cases the options box gets opened above even though the desired behavior would be below.
+   *              If the auto dectection doesn't work as expected you may force opening below.
+   */
+  forceRenderBelow: false,
+
   /*
    * Type: Object
    * Description: Customize select "multiple" behavior
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "jquery-selectric",
   "description": "Fast, simple and light jQuery plugin to customize HTML selects",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "keywords": [
     "select",
     "selectbox",
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "public/jquery.selectric.js",
   "title": "jQuery Selectric",
   "author": {
diff --git a/public/demo.html b/public/demo.html
@@ -285,6 +285,22 @@ <h3>Force render above</h3>
       </div>
     </div>
 
+    <div class="demo">
+      <h3>Force render below</h3>
+
+      <div class="view">
+        <select id="forceRenderBelow">
+          <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({ forceRenderBelow: true });</code></pre>
+      </div>
+    </div>
+
     <div class="demo-spacer"></div>
   </div>
 
diff --git a/public/index.html b/public/index.html
@@ -343,6 +343,13 @@ <h2>Options</h2>
      */
     forceRenderAbove: false,
 
+    /*
+     * Type: Boolean
+     * Description: In some cases the options box gets opened above even though the desired behavior would be below.
+     *              If the auto dectection doesn't work as expected you may force opening below.
+     */
+    forceRenderBelow: false,
+
     /*
      * Type: Object
      * Description: Customize select "multiple" behavior
diff --git a/public/jquery.selectric.js b/public/jquery.selectric.js
@@ -9,7 +9,7 @@
  *    /,'
  *   /'
  *
- * Selectric ϟ v1.12.0 (Jul 03 2017) - http://lcdsantos.github.io/jQuery-Selectric/
+ * Selectric ϟ v1.13.0 (Aug 21 2017) - http://lcdsantos.github.io/jQuery-Selectric/
  *
  * Copyright (c) 2017 Leonardo Santos; MIT License
  *
@@ -44,7 +44,7 @@
   var $win = $(window);
 
   var pluginName = 'selectric';
-  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel';
+  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Below Scroll Group GroupLabel';
   var eventNamespaceSuffix = '.sl';
 
   var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
@@ -773,6 +773,8 @@
 
       if (_this.options.forceRenderAbove === true) {
         _this.elements.outerWrapper.addClass(_this.classes.above);
+      } else if (_this.options.forceRenderBelow === true) {
+        _this.elements.outerWrapper.addClass(_this.classes.below);
       } else {
         var scrollTop = $win.scrollTop();
         var winHeight = $win.height();
@@ -787,8 +789,10 @@
         // It's acceptable that the user needs to
         // scroll the viewport to see the cut off UI
         var renderAbove = !fitsDown && fitsAbove;
+        var renderBelow = !renderAbove;
 
         _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+        _this.elements.outerWrapper.toggleClass(_this.classes.below, renderBelow);
       }
     },
 
@@ -1081,6 +1085,7 @@
     inheritOriginalWidth : false,
     allowWrap            : true,
     forceRenderAbove     : false,
+    forceRenderBelow     : false,
     stopPropagation      : true,
     optionsItemBuilder   : '{text}', // function(itemData, element, index)
     labelBuilder         : '{text}', // function(currItem)
diff --git a/public/jquery.selectric.min.js b/public/jquery.selectric.min.js
diff --git a/public/lib/demo.js b/public/lib/demo.js
@@ -162,6 +162,8 @@
 
     $('#forceRenderAbove').selectric({ forceRenderAbove: true });
 
+    $('#forceRenderBelow').selectric({ forceRenderBelow: true });
+
     /*------------------------------------*/
 
     // Cache the target element
diff --git a/public/plugins/jquery.selectric.addNew.js b/public/plugins/jquery.selectric.addNew.js
@@ -1,4 +1,4 @@
-/*! Selectric AddNew ϟ v0.2.0 (2017-01-11) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License */
+/*! Selectric AddNew ϟ v0.2.0 (2017-08-21) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License */
 (function(factory) {
   /* global define */
   if ( typeof define === 'function' && define.amd ) {
diff --git a/public/plugins/jquery.selectric.addNew.min.js b/public/plugins/jquery.selectric.addNew.min.js
diff --git a/public/plugins/jquery.selectric.placeholder.js b/public/plugins/jquery.selectric.placeholder.js
@@ -1,4 +1,4 @@
-/*! Selectric Placeholder ϟ v0.2.0 (2017-01-11) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
+/*! Selectric Placeholder ϟ v0.2.0 (2017-08-21) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
 (function(factory) {
   /* global define */
   if ( typeof define === 'function' && define.amd ) {
diff --git a/public/plugins/jquery.selectric.placeholder.min.js b/public/plugins/jquery.selectric.placeholder.min.js
diff --git a/public/selectric.css b/public/selectric.css
@@ -1,5 +1,5 @@
 /*======================================
-  Selectric v1.12.0
+  Selectric v1.13.0
 ======================================*/
 
 .selectric-wrapper {
diff --git a/selectric.jquery.json b/selectric.jquery.json
@@ -1,6 +1,6 @@
 {
   "name": "selectric",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "title": "jQuery Selectric",
   "author": {
     "name": "Leonardo Santos",
diff --git a/src/jquery.selectric.js b/src/jquery.selectric.js
@@ -27,7 +27,7 @@
   var $win = $(window);
 
   var pluginName = 'selectric';
-  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel';
+  var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Below Scroll Group GroupLabel';
   var eventNamespaceSuffix = '.sl';
 
   var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
@@ -773,6 +773,8 @@
 
       if (_this.options.forceRenderAbove === true) {
         _this.elements.outerWrapper.addClass(_this.classes.above);
+      } else if (_this.options.forceRenderBelow === true) {
+        _this.elements.outerWrapper.addClass(_this.classes.below);
       } else {
         var scrollTop = $win.scrollTop();
         var winHeight = $win.height();
@@ -787,8 +789,10 @@
         // It's acceptable that the user needs to
         // scroll the viewport to see the cut off UI
         var renderAbove = !fitsDown && fitsAbove;
+        var renderBelow = !renderAbove;
 
         _this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
+        _this.elements.outerWrapper.toggleClass(_this.classes.below, renderBelow);
       }
     },
 
@@ -1081,6 +1085,7 @@
     inheritOriginalWidth : false,
     allowWrap            : true,
     forceRenderAbove     : false,
+    forceRenderBelow     : false,
     stopPropagation      : true,
     optionsItemBuilder   : '{text}', // function(itemData, element, index)
     labelBuilder         : '{text}', // function(currItem)
diff --git a/test/fixtures/options.html b/test/fixtures/options.html
@@ -5,4 +5,13 @@
     <option value="ipsum">ipsum</option>
     <option value="dolor">dolor</option>
   </select>
+</div>
+
+<div id="forceRenderBelow">
+  <label>forceRenderBelow</label>
+  <select>
+    <option value="lorem">lorem</option>
+    <option value="ipsum">ipsum</option>
+    <option value="dolor">dolor</option>
+  </select>
 </div>
diff --git a/test/options.spec.js b/test/options.spec.js
@@ -10,6 +10,7 @@ describe('options', function() {
     loadFixtures('options.html');
 
     $('#forceRenderAbove select').selectric({ forceRenderAbove: true });
+    $('#forceRenderBelow select').selectric({ forceRenderBelow: true });
   });
 
   it('should always have above class after initial open when using forceRenderAbove option', function() {
@@ -21,4 +22,13 @@ describe('options', function() {
     expect($('#forceRenderAbove').find('.selectric-wrapper').hasClass('selectric-above')).toBe(true);
   });
 
+  it('should always have below class after initial open when using forceRenderBelow option', function() {
+    // initial open
+    $('#forceRenderBelow').find('.selectric').trigger('click');
+    expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
+    // close afterwards
+    $('#forceRenderBelow').find('.selectric').trigger('click');
+    expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
+  });
+
 });

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jquery-selectric",`
`3`	`3`	`"description": "Fast, simple and light jQuery plugin to customize HTML selects",`
`4`		`- "version": "1.12.0",`
	`4`	`+ "version": "1.13.0",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"select",`
`7`	`7`	`"selectbox",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "selectric",`
`3`		`- "version": "1.12.0",`
	`3`	`+ "version": "1.13.0",`
`4`	`4`	`"main": "public/jquery.selectric.js",`
`5`	`5`	`"title": "jQuery Selectric",`
`6`	`6`	`"author": {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/! Selectric AddNew ϟ v0.2.0 (2017-01-11) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License /`
	`1`	`+/! Selectric AddNew ϟ v0.2.0 (2017-08-21) - git.io/tjl9sQ - Copyright (c) 2017 David Shen (git.io/mhQmLQ) - MIT License /`
`2`	`2`	`(function(factory) {`
`3`	`3`	`/* global define */`
`4`	`4`	`if ( typeof define === 'function' && define.amd ) {`