Skip to content

Commit a53ed51

Browse files
lcdsantoslcdsantos
authored
Merge pull request #202 from SassNinja/master
forceRenderBelow option
2 parents 5e35860 + e0db9eb commit a53ed51

17 files changed

+74
-13
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,13 @@ $('select').selectric({
256256
*/
257257
forceRenderAbove: false,
258258

259+
/*
260+
* Type: Boolean
261+
* Description: In some cases the options box gets opened above even though the desired behavior would be below.
262+
* If the auto dectection doesn't work as expected you may force opening below.
263+
*/
264+
forceRenderBelow: false,
265+
259266
/*
260267
* Type: Object
261268
* Description: Customize select "multiple" behavior

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "jquery-selectric",
33
"description": "Fast, simple and light jQuery plugin to customize HTML selects",
4-
"version": "1.12.0",
4+
"version": "1.13.0",
55
"keywords": [
66
"select",
77
"selectbox",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "selectric",
3-
"version": "1.12.0",
3+
"version": "1.13.0",
44
"main": "public/jquery.selectric.js",
55
"title": "jQuery Selectric",
66
"author": {

‎public/demo.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,6 +285,22 @@ <h3>Force render above</h3>
285285
</div>
286286
</div>
287287

288+
<div class="demo">
289+
<h3>Force render below</h3>
290+
291+
<div class="view">
292+
<select id="forceRenderBelow">
293+
<option value="lorem">lorem</option>
294+
<option value="ipsum">ipsum</option>
295+
<option value="dolor">dolor</option>
296+
</select>
297+
</div>
298+
299+
<div class="code">
300+
<pre><code class="language-javascript">$('select').selectric({ forceRenderBelow: true });</code></pre>
301+
</div>
302+
</div>
303+
288304
<div class="demo-spacer"></div>
289305
</div>
290306

‎public/index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,13 @@ <h2>Options</h2>
343343
*/
344344
forceRenderAbove: false,
345345

346+
/*
347+
* Type: Boolean
348+
* Description: In some cases the options box gets opened above even though the desired behavior would be below.
349+
* If the auto dectection doesn't work as expected you may force opening below.
350+
*/
351+
forceRenderBelow: false,
352+
346353
/*
347354
* Type: Object
348355
* Description: Customize select "multiple" behavior

‎public/jquery.selectric.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* /,'
1010
* /'
1111
*
12-
* Selectric ϟ v1.12.0 (Jul 03 2017) - http://lcdsantos.github.io/jQuery-Selectric/
12+
* Selectric ϟ v1.13.0 (Aug 21 2017) - http://lcdsantos.github.io/jQuery-Selectric/
1313
*
1414
* Copyright (c) 2017 Leonardo Santos; MIT License
1515
*
@@ -44,7 +44,7 @@
4444
var $win = $(window);
4545

4646
var pluginName = 'selectric';
47-
var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel';
47+
var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Below Scroll Group GroupLabel';
4848
var eventNamespaceSuffix = '.sl';
4949

5050
var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
@@ -773,6 +773,8 @@
773773

774774
if (_this.options.forceRenderAbove === true) {
775775
_this.elements.outerWrapper.addClass(_this.classes.above);
776+
} else if (_this.options.forceRenderBelow === true) {
777+
_this.elements.outerWrapper.addClass(_this.classes.below);
776778
} else {
777779
var scrollTop = $win.scrollTop();
778780
var winHeight = $win.height();
@@ -787,8 +789,10 @@
787789
// It's acceptable that the user needs to
788790
// scroll the viewport to see the cut off UI
789791
var renderAbove = !fitsDown && fitsAbove;
792+
var renderBelow = !renderAbove;
790793

791794
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
795+
_this.elements.outerWrapper.toggleClass(_this.classes.below, renderBelow);
792796
}
793797
},
794798

@@ -1081,6 +1085,7 @@
10811085
inheritOriginalWidth : false,
10821086
allowWrap : true,
10831087
forceRenderAbove : false,
1088+
forceRenderBelow : false,
10841089
stopPropagation : true,
10851090
optionsItemBuilder : '{text}', // function(itemData, element, index)
10861091
labelBuilder : '{text}', // function(currItem)

‎public/jquery.selectric.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/lib/demo.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,8 @@
162162

163163
$('#forceRenderAbove').selectric({ forceRenderAbove: true });
164164

165+
$('#forceRenderBelow').selectric({ forceRenderBelow: true });
166+
165167
/*------------------------------------*/
166168

167169
// Cache the target element

‎public/plugins/jquery.selectric.addNew.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff 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 */
22
(function(factory) {
33
/* global define */
44
if ( typeof define === 'function' && define.amd ) {

‎public/plugins/jquery.selectric.addNew.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/plugins/jquery.selectric.placeholder.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! Selectric Placeholder ϟ v0.2.0 (2017-01-11) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
1+
/*! Selectric Placeholder ϟ v0.2.0 (2017-08-21) - git.io/tjl9sQ - Copyright (c) 2017 Leonardo Santos - MIT License */
22
(function(factory) {
33
/* global define */
44
if ( typeof define === 'function' && define.amd ) {

‎public/plugins/jquery.selectric.placeholder.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/selectric.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*======================================
2-
Selectric v1.12.0
2+
Selectric v1.13.0
33
======================================*/
44

55
.selectric-wrapper {

‎selectric.jquery.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "selectric",
3-
"version": "1.12.0",
3+
"version": "1.13.0",
44
"title": "jQuery Selectric",
55
"author": {
66
"name": "Leonardo Santos",

‎src/jquery.selectric.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
var $win = $(window);
2828

2929
var pluginName = 'selectric';
30-
var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Scroll Group GroupLabel';
30+
var classList = 'Input Items Open Disabled TempShow HideSelect Wrapper Focus Hover Responsive Above Below Scroll Group GroupLabel';
3131
var eventNamespaceSuffix = '.sl';
3232

3333
var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
@@ -773,6 +773,8 @@
773773

774774
if (_this.options.forceRenderAbove === true) {
775775
_this.elements.outerWrapper.addClass(_this.classes.above);
776+
} else if (_this.options.forceRenderBelow === true) {
777+
_this.elements.outerWrapper.addClass(_this.classes.below);
776778
} else {
777779
var scrollTop = $win.scrollTop();
778780
var winHeight = $win.height();
@@ -787,8 +789,10 @@
787789
// It's acceptable that the user needs to
788790
// scroll the viewport to see the cut off UI
789791
var renderAbove = !fitsDown && fitsAbove;
792+
var renderBelow = !renderAbove;
790793

791794
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
795+
_this.elements.outerWrapper.toggleClass(_this.classes.below, renderBelow);
792796
}
793797
},
794798

@@ -1081,6 +1085,7 @@
10811085
inheritOriginalWidth : false,
10821086
allowWrap : true,
10831087
forceRenderAbove : false,
1088+
forceRenderBelow : false,
10841089
stopPropagation : true,
10851090
optionsItemBuilder : '{text}', // function(itemData, element, index)
10861091
labelBuilder : '{text}', // function(currItem)

‎test/fixtures/options.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,13 @@
55
<option value="ipsum">ipsum</option>
66
<option value="dolor">dolor</option>
77
</select>
8+
</div>
9+
10+
<div id="forceRenderBelow">
11+
<label>forceRenderBelow</label>
12+
<select>
13+
<option value="lorem">lorem</option>
14+
<option value="ipsum">ipsum</option>
15+
<option value="dolor">dolor</option>
16+
</select>
817
</div>

‎test/options.spec.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ describe('options', function() {
1010
loadFixtures('options.html');
1111

1212
$('#forceRenderAbove select').selectric({ forceRenderAbove: true });
13+
$('#forceRenderBelow select').selectric({ forceRenderBelow: true });
1314
});
1415

1516
it('should always have above class after initial open when using forceRenderAbove option', function() {
@@ -21,4 +22,13 @@ describe('options', function() {
2122
expect($('#forceRenderAbove').find('.selectric-wrapper').hasClass('selectric-above')).toBe(true);
2223
});
2324

25+
it('should always have below class after initial open when using forceRenderBelow option', function() {
26+
// initial open
27+
$('#forceRenderBelow').find('.selectric').trigger('click');
28+
expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
29+
// close afterwards
30+
$('#forceRenderBelow').find('.selectric').trigger('click');
31+
expect($('#forceRenderBelow').find('.selectric-wrapper').hasClass('selectric-below')).toBe(true);
32+
});
33+
2434
});

0 commit comments

Comments
 (0)