https://www.martines.ru/_/js/fancySelect.js

1// Generated by CoffeeScript 1.4.0
2(function () {
3    var $;
4    $ = window.jQuery || window.Zepto || window.$;
5    $.fn.fancySelect = function (opts) {
6        var isiOS, settings;
7        if (opts == null) {
8            opts = {};
9        }
10        settings = $.extend({
11            forceiOS: false,
12            includeBlank: false,
13            optionTemplate: function (optionEl) {
14                return optionEl.text();
15            },
16            triggerTemplate: function (optionEl) {
17                return optionEl.text();
18            }
19        }, opts);
20        isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i);
21        return this.each(function () {
22            var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper;
23            sel = $(this);
24            if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') {
25                return;
26            }
27            sel.addClass('fancified');
28            sel.css({
29                width: 1,
30                height: 1,
31                display: 'block',
32                position: 'absolute',
33                top: 0,
34                left: 0,
35                opacity: 0
36            });
37            sel.wrap('<div class="fancy-select form-group">');
38            wrapper = sel.parent();
39            if (sel.data('class')) {
40                wrapper.addClass(sel.data('class'));
41            }
42            wrapper.append('<div class="trigger">');
43            if (!(isiOS && !settings.forceiOS)) {
44                wrapper.append('<ul class="options">');
45            }
46            trigger = wrapper.find('.trigger');
47            options = wrapper.find('.options');
48            disabled = sel.prop('disabled');
49            if (disabled) {
50                wrapper.addClass('disabled');
51            }
52            updateTriggerText = function () {
53                var triggerHtml;
54                triggerHtml = settings.triggerTemplate(sel.find(':selected'));
55                return trigger.html(triggerHtml);
56            };
57            sel.on('blur.fs', function () {
58                if (trigger.hasClass('open')) {
59                    return setTimeout(function () {
60                        return trigger.trigger('close.fs');
61                    }, 120);
62                }
63            });
64            trigger.on('close.fs', function () {
65                trigger.removeClass('open');
66                return options.removeClass('open');
67            });
68            trigger.on('click.fs', function () {
69                var offParent, parent;
70                if (!disabled) {
71                    trigger.toggleClass('open');
72                    if (isiOS && !settings.forceiOS) {
73                        if (trigger.hasClass('open')) {
74                            return sel.focus();
75                        }
76                    } else {
77                        if (trigger.hasClass('open')) {
78                            parent = trigger.parent();
79                            offParent = parent.offsetParent();
80                            if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height() + $(window).scrollTop()) {
81                                options.addClass('overflowing');
82                            } else {
83                                options.removeClass('overflowing');
84                            }
85                        }
86                        options.toggleClass('open');
87                        if (!isiOS) {
88                            return sel.focus();
89                        }
90                    }
91                }
92            });
93            sel.on('enable', function () {
94                sel.prop('disabled', false);
95                wrapper.removeClass('disabled');
96                disabled = false;
97                return copyOptionsToList();
98            });
99            sel.on('disable', function () {
100                sel.prop('disabled', true);
101                wrapper.addClass('disabled');
102                return disabled = true;
103            });
104            sel.on('change.fs', function (e) {
105                if (e.originalEvent && e.originalEvent.isTrusted) {
106                    return e.stopPropagation();
107                } else {
108                    return updateTriggerText();
109                }
110            });

111            sel.on('keydown', function (e) {
112                var hovered, newHovered, w;
113                w = e.which;
114                hovered = options.find('.hover');
115                hovered.removeClass('hover');
116                if (!options.hasClass('open')) {
117                    if (w === 13 || w === 32 || w === 38 || w === 40) {
118                        e.preventDefault();
119                        return trigger.trigger('click.fs');
120                    }
121                } else {
122                    if (w === 38) {
123                        e.preventDefault();
124                        if (hovered.length && hovered.index() > 0) {
125                            hovered.prev().addClass('hover');
126                        } else {
127                            options.find('li:last-child').addClass('hover');
128                        }
129                    } else if (w === 40) {
130                        e.preventDefault();
131                        if (hovered.length && hovered.index() < options.find('li').length - 1) {
132                            hovered.next().addClass('hover');
133                        } else {
134                            options.find('li:first-child').addClass('hover');
135                        }
136                    } else if (w === 27) {
137                        e.preventDefault();
138                        trigger.trigger('click.fs');
139                    } else if (w === 13 || w === 32) {
140                        e.preventDefault();
141                        hovered.trigger('click.fs');
142                    } else if (w === 9) {
143                        if (trigger.hasClass('open')) {
144                            trigger.trigger('close.fs');
145                        }
146                    }
147                    newHovered = options.find('.hover');
148                    if (newHovered.length) {
149                        options.scrollTop(0);
150                        return options.scrollTop(newHovered.position().top - 12);
151                    }
152                }
153            });
154            options.on('click.fs', 'li', function (e) {
155                var clicked;
156                clicked = $(this);
157                sel.val(clicked.data('raw-value'));
158                if (!isiOS) {
159                    sel.trigger('blur.fs').trigger('focus.fs');
160                }
161                options.find('.selected').removeClass('selected');
162                clicked.addClass('selected');
163                trigger.addClass('selected');
164                return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs');
165            });
166            options.on('mouseenter.fs', 'li', function () {
167                var hovered, nowHovered;
168                nowHovered = $(this);
169                hovered = options.find('.hover');
170                hovered.removeClass('hover');
171                return nowHovered.addClass('hover');
172            });
173            options.on('mouseleave.fs', 'li', function () {
174                return options.find('.hover').removeClass('hover');
175            });
176            copyOptionsToList = function () {
177                var selOpts;
178                updateTriggerText();
179                if (isiOS && !settings.forceiOS) {
180                    return;
181                }
182                selOpts = sel.find('option');
183                return sel.find('option').each(function (i, opt) {
184                    var optHtml;
185                    opt = $(opt);
186                    if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) {
187                        optHtml = settings.optionTemplate(opt);
188                        if (opt.prop('selected')) {
189                            return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected\">" + optHtml + "</li>");
190                        } else {
191                            return options.append("<li data-raw-value=\"" + (opt.val()) + "\">" + optHtml + "</li>");
192                        }
193                    }
194                });
195            };
196            sel.on('update.fs', function () {
197                wrapper.find('.options').empty();
198                return copyOptionsToList();
199            });
200            return copyOptionsToList();
201        });
202    };
203}).call(this);