https://www.hawaiiactivities.com/ac2020/js/vcustom-select.js?1790902930

1(function($){
2
3  var defaults = {
4    borderRadius: false, //true or false
5    icon: '', //empty or class name based on vds
6    iconSize: '20', // any size depending on vds
7    theme: 'default', // default (gray) and blue
8    childPosition: 'top', // top and bottom
9    hasRedirect: false,
10  }
11
12  var newSelect = function (element, options) {
13    this.element = element;
14    this.options = options;
15    this.construct();
16    this._setListener();
17  }
18
19  function closeAllSelect(newElement) {
20    /*a function that will close all select boxes in the document,
21    except the current select box:*/
22    //i is counter
23    //x is the child element
24    //y is the selected element to show.
25    // array to check
26    var x, y, i;
27    var arrNo = [];
28    x = $('.select-items');
29    y = $('.select-selected');
30    for(i = 0; i < y.length; i++){
31      if(newElement == y[i]){
32        arrNo.push(i);
33      }else{
34        y.eq(i).removeClass("select-arrow-active");
35      }
36    }
37    for(i = 0; i < x.length; i++){
38      if(arrNo.indexOf(i)){
39        x.eq(i).addClass("select-hide");
40      }
41    }
42  }
43
44  newSelect.prototype = {
45    constructor: newSelect,
46
47    construct: function(){
48      var _this = this.element;
49
50      this.insertParentElement(_this);
51    },
52    _setListener: function() {
53      document.addEventListener("click", closeAllSelect);
54    },
55    setBorderRadius: function(newElement) {
56      $(newElement).addClass('rounded-4');
57    },
58    setIcon: function(newElement) {
59      if(this.options.iconSize == '' || this.options.iconSize == undefined) {
60        this.options.iconSize = 20;
61      }
62
63      $(newElement).prepend('<i class="'+this.options.icon+' icon-'+this.options.iconSize+' icon-gray mr-12"></i>');
64    },
65    setTheme: function(element) {
66      $(element).addClass("theme-"+this.options.theme);
67    },
68    setPosition: function(returnChildElement, newElement) {
69      $(returnChildElement).addClass('child-'+this.options.childPosition);
70
71      if(this.options.theme == '' || this.options.theme == 'blue') {
72        $(newElement).addClass('child-'+this.options.childPosition);
73      }
74
75    },
76    setLink: function(gChildElement, selElement, j) {
77      gChildElement.setAttribute('href', selElement.options[j].getAttribute('data-href'));
78    },
79    insertParentElement: function(_this) {
80      for(var i = 0; i < _this.length; i++){
81        var getCurrency = _this[i].getElementsByTagName('select')[0].getAttribute('data-current');
82        var selElement = _this[i].getElementsByTagName('select')[0];
83        var newElement = document.createElement('div');
84        newElement.setAttribute('class', 'select-selected fs-16 d-flex align-items-center');
85
86        if(this.options.borderRadius === true) {
87          this.setBorderRadius(newElement);
88        }
89
90        $(newElement).append('<div class="selected-value"></div>');
91        $(newElement).find('.selected-value').text(getCurrency);
92
93        _this[i].appendChild(newElement);
94
95        if(this.options.icon != '' || this.options.icon == undefined) {
96          this.setIcon(newElement);
97        }
98
99        if(this.options.theme != 'blue' || this.options.theme == undefined) {
100          this.setTheme(newElement);
101        }
102
103        var returnChildElement = this.insertChildElement();
104        this.setPosition(returnChildElement, newElement);
105        this.insertOptions(_this, i, selElement, newElement, returnChildElement);
106      }
107    },
108    insertChildElement: function() {
109      var childElement = document.createElement('div');
110      childElement.setAttribute('class',"select-items select-hide fs-14 mb-0");
111
112      if(this.options.theme != 'blue' || this.options.theme == undefined) {
113        this.setTheme(childElement);
114      }
115
116      return childElement;
117    },
118    insertGrandChildElement: function(selElement,j){
119      var gChildElement = document.createElement('a');
120      if(this.options.hasRedirect === true){
121        this.setLink(gChildElement, selElement, j);
122      }
123      gChildElement.innerHTML = selElement.options[j].innerHTML;
124      return gChildElement;
125    },
126    insertOptions: function(_this, i, selElement, newElement, returnChildElement) {
127      for(var count = 0; count < selElement.length; count++){
128        var returnGChildElement = this.insertGrandChildElement(selElement,count);
129        this.updateOriginal(returnGChildElement); // event
130        returnChildElement.appendChild(returnGChildElement);
131      }
132      _this[i].appendChild(returnChildElement);
133      this.closeSelect(newElement); // event
134    },
135    updateOriginal: function(returnGChildElement) {
136      returnGChildElement.addEventListener('click', function(){
137        /*when an item is clicked, update the original select box,
138        and the selected item:*/
139        var q, w, e, r, t;
140        // w and e are counter. 
141        //r is select tag
142        //t is the previous sibling of current element, in this case 'select-selected'
143        //q is get the current selected div
144        r = this.parentNode.parentNode.getElementsByTagName('select')[0];
145        t = $(this).parent().prev();
146        for(w = 0; w < r.length; w++) {
147          if(r.options[w].innerHTML == this.innerHTML){
148            r.selectedIndex = w;
149            t.addClass('selected').find('.selected-value').text(this.innerHTML);
150            q = this.parentNode.getElementsByClassName('same-as-selected');
151            for(e = 0; e < q.length; e++){
152              q[e].removeAttribute('class');
153            }
154            this.setAttribute('class','same-as-selected');
155            break;
156          }
157        }
158        t.click();
159      });
160    },
161    closeSelect: function(newElement) {
162      newElement.addEventListener('click', function(e){
163        /*when the select box is clicked, close any other select boxes,
164        and open/close the current select box:*/
165        e.stopPropagation();
166        closeAllSelect(newElement);
167        $(this).next().toggleClass('select-hide'); //clicked and hide/show div
168        $(this).toggleClass('select-arrow-active'); // show which is active.
169      });
170    },
171  }
172
173  $.fn.vcustomselect = function(options) {
174    var implementOptions = $.extend(true, {}, defaults, options)
175    var vcustomselect = new newSelect($(this), implementOptions);

176    return vcustomselect;
177  };
178
179})(jQuery);