https://www.justfood.tv/js/jquery.customSelect.js

1/*!
2 * jquery.customSelect() - v0.4.2
3 * http://adam.co/lab/jquery/customselect/
4 * 2013-05-22
5 *
6 * Copyright 2013 Adam Coulombe
7 * @license http://www.opensource.org/licenses/mit-license.html MIT License
8 * @license http://www.gnu.org/licenses/gpl.html GPL2 License 
9 */
10
11(function ($) {
12    'use strict';
13
14    $.fn.extend({
15        customSelect: function (options) {
16            // filter out <= IE6
17            if (typeof document.body.style.maxHeight === 'undefined') {
18                return this;
19            }
20            var defaults = {
21                    customClass: 'customSelect',
22                    mapClass:    true,
23                    mapStyle:    true
24            },
25            options = $.extend(defaults, options),
26            prefix = options.customClass,
27            changed = function ($select,customSelectSpan) {
28                var currentSelected = $select.find(':selected'),
29                customSelectSpanInner = customSelectSpan.children(':first'),
30                html = currentSelected.html() || '&nbsp;';
31
32                customSelectSpanInner.html(html);
33                
34                if (currentSelected.attr('disabled')) {
35                	customSelectSpan.addClass(getClass('DisabledOption'));
36                } else {
37                	customSelectSpan.removeClass(getClass('DisabledOption'));
38                }
39                
40                setTimeout(function () {
41                    customSelectSpan.removeClass(getClass('Open'));
42                    $(document).off('mouseup.'+getClass('Open'));                  
43                }, 60);
44            },
45            getClass = function(suffix){
46                return prefix + suffix;
47            };
48
49            return this.each(function () {
50                var $select = $(this),
51                    customSelectInnerSpan = $('<span />').addClass(getClass('Inner')),
52                    customSelectSpan = $('<span />'),
53                    position = $select.position();
54
55                $select.after(customSelectSpan.append(customSelectInnerSpan));
56                
57                customSelectSpan.addClass(prefix);
58
59                if (options.mapClass) {
60                    customSelectSpan.addClass($select.attr('class'));
61                }
62                if (options.mapStyle) {
63                    customSelectSpan.attr('style', $select.attr('style'));
64                }
65
66                $select
67                    .addClass('hasCustomSelect')
68                    .on('update', function () {
69						changed($select,customSelectSpan);
70						
71                        var selectBoxWidth = parseInt($select.outerWidth(), 10) -
72                                (parseInt(customSelectSpan.outerWidth(), 10) -
73                                    parseInt(customSelectSpan.width(), 10));
74						
75						// Set to inline-block before calculating outerHeight
76						customSelectSpan.css({
77                            display: 'inline-block'
78                        });
79						
80                        var selectBoxHeight = customSelectSpan.outerHeight();
81
82                        if ($select.attr('disabled')) {
83                            customSelectSpan.addClass(getClass('Disabled'));
84                        } else {
85                            customSelectSpan.removeClass(getClass('Disabled'));
86                        }
87
88                        customSelectInnerSpan.css({
89                            width:   selectBoxWidth,
90                            display: 'inline-block'
91                        });
92
93                        $select.css({
94                            '-webkit-appearance': 'menulist-button',
95                            width:                customSelectSpan.outerWidth(),
96                            position:             'absolute',
97                            opacity:              0,
98                            height:               selectBoxHeight,
99                            fontSize:             customSelectSpan.css('font-size'),
100                            left:                 position.left,
101                            top:                  position.top
102                        });
103                    })
104                    .on('change', function () {
105                        customSelectSpan.addClass(getClass('Changed'));
106                        changed($select,customSelectSpan);
107                    })
108                    .on('keyup', function (e) {
109                        if(!customSelectSpan.hasClass(getClass('Open'))){
110                            $select.blur();
111                            $select.focus();
112                        }else{
113                            if(e.which==13||e.which==27||e.which==9){
114                                changed($select,customSelectSpan);
115                            }
116                        }
117                    })
118                    .on('mousedown', function (e) {
119                        customSelectSpan.removeClass(getClass('Changed'));
120                    })
121                    .on('mouseup', function (e) {
122                        
123                        if( !customSelectSpan.hasClass(getClass('Open'))){
124                            // if FF and there are other selects open, just apply focus
125                            if($('.'+getClass('Open')).not(customSelectSpan).length>0 && typeof InstallTrigger !== 'undefined'){
126                                $select.focus();
127                            }else{
128                                customSelectSpan.addClass(getClass('Open'));
129                                e.stopPropagation();
130                                $(document).one('mouseup.'+getClass('Open'), function (e) {
131                                    if( e.target != $select.get(0) && $.inArray(e.target,$select.find('*').get()) < 0 ){
132                                        $select.blur();
133                                    }else{
134                                        changed($select,customSelectSpan);
135                                    }
136                                });
137                            }
138                        }
139                    })
140                    .focus(function () {
141                        customSelectSpan.removeClass(getClass('Changed')).addClass(getClass('Focus'));
142                    })
143                    .blur(function () {
144                        customSelectSpan.removeClass(getClass('Focus')+' '+getClass('Open'));
145                    })
146                    .hover(function () {
147                        customSelectSpan.addClass(getClass('Hover'));
148                    }, function () {
149                        customSelectSpan.removeClass(getClass('Hover'));
150                    })
151                    .trigger('update');
152            });
153        }
154    });
155})(jQuery);