Untitled
unknown
plain_text
3 years ago
9.1 kB
7
Indexable
(function() {
try {
/* main variables */
var debug = 0;
var variation_name = "";
var $;
/* all Pure helper functions */
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function() {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function() {
clearInterval(interval);
}, delayTimeout);
}
function live(selector, event, callback, context) {
/****Helper Functions****/
// helper for enabling IE 8 event bindings
function addEvent(el, type, handler) {
if (el.attachEvent) el.attachEvent("on" + type, handler);
else el.addEventListener(type, handler);
}
// matches polyfill
this.Element &&
(function(ElementPrototype) {
ElementPrototype.matches =
ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function(selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
})(Element.prototype);
// live binding helper using matchesSelector
function live(selector, event, callback, context) {
addEvent(context || document, event, function(e) {
var found,
el = e.target || e.srcElement;
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
if (found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
let egOpend;
let egFirst= false;
let egTimeout;
/* Variation Init */
function init() {
/* start your code here */
egOpend = Array.from(document.querySelectorAll(".l-wizard__body > div > div:has(>div:not([style*='display: none;'])) .l-wizard-section__container"));
egOpend = egOpend.slice(3);
closeOpenArrows();
// checking ajax request
egFirst = false;
closeActiveSection();
}
// header click detect
live('.l-wizard-section__header', 'click', (e) => {
if (e.target.classList.contains("l-wizard-section__header")) {
let egContainer = e.target.parentElement.querySelector(".l-wizard-section__container");
if (egContainer) {
egContainer.classList.toggle("eg-inactive-section");
egContainer.removeAttribute("style");
if (!egContainer.classList.contains("eg-inactive-section")) {
updateEgopend(egContainer, "unshift");
e.target.parentElement.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
updateEgopend(egContainer, "shift");
}
}
} else if ((e.target.classList.contains("l-wizard-section__title")) || (e.target.classList.contains("l-wizard-section__icon"))) {
e.target.parentElement.click();
}
});
// order now button click
live(['html body .c-product-card__btn',
"html body .c-product-header__wizard-cta",
"html body .c-sticky-nav__button"
], "click", function() {
// console.log("order btn")
egOpend = null;
egFirst = true;
waitForElement(".l-wizard__body > div > div:has(>div:not([style*='display: none;'])) .l-wizard-section__container", init, 50, 15000);
});
// edit btn click logic
live('.c-wizard-summary__btn-edit', 'click', function() {
if (this.classList.contains("c-wizard-summary__btn-edit")) {
let egTargetTxt = this.parentElement.firstElementChild.innerText.toUpperCase().split(" ").shift();
// searching section for this text
document.querySelectorAll(".l-wizard-section").forEach(secTion => {
if (secTion.innerText.toUpperCase().indexOf(egTargetTxt) != -1) {
secTion.scrollIntoView({ behavior: "smooth", block: 'start' });
//========== EDIT BUTTON CLICK LOGIC ========//
/* so here i'm lopping through all the sections and getting their inner text
if inner text has the egTargetTxt then only we are scrolling to that section
and showing the container element inside of it */
if (secTion.querySelector(".eg-inactive-section")) {
updateEgopend(secTion.querySelector(".eg-inactive-section"), "unshift");
secTion.querySelector(".eg-inactive-section").classList.remove("eg-inactive-section");
}
}
});
}
});
function closeOpenArrows() {
[...new Set(egOpend)].forEach(sec => {
sec.classList.add("eg-inactive-section");
});
setTimeout(function(){
egOpend = Array.from(document.querySelectorAll(".l-wizard__body > div > div:has(>div:not([style*='display: none;'])) .l-wizard-section__container"));
},4000);
}
function updateEgopend(ele, t) {
if (egOpend == null) {
egOpend = [];
}
if (t == "shift") {
egOpend.shift(ele);
} else if (t == "unshift") {
egOpend.unshift(ele);
}
}
// check for ajax api if it is put request then close tab accordinglly
function closeActiveSection() {
const send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
this.addEventListener('load', function() {
console.log(this);
if (this.responseURL.indexOf("/api/wizard/") != -1) {
if ( egFirst == false) {
console.log("data updated in server");
// then perform your task
closeOpenArrows();
let egBlock = document.querySelector(".l-wizard__body > div > div:has(>div:not([style*='display: none;']) .l-wizard-section__icon:not(.is-active):not(.is-inactive)) .l-wizard-section__header");
egBlock && egBlock.click();
}
}
});
return send.apply(this, arguments);
};
}
/* Initialize variation */
waitForElement('html body .l-wizard__body', init, 50, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();
<style>
html {
scroll-behavior: smooth;
}
#container-to-scroll > div:nth-child(2) > div > div:has(.l-wizard-section__container){
cursor: pointer;
}
.eg-inactive-section{
max-height: 0;
overflow: hidden;
}
.l-wizard-section{
padding-block: .8rem !important;
}
html body .l-wizard__body .l-wizard-section:not(#wizard-delivery) .l-wizard-section__action-button {
display: none !important;
}
/*arrow up and down*/
html body .l-wizard-section__header {
position: relative !important;
padding-right: 3rem !important;
}
html body .l-wizard-section__header::after {
content: '';
position: absolute;
right: 0;
top: 50%;
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border: solid #ED40A9;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translateY(-100%);
cursor: pointer;
}
.l-wizard-section__header:has(~.l-wizard-section__container:not(.eg-inactive-section))::after{
transform:rotate(227deg);
}
/*hiding arrow if section has no content*/
.l-wizard-section:has(.l-wizard-section__header .is-inactive) .l-wizard-section__header::after{
display:none !important;
pointer-events: none !important;
}
@media(max-width: 767px){
html body .l-wizard__body{
padding-top: 20px !important;
}
}
</style>Editor is loading...