jquery.customSelect/jquery.customSelect.js at master · stano/jquery.customSelect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*!
 * jquery.customSelect() - v0.3.0
 * http://adam.co/lab/jquery/customselect/
 * 2013-02-12
 *
 * Copyright 2013 Adam Coulombe
 * @license http://www.opensource.org/licenses/mit-license.html MIT License
 * @license http://www.gnu.org/licenses/gpl.html GPL2 License
 */

(function ($) {
    'use strict';

    $.fn.extend({
        customSelect: function (options) {
            var defaults = {
                    customClass: null,
                    mapClass:    true,
                    mapStyle:    true
                },
                changed = function (el) {
                    var $select = $(el),
                        currentSelected = $select.find(':selected'),
                        customSelectSpan = $select.next(),
                        customSelectSpanInner = customSelectSpan.children(':first'),
                        html = currentSelected.html() || '&nbsp;';

                    customSelectSpanInner.html(html);

                    setTimeout(function () {
                        customSelectSpan.removeClass('customSelectOpen');
                    }, 60);
                };

            if (typeof document.body.style.maxHeight === 'undefined') {
                /* filter out <= IE6 */
                return this;
            }

            options = $.extend(defaults, options);

            return this.each(function () {
                var $select = $(this),
                    customSelectInnerSpan = $('<span class="customSelectInner" />'),
                    customSelectSpan = $('<span class="customSelect" />');

                customSelectSpan.append(customSelectInnerSpan);
                $select.after(customSelectSpan);

                if (options.customClass) {
                    customSelectSpan.addClass(options.customClass);
                }
                if (options.mapClass) {
                    customSelectSpan.addClass($select.attr('class'));
                }
                if (options.mapStyle) {
                    customSelectSpan.attr('style', $select.attr('style'));
                }

                $select
                    .addClass('hasCustomSelect')
                    .on('update', function () {
                        var selectBoxWidth = parseInt($select.outerWidth(), 10) -
                                (parseInt(customSelectSpan.outerWidth(), 10) -
                                    parseInt(customSelectSpan.width(), 10)),
                            selectBoxHeight = customSelectSpan.outerHeight();

                        changed(this);

                        customSelectSpan.css({
                            display: 'inline-block'
                        });

                        customSelectInnerSpan.css({
                            width:   selectBoxWidth,
                            display: 'inline-block'
                        });

                        $select.css({
                            '-webkit-appearance': 'menulist-button',
                            width:                customSelectSpan.outerWidth(),
                            position:             'absolute',
                            opacity:              0,
                            height:               selectBoxHeight,
                            fontSize:             customSelectSpan.css('font-size')
                        });
                    })
                    .on('change', function () {
                        customSelectSpan.addClass('customSelectChanged');

                        changed(this);
                    })
                    .on('keyup', function () {
                        $select.blur();
                        $select.focus();
                    })
                    .on('mousedown', function () {
                        customSelectSpan.removeClass('customSelectChanged').addClass('customSelectOpen');
                    })
                    .focus(function () {
                        customSelectSpan.removeClass('customSelectChanged').addClass('customSelectFocus');
                    })
                    .blur(function () {
                        customSelectSpan.removeClass('customSelectFocus customSelectOpen');
                    })
                    .hover(function () {
                        customSelectSpan.addClass('customSelectHover');
                    }, function () {
                        customSelectSpan.removeClass('customSelectHover');
                    })
                    .trigger('update');
            });
        }
    });
})(jQuery);