Skip to content

Commit 5e35860

Browse files
lcdsantoslcdsantos
authored
Merge pull request #190 from SassNinja/master
forceRenderAbove option
2 parents 9123ead + bc54454 commit 5e35860

13 files changed

+111
-33
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,14 @@ $('select').selectric({
248248
*/
249249
allowWrap: true,
250250

251+
/*
252+
* Type: Boolean
253+
* Description: By default the options box gets opened above if it's outside the window.
254+
* In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
255+
* you may force opening above.
256+
*/
257+
forceRenderAbove: false,
258+
251259
/*
252260
* Type: Object
253261
* 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.11.1",
4+
"version": "1.12.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.11.1",
3+
"version": "1.12.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
@@ -269,6 +269,22 @@ <h3>Custom markup for items box</h3>
269269
</div>
270270
</div>
271271

272+
<div class="demo">
273+
<h3>Force render above</h3>
274+
275+
<div class="view">
276+
<select id="forceRenderAbove">
277+
<option value="lorem">lorem</option>
278+
<option value="ipsum">ipsum</option>
279+
<option value="dolor">dolor</option>
280+
</select>
281+
</div>
282+
283+
<div class="code">
284+
<pre><code class="language-javascript">$('select').selectric({ forceRenderAbove: true });</code></pre>
285+
</div>
286+
</div>
287+
272288
<div class="demo-spacer"></div>
273289
</div>
274290

‎public/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,14 @@ <h2>Options</h2>
335335
*/
336336
allowWrap: true,
337337

338+
/*
339+
* Type: Boolean
340+
* Description: By default the options box gets opened above if it's outside the window.
341+
* In case this auto detection doesn't work as expected (e.g. in transform/relative scopes)
342+
* you may force opening above.
343+
*/
344+
forceRenderAbove: false,
345+
338346
/*
339347
* Type: Object
340348
* Description: Customize select "multiple" behavior

‎public/jquery.selectric.js

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* /,'
1010
* /'
1111
*
12-
* Selectric ϟ v1.11.1 (Jan 10 2017) - http://lcdsantos.github.io/jQuery-Selectric/
12+
* Selectric ϟ v1.12.0 (Jul 03 2017) - http://lcdsantos.github.io/jQuery-Selectric/
1313
*
1414
* Copyright (c) 2017 Leonardo Santos; MIT License
1515
*
@@ -187,7 +187,7 @@
187187
* @return {string} The string transformed to dash-case.
188188
*/
189189
toDash: function(str) {
190-
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
190+
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
191191
},
192192

193193
/**
@@ -565,7 +565,7 @@
565565
itemData.selected ? 'selected' : ''
566566
]),
567567
$.isFunction(itemBuilder)
568-
? _this.utils.format(itemBuilder(itemData), itemData)
568+
? _this.utils.format(itemBuilder(itemData, this.$element, index), itemData)
569569
: _this.utils.format(itemBuilder, filteredItemData)
570570
);
571571
},
@@ -770,21 +770,26 @@
770770
/** Detect if the options box is inside the window */
771771
isInViewport: function() {
772772
var _this = this;
773-
var scrollTop = $win.scrollTop();
774-
var winHeight = $win.height();
775-
var uiPosX = _this.elements.outerWrapper.offset().top;
776-
var uiHeight = _this.elements.outerWrapper.outerHeight();
777773

778-
var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
779-
var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
774+
if (_this.options.forceRenderAbove === true) {
775+
_this.elements.outerWrapper.addClass(_this.classes.above);
776+
} else {
777+
var scrollTop = $win.scrollTop();
778+
var winHeight = $win.height();
779+
var uiPosX = _this.elements.outerWrapper.offset().top;
780+
var uiHeight = _this.elements.outerWrapper.outerHeight();
781+
782+
var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
783+
var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
780784

781-
// If it does not fit below, only render it
782-
// above it fit's there.
783-
// It's acceptable that the user needs to
784-
// scroll the viewport to see the cut off UI
785-
var renderAbove = !fitsDown && fitsAbove;
785+
// If it does not fit below, only render it
786+
// above it fit's there.
787+
// It's acceptable that the user needs to
788+
// scroll the viewport to see the cut off UI
789+
var renderAbove = !fitsDown && fitsAbove;
786790

787-
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
791+
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
792+
}
788793
},
789794

790795
/**
@@ -1075,6 +1080,7 @@
10751080
preventWindowScroll : true,
10761081
inheritOriginalWidth : false,
10771082
allowWrap : true,
1083+
forceRenderAbove : false,
10781084
stopPropagation : true,
10791085
optionsItemBuilder : '{text}', // function(itemData, element, index)
10801086
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
@@ -160,6 +160,8 @@
160160

161161
$('#basic').selectric();
162162

163+
$('#forceRenderAbove').selectric({ forceRenderAbove: true });
164+
163165
/*------------------------------------*/
164166

165167
// Cache the target element

‎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.11.1
2+
Selectric v1.12.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.11.1",
3+
"version": "1.12.0",
44
"title": "jQuery Selectric",
55
"author": {
66
"name": "Leonardo Santos",

‎src/jquery.selectric.js

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -770,21 +770,26 @@
770770
/** Detect if the options box is inside the window */
771771
isInViewport: function() {
772772
var _this = this;
773-
var scrollTop = $win.scrollTop();
774-
var winHeight = $win.height();
775-
var uiPosX = _this.elements.outerWrapper.offset().top;
776-
var uiHeight = _this.elements.outerWrapper.outerHeight();
777773

778-
var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
779-
var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
774+
if (_this.options.forceRenderAbove === true) {
775+
_this.elements.outerWrapper.addClass(_this.classes.above);
776+
} else {
777+
var scrollTop = $win.scrollTop();
778+
var winHeight = $win.height();
779+
var uiPosX = _this.elements.outerWrapper.offset().top;
780+
var uiHeight = _this.elements.outerWrapper.outerHeight();
781+
782+
var fitsDown = (uiPosX + uiHeight + _this.itemsHeight) <= (scrollTop + winHeight);
783+
var fitsAbove = (uiPosX - _this.itemsHeight) > scrollTop;
780784

781-
// If it does not fit below, only render it
782-
// above it fit's there.
783-
// It's acceptable that the user needs to
784-
// scroll the viewport to see the cut off UI
785-
var renderAbove = !fitsDown && fitsAbove;
785+
// If it does not fit below, only render it
786+
// above it fit's there.
787+
// It's acceptable that the user needs to
788+
// scroll the viewport to see the cut off UI
789+
var renderAbove = !fitsDown && fitsAbove;
786790

787-
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
791+
_this.elements.outerWrapper.toggleClass(_this.classes.above, renderAbove);
792+
}
788793
},
789794

790795
/**
@@ -1075,6 +1080,7 @@
10751080
preventWindowScroll : true,
10761081
inheritOriginalWidth : false,
10771082
allowWrap : true,
1083+
forceRenderAbove : false,
10781084
stopPropagation : true,
10791085
optionsItemBuilder : '{text}', // function(itemData, element, index)
10801086
labelBuilder : '{text}', // function(currItem)

‎test/fixtures/options.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div id="forceRenderAbove">
2+
<label>forceRenderAbove</label>
3+
<select>
4+
<option value="lorem">lorem</option>
5+
<option value="ipsum">ipsum</option>
6+
<option value="dolor">dolor</option>
7+
</select>
8+
</div>

‎test/options.spec.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-env jasmine, jquery */
2+
/* global loadFixtures */
3+
4+
'use strict';
5+
6+
describe('options', function() {
7+
8+
beforeEach(function() {
9+
jasmine.getFixtures().fixturesPath = 'base/test/fixtures';
10+
loadFixtures('options.html');
11+
12+
$('#forceRenderAbove select').selectric({ forceRenderAbove: true });
13+
});
14+
15+
it('should always have above class after initial open when using forceRenderAbove option', function() {
16+
// initial open
17+
$('#forceRenderAbove').find('.selectric').trigger('click');
18+
expect($('#forceRenderAbove').find('.selectric-wrapper').hasClass('selectric-above')).toBe(true);
19+
// close afterwards
20+
$('#forceRenderAbove').find('.selectric').trigger('click');
21+
expect($('#forceRenderAbove').find('.selectric-wrapper').hasClass('selectric-above')).toBe(true);
22+
});
23+
24+
});

0 commit comments

Comments
 (0)