https://twr.org/Contributions/js/frontend/modules/SliderGiving.js?1789539203

1jQuery.namespace('SS.com.Contributions.frontend.modules');
2
3SS.com.Contributions.frontend.modules.SliderGiving = function(config) {
4    this.module = config.module;
5    this.settings = config.settings;
6    this.init();
7};
8
9SS.com.Contributions.frontend.modules.SliderGiving.prototype = {
10
11    /**
12     * @param {Object} config
13     */
14    init: function (config) {
15        var me = this;
16
17        // this.settings = config.settings;
18        // this.module = config.module;
19
20        this.rangeInputEl = this.module.find('input[type="range"]');
21        this.multiplierNumberEl = this.module.find('.reach .number');
22        this.currencyEl = this.module.find('.currency');
23
24        this.form = this.module.find('form');
25        this.amountInputEl = this.module.find('input.amount');
26        this.currencyInputEl = this.module.find('input[name="currency"]');
27
28        this.defaultValue = parseInt(this.settings['default_value']);
29        this.currentAmount = this.defaultValue;
30        this.updateAmountInputField = false;
31
32        this.selectedCurrencyIndex = 0;
33        this.selectedCurrency = this.settings.currencies['label'][this.selectedCurrencyIndex];
34        this.selectedSymbol = this.settings.currencies['symbol'][this.selectedCurrencyIndex];
35        this.selectedMultiplier = this.settings.currencies['multiplier'][this.selectedCurrencyIndex];
36
37        this.rangeInputEl.rangeslider({
38            polyfill: false,
39            onSlide: function (position, value) {
40                me.onSlideHandler(value);
41            }
42        });
43
44        this.currencyEl.click(function (event) {
45            me.onCurrencyClickHandler(event);
46        });
47
48        this.form.on('submit', function (event) {
49            me.onSubmitHandler(event);
50        });
51
52        this.amountInputEl.on('keyup', function () {
53            me.updateAmountInputField = false;
54            me.rangeInputEl.val(me.getValueFromAmount(this.value)).change();
55            me.updateAmountInputField = true;
56            
57            me.currentAmount = this.value;
58            me.setMultiplierNumber();
59            me.setCurrency();
60        });
61
62        $(window).on('load', function() {
63            if(me.defaultValue) {
64                var sliderValue = me.getValueFromAmount(me.defaultValue);
65
66                me.rangeInputEl.val(sliderValue).change();
67                me.rangeInputEl.rangeslider('update', true);
68
69                // Force default amount because the slider will have a slight error
70                me.currentAmount = me.defaultValue;
71                me.setMultiplierNumber();
72                me.setCurrency();
73                
74                me.updateAmountInputField = false;
75                me.amountInputEl.val(me.defaultValue);
76                me.updateAmountInputField = true;
77            }
78        });
79    },
80    
81    getValueFromAmount: function(amount) {
82        var value;
83        var percentage = 0;
84        
85        if (amount <= 50) {
86            value = amount;
87
88        } else if (amount > 50 && amount <= 100) {
89            percentage = ((amount - 50) * 100) / 50;
90            value = 50 + (percentage * 25)/100;
91
92        } else if (amount > 100 && amount <= 250) {
93            percentage = ((amount - 100) * 100) / 150;
94            value = 75 + (percentage * 25)/100;
95
96        } else if (amount > 250 && amount <= 500) {
97            percentage = ((amount - 250) * 100) / 250;
98            value = 100 + (percentage * 25)/100;
99
100        } else if (amount > 500 && amount <= 1000) {
101            percentage = ((amount - 500) * 100) / 500;
102            value = 125 + (percentage * 25)/100;
103        } else {
104            value = amount;
105        }
106        
107        return Math.floor(value);
108    },
109
110    onSlideHandler: function (value) {
111        this.currentAmount = 0;
112        var percentage = 0;
113        
114        if (value <= 50) {
115            this.currentAmount = value;
116            
117        } else if (value > 50 && value <= 75) {
118            percentage = 4 * value - 4 * 50;
119            this.currentAmount = 50 + (percentage * 50)/100;
120            
121        } else if (value > 75 && value <= 100) {
122            percentage = 4 * value - 4 * 75;
123            this.currentAmount = 100 + (percentage * 150)/100;
124            
125        } else if (value > 100 && value <= 125) {
126            percentage = 4 * value - 4 * 100;
127            this.currentAmount = 250 + (percentage * 250)/100;
128            
129        } else if (value > 125 && value <= 147) { // 3 less so 1000 has more room to be selected
130            percentage = 4 * value - 4 * 125;
131            this.currentAmount = 500 + (percentage * 500)/100;
132            
133        } else if (value > 147 && value <= 150) {
134            this.currentAmount = 1000;
135
136        }
137        
138        if(this.updateAmountInputField) {
139            this.amountInputEl.val(this.currentAmount);
140
141            if (this.currentAmount === 0) {
142                this.amountInputEl.val('');
143                this.amountInputEl.focus();
144            }
145        }
146        
147        this.setMultiplierNumber();
148        this.setCurrency();
149    },
150    
151    onCurrencyClickHandler: function (event) {
152        this.selectedCurrencyIndex = this.currencyEl.index(event.target);
153
154        this.selectedCurrency = this.settings.currencies['label'][this.selectedCurrencyIndex];
155        this.selectedSymbol = this.settings.currencies['symbol'][this.selectedCurrencyIndex];
156        this.selectedMultiplier = this.settings.currencies['multiplier'][this.selectedCurrencyIndex];
157
158        if (!this.selectedSymbol) {
159            this.selectedSymbol = '$';
160        }
161
162        this.currencyEl.removeClass('selected');
163        $(event.target).addClass('selected');
164
165        this.setCurrency();
166        this.setMultiplierNumber();
167    },
168
169    onSubmitHandler: function (event) {
170        var rawAmount = this.amountInputEl.val(),
171            amount = parseInt(rawAmount),
172            minAmount = this.amountInputEl.attr('min') || 1,
173            errorMessage;
174
175        if (!$.isNumeric(rawAmount) || amount < minAmount) {
176
177            if (!$.isNumeric(rawAmount)) {
178                errorMessage = 'Please enter numeric value for amount.';
179            } else if (amount < minAmount) {
180                errorMessage = 'Minimum donation amount is $' + minAmount;
181            }
182
183            new SS.customAlert({
184                title: 'Donation Error',
185                cls: 'give-form-error-dialog',
186                msg: '<div class="tpl-error-message">' + errorMessage + '</div>',
187                buttons: {
188                    ok: {
189                        btnText: 'Ok'
190                    },
191                    cancel: false
192                }
193            });
194            
195            event.preventDefault();
196            return false;

197        }
198    },
199
200    setCurrency: function () {
201        this.module[0].style.setProperty("--currency-symbol", "'" + this.selectedSymbol + "'");
202        if (this.currentAmount < 1) {
203            this.module[0].style.setProperty("--handle-amount", "'" + this.selectedSymbol + "?'");
204        } else {
205            this.module[0].style.setProperty("--handle-amount", "'" + this.selectedSymbol + this.currentAmount + "'");
206        }
207
208        if (this.currentAmount > 25){
209            this.module.find('.rangeslider__handle').addClass('over-25');
210        } else {
211            this.module.find('.rangeslider__handle').removeClass('over-25');
212        }
213        if (this.currentAmount > 50){
214            this.module.find('.rangeslider__handle').addClass('over-50');
215        } else {
216            this.module.find('.rangeslider__handle').removeClass('over-50');
217        }
218        if (this.currentAmount > 100){
219            this.module.find('.rangeslider__handle').addClass('over-100');
220        } else {
221            this.module.find('.rangeslider__handle').removeClass('over-100');
222        }
223        if (this.currentAmount > 250){
224            this.module.find('.rangeslider__handle').addClass('over-250');
225        } else {
226            this.module.find('.rangeslider__handle').removeClass('over-250');
227        }
228        if (this.currentAmount > 500){
229            this.module.find('.rangeslider__handle').addClass('over-500');
230        } else {
231            this.module.find('.rangeslider__handle').removeClass('over-500');
232        }
233        if (this.currentAmount > 1000){
234            this.module.find('.rangeslider__handle').addClass('over-1000');
235        } else {
236            this.module.find('.rangeslider__handle').removeClass('over-1000');
237        }
238
239        this.currencyInputEl.val(this.selectedCurrency)
240    },
241
242    setMultiplierNumber: function () {
243        if (this.currentAmount < 1) {
244            this.multiplierNumberEl.html('?');
245        } else {
246            this.multiplierNumberEl.html(new Intl.NumberFormat().format(this.currentAmount * this.selectedMultiplier));
247        }
248    }
249}