').parent().append($wrapper.prepend($label), $items, $input);
eventTriggers = {
open : _open,
close : _close,
destroy : _destroy,
refresh : _refresh,
init : _init
};
$original.on(eventTriggers).wrap('
');
$.extend(_this, eventTriggers);
labelBuilder = _this.options.labelBuilder;
if ( _this.options.inheritOriginalWidth && originalWidth > 0 )
$outerWrapper.width(originalWidth);
_populate();
}
// Generate options markup and event binds
function _populate() {
_this.items = [];
var $options = $original.children(),
_$li = '
',
$justOptions = $original.find('option'),
selectedIndex = $justOptions.index($justOptions.filter(':selected')),
currIndex = 0;
currValue = (selected = ~selectedIndex ? selectedIndex : 0);
if ( optionsLength = $options.length ) {
// Build options markup
$options.each(function() {
var $elm = $(this);
if ( $elm.is('optgroup') ) {
var groupDisabled = $elm.prop('disabled'),
$children = $elm.children();
_$li += _utils.format('- {3}
',
$.trim([_this.classes.group, groupDisabled ? 'disabled' : '', $elm.prop('class')].join(' ')),
_this.classes.grouplabel,
$elm.prop('label')
);
if ( groupDisabled ) {
$children.prop('disabled', true);
}
$children.each(buildOption);
_$li += '
';
} else {
buildOption.call($elm);
}
function buildOption() {
var $elm = $(this),
optionText = $elm.html(),
selectDisabled = $elm.prop('disabled'),
itemBuilder = _this.options.optionsItemBuilder;
_this.items[currIndex] = {
element : $elm,
value : $elm.val(),
text : optionText,
slug : _utils.replaceDiacritics(optionText),
disabled : selectDisabled
};
_$li += _utils.format('- {3}
',
currIndex,
$.trim([currIndex == currValue ? 'selected' : '', currIndex == optionsLength - 1 ? 'last' : '', selectDisabled ? 'disabled' : ''].join(' ')),
$.isFunction(itemBuilder) ? itemBuilder(_this.items[currIndex], $elm, currIndex) : _utils.format(itemBuilder, _this.items[currIndex])
);
currIndex++;
}
});
$items.append( $itemsScroll.html(_$li + '
') );
$label.html(
$.isFunction(labelBuilder) ? labelBuilder(_this.items[currValue]) : _utils.format(labelBuilder, _this.items[currValue])
)
}
$wrapper.add($original).add($outerWrapper).add($input).off(bindSufix);
$outerWrapper.prop('class', [
_this.classes.wrapper,
$original.prop('class').replace(/\S+/g, _this.options.customClass.prefix + '-$&'),
_this.options.responsive ? _this.classes.responsive : ''
].join(' '));
if ( !$original.prop('disabled') ) {
isEnabled = true;
// Not disabled, so... Removing disabled class and bind hover
$outerWrapper.removeClass(_this.classes.disabled).on('mouseenter' + bindSufix + ' mouseleave' + bindSufix, function(e) {
$(this).toggleClass(_this.classes.hover);
// Delay close effect when openOnHover is true
if ( _this.options.openOnHover ) {
clearTimeout(_this.closeTimer);
e.type == 'mouseleave' ? _this.closeTimer = setTimeout(_close, _this.options.hoverIntentTimeout) : _open();
}
});
// Toggle open/close
$wrapper.on('click' + bindSufix, function(e) {
isOpen ? _close() : _open(e);
});
$input
.prop({
tabindex: tabindex,
disabled: false
})
.on('keypress' + bindSufix, _handleSystemKeys)
.on('keydown' + bindSufix, function(e) {
_handleSystemKeys(e);
// Clear search
clearTimeout(_this.resetStr);
_this.resetStr = setTimeout(function() {
$input.val('');
}, _this.options.keySearchTimeout);
var key = e.keyCode || e.which;
// If it's a directional key
// 37 => Left
// 38 => Up
// 39 => Right
// 40 => Down
if ( key > 36 && key < 41 ) {
if ( !_this.options.allowWrap ) {
if ( (key < 39 && selected == 0) || (key > 38 && (selected + 1) == _this.items.length) ) {
return;
}
}
_select(_utils[(key < 39 ? 'previous' : 'next') + 'EnabledItem'](_this.items, selected));
}
})
.on('focusin' + bindSufix, function(e) {
isOpen || _open(e);
})
.on('oninput' in $input[0] ? 'input' : 'keyup', function() {
if ( $input.val().length ) {
// Search in select options
$.each(_this.items, function(i, elm) {
if ( RegExp('^' + $input.val(), 'i').test(elm.slug) && !elm.disabled ) {
_select(i);
return false;
}
});
}
});
$original.prop('tabindex', false);
// Remove styles from items box
// Fix incorrect height when refreshed is triggered with fewer options
$li = $('li', $items.removeAttr('style')).on({
// Prevent
blur on Chrome
mousedown: function(e) {
e.preventDefault();
e.stopPropagation();
},
click: function() {
// The second parameter is to close the box after click
_select($(this).data('index'), true);
// Chrome doesn't close options box if select is wrapped with a label
// We need to 'return false' to avoid that
return false;
}
}).filter('[data-index]');
} else {
$outerWrapper.addClass(_this.classes.disabled);
$input.prop('disabled', true);
}
_utils.triggerCallback('Init', _this);
}
function _refresh() {
_utils.triggerCallback('Refresh', _this);
_populate();
}
// Behavior when system keys is pressed
function _handleSystemKeys(e) {
var key = e.keyCode || e.which;
if ( key == 13 ) {
e.preventDefault();
}
// Tab / Enter / ESC
if ( /^(9|13|27)$/.test(key) ) {
e.stopPropagation();
_select(selected, true);
}
}
// Set options box width/height
function _calculateOptionsDimensions() {
// Calculate options box height
// Set a temporary class on the hidden parent of the element
var hiddenChildren = $items.closest(':visible').children(':hidden').addClass(_this.classes.tempshow),
maxHeight = _this.options.maxHeight,
itemsWidth = $items.outerWidth(),
wrapperWidth = $wrapper.outerWidth() - (itemsWidth - $items.width());
// Set the dimensions, minimum is wrapper width, expand for long items if option is true
if ( !_this.options.expandToItemText || wrapperWidth > itemsWidth )
finalWidth = wrapperWidth;
else {
// Make sure the scrollbar width is included
$items.css('overflow', 'scroll');
// Set a really long width for $outerWrapper
$outerWrapper.width(9e4);
finalWidth = $items.width();
// Set scroll bar to auto
$items.css('overflow', '');
$outerWrapper.width('');
}
$items.width(finalWidth).height() > maxHeight && $items.height(maxHeight);
// Remove the temporary class
hiddenChildren.removeClass(_this.classes.tempshow);
}
// Open the select options box
function _open(e) {
_utils.triggerCallback('BeforeOpen', _this);
if ( e ) {
e.preventDefault();
e.stopPropagation();
}
if ( isEnabled ) {
_calculateOptionsDimensions();
// Find any other opened instances of select and close it
$('.' + _this.classes.hideselect, '.' + _this.classes.open).children()[pluginName]('close');
isOpen = true;
itemsHeight = $items.outerHeight();
itemsInnerHeight = $items.height();
// Toggle options box visibility
$outerWrapper.addClass(_this.classes.open);
// Give dummy input focus
$input.val('');
e && e.type !== 'focusin' && $input.focus();
$doc.on('click' + bindSufix, _close).on('scroll' + bindSufix, _isInViewport);
_isInViewport();
// Prevent window scroll when using mouse wheel inside items box
if ( _this.options.preventWindowScroll ) {
$doc.on('mousewheel' + bindSufix + ' DOMMouseScroll' + bindSufix, '.' + _this.classes.scroll, function(e) {
var orgEvent = e.originalEvent,
scrollTop = $(this).scrollTop(),
deltaY = 0;
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
if ( 'deltaY' in orgEvent ) { deltaY = orgEvent.deltaY * -1; }
if ( scrollTop == (this.scrollHeight - itemsInnerHeight) && deltaY < 0 || scrollTop == 0 && deltaY > 0 ) {
e.preventDefault();
}
});
}
_detectItemVisibility(selected);
_utils.triggerCallback('Open', _this);
}
}
// Detect is the options box is inside the window
function _isInViewport() {
var scrollTop = $win.scrollTop();
var winHeight = $win.height();
var uiPosX = $outerWrapper.offset().top;
var uiHeight = $outerWrapper.outerHeight();
var fitsDown = (uiPosX + uiHeight + itemsHeight) <= (scrollTop + winHeight);
var fitsAbove = (uiPosX - 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;
$outerWrapper.toggleClass(_this.classes.above, renderAbove);
}
// Close the select options box
function _close() {
_utils.triggerCallback('BeforeClose', _this);
if ( currValue != selected ) {
_utils.triggerCallback('BeforeChange', _this);
var text = _this.items[selected].text;
// Apply changed value to original select
$original
.prop('selectedIndex', currValue = selected)
.data('value', text);
// Change label text
$label.html(
$.isFunction(labelBuilder) ? labelBuilder(_this.items[selected]) : _utils.format(labelBuilder, _this.items[selected])
)
_utils.triggerCallback('Change', _this);
}
// Remove custom events on document
$doc.off(bindSufix);
// Remove visible class to hide options box
$outerWrapper.removeClass(_this.classes.open);
isOpen = false;
_utils.triggerCallback('Close', _this);
}
// Select option
function _select(index, close) {
// Parameter index is required
if ( index == undefined ) {
return;
}
// If element is disabled, can't select it
if ( !_this.items[index].disabled ) {
// If 'close' is false (default), the options box won't close after
// each selected item, this is necessary for keyboard navigation
$li
.removeClass('selected')
.eq(selected = index)
.addClass('selected');
_detectItemVisibility(index);
close && _close();
}
}
// Detect if currently selected option is visible and scroll the options box to show it
function _detectItemVisibility(index) {
var liHeight = $li.eq(index).outerHeight(),
liTop = $li[index].offsetTop,
itemsScrollTop = $itemsScroll.scrollTop(),
scrollT = liTop + liHeight * 2;
$itemsScroll.scrollTop(
scrollT > itemsScrollTop + itemsHeight ? scrollT - itemsHeight :
liTop - liHeight < itemsScrollTop ? liTop - liHeight :
itemsScrollTop
);
}
// Unbind and remove
function _destroy(preserveData) {
if ( isEnabled ) {
$items.add($wrapper).add($input).remove();
!preserveData && $original.removeData(pluginName).removeData('value');
$original.prop('tabindex', tabindex).off(bindSufix).off(eventTriggers).unwrap().unwrap();
isEnabled = false;
}
}
_init(opts);
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function(args) {
return this.each(function() {
var data = $.data(this, pluginName);
if ( data && !data.disableOnMobile )
(''+args === args && data[args]) ? data[args]() : data.init(args);
else
$.data(this, pluginName, new Selectric(this, args));
});
};
$.fn[pluginName].hooks = hooks;
}));