https://www.dotloop.com/wp-content/themes/dotloop/assets/js/applic…rap-formhelpers-selectbox.js?ver=1774362128

1/* ==========================================================
2 * bootstrap-formhelpers-selectbox.js
3 * https://github.com/vlamanna/BootstrapFormHelpers
4 * ==========================================================
5 * Copyright 2012 Vincent Lamanna
6 *
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
10 *
11 * http://www.apache.org/licenses/LICENSE-2.0
12 *
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ========================================================== */
19
20+function ($) {
21
22  'use strict';
23
24
25  /* SELECTBOX CLASS DEFINITION
26   * ========================= */
27
28  var toggle = '[data-toggle=bfh-selectbox]',
29      BFHSelectBox = function (element, options) {
30        this.options = $.extend({}, $.fn.bfhselectbox.defaults, options);
31        this.$element = $(element);
32
33        this.initSelectBox();
34      };
35
36  BFHSelectBox.prototype = {
37
38    constructor: BFHSelectBox,
39
40    initSelectBox: function () {
41      var options;
42
43      options = '';
44      this.$element.find('div').each(function() {
45        options = options + '<li><a tabindex="-1" href="#" data-option="' + $(this).data('value') + '">' + $(this).html() + '</a></li>';
46      });
47
48      this.$element.html(
49        '<input type="hidden" name="' + this.options.name + '" value="">' +
50		'<a class="bfh-selectbox-toggle ' + this.options.input + '" role="button" data-toggle="bfh-selectbox" href="#">' +
51		'<span class="bfh-selectbox-option"></span>' +
52		'<span class="' + this.options.icon + ' selectbox-caret"></span>' +
53		'</a>' +
54		'<div class="bfh-selectbox-options">' +
55		'<div role="listbox">' +
56		'<ul role="option">' +
57		'</ul>' +
58		'</div>' +
59		'</div>'
60      );
61
62      this.$element.find('[role=option]').html(options);
63
64      if (this.options.filter === true) {
65        this.$element.find('.bfh-selectbox-options').prepend('<div class="bfh-selectbox-filter-container"><input type="text" class="bfh-selectbox-filter form-control"></div>');
66      }
67
68      this.$element.val(this.options.value);
69
70      this.$element
71        .on('click.bfhselectbox.data-api touchstart.bfhselectbox.data-api', toggle, BFHSelectBox.prototype.toggle)
72		.on('keydown.bfhselectbox.data-api', toggle + ', [role=option]' , BFHSelectBox.prototype.keydown)
73		.on('mouseenter.bfhselectbox.data-api', '[role=option]  li > a', BFHSelectBox.prototype.mouseenter)
74		.on('mouseenter.bfhselectbox.data-api', '[role=option]', BFHSelectBox.prototype.mouseenter)
75		.on('click.bfhselectbox.data-api', '[role=option]  li > a', BFHSelectBox.prototype.select)
76		.on('click.bfhselectbox.data-api', '.bfh-selectbox-filter', function () { return false; })
77                .on('click.bfhselectbox.data-api', '.mCSB_draggerContainer', function() { return false; })
78                .on('click.bfhselectbox.data-api', '.mCSB_scrollTools', function() { return false; })
79		.on('propertychange.bfhselectbox.data-api change.bfhselectbox.data-api input.bfhselectbox.data-api paste.bfhselectbox.data-api', '.bfh-selectbox-filter', BFHSelectBox.prototype.filter);
80    },
81
82    toggle: function (e) {
83      var $this,
84          $parent,
85          isActive;
86
87      $this = $(this);
88      $parent = getParent($this);
89
90      if ($parent.is('.disabled') || $parent.attr('disabled') !== undefined) {
91        return true;
92      }
93
94      isActive = $parent.hasClass('open');
95
96      clearMenus();
97
98      if (!isActive) {
99        $parent.trigger(e = $.Event('show.bfhselectbox'));
100
101        if (e.isDefaultPrevented()) {
102          return true;
103        }
104
105        $parent
106          .toggleClass('open')
107          .trigger('shown.bfhselectbox')
108          .find('[role=option]  li > [data-option="' + $parent.val() + '"]').focus();
109      } 
110
111      return false;
112    },
113
114    filter: function() {
115      var $this,
116          $parent,
117          $items;
118
119      $this = $(this);
120      $parent = getParent($this);
121
122      $items = $('[role=option] li a', $parent);
123      $items
124        .hide()
125        .filter(function() {
126          return ($(this).text().toUpperCase().indexOf($this.val().toUpperCase()) !== -1);
127        })
128        .show();
129    },
130
131    keydown: function (e) {
132      var $this,
133          $items,
134          $parent,
135          $subItems,
136          isActive,
137          index,
138          selectedIndex;
139
140      if (!/(38|40|27)/.test(e.keyCode)) {
141        return true;
142      }
143
144      $this = $(this);
145
146      e.preventDefault();
147      e.stopPropagation();
148
149      $parent = getParent($this);
150      isActive = $parent.hasClass('open');
151
152      if (!isActive || (isActive && e.keyCode === 27)) {
153        if (e.which === 27) {
154          $parent.find(toggle).focus();
155        }
156
157        return $this.click();
158      }
159
160      $items = $('[role=option] li:not(.divider) a:visible', $parent);
161
162      if (!$items.length) {
163        return true;
164      }
165
166      $('body').off('mouseenter.bfh-selectbox.data-api', '[role=option]  li > a', BFHSelectBox.prototype.mouseenter);
167      index = $items.index($items.filter(':focus'));
168
169      if (e.keyCode === 38 && index > 0) {
170        index = index - 1;
171      }
172
173      if (e.keyCode === 40 && index < $items.length - 1) {
174        index = index + 1;
175      }
176
177      if (!index) {
178        index = 0;
179      }
180
181      $items.eq(index).focus();
182      $('body').on('mouseenter.bfh-selectbox.data-api', '[role=option]  li > a', BFHSelectBox.prototype.mouseenter);
183    },
184
185    mouseenter: function () {
186      var $this;
187
188        $this = $(this);
189
190            $this.focus();
191    },
192
193    select: function (e) {
194      var $this,
195          $parent,
196          $span,
197          $input;
198
199      $this = $(this);
200
201      e.preventDefault();
202      e.stopPropagation();
203
204      if ($this.is('.disabled') || $this.attr('disabled') !== undefined) {
205        return true;
206      }
207
208      $parent = getParent($this);
209
210      $parent.val($this.data('option'));
211      $parent.trigger('change.bfhselectbox');
212
213      clearMenus();
214    }
215
216  };
217
218  function clearMenus() {
219    var $parent;
220
221    $(toggle).each(function (e) {
222      $parent = getParent($(this));
223
224      if (!$parent.hasClass('open')) {
225        return true;
226      }
227
228      $parent.trigger(e = $.Event('hide.bfhselectbox'));
229
230      if (e.isDefaultPrevented()) {
231        return true;
232      }
233
234      $parent
235        .removeClass('open')
236        .trigger('hidden.bfhselectbox');
237    });
238  }
239
240  function getParent($this) {
241    return $this.closest('.bfh-selectbox');
242  }
243
244
245  /* SELECTBOX PLUGIN DEFINITION
246   * ========================== */
247
248  var old = $.fn.bfhselectbox;
249
250  $.fn.bfhselectbox = function (option) {
251    return this.each(function () {
252      var $this,
253          data,
254          options;
255
256      $this = $(this);
257      data = $this.data('bfhselectbox');
258      options = typeof option === 'object' && option;
259      this.type = 'bfhselectbox';
260
261      if (!data) {
262        $this.data('bfhselectbox', (data = new BFHSelectBox(this, options)));
263      }
264      if (typeof option === 'string') {
265        data[option].call($this);
266      }
267    });
268  };
269
270  $.fn.bfhselectbox.Constructor = BFHSelectBox;
271
272  $.fn.bfhselectbox.defaults = {
273    icon: 'caret',
274    input: 'form-control',
275    name: '',
276    value: '',
277    filter: false
278  };
279
280
281  /* SELECTBOX NO CONFLICT
282   * ========================== */
283
284  $.fn.bfhselectbox.noConflict = function () {
285    $.fn.bfhselectbox = old;
286    return this;
287  };
288
289
290  /* SELECTBOX VALHOOKS
291   * ========================== */
292
293  var origHook;
294  if ($.valHooks.div){
295    origHook = $.valHooks.div;
296  }
297  $.valHooks.div = {
298    get: function(el) {
299      if ($(el).hasClass('bfh-selectbox')) {
300        return $(el).find('input[type="hidden"]').val();
301      } else if (origHook) {
302        return origHook.get(el);
303      }
304    },
305    set: function(el, val) {
306      var $el,
307          html;
308
309      if ($(el).hasClass('bfh-selectbox')) {
310
311        $el = $(el);
312        if ($el.find('li a[data-option=\'' + val + '\']').length > 0) {
313          html = $el.find('li a[data-option=\'' + val + '\']').html();
314        } else if ($el.find('li a').length > 0) {
315          html = $el.find('li a').eq(0).html();
316        } else {
317          val = '';
318          html = '';
319        }
320
321        $el.find('input[type="hidden"]').val(val);
322        $el.find('.bfh-selectbox-option').html(html);
323      } else if (origHook) {
324        return origHook.set(el,val);
325      }
326    }
327  };
328
329
330  /* SELECTBOX DATA-API
331   * ============== */
332
333  $(document).ready( function () {
334    $('div.bfh-selectbox').each(function () {
335      var $selectbox;
336
337      $selectbox = $(this);
338
339      $selectbox.bfhselectbox($selectbox.data());
340    });
341  });
342
343
344  /* APPLY TO STANDARD SELECTBOX ELEMENTS
345   * =================================== */
346
347  $(document)
348    .on('click.bfhselectbox.data-api', clearMenus);
349
350}(window.jQuery);