\n\n Would you help give a kid the life-changing Christian experience of camp this summer?\n
\n `); // the body copy\n\n let monthly = \"Monthly\", onetime = \"One-time\";\n const giftOptionBaseUrl = \"https://donations.navigators.org/s/fund/a4ePm000000Ei61IAC/eagle-lake-camps?utm_campaign=di242512&utm_content=apr_el_overlay_a&sf_ac=1011858&sf_ga=ec01\";\n const giftOptionsData = [\n [ 35, onetime ],\n [ 75, onetime ],\n [ 150, onetime ],\n ];\n const giftOptionsContainerHTML = `\n
\n
\n `;\n \n \n var mask;\n var cookie_name = EXPERIENCE_NAME;\n var expdays = 365; // cookie expires after this many days\n //var fasterdate = '2022/12/26'; // after this day, expdays set to 1 day\n \n var debug = false;\n var what = getCookie(cookie_name);\n if (what && !debug) return;\n \n setDisplayedCookie(cookie_name);\n \n setTimeout(function() {\n console.log('showing overlay');\n displayOverlay();\n }, 2000);\n\n \n function displayOverlay() {\n mask = $('\n ${giftOptionsData.map(([ amount, frequency]) => {\n let giftOptionUrl = giftOptionBaseUrl + (giftOptionBaseUrl.includes('?') ? '&' : '?') + [ \"amt=\" + parseInt(amount), \"freq=\" + frequency.toLowerCase() ].join('&');\n return (`\n
\n \n \n
\n `);\n }).join('')}\n \n
\n \n More Options\n
\n ![](\"https://storage.pardot.com/882453/1670008943p75LfANP/Nav_Primary_Horizontal_White.png\")
'+(preheadline && preheadline.length > 0 ? '
Continue to Navigators.org'+preheadline+'
' : '')+''+headline+'
'+copy+'
'+giftOptionsContainerHTML+'${text}
${TAIL_SVG}
`);
return calloutContainer;
})();
const tabsContainer = buttons[0].parentElement;
tabsContainer.before(calloutElement);
const callout = tabsContainer.previousElementSibling || tabsContainer.parentElement.querySelector('.callout') || document.querySelector('.callout'),
calloutBubble = callout.querySelector('.callout-bubble'),
calloutTail = callout.querySelector('.callout-tail'),
calloutContainer = callout.parentElement || tabsContainer.parentElement.querySelector('.callout-container');
const buttonIndex = buttons.indexOf(button);
calloutBubble.classList.add(buttonIndex + 1 <= buttons.length / 2 ? "pull-left" : "pull-right");
let lastScreenWidth = window.innerWidth;
const updateTailPosition = function (calloutTarget) {
console.log('resize');
const tail = this;
const targetRect = calloutTarget.getBoundingClientRect(),
tailRect = tail.getBoundingClientRect();
let targetPosition = {
width: targetRect.width,
height: targetRect.height,
x: targetRect.x,
y: targetRect.y,
xCenter: targetRect.x + (targetRect.width / 2),
yCenter: targetRect.y + (targetRect.height / 2),
};
let tailPosition = {
width: tailRect.width,
height: tailRect.height,
x: tailRect.x,
y: tailRect.y,
};
// console.log('target:', calloutTarget, targetPosition);
// console.log('tail:', tail, tailPosition);
let calloutBubbleOffsetX = calloutBubble.getBoundingClientRect().x - callout.getBoundingClientRect().x;
let deltaX = targetPosition.xCenter -
tailPosition.x -
(tailPosition.width / 2),
deltaY = targetPosition.y -
tailPosition.y;
// if (deltaX <= 2)
// return;
deltaX = (tailPosition.x - callout.getBoundingClientRect().x) + deltaX;
let calloutBubbleStartX = calloutBubble.getBoundingClientRect().x - callout.getBoundingClientRect().x,
calloutBubbleEndX = calloutBubbleStartX + calloutBubble.getBoundingClientRect().width;
/*if (window.innerWidth <= 480 && (deltaX < calloutBubbleStartX + 16 || deltaX > calloutBubbleEndX - 16))
return;*/
//console.log(`delta: (${deltaX}, ${deltaY})`);
this.style.setProperty('--x', `${deltaX}px`);
this.style.setProperty('height', `${deltaY}px`);
setTimeout(() => {
if (lastScreenWidth > 480 && window.innerWidth <= 480) { // desktop to mobile
calloutTarget.parentElement.before(callout); // move callout in between buttons before the target button
document.dispatchEvent(new Event('resize'));
} else if (lastScreenWidth <= 480 && window.innerWidth > 480) { // mobile to desktop
tabsContainer.before(callout); // move callout before all gift array buttons in full row
document.dispatchEvent(new Event('resize'));
}
if (!lastScreenWidth && window.innerWidth > 480) {
if (!buttons[0].parentElement.previousElementSibling) {
tabsContainer.before(callout); // move callout before all gift array buttons in full row
document.dispatchEvent(new Event('resize'));
}
}
lastScreenWidth = window.innerWidth;
}, 50);
};
setTimeout(() => {
document.addEventListener('resize', updateTailPosition.bind(calloutTail, button)),
(new ResizeObserver(updateTailPosition.bind(calloutTail, button))).observe(document.body);
}, 250);
updateTailPosition.call(calloutTail, button);
}
function main () {
const c_donate_community_staff_information = document.shadowQuerySelector('c-donate-community-staff-information');
const c_donate_community_donate_buttons = document.shadowQuerySelector('c-donate-community-donate-buttons');
const donationPage = c_donate_community_staff_information.parentElement;
const donationPageContent = donationPage.shadowQuerySelectorAll('c-donate-community-staff-information > div > .slds-col')[1];
const donationFormWidget = c_donate_community_donate_buttons.parentElement || ([...donationPageContent.children].find((child) => child.shadowQuerySelector('button[value]')) || donationPageContent.children[2]) || null;
if (!donationFormWidget || !donationFormWidget.shadowQuerySelector('button'))
return setTimeout(main, 50);
const donationFormGiftArrayButtons = donationFormWidget.shadowQuerySelectorAll('button[value]') ?? null;
if (donationFormWidget.querySelector('.callout') || donationFormWidget.shadowQuerySelector('.callout'))
return console.warn("Callout already added.");
const btn = addCircle(donationFormGiftArrayButtons, CALLOUT_ON_BUTTON_WITH_AMOUNT);
donationFormGiftArrayButtons[0].parentElement && addCallout(CALLOUT_BUBBLE_TEXT, btn, donationFormGiftArrayButtons);
}
(async function(){
try {
console.group("Callout: Init");
asyncWaitForCustomElements(['c-donate-community-staff-information', 'c-donate-community-donate-buttons'/*, 'lightning-formatted-rich-text'*/], () => {
setTimeout(main, 100);
});
} catch (error) {
console.error(error);
} finally {
console.groupEnd();
}
})();
}catch(e) {VWO._.vAEH(e);}
return vwo_$('head')[0] && vwo_$('head')[0].lastChild;})("head")}}, C_722072_157_1_2_0:{ fn:function(log,nonce=''){return (function(x) {;var _vwo_sel=vwo_$("");vwo_$('head').append(_vwo_sel);return vwo_$('head')[0] && vwo_$('head')[0].lastChild;})("HEAD")}}, R_722072_157_1_2_0:{ fn:function(log,nonce=''){return (function(x) {
if(!vwo_$.fn.vwoRevertHtml){
return;
};
var ctx=vwo_$(x),el;
/*vwo_debug log("Revert","content",""); vwo_debug*/;
el=vwo_$('[vwo-element-id="1744062807510"]');
el.revertContentOp().remove();})("HEAD")}}, C_722072_157_1_2_1:{ fn:function(log,nonce=''){return (function(x) {var el,ctx=vwo_$(x);
/*vwo_debug log("addElement","body"); vwo_debug*/!(el=vwo_$("body")).find('[vwo-op-1744062793557=""]').length&&el.vwoElement({html:'\n \x3c!-- --\x3e\n
',position:"append"});})("body")}}, R_722072_157_1_2_1:{ fn:function(log,nonce=''){return (function(x) {
if(!vwo_$.fn.vwoRevertHtml){
return;
};
var el,ctx=vwo_$(x);
/*vwo_debug log("Revert","addElement","body"); vwo_debug*/(el=vwo_$('[vwo-element-id="1744048814304"]')).remove();})("body")}}, C_722072_157_1_2_2:{ fn:function(log,nonce=''){return (function(x) {var el,ctx=vwo_$(x);
/*vwo_debug log("content",".pushdown-copy > p:nth-of-type(1)"); vwo_debug*/el=vwo_$(".pushdown-copy > p:nth-of-type(1)"),vwo_$(".pushdown-copy > p:nth-of-type(1)").each((function(){this.__vwoControlOuterHTML=this.__vwoControlOuterHTML||this.outerHTML,!vwo_$(this).find('[vwo-op-1744062807509-0=""]').length&&vwo_$(this).append('Will you help a kid get to Eagle Lake Camps of The Navigators this summer?'),vwo_$(this).nonEmptyContents().eq(0).replaceWith2(document.createTextNode("You can be the difference in a child making a decision to follow Jesus at camp this summer. "))})),el=vwo_$(".pushdown-copy > p:nth-of-type(1)");})(".pushdown-copy > p:nth-of-type(1)")}}, C_722072_79_1_3_1:{ fn:function(){return (function(x) { try{
var _vwo_sel = vwo_$("");
!vwo_$("head").find("#1734023425072").length && vwo_$('head').append(_vwo_sel);
!vwo_$("body").find('[vwo-op-1734023424996=""]').length && vwo_$("body").vwoElement({ "html": "", "position": "append", "customBodyElement": true, "addElementId": 1734023424996 })
'esversion: 8';
const ASK_AMOUNT = 10;
const DONATION_INTERRUPTER_GROUP_NAME = "StaffDP" /* all the popups in this test will share the same group name so that the metrics for them are all counted in the test */;
//
//
//
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
//
//
//
window.HTMLElement.prototype.getSlot = window.HTMLElement.prototype.getSlot || function () { return this.querySelector('slot') || this.shadowRoot.querySelector('slot'); }
window.HTMLElement.prototype.getSlotNodes = window.HTMLElement.prototype.getSlotNodes || function (n) { return (parseInt(n) !== 'NaN' && n >= 0) ? Array.from(this.getSlot().assignedNodes({ flatten: true })).at(n) : Array.from(this.getSlot().assignedNodes({ flatten: true })); }
window.HTMLElement.prototype.shadowChildren = window.HTMLElement.prototype.shadowChildren || function (n) { return (parseInt(n) !== 'NaN' && n >= 0) ? Array.from(this.shadowRoot.children).at(n) : Array.from(this.shadowRoot.children); }
function waitForElement (el, retry, onSuccess = (el) => {}, delay = 30) {
if ( !el ) return setTimeout(retry, delay);
onSuccess(el);
return true;
}
//
function vwoSendEvent (eventName = "customEvent", object = { label: '' }) {
window.VWO = window.VWO || [];
VWO.event = VWO.event || function () {VWO.push(["event"].concat([].slice.call(arguments)));};
VWO.event(eventName, object);
console.log(eventName, object);
}
const vwoSendEvent_DonationInterrupter = (action, group = undefined) => {
if (action === "Shown")
vwoSendEvent("custom_DonationInterrupter_Shown", { shown: true, group: group });
else if (action === "Yes")
vwoSendEvent("custom_DonationInterrupter_Yes", { yes: true, group: group });
else if (action === "No")
vwoSendEvent("custom_DonationInterrupter_No", { donationInterrupterNoClicked: true, group: group });
};
//
function getBasketId (tokenName = `LSSIndex:LOCAL{"namespace":"c"}`){
const token = localStorage.getItem(tokenName);
if (!token) {
return console.error("getBasketId:", "Failed to get token from localStorage:", tokenName);
} else {
try {
const { basket } = JSON.parse(token); // get basket property from the object
return basket;
} catch (error) {
return console.error("getBasketId:", "Failed to parse JSON:", token);
}
}
}
function getBasket (basketId) {
let token = localStorage.getItem(basketId);
if (!token) {
const emptyBasket = {
"Id": "localBasket",
"Basket_Items__r": [],
"Total__c": 0,
"Number_of_Items__c": 0,
"itemMap": {}
};
console.info("getBasket:", "Failed to get token from localStorage:", basketId, "\nAttempting to create a new empty basket and retrying...");
localStorage.setItem(basketId, JSON.stringify(emptyBasket));
token = localStorage.getItem(basketId);
}
if (!token) {
return console.error("getBasket:", "Failed to get token from localStorage:", basketId);
} else {
try {
return JSON.parse(token); // get basket property from the object
} catch (error) {
return console.error("getBasket:", "Failed to parse JSON:", token);
}
}
}
function addItemToBasket (item) {
const basketId = getBasketId(),
basket = getBasket(basketId);
if ( basket.Basket_Items__r.find(item => item.id === item.Id) ) { // check if the item Id is already in the cart
const foundItem = basket.Basket_Items__r.find(item => item.Id);
foundItem["Quantity__c"] += 1; // update the quantity of the found item
foundItem["Total_Amount__c"] = foundItem["Amount__c"] * foundItem["Quantity__c"]; // update the quantity of the found item
foundItem["Total_Deductible_Amount__c"] = foundItem["Amount__c"] * foundItem["Quantity__c"]; // update the quantity of the found item
} else {
basket.Basket_Items__r.push(item); // add the item to the array
}
basket.Number_of_Items__c = basket.Basket_Items__r.length; // update item count
basket.Total__c = basket.Basket_Items__r.reduce((total, item) => total + item["Amount__c"], 0); // update total amount
basket.itemMap = Object.fromEntries(basket.Basket_Items__r.map((item, index) => ([item.Id, index]))); // update itemMap
return localStorage.setItem(basketId, JSON.stringify(basket));
}
function setAppealCode (sf_ac) {
let queryString;
let searchParams = window.location.search;
if (searchParams.match('sf_ac')) {
const regex = new RegExp(`(${'sf_ac'}=)([^&]*)`);
queryString = searchParams.replace(regex, `$1${sf_ac}`); // replace existing appeal code value
} else {
queryString = searchParams + '&sf_ac=' + sf_ac; // append appeal code
}
window.history.pushState('', '', '?' + queryString);
}
//
function entangleElements (element1, element2, method = 'innerHTML', options = { attributes: true, childList: true, subtree: true }) {
if (!element1 || !element2)
return console.error(`entangleElements: ${!element1 && "element1"}${!element1 && !element2 ? " and " : " "} ${!element2 && "element2"} ${!element1 && !element2 ? "are" : "is"} undefined.`);
console.log("Entangling:\n", element1, ' ', element2, "\nElement 2 will mirror Element 1's values.");
const handleMutation = (mutationList, observer) => { // Callback function to execute when mutations are observed
let lastAttributeValues = {};
for (const mutation of mutationList) {
switch (mutation.type) {
case "attributes":
const { attributeName, oldValue } = mutation;
if (attributeName !== "style") { // ignore changes to style attribute
const currentValue = element1.getAttribute(attributeName);
if (currentValue === null) {
element2.removeAttribute(attributeName); // mirror element 1 attributes on element 2 by removing null value attribute
} else {
element2.setAttribute(attributeName, currentValue); // mirror element 1 attributes on element 2
}
}
break;
default:
element2[method] = element1[method];
break;
}
}
};
const observer = new MutationObserver(handleMutation);
observer.observe(element1, options); // Start observing the target node for configured mutations
return observer;
}
//
//
//
//
function init () {
if (window.VWOInjected) {
console.warn("Do not preview using the VWO Visual Editor.");
return;
}
if (sessionStorage.getItem("NA_DonationInterrupter_StaffDPv2_status") === "dismissed") {
console.warn("Popup already dismissed.");
return;
}
try {
customElements.whenDefined("c-donate-community-staff-information").then(() => {
customElements.whenDefined("c-donate-community-donate-buttons").then(() => {
customElements.whenDefined("lightning-input").then(() => {
const wrapperForm = document.querySelector('c-donate-community-staff-information');
const wrapperFormInteractive = wrapperForm.shadowRoot.querySelector('c-donate-community-donate-buttons').shadowChildren(0);
console.log(wrapperFormInteractive);
/// Interface with the giving form and create a window object
const form = {
getGiftArrayButtons: function () {
let w = wrapperFormInteractive;
return Array.from(w.children).slice(0, Array.from(w.children).indexOf(w.querySelector('.slds-form-element'))).map(x => x.querySelector('button'));
},
getAmount: function () {
const sanitizeAmount = a => a.replace(/[^\d\.]/,''); // remove non-digit characters (except for decimals)
let selected = this.getGiftArrayButtons().filter(x => x.classList.contains("donate-selected"))[0];
if (selected) {
return parseFloat(selected.value);
} else {
selected = wrapperFormInteractive.querySelector('lightning-input').shadowChildren(0).shadowChildren(0).querySelector('input');
return parseFloat(sanitizeAmount(selected.value));
}
console.warn("Amount is not defined: no option is selected.")
return undefined;
},
setAmount: function (n) {
let match;
const otherAmount = wrapperFormInteractive.querySelector('lightning-input').shadowChildren(0).shadowChildren(0).querySelector('input');
for (const button of this.getGiftArrayButtons()) { // iterate over gift array buttons
if (parseFloat(button.value) === parseFloat(n) ) { // if matching button found for amount
otherAmount.value = ''; // clear other amount
button.click(); // click the matching button
return this.getAmount() === parseFloat(n); // return true if the getAmount() matches the input value
}
}
otherAmount.value = parseFloat(n); // set the other amount field value to the input value
otherAmount.dispatchEvent(new Event('change', { bubbles: true })); // trigger a change event to cause the input to be formatted
return this.getAmount() === parseFloat(n); // return true if the getAmount() matches the input value
},
getRecurring: function () {
const checkbox = [...wrapperFormInteractive.querySelector(".slds-grid").querySelectorAll("lightning-input")][0].shadowChildren(0).shadowChildren(0).querySelector('input[type="checkbox"]');
return checkbox.checked;
},
setRecurring: function (toRecurring = true) {
const checkbox = [...wrapperFormInteractive.querySelector(".slds-grid").querySelectorAll("lightning-input")][0].shadowChildren(0).shadowChildren(0).querySelector('input[type="checkbox"]');
const isRecurring = this.getRecurring(), isOnetime = !isRecurring, toOnetime = !toRecurring; // semantic booleans
if ( (isOnetime && toRecurring) || (isRecurring && toOnetime)) {
checkbox.click();
}
return this.getRecurring() === toRecurring;
},
submit: function (btn = this.buttons["Donate Now"]) {
return btn.click();
},
};
//form.giftArrayButtons = form.getGiftArrayButtons();
window.NA = window.NA || {};
window.NA.MiniDonationForm = form;
waitForElement(wrapperFormInteractive.querySelector('button'), init, (el) => { // wait for form buttons
window.NA.MiniDonationForm.buttons = {
"Donate Now": Array.from(wrapperFormInteractive.children).slice(Array.from(wrapperFormInteractive.children).indexOf(wrapperFormInteractive.querySelector('.slds-form-element'))).map(x => x.querySelector('button')).filter(y => y)[0],
"Add to Basket": Array.from(wrapperFormInteractive.children).slice(Array.from(wrapperFormInteractive.children).indexOf(wrapperFormInteractive.querySelector('.slds-form-element'))).map(x => x.querySelector('button')).filter(y => y)[1],
};
window.NA.MiniDonationForm.cloneSubmitButton = function (originalButton = this.buttons["Donate Now"]) {
const clonedButton = originalButton.cloneNode(true); // clone the button and its children
clonedButton.attributes = originalButton.attributes; // copy attributes
clonedButton.id = clonedButton.textContent.trim().replaceAll(' ', '_') + "_copy";
if (clonedButton.style) clonedButton.style = originalButton.style; // copy styles
originalButton.after(clonedButton); // insert the fake button after the original
//entangleElements(originalButton, clonedButton, 'outerHTML'); // quantum entangle the elements via outerHTML -- does not work if the element is fully replaced when state changed
return clonedButton; // return the fake button
};
/// Interface with the Donation Interrupter \n
\n \x3c!--\n \n
\n \n
\n \n
\n \n \n \x3c!-- \n
\n \n If you have a moment...\n
--\x3e\n\nYou can be the difference in a child making a decision to follow Jesus at camp this summer. Will you help a kid get to Eagle Lake Camps of The Navigators this summer? Give here »\n
\n\n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n \n More Options\n
\n --\x3e\n