Skip to content

Commit b54051e

Browse files
lcdsantoslcdsantos
authored
Merge pull request #128 from gearsdigital/feature/#90-retain-mobile-dropdown
retain mobile dropdown (#90)
2 parents dbfcdca + 3ccc738 commit b54051e

File tree

7 files changed

+392
-166
lines changed

7 files changed

+392
-166
lines changed

‎public/jquery.selectric.js

Lines changed: 75 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* /,'
1010
* /'
1111
*
12-
* Selectric ϟ v1.10.1 (Sep 22 2016) - http://lcdsantos.github.io/jQuery-Selectric/
12+
* Selectric ϟ v1.10.1 (Sep 23 2016) - http://lcdsantos.github.io/jQuery-Selectric/
1313
*
1414
* Copyright (c) 2016 Leonardo Santos; MIT License
1515
*
@@ -45,7 +45,7 @@
4545

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

5050
var chars = ['a', 'e', 'i', 'o', 'u', 'n', 'c', 'y'];
5151
var diacritics = [
@@ -249,12 +249,13 @@
249249
_this.classes = _this.getClassNames();
250250

251251
// Create elements
252-
var input = $('<input/>', { 'class': _this.classes.input, 'readonly': _this.utils.isMobile() });
253-
var items = $('<div/>', { 'class': _this.classes.items, 'tabindex': -1 });
254-
var itemsScroll = $('<div/>', { 'class': _this.classes.scroll });
255-
var wrapper = $('<div/>', { 'class': _this.classes.prefix, 'html': _this.options.arrowButtonMarkup });
256-
var label = $('<span/>', { 'class': 'label' });
257-
var outerWrapper = _this.$element.wrap('<div/>').parent().append(wrapper.prepend(label), items, input);
252+
var input = $('<input/>', { 'class': _this.classes.input, 'readonly': _this.utils.isMobile() });
253+
var items = $('<div/>', { 'class': _this.classes.items, 'tabindex': -1 });
254+
var itemsScroll = $('<div/>', { 'class': _this.classes.scroll });
255+
var wrapper = $('<div/>', { 'class': _this.classes.prefix, 'html': _this.options.arrowButtonMarkup });
256+
var label = $('<span/>', { 'class': 'label' });
257+
var outerWrapper = _this.$element.wrap('<div/>').parent().append(wrapper.prepend(label), items, input);
258+
var hideSelectWrapper = $('<div/>', { 'class': _this.classes.hideselect });
258259

259260
_this.elements = {
260261
input : input,
@@ -265,9 +266,18 @@
265266
outerWrapper : outerWrapper
266267
};
267268

269+
if (_this.options.nativeOnMobile && _this.utils.isMobile()) {
270+
_this.elements.input = undefined;
271+
hideSelectWrapper.addClass(_this.classes.prefix + '-is-native');
272+
273+
_this.$element.on('change', function () {
274+
_this.refresh();
275+
});
276+
}
277+
268278
_this.$element
269279
.on(_this.eventTriggers)
270-
.wrap('<div class="' + _this.classes.hideselect + '"/>');
280+
.wrap(hideSelectWrapper);
271281

272282
_this.originalTabindex = _this.$element.prop('tabindex');
273283
_this.$element.prop('tabindex', false);
@@ -554,9 +564,9 @@
554564
.add(_this.$element)
555565
.add(_this.elements.outerWrapper)
556566
.add(_this.elements.input)
557-
.off(bindSufix);
567+
.off(eventNamespaceSuffix);
558568

559-
_this.elements.outerWrapper.on('mouseenter' + bindSufix + ' mouseleave' + bindSufix, function(e) {
569+
_this.elements.outerWrapper.on('mouseenter' + eventNamespaceSuffix + ' mouseleave' + eventNamespaceSuffix, function(e) {
560570
$(this).toggleClass(_this.classes.hover, e.type === 'mouseenter');
561571

562572
// Delay close effect when openOnHover is true
@@ -572,52 +582,56 @@
572582
});
573583

574584
// Toggle open/close
575-
_this.elements.wrapper.on('click' + bindSufix, function(e) {
585+
_this.elements.wrapper.on('click' + eventNamespaceSuffix, function(e) {
576586
_this.state.opened ? _this.close() : _this.open(e);
577587
});
578588

579-
// Translate original element focus event to dummy input
580-
_this.$element.on('focus' + bindSufix, function() {
581-
_this.elements.input.focus();
582-
});
583-
584-
_this.elements.input
585-
.prop({ tabindex: _this.originalTabindex, disabled: false })
586-
.on('keydown' + bindSufix, $.proxy(_this.handleKeys, _this))
587-
.on('focusin' + bindSufix, function(e) {
588-
_this.elements.outerWrapper.addClass(_this.classes.focus);
589+
// Translate original element focus event to dummy input.
590+
// Disabled on mobile devices because the default option list isn't
591+
// shown due the fact that hidden input gets focused
592+
if ( !(_this.options.nativeOnMobile && _this.utils.isMobile()) ) {
593+
_this.$element.on('focus' + eventNamespaceSuffix, function() {
594+
_this.elements.input.focus();
595+
});
589596

590-
// Prevent the flicker when focusing out and back again in the browser window
591-
_this.elements.input.one('blur', function() {
592-
_this.elements.input.blur();
593-
});
597+
_this.elements.input
598+
.prop({ tabindex: _this.originalTabindex, disabled: false })
599+
.on('keydown' + eventNamespaceSuffix, $.proxy(_this.handleKeys, _this))
600+
.on('focusin' + eventNamespaceSuffix, function(e) {
601+
_this.elements.outerWrapper.addClass(_this.classes.focus);
594602

595-
if ( _this.options.openOnFocus && !_this.state.opened ) {
596-
_this.open(e);
597-
}
598-
})
599-
.on('focusout' + bindSufix, function() {
600-
_this.elements.outerWrapper.removeClass(_this.classes.focus);
601-
})
602-
.on('input propertychange', function() {
603-
var val = _this.elements.input.val();
604-
605-
// Clear search
606-
clearTimeout(_this.resetStr);
607-
_this.resetStr = setTimeout(function() {
608-
_this.elements.input.val('');
609-
}, _this.options.keySearchTimeout);
610-
611-
if ( val.length ) {
612-
// Search in select options
613-
$.each(_this.items, function(i, elm) {
614-
if ( new RegExp('^' + _this.utils.escapeRegExp(val), 'i').test(elm.slug) && !elm.disabled ) {
615-
_this.highlight(i);
616-
return false;
617-
}
603+
// Prevent the flicker when focusing out and back again in the browser window
604+
_this.elements.input.one('blur', function() {
605+
_this.elements.input.blur();
618606
});
619-
}
620-
});
607+
608+
if ( _this.options.openOnFocus && !_this.state.opened ) {
609+
_this.open(e);
610+
}
611+
})
612+
.on('focusout' + eventNamespaceSuffix, function() {
613+
_this.elements.outerWrapper.removeClass(_this.classes.focus);
614+
})
615+
.on('input propertychange', function() {
616+
var val = _this.elements.input.val();
617+
618+
// Clear search
619+
clearTimeout(_this.resetStr);
620+
_this.resetStr = setTimeout(function() {
621+
_this.elements.input.val('');
622+
}, _this.options.keySearchTimeout);
623+
624+
if ( val.length ) {
625+
// Search in select options
626+
$.each(_this.items, function(i, elm) {
627+
if ( new RegExp('^' + _this.utils.escapeRegExp(val), 'i').test(elm.slug) && !elm.disabled ) {
628+
_this.highlight(i);
629+
return false;
630+
}
631+
});
632+
}
633+
});
634+
}
621635

622636
_this.$li.on({
623637
// Prevent <input> blur on Chrome
@@ -793,6 +807,10 @@
793807
open: function(e) {
794808
var _this = this;
795809

810+
if ( _this.options.nativeOnMobile && _this.utils.isMobile()) {
811+
return false;
812+
}
813+
796814
_this.utils.triggerCallback('BeforeOpen', _this);
797815

798816
if ( e ) {
@@ -822,16 +840,16 @@
822840
// Delayed binds events on Document to make label clicks work
823841
setTimeout(function() {
824842
$doc
825-
.on('click' + bindSufix, $.proxy(_this.close, _this))
826-
.on('scroll' + bindSufix, $.proxy(_this.isInViewport, _this));
843+
.on('click' + eventNamespaceSuffix, $.proxy(_this.close, _this))
844+
.on('scroll' + eventNamespaceSuffix, $.proxy(_this.isInViewport, _this));
827845
}, 1);
828846

829847
_this.isInViewport();
830848

831849
// Prevent window scroll when using mouse wheel inside items box
832850
if ( _this.options.preventWindowScroll ) {
833851
/* istanbul ignore next */
834-
$doc.on('mousewheel' + bindSufix + ' DOMMouseScroll' + bindSufix, '.' + _this.classes.scroll, function(e) {
852+
$doc.on('mousewheel' + eventNamespaceSuffix + ' DOMMouseScroll' + eventNamespaceSuffix, '.' + _this.classes.scroll, function(e) {
835853
var orgEvent = e.originalEvent;
836854
var scrollTop = $(this).scrollTop();
837855
var deltaY = 0;
@@ -862,7 +880,7 @@
862880
_this.utils.triggerCallback('BeforeClose', _this);
863881

864882
// Remove custom events on document
865-
$doc.off(bindSufix);
883+
$doc.off(eventNamespaceSuffix);
866884

867885
// Remove visible class to hide options box
868886
_this.elements.outerWrapper.removeClass(_this.classes.open);
@@ -986,7 +1004,7 @@
9861004
_this.$element.removeData(pluginName).removeData('value');
9871005
}
9881006

989-
_this.$element.prop('tabindex', _this.originalTabindex).off(bindSufix).off(_this.eventTriggers).unwrap().unwrap();
1007+
_this.$element.prop('tabindex', _this.originalTabindex).off(eventNamespaceSuffix).off(_this.eventTriggers).unwrap().unwrap();
9901008

9911009
_this.state.enabled = false;
9921010
}
@@ -1050,6 +1068,7 @@
10501068
keySearchTimeout : 500,
10511069
arrowButtonMarkup : '<b class="button">&#x25be;</b>',
10521070
disableOnMobile : true,
1071+
nativeOnMobile : true,
10531072
openOnFocus : true,
10541073
openOnHover : false,
10551074
hoverIntentTimeout : 500,

0 commit comments

Comments
 (0)