https://www.survival.it/assets/controllers/numiko/donation_widget_controller-252e2df8.js

1/* 
2  TODO: Replace remaining querySelectors with stimulus targets
3*/
4
5import { Controller } from "@hotwired/stimulus"
6
7// Connects to data-controller="numiko--donation-widget"
8export default class extends Controller {
9  static targets = ['link', 'currencies', 'frequencies', 'amounts', 'customAmount']
10  static values = { defaultCurrency: String, defaultAmount: String, defaultFrequency: String }
11
12  connect () {
13    if (this.defaultFrequencyValue) {
14      let match = this.frequenciesTarget.querySelector(`input[value='${this.defaultFrequencyValue}']`)
15      if (match) { match.checked = true } else { this.frequenciesTarget.querySelector('input').checked = true }
16    } else { this.frequenciesTarget.querySelector('input').checked = true }
17    if (this.defaultCurrencyValue) {
18      let match = this.currenciesTarget.querySelector(`input[value='${this.defaultCurrencyValue}']`)
19      if (match) { match.checked = true } else { this.currenciesTarget.querySelector('input').checked = true }
20    } else { this.currenciesTarget.querySelector('input').checked = true }
21    if(this.defaultAmountValue) {
22      let match = this.amountsTarget.querySelector(`input[value='${this.defaultAmountValue}']`)
23      if (match) { match.checked = true } else { this.amountsTarget.querySelector('input').checked = true }
24    } else { this.amountsTarget.querySelector('input').checked = true }
25    this.#updateUrl();
26  }
27
28  amountSelected(e) {
29    this.linkTarget.dataset.amount = e.target.value;
30    this.customAmountTarget.value = ''
31    this.#updateUrl();
32  }
33
34  amountInputted(e) {
35    this.linkTarget.dataset.amount = e.target.value;
36    this.amountsTarget.querySelectorAll('input').forEach(elem => {
37      if (elem.value == this.linkTarget.dataset.amount) { elem.checked = true }
38      else { elem.checked = false }
39    });
40    this.#updateUrl();
41  }
42
43  currencySelected(e) {
44    this.linkTarget.dataset.currency = e.target.value;
45    this.#updateAmounts();
46    this.#updateUrl();
47  }
48
49  frequencySelected(e) {
50    this.linkTarget.dataset.frequency = e.target.value;
51    this.#updateAmounts();
52    this.#updateUrl();
53  }
54
55  #updateAmounts() {
56    var elem = this.linkTarget;
57    if (elem.dataset.currency.length > 0) {
58      var currentCurrencyCode = elem.dataset.currency;
59      var currentFrequency = elem.dataset.frequency;
60      var currencyElem = this.currenciesTarget.querySelector(`[data-currency-code='${currentCurrencyCode}']`);
61      var newAmounts = (currentFrequency === 'oneOff') ? JSON.parse(currencyElem.dataset.amountOneoff) : JSON.parse(currencyElem.dataset.amountRegular);
62      var labels = this.amountsTarget.querySelectorAll('label');
63      this.amountsTarget.querySelectorAll('input')
64        .forEach(function(elem, i) {
65          elem.value = newAmounts[i];
66          elem.id = newAmounts[i];
67          labels[i].setAttribute('for', newAmounts[i]);
68          labels[i].innerHTML = newAmounts[i];
69        });
70    }
71  }
72
73  #updateUrl() {
74    var elem = this.linkTarget;
75    var params = `?currency=${elem.dataset.currency}&amount=${elem.dataset.amount}&type=${elem.dataset.frequency}`;
76    var newUrl = `${elem.dataset.url}${params}&${elem.dataset.utms}`;
77    // only do this if EN domain!
78    if ((!['usd', 'cad'].includes(elem.dataset.currency)) && locale == 'en') { newUrl += '&l=gb'; }
79    elem.setAttribute('href', newUrl);
80  }
81
82  allowNumbersOnly(e) {
83    const keys = ['0','1','2','3','4','5','6','7','8','9','.', ','];
84    if (keys.indexOf(e.key) < 0) { return e.preventDefault(); }
85  }
86}