https://www.dphtrading.com/scripts/modal.js?v=y2nAiyu-wlRRyTPGtAYWLo3niBSZ2MsLnOoRaXyTH78

1dph.modal = {
2  consts: {
3    formLocalization: null,
4    modalTriggers: document.getElementsByClassName(''),
5    modalContainer: document.getElementById('modal-content'),
6  },
7  closeModal: function () {
8    var scrollY = document.body.getAttribute('data-scroll-position');
9    document.body.style.top = '';
10    document.body.classList.remove('no-scroll');
11    if (scrollY) {
12      window.scrollTo({ top: parseInt(scrollY), behavior: 'instant' });
13    }
14    MicroModal.close('modal-popup');
15  },
16  init: function () {
17    MicroModal.init({
18      awaitCloseAnimation: true,
19    });
20
21    document.addEventListener('click', function (e) {
22      if (e.target && e.target.classList.contains('modal-trigger')) {
23        e.preventDefault();
24        e.stopPropagation();
25        dph.modal.showModal(e.target);
26      }
27    });
28
29    var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
30    if (isTouchDevice) {
31      document.addEventListener(
32        'touchend',
33        function (e) {
34          var target = e.target;
35          var closeButton = target.hasAttribute('data-micromodal-close')
36            ? target
37            : target.closest('button[data-micromodal-close]');
38
39          if (closeButton) {
40            e.preventDefault();
41            setTimeout(function () {
42              dph.modal.closeModal();
43            }, 10);
44          }
45        },
46        { passive: false }
47      );
48    }
49
50    document.getElementById('modal-content').addEventListener('click', function (ev) {
51      if (ev.target.id == 'feedback-submit' || ev.target.parentNode.id == 'feedback-submit') {
52        ev.preventDefault();
53
54        var button = ev.target.id == 'feedback-submit' ? ev.target.id : ev.target.parentNode;
55
56        if (button.getAttribute('disabled')) {
57          return;
58        }
59
60        if (dph.forms.validateFormFields(document.getElementById('feedback-modal'))) {
61          button.querySelector('.button-content').classList.add('hidden');
62          button.querySelector('.button-spinner').classList.add('show');
63          button.setAttribute('disabled', '');
64          dph.sendFeedback(document.getElementById('feedback-modal'));
65        }
66      }
67    });
68
69    document.getElementById('modal-content').addEventListener('click', function (ev) {
70      if (ev.target.id == 'query-submit' || ev.target.parentNode.id == 'query-submit') {
71        ev.preventDefault();
72
73        var button = ev.target.id == 'query-submit' ? ev.target : ev.target.parentNode;
74
75        if (button.getAttribute('disabled')) {
76          return;
77        }
78
79        if (dph.forms.validateFormFields(document.getElementById('product-query'))) {
80          button.querySelector('.button-content').classList.add('hidden');
81          button.querySelector('.button-spinner').classList.add('show');
82          button.setAttribute('disabled', '');
83          dph.productpage.sendInquiry(document.getElementById('product-query'));
84        }
85      }
86    });
87    
88
89    document.getElementById('modal-content').addEventListener('click', function (ev) {
90      if (ev.target.id == 'modal-alert-signup' || ev.target.parentNode.id == 'modal-alert-signup') {
91        ev.preventDefault();
92
93        if (!dph.forms.validateFormFields(document.getElementById('modal-content').querySelector('#inform-me-form'))) {
94          return;
95        }
96
97        dph.productpage.addToInformMe();
98      }
99    });
100
101    
102    document.getElementById('modal-content').addEventListener('click', function (ev) {
103      if (ev.target.classList.contains('currency-label') || ev.target.parentNode.classList.contains('currency-label')) {
104        let currencyOptions = document.getElementsByClassName('currency-option');
105
106        Array.prototype.slice.call(currencyOptions).forEach(function (element) {
107          element.classList.remove('active');
108        });
109
110        if (ev.target.classList.contains('currency-label')) {
111          ev.target.parentNode.classList.add('active');
112        } else {
113          ev.target.parentNode.parentNode.classList.add('active');
114        }
115      }
116    });
117
118    document.getElementById('modal-content').addEventListener('click', function (ev) {
119      if (ev.target.parentNode.classList.contains('visibility')) {
120        let passwordField = ev.target.parentNode.parentNode.querySelector('input');
121
122        ev.target.classList.remove('active');
123
124        for (let sibling of ev.target.parentNode.children) {
125          if (sibling !== ev.target) {
126            sibling.classList.add('active');
127
128            if (sibling.classList.contains('hidden')) {
129              passwordField.type = 'password';
130            } else {
131              passwordField.type = 'text';
132            }
133          }
134        }
135      }
136    });
137
138    document.getElementById('modal-content').addEventListener('click', function (ev) {
139      if (ev.target.id == 'request-password') {
140        document.getElementById('login-registration').classList.remove('active');
141        document.getElementById('forgot-password').classList.add('active');
142      } else if (ev.target.id == 'return-login') {
143        document.getElementById('forgot-password').classList.remove('active');
144        document.getElementById('login-registration').classList.add('active');
145      }
146    });
147  },
148  setModalContent: function (content) {
149    dph.modal.consts.modalContainer.innerHTML = content;
150  },
151  showModal: function (e) {
152    var modalToLoad = e.getAttribute('data-modal');
153    var returnUrl = e.getAttribute('data-return');
154    var xhr = new XMLHttpRequest();
155
156    xhr.onload = function () {
157      if (xhr.status >= 200 && xhr.status < 300) {
158        dph.modal.setModalContent(xhr.response);
159
160        const maskedInputs = document.querySelectorAll('.masked');
161

162        Array.prototype.slice.call(maskedInputs).forEach(function (elem) {
163          let type = elem.getAttribute('data-masktype');
164
165          if (type !== '') {
166            switch (type) {
167              case 'cvc':
168                Inputmask({ mask: '999' }).mask(elem);
169                break;
170              case 'cardnumber':
171                Inputmask({ mask: '9999 9999 9999 9999 9999' }).mask(elem);
172                break;
173              case 'monthyear':
174                Inputmask({ alias: 'datetime', placeholder: '_' }).mask(elem);
175                break;
176            }
177          }
178        });
179
180        const datepickers = document.querySelectorAll('.datepicker-field');
181
182        Array.prototype.slice.call(datepickers).forEach(function (elem) {
183          let datepicker = new Datepicker(elem, {
184            autohide: true,
185            format: 'dd/mm/yyyy',
186            maxDate: moment(new Date()).subtract(15, 'years').format('DD/MM/YYYY'),
187            clearBtn: true,
188            startView: 2,
189            minDate: new Date(1920, 0, 1),
190          });
191        });
192
193        var formRadios = document.querySelectorAll('.form-radio');
194
195        Array.prototype.slice.call(formRadios).forEach(function (formRadio) {
196          formRadio.addEventListener('change', function (ev) {
197            var formOptions = document.querySelectorAll('.form-option');
198
199            Array.prototype.slice.call(formOptions).forEach(function (element) {
200              element.classList.remove('active');
201            });
202
203            this.parentNode.classList.add('active');
204
205            var forms = document.querySelectorAll('.form');
206
207            Array.prototype.slice.call(forms).forEach(function (form) {
208              if (form.id != 'forgotten-password-form') {
209                form.classList.remove('active');
210              }
211            });
212
213            document.querySelector('.form[data-section="' + this.value + '"]').classList.add('active');
214            var formFields = dph.modal.consts.modalContainer.querySelectorAll('.form-control');
215            dph.forms.resetFormFieldErrors(formFields);
216          });
217        });
218
219        var formFields = dph.modal.consts.modalContainer.querySelectorAll('.form-control');
220
221        Array.prototype.slice.call(formFields).forEach(function (field) {
222          field.addEventListener('input', function () {
223            dph.forms.resetFormFieldErrors(formFields);
224          });
225        });
226
227        Array.prototype.slice
228          .call(document.getElementById('modal-content').querySelectorAll('.dropdown-select'))
229          .forEach(function (dropdown) {
230            NiceSelect.bind(dropdown, { placeholder: dropdown.getAttribute('data-placeholder') });
231          });
232
233        MicroModal.show('modal-popup', {
234          onShow: function () {
235            var scrollY = window.scrollY;
236            document.body.classList.add('no-scroll');
237            document.body.style.top = '-' + scrollY + 'px';
238            document.body.setAttribute('data-scroll-position', scrollY);
239          },
240          onClose: function () {
241            var scrollY = document.body.getAttribute('data-scroll-position');
242            document.body.style.top = '';
243            document.body.classList.remove('no-scroll');
244            if (scrollY) {
245              window.scrollTo({ top: parseInt(scrollY), behavior: 'instant' });
246            }
247          },
248        });
249      }
250    };
251
252    xhr.open(
253      'GET',
254      '/umbraco/surface/modalsurface/' +
255        modalToLoad +
256        '?culture=' +
257        dph.consts.siteLanguage +
258        '&returnUrl=' +
259        returnUrl +
260        '&cacheBuster=' +
261        Math.random()
262    );
263    xhr.send();
264  },
265  setAndShowModalContent: function (content) {
266    dph.modal.consts.modalContainer.innerHTML = content;
267    MicroModal.show('modal-popup', {
268      onShow: function () {
269        var scrollY = window.scrollY;
270        document.body.classList.add('no-scroll');
271        document.body.style.top = '-' + scrollY + 'px';
272        document.body.setAttribute('data-scroll-position', scrollY);
273      },
274      onClose: function () {
275        var scrollY = document.body.getAttribute('data-scroll-position');
276        document.body.style.top = '';
277        document.body.classList.remove('no-scroll');
278        if (scrollY) {
279          window.scrollTo({ top: parseInt(scrollY), behavior: 'instant' });
280        }
281      },
282    });
283  },
284  showToast: function (content) {
285    let toast = document.getElementById('toast-notification');
286    if (!toast) {
287      toast = document.createElement('div');
288      toast.id = 'toast-notification';
289      toast.innerHTML = '<div class="toast-close">&times;</div><div class="toast-content"></div>';
290      document.body.appendChild(toast);
291
292      toast.querySelector('.toast-close').addEventListener('click', function () {
293        toast.classList.remove('active');
294      });
295    }
296
297    toast.querySelector('.toast-content').innerHTML = content;
298    toast.style.display = 'flex';
299
300    toast.offsetHeight;
301    toast.classList.add('active');
302
303    setTimeout(function () {
304      toast.classList.remove('active');
305      setTimeout(function () {
306        toast.style.display = 'none';
307      }, 300);
308    }, 5000);
309  },
310};
311
312domready(function () {
313  dph.modal.init();
314});