|
1 | 1 | $(document).ready(function(){ |
2 | | - const SELECTORS = { |
3 | | - checkboxesContainer: function() { return $("#benefits_container"); }, |
4 | | - costLabel: function() { return $("#cost_label"); }, |
5 | | - clearFormBtn: function() { return $("#clear_form_btn"); }, |
6 | | - packageInput: function() { return $("input[name=package]"); }, |
7 | | - applicationForm: function() { return $("#application_form"); }, |
8 | | - getPackageInfo: function(packageId) { return $("#package_benefits_" + packageId); }, |
9 | | - getPackageBenefits: function(packageId) { return SELECTORS.getPackageInfo(packageId).children(); }, |
10 | | - benefitsInputs: function() { return $("input[id^=id_benefits_]"); }, |
11 | | - getBenefitLabel: function(benefitId) { return $('label[benefit_id=' + benefitId + ']'); }, |
12 | | - getBenefitInput: function(benefitId) { return SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'); }, |
13 | | - getBenefitConflicts: function(benefitId) { return $('#conflicts_with_' + benefitId).children(); }, |
14 | | - getSelectedBenefits: function() { return SELECTORS.benefitsInputs().filter(":checked"); }, |
15 | | - } |
16 | | - |
17 | | - displayPackageCost = function(packageId) { |
18 | | - let packageInfo = SELECTORS.getPackageInfo(packageId); |
19 | | - let cost = packageInfo.attr("data-cost"); |
20 | | - SELECTORS.costLabel().html('Sponsorship cost is $' + cost.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' USD') |
21 | | - } |
22 | | - |
23 | | - |
24 | | - |
25 | | - SELECTORS.clearFormBtn().click(function(){ |
26 | | - SELECTORS.applicationForm().trigger("reset"); |
27 | | - SELECTORS.applicationForm().find(".active").removeClass("active"); |
28 | | - SELECTORS.packageInput().prop("checked", false); |
29 | | - SELECTORS.checkboxesContainer().find(':checkbox').each(function(){ |
30 | | - $(this).prop('checked', false); |
31 | | - if ($(this).attr("package_only")) $(this).attr("disabled", true); |
32 | | - }); |
33 | | - SELECTORS.costLabel().html(""); |
34 | | - }); |
| 2 | + const SELECTORS = { |
| 3 | + packageInput: function() { return $("input[name=package]"); }, |
| 4 | + getPackageInfo: function(packageId) { return $("#package_benefits_" + packageId); }, |
| 5 | + getPackageBenefits: function(packageId) { return SELECTORS.getPackageInfo(packageId).children(); }, |
| 6 | + benefitsInputs: function() { return $("input[id^=id_benefits_]"); }, |
| 7 | + getBenefitInput: function(benefitId) { return SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'); }, |
| 8 | + getSelectedBenefits: function() { return SELECTORS.benefitsInputs().filter(":checked"); }, |
| 9 | + tickImages: function() { return $(`.benefit-within-package img`) }, |
| 10 | + } |
35 | 11 |
|
36 | | - SELECTORS.packageInput().change(function(){ |
37 | | - let package = this.value; |
38 | | - if (package.length == 0) return; |
39 | | - |
40 | | - SELECTORS.costLabel().html("Updating cost...") |
41 | | - |
42 | | - SELECTORS.checkboxesContainer().find(':checkbox').each(function(){ |
43 | | - $(this).prop('checked', false); |
44 | | - let packageOnlyBenefit = $(this).attr("package_only"); |
45 | | - if (packageOnlyBenefit) $(this).attr("disabled", true); |
46 | | - }); |
47 | | - |
48 | | - SELECTORS.getPackageBenefits(package).each(function(){ |
49 | | - let benefit = $(this).html() |
50 | | - let benefitInput = SELECTORS.getBenefitInput(benefit); |
51 | | - let packageOnlyBenefit = benefitInput.attr("package_only"); |
52 | | - benefitInput.removeAttr("disabled"); |
53 | | - benefitInput.trigger("click"); |
54 | | - }); |
55 | | - displayPackageCost(package); |
56 | | - }); |
| 12 | + const initialPackage = $("input[name=package]:checked").val(); |
| 13 | + if (initialPackage && initialPackage.length > 0) mobileUpdate(initialPackage); |
57 | 14 |
|
58 | | - SELECTORS.benefitsInputs().change(function(){ |
59 | | - let benefit = this.value; |
60 | | - if (benefit.length == 0) return; |
61 | | - |
62 | | - // display package cost if custom benefit change result matches with package's benefits list |
63 | | - let isChangeFromPackageChange = SELECTORS.costLabel().html() == "Updating cost..." |
64 | | - if (!isChangeFromPackageChange) { |
65 | | - let selectedBenefits = SELECTORS.getSelectedBenefits(); |
66 | | - selectedBenefits = $.map(selectedBenefits, function(b) { return $(b).val() }).sort(); |
67 | | - let selectedPackageId = SELECTORS.packageInput().filter(":checked").val() |
68 | | - let packageBenefits = SELECTORS.getPackageBenefits(selectedPackageId); |
69 | | - packageBenefits = $.map(packageBenefits, function(b) { return $(b).text() }).sort(); |
70 | | - |
71 | | - // check same num of benefits and join with string. if same string, both lists have the same benefits |
72 | | - if (packageBenefits.length == selectedBenefits.length && packageBenefits.join(',') === selectedBenefits.join(',')){ |
73 | | - displayPackageCost(selectedPackageId); |
74 | | - } else { |
75 | | - let msg = "Please submit your customized sponsorship package application and we'll contact you within 2 business days."; |
76 | | - SELECTORS.costLabel().html(msg); |
77 | | - } |
78 | | - } |
| 15 | + SELECTORS.packageInput().click(function(){ |
| 16 | + let package = this.value; |
| 17 | + if (package.length == 0) return; |
79 | 18 |
|
80 | | - // updates the input to be active if needed |
81 | | - let active = SELECTORS.getBenefitInput(benefit).prop("checked"); |
82 | | - if (!active) { |
83 | | - return; |
84 | | - } else { |
85 | | - SELECTORS.getBenefitLabel(benefit).addClass("active"); |
| 19 | + // clear previous customizations |
| 20 | + SELECTORS.tickImages().each((i, img) => { |
| 21 | + const initImg = img.getAttribute('data-initial-state'); |
| 22 | + const src = img.getAttribute('src'); |
| 23 | + |
| 24 | + if (src !== initImg) { |
| 25 | + img.setAttribute('data-next-state', src); |
86 | 26 | } |
87 | 27 |
|
88 | | - // check and ensure conflicts constraints between checked benefits |
89 | | - SELECTORS.getBenefitConflicts(benefit).each(function(){ |
90 | | - let conflictId = $(this).html(); |
91 | | - let checked = SELECTORS.getBenefitInput(conflictId).prop("checked"); |
92 | | - if (checked){ |
93 | | - conflictCheckbox.trigger("click"); |
94 | | - conflictCheckbox.parent().removeClass("active"); |
95 | | - } |
96 | | - }); |
| 28 | + img.setAttribute('src', initImg); |
| 29 | + }); |
| 30 | + $(".selected").removeClass("selected"); |
| 31 | + |
| 32 | + // clear hidden form inputs |
| 33 | + SELECTORS.getSelectedBenefits().each(function(){ |
| 34 | + $(this).prop('checked', false); |
| 35 | + }); |
| 36 | + |
| 37 | + // update package benefits display |
| 38 | + $(`.package-${package}-benefit`).addClass("selected"); |
| 39 | + $(`.package-${package}-benefit input`).prop("disabled", false); |
| 40 | + |
| 41 | + // populate hidden inputs according to package's benefits |
| 42 | + SELECTORS.getPackageBenefits(package).each(function(){ |
| 43 | + let benefit = $(this).html(); |
| 44 | + let benefitInput = SELECTORS.getBenefitInput(benefit); |
| 45 | + benefitInput.prop("checked", true); |
97 | 46 | }); |
98 | 47 |
|
99 | | - $(document).tooltip({ |
100 | | - show: { effect: "blind", duration: 0 }, |
101 | | - hide: false |
| 48 | + mobileUpdate(package); |
102 | 49 | }); |
103 | 50 | }); |
| 51 | + |
| 52 | + |
| 53 | +function mobileUpdate(packageId) { |
| 54 | + // Mobile version lists a single column to controle the selected |
| 55 | + // benefits and potential add-ons. So, this part of the code |
| 56 | + // controls this logic. |
| 57 | + const mobileVersion = $(".benefit-within-package:hidden").length > 0; |
| 58 | + if (!mobileVersion) return; |
| 59 | + $(".benefit-within-package").hide(); // hide all ticks and potential add-ons inputs |
| 60 | + $(`div[data-package-reference=${packageId}]`).show() // display only package's ones |
| 61 | +} |
| 62 | + |
| 63 | + |
| 64 | +// For an unknown reason I couldn't make this logic work with jQuery. |
| 65 | +// To don't block the development process, I pulled it off using the classic |
| 66 | +// onclick attribute. Refactorings are welcome =] |
| 67 | +function benefitUpdate(benefitId, packageId) { |
| 68 | + // Change tick image for the benefit. Can't directly change the url for the image |
| 69 | + // due to our current static files storage. |
| 70 | + const clickedImg = document.getElementById(`benefit-${ benefitId }-package-${ packageId }`); |
| 71 | + |
| 72 | + // Img container must have "selected" to class to be editable |
| 73 | + if (!clickedImg.parentElement.classList.contains('selected')) return; |
| 74 | + |
| 75 | + const newSrc = clickedImg.getAttribute("data-next-state"); |
| 76 | + clickedImg.setAttribute("data-next-state", clickedImg.src); |
| 77 | + |
| 78 | + // Update benefit's hidden input (can't rely on click event though) |
| 79 | + const benefitsInputs = Array(...document.querySelectorAll('[data-benefit-id]')); |
| 80 | + const hiddenInput = benefitsInputs.filter((b) => b.getAttribute('data-benefit-id') == benefitId)[0]; |
| 81 | + hiddenInput.checked = !hiddenInput.checked; |
| 82 | + clickedImg.src = newSrc; |
| 83 | +}; |
| 84 | + |
| 85 | + |
| 86 | +function updatePackageInput(packageId){ |
| 87 | + const packageInput = document.getElementById(`id_package_${ packageId }`); |
| 88 | + packageInput.click(); |
| 89 | +} |
0 commit comments