Useful Heyflow scripts

heyflow.js

const disabledPrefixes = [];

window.Client = {
    cookieConsentInitialized: false,
    
	cookieConsentInit: function(screenName) {
	    if (this.cookieConsentInitialized) {
	        return;
	    }

	    const container = document.querySelector('#heyflow-cookie-consent');
	    if (container) {
		    const hideCookiePopupPages = ['impressum', 'datenschutz'];
		    if (hideCookiePopupPages.includes(screenName)) {
		        this.hideCookieConsent();
		    }
		
		    this.addLegalLinksToCookieConsent();
		    
		    this.cookieConsentCheckShield();
		    
	        const settingsBtn = document.querySelector('#heyflow-cookie-consent .popup .content .buttons > button');
	        if (settingsBtn) {
		        settingsBtn.addEventListener("click", (e) => {
	                setTimeout(() => {
    		            this.addLegalLinksToCookieConsent();
                    }, 150);
	            });
	        }
	        
	        this.cookieConsentInitialized = true;
	    } else {
	        // try again in 100ms
	        setTimeout(() => {
	            this.cookieConsentInit(screenName);
            }, 100);
	    }
	},
	
	cookieConsentCheckShield: function() {
	    const shield = document.querySelector('#heyflow-cookie-consent .shield');
	    if (shield) {
	        shield.addEventListener("click", (e) => {
	           setTimeout(() => {
    	            this.addLegalLinksToCookieConsent();
               }, 150);
	        });
	        
	        // footer cookie settings link / button
	        const settingsLink = document.querySelector('[data-openli="show-cookie-settings"], [data-legalmonster="show-cookie-settings"]');
	        if (settingsLink) {
	            settingsLink.addEventListener("click", (e) => {
	                this.showCookieConsent();
	            });
	        } else {
	            // try again in 100ms
	            setTimeout(() => {
	                this.cookieConsentCheckShield();
                }, 100);
	        }
	    } else {
	        // try again in 100ms
	        setTimeout(() => {
	            this.cookieConsentCheckShield();
            }, 100);
	    }
	},
	
	addLegalLinksToCookieConsent: function(){
	    const legalLinks = document.querySelector('#template-footer [data-blocktype="link-list"] .link-list');
        const container = document.querySelector('#heyflow-cookie-consent .popup');
        if(container) {
            //container.innerHTML = '';
            container.appendChild(legalLinks.cloneNode(true));
            const linkList = document.querySelector('#heyflow-cookie-consent .popup .link-list');
            linkList.classList.add("powered-by");
        }
	},

	showCookieConsent: function(){
        const container = document.querySelector('#heyflow-cookie-consent');
        container.style.setProperty("display", "block");
        
	    const shield = document.querySelector('#heyflow-cookie-consent .shield');
	    if (shield) {
	        shield.click();
	    }

	    setTimeout(() => {
    	    this.addLegalLinksToCookieConsent();
        }, 150);
	},

	hideCookieConsent: function(){
        const container = document.querySelector('#heyflow-cookie-consent');
        container.style.setProperty("display", "none", "important");
	},


	fillInputs: function(screenId) {
		// fill inputs if variable="placeholder" with the placeholder's value.
		const inputPlaceholder = document.querySelectorAll(`
			#${screenId} [data-type="input"][data-variable="placeholder"],
			#${screenId} [data-type="input"][data-label="Stelle"],
			#${screenId} [data-type="input"][data-variable="jobposting"]
		`);
		inputPlaceholder.forEach((item) => {
			item.value = item.placeholder;
		});

		// fill inputs if variable="date" with the current date
		const inputDate = document.querySelector(`#${screenId} [data-type="input"][data-variable="date"]`);
		if (inputDate) {
			inputDate.value = new Date().toLocaleDateString("de-DE");
		}
	},

	// smooth scroll for anchor links
	enableSmoothScroll: function() {
	    const items = document.querySelectorAll('[data-scroll-anchor]')
	    items.forEach((item) => {
	        item.addEventListener("click", (e) => {
	            let anchor = '';
	            if (e.currentTarget.dataset.hasOwnProperty('scrollAnchor')) {
	                anchor = e.currentTarget.dataset.scrollAnchor;
	            }
	            
	            if (anchor) {
	                const parentSection = e.currentTarget.closest('section');
	                const element = parentSection.querySelector(`[data-anchor="${anchor}"]`);
	                element.scrollIntoView({behavior: 'smooth'});
                }
	        });
        });
	},
	
	checkRedirect: function(screenName) {
	    // only redirect for live domains
	    if(disabledPrefixes && window.location.host.startsWith("jobs") ){
	        for (let prefix of disabledPrefixes) {
        	    if (screenName.startsWith(prefix)) {
        	        console.log('redirect', screenName, prefix);
	                window.location.hash = 'start';
	            }
	        }
	        
	    }
	},

	init: function() {
		this.enableSmoothScroll();
	},

	onRender: function(screenId) {
		const screenName = document.querySelector(`#${screenId}`).attributes.name.nodeValue;
		console.log("Navigated to:", screenId, screenName);
		this.fillInputs(screenId);
		
		this.cookieConsentInit(screenName);
		this.checkRedirect(screenName)
	}
};

heyflow.less

#heyflow-cookie-consent {
    .heyflow-cookie-consent {
        position: relative;
        
        > .container {
            justify-content: center;
        }
        
        .shield {
            display: none;
        }
    }

    .headline1 {
        font-size: 1.6em;
        margin-bottom: 0.6em;
    }

    .headline2 {
        display: none;
    }
    
    @media (max-width: 768px) {
    
        .buttons-top {
            button {
                width: 100%;
                margin-bottom: 10px;
            }    
        }

        .content > .buttons {
            flex-direction: column;
        
            .buttons-shortcuts {
                order: -1;
                flex-wrap: wrap;
            
                button {
                    width: 100%;
                    margin-bottom: 10px;
                    
                    &:nth-child(2) {
                        order: -1;
                    }
                }
            }
        }
    }
    
    a.powered-by {
        display: none;
    }

    .powered-by {
        text-decoration: none;
        padding: 14px 0;
        font-size: 0.95em;
        color: rgba(0, 0, 0, 0.5);
        background: #f2f2f5;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 7.5px;
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
    }
    
    .link-list.powered-by + .link-list {
        display: none;
    }
}

/**********************/
/****   ELEMENTS  *****/
/**********************/
.main {
    overflow-x: visible;
}

/* fix buttons text not breaking if too small */
.button {
    white-space: normal;
}
.button .button-label {
    line-height: 1.2;
}
.button.link .button-label {
    text-decoration: underline;
}

.check-list.check-list li {
 -webkit-box-align:flex-start;
 -ms-flex-align:flex-start;
 align-items:flex-start;
}

.check-list.check-list .text {
    line-height: 1.15;
}

p {
    margin-top: 0;   
}

p > a {
    word-break: break-word;
}

strong {
    hyphens: auto;
}

.contact-form-dse a,
.simple-checkbox-text.simple-checkbox-text a {
    color: inherit;
    text-decoration: underline;
}

.contact-form-dse {
    color: #bbb;
    font-size: 0.8em;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p {
    margin-top: 0.4em;   
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    h4 {
        font-size: 1.1rem;
    }
}


/* ====================== */
/* list */
/* fix element not responsive */
.rich-list,
.rich-list-options {
    @media (max-width: 560px) {
        grid-template-columns: 1fr;
    }
}
.rich-list-option {
    @media (max-width: 560px) {
        margin-right: 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

.elements-container {
    .rich-list .rich-list-options {
        display: flex;
    }

    .rich-list-option {
        align-items: center;
    }

    .graphics-container {
        margin-bottom: 0;
    }
}

/* Checklist */
.check-list-block.inner-mid {
    .check-list {
        @media (max-width: 560px) {
            flex-direction: column !important;
        }

        @media (min-width: 561px) {
            flex-wrap: wrap;
            li {
                flex: 0 0 33%;
            }
        }
    }
}

/* ====================== */
    

.elements-container .container-style-1 {
    border-color: #aaa;
}


.generic-button.generic-button {
    white-space: normal;
  
    .label-container {
        overflow-x: visible;
    }
    
    .line2 {
        margin-top: 5px;
    }
}


/**********************/
/****   header    *****/
/**********************/

#template-header .image-block {
    height: auto;
}

#template-header img {
    width: 120px;
    height: auto;
}
@media (max-width: 480px) {
    #template-header img {
        width: 120px;
    }
}

.fb-disclaimer {
    max-width: 900px;
    font-size: 13px;
    color: #AAA;
    padding: 10px;
    margin: 0 auto;
}


/********************/
/** 01-02-03-start **/
/********************/

img[alt="Ohne Anschreiben & CV"] {
    position: relative;
    width: 90px;
    height: auto;
    z-index: 1;
    right: 30px;
    margin-top: -80px;
    margin-bottom: -10px;
}
@media (max-width: 480px) {
    img[alt="Ohne Anschreiben & CV"] {
        width: 70px;
        right: 5px;
        margin-top: -80px;
    }
}
@media (min-width: 1024px) {
    img[alt="Ohne Anschreiben & CV"] {
        width: 130px;
        margin-bottom: -60px;
        right: 8%;
    }
}

[alt="Start Klick!"] {
    display: block;
    transform: rotate(-14deg) translate(-14px, 20px);
    margin-top: -25px;
    
    // fix overflow
    position: relative;
    left: 25%;
    max-width: 50%;
}

[alt="Button Klick!"] {
    display: block;
    transform: rotate(-15deg) translate(50px, 30px);
    margin-top: -10px;

    // fix overflow
    position: relative;
    left: 25%;
    max-width: 50%;
}


/**********************/
/****   Kontakt  *****/
/**********************/

section[name="kontakt"] {
    .image-block {
        width: 280px !important;
    }
}