// Generated by CoffeeScript 1.4.0
(function() {
var $;
$ = window.jQuery || window.Zepto || window.$;
$.fn.fancySelect = function(opts) {
var isiOS, settings;
if (opts == null) {
opts = {};
}
settings = $.extend({
forceiOS: false,
includeBlank: false,
optionTemplate: function(optionEl) {
return optionEl.text();
},
triggerTemplate: function(optionEl) {
return optionEl.text();
}
}, opts);
isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i);
return this.each(function() {
var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper;
sel = $(this);
if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') {
return;
}
sel.addClass('fancified');
sel.css({
width: 1,
height: 1,
display: 'block',
position: 'absolute',
top: 0,
left: 0,
opacity: 0
});
sel.wrap('<div class="fancy-select">');
wrapper = sel.parent();
if (sel.data('class')) {
wrapper.addClass(sel.data('class'));
}
wrapper.append('<div class="trigger">');
if (!(isiOS && !settings.forceiOS)) {
wrapper.append('<ul class="options">');
}
trigger = wrapper.find('.trigger');
options = wrapper.find('.options');
disabled = sel.prop('disabled');
if (disabled) {
wrapper.addClass('disabled');
}
updateTriggerText = function() {
var triggerHtml;
triggerHtml = settings.triggerTemplate(sel.find(':selected'));
return trigger.html(triggerHtml);
};
sel.on('blur.fs', function() {
if (trigger.hasClass('open')) {
return setTimeout(function() {
return trigger.trigger('close.fs');
}, 120);
}
});
trigger.on('close.fs', function() {
trigger.removeClass('open');
return options.removeClass('open');
});
trigger.on('click.fs', function() {
var offParent, parent;
if (!disabled) {
trigger.toggleClass('open');
if (isiOS && !settings.forceiOS) {
if (trigger.hasClass('open')) {
return sel.focus();
}
} else {
if (trigger.hasClass('open')) {
parent = trigger.parent();
offParent = parent.offsetParent();
if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height() + $(window).scrollTop()) {
options.addClass('overflowing');
} else {
options.removeClass('overflowing');
}
}
options.toggleClass('open');
if (!isiOS) {
return sel.focus();
}
}
}
});
sel.on('enable', function() {
sel.prop('disabled', false);
wrapper.removeClass('disabled');
disabled = false;
return copyOptionsToList();
});
sel.on('disable', function() {
sel.prop('disabled', true);
wrapper.addClass('disabled');
return disabled = true;
});
sel.on('change.fs', function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) {
return e.stopPropagation();
} else {
return updateTriggerText();
}
});
sel.on('keydown', function(e) {
var hovered, newHovered, w;
w = e.which;
hovered = options.find('.hover');
hovered.removeClass('hover');
if (!options.hasClass('open')) {
if (w === 13 || w === 32 || w === 38 || w === 40) {
e.preventDefault();
return trigger.trigger('click.fs');
}
} else {
if (w === 38) {
e.preventDefault();
if (hovered.length && hovered.index() > 0) {
hovered.prev().addClass('hover');
} else {
options.find('li:last-child').addClass('hover');
}
} else if (w === 40) {
e.preventDefault();
if (hovered.length && hovered.index() < options.find('li').length - 1) {
hovered.next().addClass('hover');
} else {
options.find('li:first-child').addClass('hover');
}
} else if (w === 27) {
e.preventDefault();
trigger.trigger('click.fs');
} else if (w === 13 || w === 32) {
e.preventDefault();
hovered.trigger('click.fs');
} else if (w === 9) {
if (trigger.hasClass('open')) {
trigger.trigger('close.fs');
}
}
newHovered = options.find('.hover');
if (newHovered.length) {
options.scrollTop(0);
return options.scrollTop(newHovered.position().top - 12);
}
}
});
options.on('click.fs', 'li', function(e) {
var clicked;
clicked = $(this);
sel.val(clicked.data('raw-value'));
if (!isiOS) {
sel.trigger('blur.fs').trigger('focus.fs');
}
options.find('.selected').removeClass('selected');
clicked.addClass('selected');
return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs');
});
options.on('mouseenter.fs', 'li', function() {
var hovered, nowHovered;
nowHovered = $(this);
hovered = options.find('.hover');
hovered.removeClass('hover');
return nowHovered.addClass('hover');
});
options.on('mouseleave.fs', 'li', function() {
return options.find('.hover').removeClass('hover');
});
copyOptionsToList = function() {
var selOpts;
updateTriggerText();
if (isiOS && !settings.forceiOS) {
return;
}
selOpts = sel.find('option');
return sel.find('option').each(function(i, opt) {
var optHtml;
opt = $(opt);
if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) {
optHtml = settings.optionTemplate(opt);
if (opt.prop('selected')) {
return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected\">" + optHtml + "</li>");
} else {
return options.append("<li data-raw-value=\"" + (opt.val()) + "\">" + optHtml + "</li>");
}
}
});
};
sel.on('update.fs', function() {
wrapper.find('.options').empty();
return copyOptionsToList();
});
return copyOptionsToList();
});
};
}).call(this);
div.fancy-select {
position: relative;
color: #505050;
}
div.fancy-select.disabled {
opacity: 0.5;
}
div.fancy-select select:focus + div.trigger {
}
div.fancy-select select:focus + div.trigger.open {
}
div.fancy-select div.trigger {
cursor: pointer;
height: 50px;
line-height: 50px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
width: 100%;
border: 1px solid #6e6e6e;
transition: all 240ms ease-out;
-webkit-transition: all 240ms ease-out;
-moz-transition: all 240ms ease-out;
-ms-transition: all 240ms ease-out;
-o-transition: all 240ms ease-out;
}
div.fancy-select div.trigger:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #4B5468;
top: 20px;
right: 9px;
}
div.fancy-select div.trigger.open {
}
div.fancy-select div.trigger.open:after {
}
div.fancy-select ul.options {
list-style: none;
margin: 0;
position: absolute;
top: 49px;
left: 0;
visibility: hidden;
opacity: 0;
z-index: 50;
max-height: 200px;
overflow: auto;
border: 1px solid #6e6e6e;
width: 100%;
padding: 0;
background: #fff;
transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
-o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.open {
visibility: visible;
top: 50px;
opacity: 1;
/* have to use a non-visibility transition to prevent this iOS issue (bug?): */
/*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
transition: opacity 300ms ease-out, top 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
-moz-transition: opacity 300ms ease-out, top 300ms ease-out;
-ms-transition: opacity 300ms ease-out, top 300ms ease-out;
-o-transition: opacity 300ms ease-out, top 300ms ease-out;
}
div.fancy-select ul.options.overflowing {
top: auto;
bottom: 40px;
transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}
div.fancy-select ul.options.overflowing.open {
top: auto;
bottom: 50px;
transition: opacity 300ms ease-out, bottom 300ms ease-out;
-webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
-o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}
div.fancy-select ul.options li {
padding: 8px 20px;
color: #000;
cursor: pointer;
white-space: nowrap;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
-moz-transition: all 150ms ease-out;
-ms-transition: all 150ms ease-out;
-o-transition: all 150ms ease-out;
}
div.fancy-select ul.options li.selected {
background: #d3d3d3;
color: #000;
}
div.fancy-select ul.options li:hover, div.fancy-select ul.options li.hover {
background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="SortBy" id="SortBy" class="filters-toolbar__input">
<option value="" selected="selected">Option 1</option>
<option value="" selected="selected">Option 2</option>
<option value="" selected="selected">Option 3</option>
</select>
/* --- fancySelect --- */
$(function() {
$('#SortBy').fancySelect();
});