Javascript Library

const accordions = new getAccordions4i(),
wrapper = document.querySelector("#mainContent");
accordions.init(wrapper);
				

accordions.open(document.getElementById("SaleSection"));
				

accordions.close(document.getElementById("SaleSection"));
				

accordions.openAll(document.querySelector("#mainContent"));
				

accordions.closeAll(document.querySelector("#mainContent"));
				

const checkboxes = new checkboxes4i();
checkboxes.Init();
				

checkboxes.AssessChecks();
				

const boxes = document.querySelectorAll(".yourClass");
checkboxes.Check(boxes);
				

const boxes = document.querySelectorAll(".yourClass");
checkboxes.Uncheck(boxes);
				

const entireSectionWrapper = document.querySelector(".userSubscriptions");
const userPreferences = checkboxes.GetPreferences(entireSectionWrapper);
				

const exampleDialog = new Dialog4i();
const dialogContent = '<div class="spinner" role="alert" aria-busy="true" aria-atomic="true" aria-label="Loading example dialog, please wait"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
exampleDialog.Init({
	triggerElements: [].slice.call(document.querySelectorAll(".buttonToTriggerDialog")),
	dialogClass: "mediumDialog", 
	title: "Loading Example Dialog", 
	content: dialogContent, 
	onOpen: open,
	onClose: close,
	arrows: {
		left: '<button id="scrollLeft" type="button" class="scrollLeft whiteLink noLine pointer"><svg class="rotate270 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to previous"><title>Scroll to previous</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>',
		right: '<button id="scrollRight" type="button" class="scrollRight whiteLink noLine pointer"><svg class="rotate90 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to next"><title>Scroll to next</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>'
	},
	keyEvents: LeftRightArrow
});
				

const exampleDialogs = await SetUpDialogs();
async function SetUpDialogs(){ 
	const { default: Dialog4i } = await import( './../library/dialog4i2022.js?v=1');
	const dialogContent = '<div class="spinner" role="alert" aria-busy="true" aria-atomic="true" aria-label="Loading example dialog, please wait"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
	return new Dialog4i({
		triggerElements: [].slice.call(document.querySelectorAll(".buttonToTriggerDialog")),
		dialogClass: "mediumDialog", 
		title: "Loading Example Dialog", 
		content: dialogContent, 
		onOpen: open,
		onClose: close,
		arrows: {
			left: '<button id="scrollLeft" type="button" class="scrollLeft whiteLink noLine pointer"><svg class="rotate270 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to previous"><title>Scroll to previous</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>',
			right: '<button id="scrollRight" type="button" class="scrollRight whiteLink noLine pointer"><svg class="rotate90 show" height="40px" width="40px" focusable="false" role="img" aria-label="Scroll to next"><title>Scroll to next</title><use xlink:href="#svgIcon-arrowLine"></use></svg></button>'
		},
		keyEvents: LeftRightArrow
	});	
}
				

exampleDialog.BindTriggerElements(btns);
				

exampleDialog.BindCloseElements();
				

exampleDialog.Open();
				

exampleDialog.Close();
				

exampleDialog.HideCloseBtn();
				

exampleDialog.ShowCloseBtn();
				

let responseJSON;
try{
	const response = await fetch('/Something/YourURL', {
		method: 'POST', 
		body: JSON.stringify({}),
		headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'fetch' }
	});
	//if(!response.ok) throw new Error(`Error processing request: ${response.statusText}`);
	responseJSON = await response.json();
}catch(error){
	console.error(error);
	// error function here
}

if(responseJSON){
	if(responseJSON.Success) // successful function here
	else //error function here
}
				

					
let forms = new forms4i(),

validateForm = e => {
	e.preventDefault();
	forms.formValidation(document.getElementById("styleGuideForm"), formValidationSuccess, e);
},

formValidationSuccess = () => {
	let successMsg = '<p class="text20 textSemiBold displayFlex flexAlignItemsCenter"><svg class="textDarkestGray roundCorners5 bkgdGreen" height="30px" width="30px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-checkMark"></use></svg> <span class="marginLeft5">Your form submitted successfully!</span></p>';
	document.getElementById("styleGuideForm").classList.add("hide");
	document.getElementById("styleGuideForm").insertAdjacentHTML("afterend", successMsg);
}; 

btn.addEventListener("click", validateForm);
				

forms.serverValidation(document.getElementById("styleGuideForm"));
				

forms.ClearValidation();
				

let errorList = ["Please enter a valid number"];
forms.InvalidateField(formEl, targetEl, errorList);
				

let cardNum = document.getElementById("cardNumElem"),
btnElement = document.getElementById("btnElem"),
cardName = document.getElementById("savedNameElem");

forms.FadeCCImgs(cardNum, btnElement, cardName);
				

let ccMask = document.getElementById("ccMaskElem"),
cardNumber = document.getElementById("cardNumElem");

forms.MaskCCNumber(ccMask, cardNumber);
				

let cvvMask = document.getElementById("cvvMaskElem"),
cvvNumber = document.getElementById("cvvElem");

forms.MaskCVVNumber(cvvMask, cvvNumber);
				

let phoneMask = document.getElementById("phoneMask"),
phoneNumber = document.getElementById("PhoneNumber");

forms.MaskPhoneNumber(phoneMask, phoneNumber);
				

forms.UnmaskCCNumber(document.getElementById("cardNumElem"));
				

forms.GetCreditCardName(cardNumber));
				

let savedCheck = document.getElementById("isSavedElem"),
savedName = document.getElementById("savedNameElem"),
isDefault = document.getElementById(isDefaultElem);

forms.ShowSaveCardName(savedCheck, savedName, isDefault);
				

forms.BindPasswordButtons();
				

const helpers = new formHelpers4i();
helpers.LoadingIcon;
				

helpers.HeaderToken;
				

helpers.RecaptchaKey;
				

helpers.RecaptchaName;
				

helpers.ErrorMsgPanel;
				

const elementToInsertBefore = document.querySelector(".btnParent");
const msg = 'Your account has been successfully updated.';
helpers.ShowSuccessStatus(elementToInsertBefore, msg);
				

const elementToInsertBefore = document.querySelector(".btnParent");
const msg = 'There was an issue updating your account. Please refresh the page and try again or contact us if the issue continues.';
helpers.ShowErrorStatus(elementToInsertBefore, msg);
				

helpers.ClearStatus();
				

helpers.ShowBusyBtn(e.currentTarget);
				

helpers.ClearBusyBtn();
				

const wrapperOfSectionToBlock = document.querySelector(".mySection");
helpers.ShowLoadingOverlay(wrapperOfSectionToBlock)
				

helpers.RemoveLoadingOverlay();
				

ImgError4i.Init();
				

ImgError4i.ObserveImgs();
				

const adminTable = new tables4i();
adminTable.Init({
	table: document.getElementById("productTable"),
	url: "/productcards/table",
	paging: {
		itemsToShow: 10,
		label: "Product Paging"
	},
	search: true,
	filter: true
});
				

adminTable.ReloadTable();
				

adminTable.UpdateInitialSearch(input.value);
				

adminTable.UpdateUrl(fetchURL);
				

let tabs = new tabs4i();
let wrapperEl = document.getElementById("copyTabs");
tabs.init(wrapperEl);
				

tabs.initTab(document.getElementById("tabTwo"));
				

let detailsToolTips = new toolTips();
detailsToolTips.init();
				

let videoJS = new videos4i();
videoJS.initLinks();
				

videoJS.allVideoLinks();
				

videoJS.initDynamicLink(videoTrigger);
				

videoJS.initWhyBuyVideo();
				

videoJS.initWeBelieveVideo();