https://khakassia.travel/themes/js/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    // Methods
10    if (typeof method == 'string') {
11      if (method == 'update') {
12        this.each(function() {
13          var $select = $(this);
14          var $dropdown = $(this).next('.nice-select');
15          var open = $dropdown.hasClass('open');
16
17          if ($dropdown.length) {
18            $dropdown.remove();
19            create_nice_select($select);
20
21            if (open) {
22              $select.next().trigger('click');
23            }
24          }
25        });
26      } else if (method == 'destroy') {
27        this.each(function() {
28          var $select = $(this);
29          var $dropdown = $(this).next('.nice-select');
30
31          if ($dropdown.length) {
32            $dropdown.remove();
33            $select.css('display', '');
34          }
35        });
36        if ($('.nice-select').length == 0) {
37          $(document).off('.nice_select');
38        }
39      } else {
40        console.log('Method "' + method + '" does not exist.')
41      }
42      return this;
43    }
44
45    // Hide native select
46    this.hide();
47
48    // Create custom markup
49    this.each(function() {
50      var $select = $(this);
51
52      if (!$select.next().hasClass('nice-select')) {
53        create_nice_select($select);
54      }
55    });
56
57    function create_nice_select($select) {
58      $select.after($('<div></div>')
59          .addClass('nice-select')
60          .addClass($select.attr('class') || '')
61          .addClass($select.attr('disabled') ? 'disabled' : '')
62          .attr('tabindex', $select.attr('disabled') ? null : '0')
63          .html('<div class="current"></div><div class="list"><div class="scrollbar"></div></div>')
64      );
65
66      var $dropdown = $select.next();
67      var $options = $select.find('option');
68      var $selected = $select.find('option:selected');
69
70      var $selectedHtml = $selected.data('content');
71
72      if( $selectedHtml ){
73        $dropdown.find('.current').html( $selectedHtml );
74      } else {
75        $dropdown.find('.current').html($selected.data('display') || $selected.text());
76      }
77
78      if($selected.val() != 0) {
79        $dropdown.find('.current').addClass('selected');
80      }
81
82      $options.each(function(i) {
83        var $option = $(this);
84        var display = $option.data('display');
85        var html = $(this).data('content');
86
87        if( html ){
88          $dropdown.find('.scrollbar').append($('<div class="list_item"></div>')
89              .attr('data-value', $option.val())
90              .attr('data-display', (display || null))
91              .addClass('option' +
92                  ($option.is(':selected') ? ' selected' : '') +
93                  ($option.is(':disabled') ? ' disabled' : ''))
94              .html( html )
95          );
96        } else {
97          $dropdown.find('.scrollbar').append($('<div class="list_item"></div>')
98              .attr('data-value', $option.val())
99              .attr('data-display', (display || null))
100              .addClass('option' +
101                  ($option.is(':selected') ? ' selected' : '') +
102                  ($option.is(':disabled') ? ' disabled' : ''))
103              .html($option.text())
104          );
105        }
106      });
107    }
108
109    /* Event listeners */
110
111    // Unbind existing events in case that the plugin has been initialized before
112    $(document).off('.nice_select');
113
114    // Open/close
115    $(document).on('click.nice_select', '.nice-select', function(event) {
116      event.preventDefault()
117
118      var $dropdown = $(this);
119
120      $('.nice-select').not($dropdown).removeClass('open');
121      $dropdown.toggleClass('open');
122
123      if ($dropdown.hasClass('open')) {
124        $dropdown.find('.focus').removeClass('focus');
125        $dropdown.find('.selected').addClass('focus');
126
127        if( $(window).width() < 1024 ){
128          $('body').css('cursor', 'pointer')
129        }
130      } else {
131        $dropdown.focus();
132
133        if( $(window).width() < 1024 ){
134          $('body').css('cursor', 'default')
135        }
136      }
137    });
138
139    // Close when clicking outside
140    $(document).on('click.nice_select', function(event) {
141      if ($(event.target).closest('.nice-select').length === 0) {
142        $('.nice-select').removeClass('open').find('.option');
143      }
144    });
145
146    // Option click
147    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
148      var $option = $(this);
149      var $dropdown = $option.closest('.nice-select');
150
151      $dropdown.find('.selected').removeClass('selected');
152      $option.addClass('selected');
153
154      var text = $option.data('display') || $option.html();
155      $dropdown.find('.current').html(text).addClass('selected');
156
157      $dropdown.prev('select').val($option.data('value')).trigger('change');
158    });
159
160    // Keyboard events
161    $(document).on('keydown.nice_select', '.nice-select', function(event) {
162      var $dropdown = $(this);

163      var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
164
165      // Space or Enter
166      if (event.keyCode == 32 || event.keyCode == 13) {
167        if ($dropdown.hasClass('open')) {
168          $focused_option.trigger('click');
169        } else {
170          $dropdown.trigger('click');
171        }
172        return false;
173        // Down
174      } else if (event.keyCode == 40) {
175        if (!$dropdown.hasClass('open')) {
176          $dropdown.trigger('click');
177        } else {
178          var $next = $focused_option.nextAll('.option:not(.disabled)').first();
179          if ($next.length > 0) {
180            $dropdown.find('.focus').removeClass('focus');
181            $next.addClass('focus');
182          }
183        }
184        return false;
185        // Up
186      } else if (event.keyCode == 38) {
187        if (!$dropdown.hasClass('open')) {
188          $dropdown.trigger('click');
189        } else {
190          var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
191          if ($prev.length > 0) {
192            $dropdown.find('.focus').removeClass('focus');
193            $prev.addClass('focus');
194          }
195        }
196        return false;
197        // Esc
198      } else if (event.keyCode == 27) {
199        if ($dropdown.hasClass('open')) {
200          $dropdown.trigger('click');
201        }
202        // Tab
203      } else if (event.keyCode == 9) {
204        if ($dropdown.hasClass('open')) {
205          return false;
206        }
207      }
208    });
209
210    // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
211    var style = document.createElement('a').style;
212    style.cssText = 'pointer-events:auto';
213    if (style.pointerEvents !== 'auto') {
214      $('html').addClass('no-csspointerevents');
215    }
216
217    return this;
218
219  };
220
221}(jQuery));