Last active
September 24, 2021 11:49
-
-
Save aleksanderwalczuk/c85e7456c1631c6d5bb8c09ed0fa2a04 to your computer and use it in GitHub Desktop.
j-tests
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const showPopupButton = document.querySelector('#testuj > div.ec-section__button > a') | |
| const showPopupButtonContainer = document.querySelector('#testuj > div.ec-section__button') | |
| const ATFContainer = document.querySelector('#page > div.page__wrapper > div:nth-child(2) > section.ec-banner > div > div > div.col-12.col-lg-6.order-2.order-lg-1') | |
| const newButton = showPopupButton.cloneNode(true) | |
| const showPopupButtonSection = document.querySelector('#testuj') | |
| ATFContainer.appendChild(newButton) | |
| // array of section__button children | |
| // used filter to gather only children which tag name is div | |
| const divTypeChildren = Array.from(showPopupButtonContainer.children).filter(el => el.nodeName.toLowerCase() === 'div') | |
| // hide thank you div, show popup and popup bg | |
| newButton.addEventListener('click', () => { | |
| divTypeChildren.map((el, idx) => { | |
| // idx is index of element in array | |
| switch (idx) { | |
| case 0: { | |
| el.style.display = 'flex' | |
| break; | |
| } | |
| case 1: { | |
| el.style.display = 'block' | |
| break; | |
| } | |
| // default happen if index is neither 0 nor 1 | |
| default: { | |
| el.style.display = 'none' | |
| } | |
| } | |
| }) | |
| showPopupButtonSection.style.position = 'static' | |
| close() | |
| }) | |
| // this function is invoked if user click on popup exit icon, | |
| // but only if popup has been opened using spawned (new) | |
| // showPopup button on ATF | |
| function close() { | |
| const btn = document.querySelector('#testuj > div.ec-section__button > div.ec-popup__box.ec-popup__form > div.ec-popup__box-close') | |
| btn.addEventListener('click', () => { | |
| const divTypeChildren = Array.from(showPopupButtonContainer.children).filter(el => el.nodeName.toLowerCase() === 'div') | |
| // hide thank you div, show popup and popup bg | |
| divTypeChildren.map((el, idx) => { | |
| el.style.display = 'none' | |
| console.log(el) | |
| } | |
| ) | |
| // change position of popup button section to static, | |
| // the popup appear on top of the page - ATF section | |
| showPopupButtonSection.style.position = 'static' | |
| }, | |
| // this object is a parameter added to addEvListener function | |
| // if user open popup more than once there will be only ONE | |
| // listener added invoking function close | |
| { once: true } | |
| ) | |
| // if user clicks the origin popup button we have to change | |
| // it's section position back to relative | |
| showPopupButton.addEventListener('click', () => { | |
| showPopupButtonSection.style.position = 'relative' | |
| }, { once: true }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment