https://posljipaket.si/themes/custom/posljipaket_theme/js/select.js?v=1.x

1jQuery(document).ready( () => {
2    /* Opening the select bars*/
3  let init_custom_selects = () => {
4
5    const select_ul_items = document.querySelectorAll('.select-box-menu li')
6    const els = document.getElementsByClassName('select-wrapper');
7    const select_preview_item = document.querySelectorAll('.select-box-menu input');
8
9    if(els.length === 0 || select_ul_items.length === 0){
10        return;
11    }
12
13    for(const select of els){
14      select.addEventListener('click', (e) => {
15  
16        for(const secondSelect of els){
17          const selectBox = secondSelect.querySelector('.select-box');
18          if (selectBox && selectBox.classList.contains('active')) {
19            selectBox.classList.toggle('active');
20            secondSelect.querySelector('.select-box-menu').classList.toggle('d-none');
21          };
22        }
23  
24        select.querySelector('.select-box').classList.toggle('active');
25        select.querySelector('.select-box-menu').classList.toggle('d-none');
26
27        // Focus the input
28        if(select.querySelector('.select-box-preview')) {
29          select.querySelector('.select-box-preview').focus();
30        }
31        
32      })
33    }
34
35    let previewRerender = (e, preview, select_ul_items) => {
36      let val = e.target.value || preview.value;      
37      val = val.toLowerCase();
38      // Find values
39      for(const li of select_ul_items){
40        if(val) {
41          let li_val = li.innerText.toLowerCase();
42          if(li_val && li_val.indexOf(val) !== -1) {
43            li.classList.remove('d-none');
44          } else {
45            li.classList.add('d-none');
46          }
47        } else {
48          li.classList.remove('d-none');
49        }
50      }
51    }
52
53    $('#wpso_form').on('input', '.select-box-preview', function(e) {
54      previewRerender(e, jQuery(this), select_ul_items);
55    });
56
57    $('#summary-invoice-issue').on('input', '.select-box-preview', function(e) {
58      previewRerender(e, jQuery(this), select_ul_items);
59    });
60
61    for(const preview of select_preview_item) {
62      preview.addEventListener("input", (e) => {
63        previewRerender(e, preview, select_ul_items);
64      })
65      preview.addEventListener("click", (e) => {
66        let val = e.target.value || preview.value;
67        if(val) {
68          previewRerender(e, preview, select_ul_items);
69        }
70      })
71    }
72        
73    /* Changing the value of select bars*/
74    for(const li of select_ul_items){
75        li.addEventListener("click", () => {
76          const selectParent = li.parentNode.parentNode; //Parent of li is ul, Parent of ul is '.select',
77
78          //Change the values
79          const selected  = selectParent.querySelector('.select-selected');
80          selected.innerHTML = li.innerText;
81
82          const span  = selectParent.querySelector('span');
83          span.innerHTML = li.innerText;
84          const input  = selectParent.querySelector('input[type="hidden"]');
85          input.value = li.attributes.cid.value;
86
87          input.dispatchEvent(new Event('change'));
88        })
89    }
90
91    /* Closing the select bars*/
92    function closeAllSelect(element) {
93  
94    if(element.target.className === 'select' || element.target.className === 'select-box' || 
95        element.target.className.includes('select-wrapper')){
96        return;
97    }
98        const selectBox = document.getElementsByClassName("select-box");
99        const selectBoxMenu = document.getElementsByClassName("select-box-menu");
100        const length = selectBox.length;
101        for (let i = 0; i < length; i++) {
102            selectBox[i].classList.remove("active");
103            selectBox[i].style.height = null;
104            selectBoxMenu[i].classList.add("d-none");
105        }
106    }
107
108    document.addEventListener("click", closeAllSelect);
109  }
110
111  init_custom_selects();
112
113  jQuery(document).ajaxComplete(function(e) {
114    if(!document.querySelector("#currentStep")) return;
115
116    step = document.querySelector("#currentStep").value
117
118    if(step == 1){
119      init_custom_selects();
120      custom_select_inputs_init();
121
122      // Check if parcel_locker field is set and set our custom select
123      let curVal = jQuery('[name="parcel_locker"]').val();
124      let txt = $( '[name="parcel_locker"] option:selected' ).text();
125
126      if(curVal) {
127        jQuery('#select-box-dispatch_pl .select-selected').text(txt);
128        jQuery('#select-box-dispatch_pl span').text(txt);
129        jQuery('#select-box-dispatch_pl input[type=hidden]').text(curVal);
130      }
131    } else if(step == 2) {
132      init_custom_selects();
133      custom_select_inputs_init();
134
135      // Check if parcel_locker field is set and set our custom select
136      let curVal = jQuery('[name="delivery_parcel_locker"]').val();
137      let txt = $( '[name="delivery_parcel_locker"] option:selected' ).text();
138
139      if(curVal) {
140        jQuery('#select-box-delivery_pl .select-selected').text(txt);
141        jQuery('#select-box-delivery_pl span').text(txt);
142        jQuery('#select-box-delivery_pl input[type=hidden]').text(curVal);
143      }
144    }
145  });
146
147  var custom_select_inputs_init = () => {
148    // Drupal freaking sanitizes HTML - Add search input by hand
149    let dispatchPlEl    = jQuery("#select-box-dispatch_pl");
150    let deliveryPlEl    = jQuery("#select-box-delivery_pl");
151    let priceListEl1    = jQuery("#select-box-countrySelect1");
152    let priceListEl2    = jQuery("#select-box-countrySelect2");
153    let summaryInputEl  = jQuery("#select-box-company_select_id");
154    
155    if(summaryInputEl.length) {
156      let preview = jQuery("#select-box-company_select_id .select-box-preview"); 
157      if(! preview.length) {
158          jQuery("#select-box-company_select_id ul").prepend('<input name="company_

158select_id_preview" class="select-box-preview" type="text" value="" />')
159      }
160      let dispatch_pl = jQuery("#company_select_id");
161      if(! dispatch_pl.length) {
162          jQuery("#select-box-company_select_id .select").prepend('<input name="company_select_id" class="company_select_id_select_from" id="company_select_id" type="hidden" value="0">');    
163          document.querySelector("#company_select_id").addEventListener('change', set_dispatch_pl);
164      }
165  }
166
167    if(dispatchPlEl.length) {
168        let preview = jQuery("#select-box-dispatch_pl .select-box-preview"); 
169        if(! preview.length) {
170            jQuery("#select-box-dispatch_pl ul").prepend('<input name="dispatch_pl_preview" class="select-box-preview" type="text" value="" />')
171        }
172        let dispatch_pl = jQuery("#dispatch_pl");
173        if(! dispatch_pl.length) {
174            jQuery("#select-box-dispatch_pl .select").prepend('<input name="dispatch_pl" class="dispatch_pl_select_from" id="dispatch_pl" type="hidden" value="0">');    
175            document.querySelector("#dispatch_pl").addEventListener('change', set_dispatch_pl);
176        }
177    }
178
179    if(deliveryPlEl.length) {
180      let preview = jQuery("#select-box-delivery_pl .select-box-preview"); 
181      if(! preview.length) {
182          jQuery("#select-box-delivery_pl ul").prepend('<input name="delivery_pl_preview" class="select-box-preview" type="text" value="" />')
183      }
184      let delivery_pl = jQuery("#delivery_pl");
185      if(! delivery_pl.length) {
186          jQuery("#select-box-delivery_pl .select").prepend('<input name="delivery_pl" class="delivery_pl_select_from" id="delivery_pl" type="hidden" value="0">');
187          document.querySelector("#delivery_pl").addEventListener('change', set_delivery_pl);
188      }
189    }
190
191    if(priceListEl1.length) {      
192      let preview = jQuery("#select-box-countrySelect1 .select-box-preview"); 
193      if(! preview.length) {
194          jQuery("#select-box-countrySelect1 ul").prepend('<input name="countrySelect1_preview" class="select-box-preview" type="text" value="" />')
195      }
196      let countrySelect1 = jQuery("#countrySelect1");
197      if(! countrySelect1.length) {
198          jQuery("#select-box-countrySelect1 .select").prepend('<input name="countrySelect1" class="countrySelect1_select_from" id="countrySelect1" type="hidden" value="0">');
199      }
200    }
201    if(priceListEl2.length) {        
202      let preview = jQuery("#select-box-countrySelect2 .select-box-preview"); 
203      if(! preview.length) {
204          jQuery("#select-box-countrySelect2 ul").prepend('<input name="countrySelect2" class="select-box-preview" type="text" value="" />')
205      }
206      let countrySelect1 = jQuery("#countrySelect2");
207      if(! countrySelect1.length) {
208          jQuery("#select-box-countrySelect2 .select").prepend('<input name="countrySelect2" class="countrySelect2_select_from select-box-preview" id="countrySelect2" type="hidden" value="0">');
209      }
210    }
211  }
212  custom_select_inputs_init();
213
214
215  $('#dispatch_pl').on('change', function() {
216     set_dispatch_pl();
217  });
218
219  $('#delivery_pl').on('change', function() {
220    set_delivery_pl();
221  });
222
223  $('#company_select_id').on('change', function() {
224    console.log("Changed");
225    set_summary_company();
226 });
227
228  var set_dispatch_pl = () => {
229    let val = jQuery("#select-box-dispatch_pl input[type=hidden]").val();
230
231    jQuery('[name="parcel_locker"]  option[value="' + val + '"]').prop("selected", true);
232    jQuery('[name="parcel_locker"]').val(val);
233    jQuery('[name="parcel_locker"]').trigger("change");
234
235  }
236  var set_delivery_pl = () => {
237    let val = jQuery("#select-box-delivery_pl input[type=hidden]").val();
238    jQuery('[name="delivery_parcel_locker"]  option[value="' + val + '"]').prop("selected", true);
239    jQuery('[name="delivery_parcel_locker"]').val(val);
240    jQuery('[name="delivery_parcel_locker"]').trigger("change");
241  }
242
243  var set_summary_company = () => {
244    console.log("set summary company");
245    let val = jQuery("#select-box-company_select_id input[type=hidden]").val();
246    console.log(val);
247    jQuery('[name="company-id"]  option[value="' + val + '"]').prop("selected", true);
248    jQuery('[name="company-id"]').val(val);
249    jQuery('[name="company-id"]').trigger("change");
250  }
251
252  // If path is /vracila
253  if(window.location.href.indexOf("/vracila") > -1) {
254      jQuery.ajax({
255        dataType : "json",
256        url : `/api/returnsdata`,
257        success: function(resp) {
258            if(resp && jQuery("#vracila-select-box-options-wrapper").length) {
259                let options_container = jQuery("#vracila-select-box-options-wrapper");
260                options_container.html('');
261
262                let startValue = `<input name="company_preview" class="select-box-preview" type="text" value="">
263                <li class="select-selected">${window.location.href.indexOf("/en/") > -1 ? 'Select' : 'Izberi'}</li>`;
264
265                const htmlWithInitial = resp.reduce((acc, cv) => acc + (`<li cid="${cv.id}">${cv.name}</li>`), startValue);
266
267                options_container.html(htmlWithInitial);
268
269                init_custom_selects();
270            }
271        }
272      });
273  }
274});