/home/bdqbpbxa/demo-subdomains/settlepay.goodface.com.ua/js/custom-solutions.js
// Prevent default function
function preventDefault(e) {
e.preventDefault();
}
// Scroll lock
function lockScroll() {
const html = document.documentElement;
const body = document.body;
const scrollTop = window.scrollY;
html.classList.add("-scroll-lock");
body.classList.add("-scroll-lock");
document.body.scrollTo(0, scrollTop);
html.setAttribute("data-scroll", scrollTop);
$(".--modal-scrollable-element").on("touchmove pointermove", preventDefault);
}
function unlockScroll() {
const html = document.documentElement;
const body = document.body;
const scrollPositionBeforeLock = html.getAttribute("data-scroll");
html.classList.remove("-scroll-lock");
body.classList.remove("-scroll-lock");
window.scrollTo(0, scrollPositionBeforeLock);
document.body.scrollTo(0, 0);
$(".--modal-scrollable-element").off("touchmove pointermove", preventDefault);
}
// Check device type
const isApple = navigator.userAgent.toLowerCase().indexOf("mac") !== -1;
const isAndroid = navigator.userAgent.toLowerCase().indexOf("android") !== -1;
if (isApple) {
document.body.classList.add("-apple");
}
if (isAndroid) {
document.body.classList.add("-android");
}
// Check device size
window.isPc = window.innerWidth > 1024;
window.isTablet = window.innerWidth > 759 && window.innerWidth <= 1024;
window.isMobile = window.innerWidth < 760;
function checkDeviceSize() {
window.isPc = window.innerWidth > 1024;
window.isTablet = window.innerWidth > 759 && window.innerWidth <= 1024;
window.isMobile = window.innerWidth < 760;
}
window.addEventListener("DOMContentLoaded", checkDeviceSize);
window.addEventListener("resize", checkDeviceSize);
// Set CSS variable with window.innerHeight
function setCssWindowInnerHeight() {
document.documentElement.style.setProperty("--window-inner-height", `${window.innerHeight}px`);
}
window.addEventListener("DOMContentLoaded", setCssWindowInnerHeight);
window.addEventListener("resize", setCssWindowInnerHeight);
// Set CSS variable with scrollbar width
function setScrollbarWidthInCSS() {
$("body").append(`
<div id="scrollbar-width-test" style="position: absolute;top: -999px;left: -999px;width: 50px;height: 50px;overflow: scroll;">
<div style="height: 100px;"></div>
</div>
`);
const scrollbarWidthTestEl = $("#scrollbar-width-test")[0];
const scrollbarWidth = scrollbarWidthTestEl.offsetWidth - scrollbarWidthTestEl.clientWidth;
document.documentElement.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
window.scrollbarWidth = scrollbarWidth;
scrollbarWidthTestEl.remove();
}
window.addEventListener("DOMContentLoaded", setScrollbarWidthInCSS);
window.addEventListener("resize", setScrollbarWidthInCSS);
function fullTransitionendCallback(element, callback, customProperty = false) {
if ($(element).length === 0) return;
const transitionProperties = $(element)
.css("transition-property")
.split(",")
.map((property) => {
return property.trim();
});
const transitionDurations = $(element)
.css("transition-duration")
.split(",")
.map((duration) => {
return parseFloat(duration);
});
let longestProperty = false;
if (transitionProperties.length > 1 && customProperty === false) {
longestProperty =
transitionProperties[transitionDurations.indexOf(Math.max(...transitionDurations))];
}
$(element).on("transitionstart", function () {
$(this).removeAttr("data-transitionend-triggered");
});
$(element).on("transitionend", function (e) {
const isTriggered = $(this).is("[data-transitionend-triggered]");
if (isTriggered) return;
const isCustomProperty = customProperty && e.originalEvent.propertyName === customProperty;
const isSingleCallback =
customProperty === false && longestProperty === false && typeof callback === "function";
const isLongestPropertyCallback =
longestProperty &&
e.originalEvent.propertyName === longestProperty &&
typeof callback === "function";
if (isCustomProperty || isSingleCallback || isLongestPropertyCallback) {
$(this).attr("data-transitionend-triggered", true);
callback(e);
}
});
}
function customAccordionReady() {
$(".faq-item").each(function () {
const openClass = $(this).hasClass("-open");
if (openClass) {
openCustomAccordion($(this));
$(this).addClass("-open");
}
});
}
const accordionWithImageWrapper = $(".accordion-with-image-wrapper");
if (accordionWithImageWrapper.length) {
const firstAccordion = accordionWithImageWrapper.first().find(".faq-item").first();
openCustomAccordion(firstAccordion);
firstAccordion.addClass("-open");
}
$(document).on("click", ".faq-item__open.--accordion__open", function () {
const accordion = $(this).closest(".faq-item");
const isAccordionLock =
accordion.find("[data-accordion-in-process]").length ||
accordion.parent().closest("[data-accordion-in-process]").length;
if (isAccordionLock) return;
if (accordion.closest(".accordion-with-image-wrapper").length) {
let index = accordion.closest(".accordion-with-image-wrapper").index();
$(".faq-list-img").find(".-active").removeClass("-active");
$(".faq-list-img").find(".faq-img").eq(index).addClass("-active");
$(".accordion-item-with-image-img-mobile").removeClass("-active");
$(".accordion-item-with-image-img-mobile").eq(index).addClass("-active");
}
const isOpen = accordion.hasClass("-open");
const icon = accordion.find(".accordion-icon");
$(".faq-item.-open").each(function () {
closeCustomAccordion($(this));
$(this).removeClass("-open");
$(this).find(".accordion-icon").css("transform", "rotate(0deg)");
});
accordion.attr("data-accordion-in-process", true);
if (isOpen) {
closeCustomAccordion(accordion);
icon.css("transform", "rotate(0deg)");
accordion.removeClass("-open");
} else {
openCustomAccordion(accordion);
icon.css("transform", "rotate(180deg)");
accordion.addClass("-open");
}
});
function openCustomAccordion(accordion) {
const container = accordion.find(".--accordion__content-container").eq(0);
const contentHeight = accordion.find(".--accordion__content").eq(0).outerHeight();
accordion.addClass("-open");
container.css("height", `${contentHeight}px`);
closeSameAccordionGroup(accordion);
}
function closeCustomAccordion(accordion) {
const container = accordion.find(".--accordion__content-container").eq(0);
const containerCurrentHeight = container.outerHeight();
container.css({
height: `${containerCurrentHeight}px`,
transition: "unset",
});
container.outerHeight(); // Lifehack
container.css({
height: "0px",
transition: "",
});
accordion.removeClass("-open");
closeAccordionChildren(accordion);
}
function closeAccordionChildren(accordion) {
if (accordion.is("[data-close-children]")) {
accordion.find(".--accordion").each(function () {
closeCustomAccordion($(this));
});
}
}
function closeSameAccordionGroup(accordion) {
const groupName = accordion.attr("data-accordion-group");
if (groupName) {
$(`.--accordion[data-accordion-group="${groupName}"]`).each(function () {
if (accordion[0] !== this) {
closeCustomAccordion($(this));
}
});
}
}
fullTransitionendCallback(
".--accordion__content-container",
function (e) {
const accordion = $(e.target).closest(".--accordion");
const isOpen = accordion.hasClass("-open");
accordion.removeAttr("data-accordion-in-process");
if (isOpen) {
$(e.target).css("height", "auto");
}
},
"height"
);
// Anchor link - params
const scrollLinkMinSpeed = 600;
const scrollLinkSpeedValue = 2;
const scrollLinkDefaultOffset = false;
const scrollLinkCustomOffset = 20;
const scrollLinkDefaultOffsetToTop = false;
const scrollLinkCustomOffsetToTop = false;
const scrollLinkDefaultOffsetToBottom = false;
const scrollLinkCustomOffsetToBottom = false;
// Anchor link - logic
$(document).on("click", "a", function (e) {
const href = $(this).attr("href");
const to = getElementByHref(href);
if (to) {
e.preventDefault();
const position = getScrollLinkFinalPosition(to);
if (position === window.scrollY) return;
const speed = getScrollSpeedByPosition(position);
$("html, body").animate({ scrollTop: position }, 0);
}
});
// Anchor link - helpers
function getElementByHref(href) {
let hash = false;
if (href.indexOf("#") === 0) {
hash = href;
} else {
const url = new URL(href);
if (url.host === window.location.host && url.pathname === window.location.pathname) {
hash = url.hash ? url.hash : false;
}
}
if (hash === "#") {
hash = false;
} else {
hash = $(hash);
}
return hash.length ? hash : false;
}
function getScrollLinkDefaultValue(value, hasBg) {
if (value === false) return false;
let returnValue = false;
if (typeof value === "object") {
let objectKey;
if (hasBg && typeof value["hasBg"] !== "undefined") {
objectKey = value["hasBg"];
} else {
objectKey = value["default"];
}
if (typeof objectKey === "string" || typeof objectKey === "number") {
returnValue = objectKey;
} else if (typeof objectKey === "object") {
Object.keys(objectKey).forEach((key) => {
if (window.innerWidth > key) {
returnValue = objectKey[key];
return false;
}
});
}
} else {
returnValue = value;
}
return returnValue;
}
function getScrollLinkPositionByParams(to, offsetValue, customOffsetValue) {
const pageScrollHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);
const maxScrollHeight = pageScrollHeight - window.innerHeight;
const header = $(".header");
const marginTop = parseInt(to.css("margin-top"));
let offset = 0;
let position = to.offset().top;
if (offsetValue === "margin") {
offset += marginTop;
} else if (offsetValue === "half-margin") {
offset += marginTop / 2;
} else if (offsetValue === "header-height") {
offset += header.length ? header.outerHeight() : 0;
}
if (customOffsetValue) {
offset += customOffsetValue;
}
position -= offset;
if (position < 0) {
position = 0;
} else if (position > maxScrollHeight) {
position = maxScrollHeight;
}
return position;
}
function getScrollLinkFinalPosition(to) {
const hasBg = $(to).hasClass("--has-bg");
const offsetValue = getScrollLinkDefaultValue(scrollLinkDefaultOffset, hasBg);
const customOffsetValue = getScrollLinkDefaultValue(scrollLinkCustomOffset, hasBg);
const offsetValueToTop = getScrollLinkDefaultValue(scrollLinkDefaultOffsetToTop, hasBg);
const customOffsetValueToTop = getScrollLinkDefaultValue(scrollLinkCustomOffsetToTop, hasBg);
const offsetValueToBottom = getScrollLinkDefaultValue(scrollLinkDefaultOffsetToBottom, hasBg);
const customOffsetValueToBottom = getScrollLinkDefaultValue(
scrollLinkCustomOffsetToBottom,
hasBg
);
let position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValue);
if (position > window.scrollY && (offsetValueToBottom || customOffsetValueToBottom)) {
if (offsetValueToBottom === false) {
position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValueToBottom);
} else if (customOffsetValueToBottom === false) {
position = getScrollLinkPositionByParams(to, offsetValueToBottom, customOffsetValue);
} else {
position = getScrollLinkPositionByParams(to, offsetValueToBottom, customOffsetValueToBottom);
}
}
if (position < window.scrollY && (offsetValueToTop || customOffsetValueToTop)) {
if (offsetValueToTop === false) {
position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValueToTop);
} else if (customOffsetValueToTop === false) {
position = getScrollLinkPositionByParams(to, offsetValueToTop, customOffsetValue);
} else {
position = getScrollLinkPositionByParams(to, offsetValueToTop, customOffsetValueToTop);
}
}
return position;
}
function getScrollSpeedByPosition(position) {
let speed = position * (0.001 * scrollLinkSpeedValue) * 100;
if (speed < scrollLinkMinSpeed) {
speed = scrollLinkMinSpeed;
}
return speed;
}
// Anchors navigation
function updateAnchorNav(e) {
const scrollHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);
const isResize = e ? e.type.toLowerCase() === "resize" : false;
const halfViewport = window.scrollY + window.innerHeight / 2;
const maxScrollPosition = scrollHeight - window.innerHeight;
$(".--anchors-nav").each(function () {
const links = $(this).find("a");
if (links.length === 0) {
$(this).addClass("-empty");
return;
} else {
$(this).removeClass("-empty");
}
let currentElement = false;
if (window.scrollY === 0) {
currentElement = links.eq(0);
} else if (window.scrollY === maxScrollPosition) {
currentElement = links.eq(links.length - 1);
} else {
links.each(function () {
const href = $(this).attr("href");
const element = $(href);
if (element.offset()?.top < halfViewport) {
currentElement = $(this);
}
});
}
currentElement = $(currentElement);
const isCurrentElementActive = currentElement.hasClass("-active");
if (!isCurrentElementActive || isResize) {
links.removeClass("-active");
currentElement.addClass("-active");
updateAnchorNavLinePosition($(this), currentElement);
}
});
}
function getAnchorNavType(nav) {
let type = nav.data("anchors-nav-type");
const tabletType = nav.data("anchors-nav-tablet-type");
const mobileType = nav.data("anchors-nav-mobile-type");
if (window.isTablet && tabletType) {
type = tabletType;
}
if (window.isMobile && mobileType) {
type = mobileType;
}
return type;
}
function updateAnchorNavLinePosition(nav, element) {
if (element === false) return;
const type = getAnchorNavType(nav);
const line = nav.find(".--anchors-nav__line");
if (line && type === "horizontal") {
const elementLeft = element.offset()?.left;
const elementWidth = element.outerWidth();
const lineTransform = line.css("transform");
const lineTransformValueX =
lineTransform?.indexOf("matrix") !== -1 ? parseInt(lineTransform?.split(",")[4]) : 0;
const lineLeft = line.offset()?.left - lineTransformValueX;
const lineTo = elementLeft - lineLeft;
line.css({
width: `${elementWidth}px`,
height: "",
transform: `translateX(${lineTo}px)`,
});
}
if (line && type === "vertical") {
const elementTop = element.offset()?.top;
const elementHeight = element.outerHeight();
const lineTransform = line.css("transform");
const lineTransformValueY =
lineTransform?.indexOf("matrix") !== -1 ? parseInt(lineTransform?.split(",")[5]) : 0;
const lineTop = line.offset()?.top - lineTransformValueY;
const lineTo = elementTop - lineTop;
line.css({
width: "",
height: `${elementHeight}px`,
transform: `translateX(11px) translateY(${lineTo}px)`,
});
}
}
function generateAnchorsNav() {
$(".--anchors-nav__list").each(function () {
const groupName = $(this).data("anchors-group");
const htmlTemplate = $(this).data("html-template");
const searchSelector = $(this).data("search-selector");
if (!groupName) return;
let anchorsNavHtml = "";
const anchors = $(`[data-anchors-group="${groupName}"]`)
.not(".--anchors-nav__list")
.find(searchSelector);
anchors.each(function () {
const id = $(this).attr("id");
if (!id) return;
const dataTitle = $(this).data("title");
const textContent = $(this).text();
const title = dataTitle ? dataTitle : textContent;
anchorsNavHtml += htmlTemplate.replace("[href]", `#${id}`).replace("[title]", title);
});
$(this).html(anchorsNavHtml);
});
updateAnchorNav();
}
$(document).ready(generateAnchorsNav);
$(window).on("load scroll resize", updateAnchorNav);
// Dropdowns functionality
$(document).on("click", ".--dropdown__value", function () {
$(this).closest(".--dropdown").toggleClass("-active");
});
$(document).on("click", ".--dropdown__list-item", function () {
const dropdown = $(this).closest(".--dropdown");
const valueEl = dropdown.find(".--dropdown__value-text");
const valueContainer = dropdown.find(".--dropdown__value");
const text = $(this).text().trim();
const dataValue = $(this).data("value");
const value = dataValue ? dataValue : text;
if (valueEl.length) {
valueEl.html(value);
} else {
valueContainer.html(value);
}
dropdown.find("input").attr("value", value);
dropdown.find(".--dropdown__list-item").removeClass("-active");
dropdown.addClass("-selected").removeClass("-active");
$(this).addClass("-active");
});
$(document).on("click", ".--dropdown__clear", function () {
const dropdown = $(this).closest(".--dropdown");
const placeholder = dropdown.data("placeholder");
const valueEl = dropdown.find(".--dropdown__value-text");
const valueContainer = dropdown.find(".--dropdown__value");
if (valueEl.length) {
valueEl.html(placeholder ? placeholder : "");
} else {
valueContainer.html(placeholder ? placeholder : "");
}
dropdown.find("input").removeAttr("value");
dropdown.find(".--dropdown__list-item").removeClass("-active");
dropdown.removeClass("-selected -active");
});
customClickOutsideCallback(".--dropdown.-active", function (e, selector) {
$(selector).removeClass("-active");
});
function customClickOutsideCallback(selector, callback) {
$(document).on("mouseup", function (e) {
const isSelector = $(e.target).is(selector);
const hasParent = $(e.target).closest(selector).length;
if (!isSelector && !hasParent && typeof callback === "function") {
callback(e, selector);
}
});
}
// Tabs
$(document).on("click", ".--tabs-container__menu-item", function (e) {
const index = $(this).index();
const tabsContainer = $(this).closest(".--tabs-container");
const menuItems = tabsContainer.find(".--tabs-container__menu-item");
const tabs = tabsContainer.find(".--tabs-container__item");
menuItems.removeClass("-active");
menuItems.eq(index).addClass("-active");
updateCustomTabLinePosition(tabsContainer);
updateTabContentHeight(tabsContainer, tabs.eq(index));
tabs.removeClass("-active");
tabs.eq(index).addClass("-active");
});
function updateCustomTabLinePosition(tabsContainer) {
const menu = tabsContainer.find(".--tabs-container__menu");
const menuLine = tabsContainer.find(".--tabs-container__menu-line");
const activeMenuItem = tabsContainer.find(".--tabs-container__menu-item.-active");
if (menuLine.length) {
const lineWidth = activeMenuItem.outerWidth();
const linePosition = menu.scrollLeft() + activeMenuItem.position().left;
menuLine.css({
width: `${lineWidth}px`,
transform: `translateX(${linePosition}px)`,
});
}
}
function updateTabContentHeight(tabsContainer, nextTab) {
const hasAutoHeight = tabsContainer.is("[data-auto-height]");
const animationInProcess = tabsContainer.is("[data-animation-in-process]");
if (hasAutoHeight) {
const itemsContainer = tabsContainer.find(".--tabs-container__items-inner");
const currTabHeight = tabsContainer.find(".--tabs-container__item.-active").outerHeight();
const nextTabHeight = nextTab.outerHeight();
if (animationInProcess) {
itemsContainer.css("height", `${nextTabHeight}px`);
} else {
tabsContainer.attr("data-animation-in-process", true);
itemsContainer.css({
height: `${currTabHeight}px`,
transition: "unset",
});
itemsContainer.outerWidth(); // Lifehack
itemsContainer.css({
height: `${nextTabHeight}px`,
transition: "",
});
}
}
}
function updateAllCustomTabsLinesPosition() {
$(".--tabs-container").each(function () {
updateCustomTabLinePosition($(this));
});
}
function readyCustomTabs() {
$(".--tabs-container").each(function () {
$(this).find(".--tabs-container__menu-item").eq(0).addClass("-active");
$(this).find(".--tabs-container__item").eq(0).addClass("-active");
});
}
fullTransitionendCallback(
".--tabs-container[data-auto-height] .--tabs-container__items",
function (e) {
$(e.target).css("height", "auto");
$(e.target).closest(".--tabs-container").removeAttr("data-animation-in-process");
},
"height"
);
$(document).ready(function () {
readyCustomTabs();
updateAllCustomTabsLinesPosition();
});
$(window).on("resize", updateAllCustomTabsLinesPosition);