Untitled
unknown
plain_text
2 years ago
9.1 kB
6
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...