https://donate.concern.or.kr/static/js/jquery.nice-select.js

1/*  jQuery Nice Select - v1.1.0
2    https://github.com/hernansartorio/jquery-nice-select
3    Made by Hernán Sartorio  */
4
5(function($) {
6
7  $.fn.niceSelect = function(method) {
8
9	var jscroll;
10	var defaultHeight = "225px";
11
12    // Methods
13    if (typeof method == 'string') {
14      if (method == 'update') {
15        this.each(function() {
16          var $select = $(this);
17          var $dropdown = $(this).next('.nice-select');
18          var open = $dropdown.hasClass('open');
19
20          if ($dropdown.length) {
21            $dropdown.remove();
22            create_nice_select($select);
23
24            if (open) {
25              $select.next().trigger('click');
26            }
27          }
28        });
29      } else if (method == 'destroy') {
30        this.each(function() {
31          var $select = $(this);
32          var $dropdown = $(this).next('.nice-select');
33
34          if ($dropdown.length) {
35            $dropdown.remove();
36            $select.css('display', '');
37          }
38        });
39        if ($('.nice-select').length == 0) {
40          $(document).off('.nice_select');
41        }
42      } else {
43        //console.log('Method "' + method + '" does not exist.')
44      }
45      return this;
46    }
47
48    // Hide native select
49    this.hide();
50
51    // Create custom markup
52    this.each(function() {
53      var $select = $(this);
54
55      if (!$select.next().hasClass('nice-select')) {
56        create_nice_select($select);
57      }
58    });
59
60    function create_nice_select($select) {
61      $select.after($('<div></div>')
62        .addClass('nice-select')
63        .addClass($select.attr('class') || '')
64        .addClass($select.attr('disabled') ? 'disabled' : '')
65        .attr('tabindex', $select.attr('disabled') ? null : '0')
66        .html('<span class="current"></span><div class="list_wrap"><ul class="list"></ul></div>')
67      );
68
69
70
71      var $dropdown = $select.next();
72      var $options = $select.find('option');
73      var $selected = $select.find('option:selected');
74
75	//IE 11 에서 hidden element 의 outerWidth 값이 타 브라우저와 다름
76	if(!$dropdown.is(":visible") && navigator.userAgent.match(/Trident\/7\./))
77	{
78		$dropdown.find("div.list_wrap").css("width", $dropdown.width()  - getBorderWidth($dropdown) + 2);
79		var otWidth = $dropdown.width() - getBorderWidth($dropdown) + 2;
80
81	}else{
82		$dropdown.find("div.list_wrap").css("width", $dropdown.outerWidth() - getBorderWidth($dropdown) + 2);
83		var otWidth = $dropdown.outerWidth() - getBorderWidth($dropdown) + 2;
84	}
85
86
87	  //console.log($dropdown.find('ul'), $dropdown, $dropdown.find('ul').parent());
88		$dropdown.find('ul').css({
89			"width" : $dropdown.outerWidth() - getBorderWidth($dropdown)
90		});
91
92
93      $dropdown.find('.current').text($selected.data('display') || $selected.text());
94
95      $options.each(function(i) {
96        var $option = $(this);
97        var display = $option.data('display');
98
99        $dropdown.find('ul').append($('<li></li>')
100          .attr('data-value', $option.val())
101          .attr('data-display', (display || null))
102          .addClass('option' +
103            ($option.is(':selected') ? ' selected' : '') +
104            ($option.is(':disabled') ? ' disabled' : ''))
105          .text($option.text())
106        );
107      });
108
109		if($dropdown.find('li').length > 4)	{
110			var pane = $dropdown.find('ul').wrap('<div class="scroll-pane"></div>').parent();
111			var listWidth = $dropdown.find('.list_wrap').css("width");
112			pane.css({
113				'overflow' : 'hidden',
114				'height' : '225px',
115			});
116
117			pane.bind('jsp-initialised', function (e, _isScroll) {
118				isScroll = _isScroll;
119
120				if (isScroll) {
121					//non .jspPane scroll padding
122					var jspPane = pane.find('.jspPane');
123					jspPane.css('width', otWidth);
124
125				}
126
127				pane.find(".jspContainer").css("width", pane.find('.jspPane').width() - 2);
128				pane.css("width", pane.find('.jspPane').width());
129				pane.find(".jspHorizontalBar").hide();
130			});
131
132			pane.jScrollPane({});
133
134		}
135    }
136
137	function getBorderWidth(_target) {
138		//ie8- css 'border-left-width' 'border-right-width' default value 'medium'
139		var borderLeftWidth = parseInt(_target.css('border-left-width')) | 0;
140		var borderRightWidth = parseInt(_target.css('border-right-width')) | 0;
141
142		return borderLeftWidth + borderRightWidth;
143	}
144
145    /* Event listeners */
146
147    // Unbind existing events in case that the plugin has been initialized before
148    $(document).off('.nice_select');
149
150    // Open/close
151    $(document).on('click.nice_select', '.nice-select', function(event) {
152      var $dropdown = $(this);
153
154      $('.nice-select').not($dropdown).removeClass('open');
155      $dropdown.toggleClass('open');
156
157      if ($dropdown.hasClass('open')) {
158        $dropdown.find('.option');
159        $dropdown.find('.focus').removeClass('focus');
160        $dropdown.find('.selected').addClass('focus');
161      } else {
162        $dropdown.focus();
163      }
164    });
165
166    // Close when clicking outside
167    $(document).on('click.nice_select', function(event) {
168      if ($(event.target).closest('.nice-select').length === 0) {
169        $('.nice-select').removeClass('open').find('.option');
170      }
171    });
172
173    // Option click
174    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
175      var $option = $(this);
176      var $dropdown = $option.closest('.nice-select');
177
178      $dropdown.find('.selected').removeClass('selected');
179      $option.addClass('selected');
180
181      var text = $option.data('display') || $option.text();
182      $dropdown.find('.current').text(text);
183
184      $dropdown.prev('select').val($option.data('value')).trigger('change');
185    });
186
187    // Keyboard events
188    $(document).on('keydown.nice_select', '.nice-select', function(event) {
189      var $dropdown = $(this);

190      var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
191
192      // Space or Enter
193      if (event.keyCode == 32 || event.keyCode == 13) {
194        if ($dropdown.hasClass('open')) {
195          $focused_option.trigger('click');
196        } else {
197          $dropdown.trigger('click');
198        }
199        return false;
200      // Down
201      } else if (event.keyCode == 40) {
202        if (!$dropdown.hasClass('open')) {
203          $dropdown.trigger('click');
204        } else {
205          var $next = $focused_option.nextAll('.option:not(.disabled)').first();
206          if ($next.length > 0) {
207            $dropdown.find('.focus').removeClass('focus');
208            $next.addClass('focus');
209          }
210        }
211        return false;
212      // Up
213      } else if (event.keyCode == 38) {
214        if (!$dropdown.hasClass('open')) {
215          $dropdown.trigger('click');
216        } else {
217          var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
218          if ($prev.length > 0) {
219            $dropdown.find('.focus').removeClass('focus');
220            $prev.addClass('focus');
221          }
222        }
223        return false;
224      // Esc
225      } else if (event.keyCode == 27) {
226        if ($dropdown.hasClass('open')) {
227          $dropdown.trigger('click');
228        }
229      // Tab
230      } else if (event.keyCode == 9) {
231        if ($dropdown.hasClass('open')) {
232          return false;
233        }
234      }
235    });
236
237    // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
238    var style = document.createElement('a').style;
239    style.cssText = 'pointer-events:auto';
240    if (style.pointerEvents !== 'auto') {
241      $('html').addClass('no-csspointerevents');
242    }
243
244    // nice-select tabindex -1
245    $(document).ready(function() {
246      $('.scroll-pane').attr('tabindex','-1');
247    });
248
249    return this;
250
251  };
252
253}(jQuery));