Skip to content

Instantly share code, notes, and snippets.

@SimonMayerhofer
Last active July 1, 2024 22:23
Show Gist options
  • Save SimonMayerhofer/ec09dcefdc5549cc2cf4d661d6f66abc to your computer and use it in GitHub Desktop.
Save SimonMayerhofer/ec09dcefdc5549cc2cf4d661d6f66abc to your computer and use it in GitHub Desktop.
Useful Heyflow scripts
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-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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment