$(function() {
function parseAmount(input) {
var amount;
if (typeof input !== 'string' || input.length === 0) {
return null;
}
amount = Number(input);
if (isNaN(amount)) {
console.error('Unable to parse amount: ' + JSON.stringify(input));
return null;
}
return amount;
}
function parseOptions(input, parseItem) {
var options;
if (typeof input !== 'string' || input.length === 0) {
return null;
}
options = input
.split(',')
.map(function(option) { return option.trim(); })
.map(parseItem)
.filter(function(item) { return item !== null; });
if (options.length === 0) {
console.error('Unable to parse options: ' + JSON.stringify(input));
return null;
}
return options;
}
function parseRecurringPeriod(input) {
if (typeof input !== 'string' || input.length === 0) {
return null;
}
switch (input) {
case 'one-time':
return 'one-time';
case 'months':
return 'months';
case 'years':
return 'years';
default:
console.error('Unable to parse recurring period: ' + JSON.stringify(input));
return null;
}
}
var amount = parseAmount('10');
var amountOptions = parseOptions('5,10,15,20', parseAmount);
var experienceDismissalTtl = '1';
var experienceImpressionTtl = '1';
var experiencePrefix = '2020_eoy_takeover';
var realm = 'theintercept';
var recurringPeriod = parseRecurringPeriod('months');
var recurringPeriodLabels = {
'one-time': 'One-time',
'months': 'Monthly',
'years': 'Yearly'
};
var recurringPeriodOptions = parseOptions('one-time,months', parseRecurringPeriod);
var referrerUrl = FLMPiano.getPianoParams().url;
var showThermometer = 'no'.toLowerCase() === 'yes';
var showThermometerText = 'yes'.toLowerCase() === 'yes';
var source = 'web_intercept_20201214_sitewide_GT-vertical-takeover_stand-with-donate-monthly' || 'web_intercept_piano_direct-ask-modal-unknown';
var thermometerPageName = '2020_winter_campaign';
var bodyElement = document.querySelector('body');
var closeButton = document.getElementById('close');
var donateButton = document.getElementById('donate');
var elementsWithPlaceholderText = document.querySelectorAll('.has-placeholder-text');
var formElement = document.getElementById('form');
var formFieldsContainer = document.getElementById('form-fields-container');
var htmlElement = document.querySelector('html');
var thermometerContainer = document.getElementById('thermometer-container');
// event handlers
function handleCloseClick() {
FLMPiano.dispatchEventToParent('experience:dismiss', {
experienceDismissalTtl: experienceDismissalTtl,
experiencePrefix: experiencePrefix
});
FLMPiano.trackGAEvent({
eventLabel: 'direct-ask: popup close',
metric8: 1,
transport: 'beacon'
});
}
function handleDonateClick() {
FLMPiano.dispatchEventToParent('experience:convert', {
experiencePrefix: experiencePrefix
});
FLMPiano.trackGAEvent({
eventLabel: 'direct-ask: donate button click',
metric4: 1,
transport: 'beacon'
});
piano.logConversion(realm, 'Donate Click', 1);
closeButton.removeEventListener('click', handleCloseClick);
closeButton.click();
}
function handleKeypress(event) {
switch (event.code) {
case 'Escape':
console.info('Closing...');
closeButton.click();
break;
default:
// pass through
}
}
function handleLoad() {
var $html = $(htmlElement);
$html.addClass('loaded');
if (TPParam.params.preview === 'true') {
$html.addClass('extraSmall');
$html.addClass('sized');
} else {
FLMPiano.dispatchEventToParent('experience:impression', {
experienceImpressionTtl: experienceImpressionTtl,
experiencePrefix: experiencePrefix
});
FLMPiano.trackGAEvent({
eventLabel: 'direct-ask: popup open',
metric3: 1
});
}
}
function handleParentResize(resizeEvent) {
$(bodyElement).toggleClass('extraSmallHeight', resizeEvent.height < 570);
if (resizeEvent.breakpoint === 'large') {
// ensure that the modal is the full viewport height
bodyElement.style.height = resizeEvent.height + 'px';
} else {
// let the modal's height be determined automatically
bodyElement.style.height = 'auto';
}
setTimeout(function() {
$(htmlElement).toggleClass('sized', true);
}, 0);
}
// UI helpers
function renderFormFields() {
var amountButton, amountInput, amountsGroup, form, index, recurringPeriodButton, recurringPeriodInput, recurringPeriodsGroup;
if (!amount || !amountOptions || !recurringPeriod || !recurringPeriodOptions) {
return;
}
if (amountOptions.indexOf(amount) < 0) {
console.error('"' + amount + '" is not a valid amount-selection value, it must be included in the configured amount-options to work');
amount = null;
return;
}
if (recurringPeriodOptions.indexOf(recurringPeriod) < 0) {
console.error('"' + recurringPeriod + '" is not a valid recurring-period-selection value, it must be included in the configured recurring-period-options to work');
recurringPeriod = null;
return;
}
updateDonateUrlParams({
amount: amount,
recurring_period: recurringPeriod
});
amountsGroup = FLMPiano.dom.renderElement('div', {
className: 'button-group amount-button-group',
role: 'group',
'aria-label': 'Select donation amount'
});
for (index = 0; index < amountOptions.length; index ++) {
amountInput = FLMPiano.dom.renderElement('input', {
name: 'amount',
type: 'radio',
value: String(amountOptions[index])
});
amountButton = FLMPiano.dom.renderElement('label', { className: 'button' },
amountInput,
'$' + String(amountOptions[index])
);
if (amount === amountOptions[index]) {
amountInput.setAttribute('checked', 'checked');
amountButton.setAttribute('class', 'button selected');
}
amountInput.addEventListener('change', function(event) {
var amountButtons = amountsGroup.querySelectorAll('.amount-button-group .button');
var selectedInput = event.target;
var selectedAmount = Number(selectedInput.value);
var amountButton, amountInput, index;
for (index = 0; index < amountButtons.length; index ++) {
amountButton = amountButtons.item(index);
amountInput = amountButton.querySelector('input');
if (Number(amountInput.value) === selectedAmount) {
amountInput.setAttribute('checked', 'checked');
amountButton.setAttribute('class', 'button selected');
} else {
amountInput.setAttribute('checked', undefined);
amountButton.setAttribute('class', 'button');
}
}
updateDonateUrlParams({ amount: selectedAmount });
});
amountsGroup.appendChild(amountButton);
}
recurringPeriodsGroup = FLMPiano.dom.renderElement('div', {
className: 'button-group recurring-period-button-group',
role: 'group',
'aria-label': 'Select recurring period'
});
for (index = 0; index < recurringPeriodOptions.length; index ++) {
recurringPeriodInput = FLMPiano.dom.renderElement('input', {
name: 'recurring_period',
type: 'radio',
value: recurringPeriodOptions[index]
});
recurringPeriodButton = FLMPiano.dom.renderElement('label', { className: 'button ' },
recurringPeriodInput,
recurringPeriodLabels[recurringPeriodOptions[index]]
);
if (recurringPeriod === recurringPeriodOptions[index]) {
recurringPeriodInput.setAttribute('checked', 'checked');
recurringPeriodButton.setAttribute('class', 'button selected');
}
recurringPeriodButton.addEventListener('change', function(event) {
var recurringPeriodButtons = recurringPeriodsGroup.querySelectorAll('.recurring-period-button-group .button');
var selectedInput = event.target;
var selectedRecurringPeriod = selectedInput.value;
var index, recurringPeriodButton, recurringPeriodInput;
for (index = 0; index < recurringPeriodButtons.length; index ++) {
recurringPeriodButton = recurringPeriodButtons.item(index);
recurringPeriodInput = recurringPeriodButton.querySelector('input');
if (recurringPeriodInput.value === selectedRecurringPeriod) {
recurringPeriodInput.setAttribute('checked', 'checked');
recurringPeriodButton.setAttribute('class', 'button selected');
} else {
recurringPeriodInput.setAttribute('checked', undefined);
recurringPeriodButton.setAttribute('class', 'button');
}
}
updateDonateUrlParams({ recurring_period: selectedRecurringPeriod });
});
recurringPeriodsGroup.appendChild(recurringPeriodButton);
}
FLMPiano.dom.appendChildrenToElement(formFieldsContainer, [ amountsGroup, recurringPeriodsGroup ]);
}
function updateDonateUrlParams(params) {
var newUrl = FLMPiano.buildUrl(donateButton.href, params);
donateButton.setAttribute('href', newUrl);
formElement.setAttribute('action', newUrl);
}
// initialize DOM
FLMPiano.setUpResponsiveContainer('body', {
onResize: handleParentResize
});
window.addEventListener('keypress', handleKeypress);
closeButton.addEventListener('click', handleCloseClick);
updateDonateUrlParams({
referrer_url: referrerUrl,
source: source
});
FLMPiano.getCustomVariables().then(function(customVariables) {
if (typeof customVariables.referrer_post_id === 'string') {
updateDonateUrlParams({
referrer_post_id: customVariables.referrer_post_id
});
}
});
donateButton.addEventListener('click', handleDonateClick);
renderFormFields();
formElement.addEventListener('submit', handleDonateClick);
if (thermometerPageName) {
FLMPiano.thermometers.fetch(thermometerPageName)
.then(function(thermometerData) {
elementsWithPlaceholderText.forEach(function(element) {
element.innerHTML = FLMPiano.formatText(element.innerHTML, thermometerData);
});
if (showThermometer) {
FLMPiano.dom.appendChildToElement(
thermometerContainer,
FLMPiano.thermometers.render(thermometerData, 'graduated-bar')
);
} else {
thermometerContainer.style.display = 'none';
}
setTimeout(handleLoad, 0);
})
.catch(function(error) {
console.error(error);
});
} else {
handleLoad();
}
});