// ---------------- // All $functions // ---------------- window.$functions = { log: (val) => { console.log({ val }); return val; }, valueOrEmpty: (val) => { if (!val) return ""; return val; }, getImageSrcSet: (url) => { const srcset = ` ${url}?w=320&webp=1 320w, ${url}?w=480&webp=1 480w, ${url}?w=640&webp=1 640w, ${url}?w=800&webp=1 800w, ${url}?w=1024&webp=1 1024w, ${url}?w=1280&webp=1 1280w` return srcset; }, isExternalLink: (url) => { let isExternal = url.startsWith("http"); return isExternal }, formatArticleTime: (timestamp) => { const date = new Date(timestamp); return date.toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, }); }, getTaxonomyTitle: (taxonomy, parentTaxonomy) => { if (parentTaxonomy) return parentTaxonomy.name return taxonomy.name; }, getTargetAttribute: (isExternal) => { console.log("isExternal", isExternal); if (isExternal === "no") return ""; return "_blank"; }, getAddressMarkup: (content) => { if (!content) return '' let ort = content?.properties['kontaktdaten.adresse.ort']; let strasse = content?.properties['kontaktdaten.adresse.strasse']; let plz = content?.properties['kontaktdaten.adresse.plz']; let firmenname = content?.properties['kontaktdaten.firmenname']; let allPresent = ort && strasse && plz && firmenname; // return allPresent ? `${firmenname}
${strasse}
${plz} ${ort}` : ''; return `${firmenname}
${strasse}
${plz} ${ort}`; }, getPrimaryOrFirstTaxonomy, getCompanyName: (contentObj) => { if (!contentObj) return ''; let nameAssociated = contentObj?.properties["arbeitgeber.0.post_title"]; let nameCustomField = contentObj?.properties.arbeitgebername; let name; if (nameAssociated) { name = nameAssociated } else { name = nameCustomField; } return name ?? 'no companyname avail'; }, getEmployerSingleDepartmentsSectionMarkup: (contentObj) => { if (!contentObj) return '' let markup = ''; let { kontaktdaten } = contentObj.properties; let kontaktdatenParsed = JSON.parse(kontaktdaten); for (let abteilung of kontaktdatenParsed.abteilungen) { markup += `

`; markup += `

${abteilung.abteilungsname}

`; markup += `

`; for (let person of abteilung.kontaktpersonen) { markup += `

`; markup += `

${person.name}

` markup += `

${person.position}

`; markup += `

${person.telefon}

`; markup += `

${person.email}

`; markup += `

`; } markup += `

`; markup += `

`; } return markup; }, getEmployerSingleContactSectionMarkup: (contentObj) => { if (!contentObj) return '' let website = contentObj.properties["kontaktdaten.webseite"]; let email = contentObj.properties["kontaktdaten.email"]; let phone = contentObj.properties["kontaktdaten.telefon"]; return website || phone || email ? `

${website ? `

${website}

` : ``} ${phone ? `

${phone}

` : ``} ${email ? `

${email}

` : ``}

` : ``; }, getJobPostingTeaserThumbnailMarkup: (contentObj) => { if (!contentObj) return ''; let urlAssociatedThumb = contentObj?.properties['arbeitgeber.0.thumbnail']; let urlPostThumb = contentObj?.thumbnailsExtended?.default?.url; let url; if (urlPostThumb) { url = urlPostThumb; } else { url = urlAssociatedThumb; } let title = contentObj?.properties['arbeitgeber.0.post_title']; let alt = contentObj?.properties['arbeitgeber.0.post_title']; let markup = '

'; if (!!url && url !== 'undefined') { let urlTachyonified = url + "?webp=1&quality=60&w=640"; markup = ` ${alt}

`; }; markup += '

'; return markup; }, formatJobPostingPublishingDate: (timestamp) => { const date = new Date(timestamp); return date.toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", }); }, getCoAuthorsText: (postType, authorLength) => { switch (postType) { case "post": case "advertorials": if (authorLength < 3) { return "Co-Autor*in: "; } else { return "Co-Autor*innen: "; } case "interviews": if (authorLength < 2) { return "Die Fragen stellte "; } else { return "Die Fragen stellten "; } default: return ""; } }, getAuthorsMetaText: (postType) => { switch (postType) { case "interviews": return "Interview geführt von " case "meinung": return "Kommentar von " case "gastbeitrag": return "Gastbeitrag von " default: return ""; } }, getTabIndex: (openSideMenu) => { console.log("openSideMenu", openSideMenu); if (openSideMenu === "byTap") { return "-1" } else { return "0" }; }, // SSO Login getOriginNotNull: origin => { return origin || ''; }, getLocationHref: () => { return document.URL; }, isLoggedIn: token => { return token ? 'yes' : 'no'; }, loginLogout: (token) => { try { if (token) { externalLogInOut.logout(); } else { externalLogInOut.login(); } } catch (e) { } return '#'; }, // Paywall handleContentBodyPaywall, isIterable, executeWhenDomElementById, paywallIsNeeded, handlePaywallStyle, handleContentBody, contentBodyMutationCallBack, // Paywall Element with Cloud Settings getPaywallConfigField: (field_id, config_id, paywallConfigs) => { let config = paywallConfigs.find( (config2) => config2.config_id === config_id ); return paywallConfigs && config[field_id] ? `${config[field_id]}` : ""; }, getPaywallConfigFieldArrayPath: (field_id, config_id, paywallConfigs) => { let config = paywallConfigs.find( (config2) => config2.config_id === config_id ); let string = `$global.appSettings.options_settings.paywall_configs_2[${paywallConfigs.indexOf( config )}]['${field_id}']`; return string; }, getPaywallLinkType: (url) => { if (!url) { return "none"; } return url.toLowerCase().startsWith("http") ? "external" : "internal"; }, getPaywallCurrentLocation: () => { return location.href; }, cleanPhoneNumber, getArticlePath: (content) => { // console.log(content); const taxonomyCategoryPrimary = content.properties["taxonomy.category.primary"] ?? null; const taxonomies = content.taxonomies ?? []; const slug = content.properties.slug ?? null; const taxId = getPrimaryOrFirstTaxonomy(taxonomies,taxonomyCategoryPrimary).id; // console.log(content, taxId, slug) return `${taxId}/${slug}`; } } // ---------------- // Helper Functions // ---------------- function cleanPhoneNumber(rawNumber) { if (typeof rawNumber !== 'string' || !rawNumber) { console.error("Invalid input for cleanPhoneNumber."); return ''; } // 1. Check if the number starts with '+' to preserve the international prefix. const hasPlus = rawNumber.trim().startsWith('+'); // 2. Remove all non-digit characters (including spaces, dashes, parentheses, etc.). let cleaned = rawNumber.replace(/\D/g, ''); // 3. If the original number had a leading '+', prepend it back. // This is crucial for international dialing via the tel: protocol. if (hasPlus) { cleaned = '+' + cleaned; } return cleaned; } function getPrimaryOrFirstTaxonomy(taxonomies, taxonomyCategoryPrimary) { if (taxonomyCategoryPrimary) { const taxonomy = taxonomies.find((tax) => tax.id === taxonomyCategoryPrimary); return { id: taxonomy.id, name: taxonomy.name } } return { id: taxonomies[0].id, name: taxonomies[0].name }; } // ---------------- // // ---------------- // Check if object is iterable function isIterable(obj) { if (obj == null) { return false; } return typeof obj[Symbol.iterator] === "function"; } // Execute callback when DOM element is found by ID function executeWhenDomElementById({ elementId, callback, errorMessage = "", maxWaitTimeMs = 2e3, }) { const interval = 100; let currentWaitTime = 0; let element = void 0; const myInterval = setInterval(() => { element = document.getElementById(elementId); if (element) { clearInterval(myInterval); callback(element); } else if (currentWaitTime > maxWaitTimeMs) { console.error( `No element with id '${elementId}' found within ${maxWaitTimeMs}ms. ${errorMessage}` ); clearInterval(myInterval); } else { currentWaitTime += interval; } }, interval); } // Determine if paywall is needed based on content function paywallIsNeeded(content) { let isNeeded = true; let isPurchased = content?.purchaseData.purchased; if (content) { isNeeded = !isPurchased; } console.log("paywall isNeeded", isNeeded); return isNeeded; } // Style paywall element with fadeout and offset function handlePaywallStyle(paywallElement, paywallSettings = {}) { if (paywallElement) { paywallElement.style.setProperty( "--fadeoutHeight", `${paywallSettings.base_config?.fadeout || 0}px` ); paywallElement.style.setProperty( "--marginTop", `${paywallSettings.base_config?.offset || 0}px` ); paywallElement.style.setProperty("--opacity", 1); paywallElement.style.setProperty("--pointerEvents", "all"); } } // Handle content body visibility based on paywall settings function handleContentBody( purpleContentBodyInner, paywallConfig, needsPayWall ) { if (!purpleContentBodyInner) { return; } // select only the first of the paywall settings since this project only has one paywall let paywallSettings = paywallConfig[0]; const behindPaywallClass = "content-behind-paywall"; const contentBlocks = purpleContentBodyInner.children; const rule = paywallSettings?.base_config?.rule; const htmlElements = paywallSettings?.base_config?.html_elements ?? ""; if (!contentBlocks || !rule) { return; } const handleHtmlElements = (validTags, amount, _contentBlocks = []) => { if (!isIterable(_contentBlocks)) { return; } let visibleTagsLeft = amount; for (const contentBlock of _contentBlocks) { if (visibleTagsLeft <= 0) { contentBlock.classList.add(behindPaywallClass); } else if ( validTags.includes(contentBlock.tagName.toLowerCase()) && contentBlock.innerHTML ) { visibleTagsLeft--; } } }; const handleWords = (amount, _contentBlocks = []) => { if (!isIterable(_contentBlocks)) { return; } let cumulatedWords = 0; for (const contentBlock of _contentBlocks) { if (cumulatedWords >= amount) { contentBlock.classList.add(behindPaywallClass); } else { const text = contentBlock.innerText; const words = (text.match(/\S+/g) ?? []).length; cumulatedWords += words; if (cumulatedWords >= amount) { contentBlock.classList.add("last-not-" + behindPaywallClass); } } } }; switch (paywallSettings.base_config.rule) { case "blocks": { const validTags = ["p"]; const amount = paywallSettings?.base_config?.amount_blocks || 0; handleHtmlElements(validTags, amount, contentBlocks); break; } case "headlines": { const validTags = ["h2", "h3", "h4", "h5", "h6"]; const amount = paywallSettings?.base_config?.amount_headlines || 0; handleHtmlElements(validTags, amount, contentBlocks); break; } case "elements": { const validTags = htmlElements.split(" ").map((tag) => tag.toLowerCase()); const amount = paywallSettings?.base_config?.amount_html_elements || 0; handleHtmlElements(validTags, amount, contentBlocks); break; } case "words": { const amount = paywallSettings?.base_config?.amount_words || 0; handleWords(amount, contentBlocks); break; } } if (needsPayWall) { const toRemove = purpleContentBodyInner.getElementsByClassName(behindPaywallClass); while (toRemove[0]) { purpleContentBodyInner.removeChild(toRemove[0]); } } } function contentBodyMutationCallBack( paywallConfig, needsPayWall, isHubPreview ) { const purpleContentBodyInner = document .getElementById("post-content-body") ?.getElementsByClassName("purple-content-body-inner")?.[0]; if (purpleContentBodyInner && !isHubPreview) { handleContentBody(purpleContentBodyInner, paywallConfig, needsPayWall); } if (needsPayWall) { paywallConfig.forEach((config) => { executeWhenDomElementById({ elementId: `paywall--${config.config_id}`, callback: () => { let domEl = document.querySelector( `.list-entry:has(#paywall--${config.config_id})` ); handlePaywallStyle(domEl, config); }, }); }); } else { document.getElementById("paywall")?.remove(); } } // Main function to handle content body paywall function handleContentBodyPaywall(content, paywallConfig) { let isHubPreview = location.pathname.includes("read/article"); if (!content || !paywallConfig) { return "unknown-paywall"; } let isNeeded = paywallIsNeeded(content); let isPurchasable = content.access === "PURCHASABLE"; let needsPayWall = isPurchasable && isNeeded && !isHubPreview; if (needsPayWall) { document.documentElement.classList.add("paywalled"); document.documentElement.classList.remove("no-paywall"); } else { document.documentElement.classList.remove("paywalled"); document.documentElement.classList.add("no-paywall"); } executeWhenDomElementById({ elementId: "post-content-body", callback: (contentBodyElement) => { try { contentBodyMutationCallBack(paywallConfig, needsPayWall, isHubPreview); const postContentBodyObserver = new MutationObserver( (_mutationList, _observer) => { contentBodyMutationCallBack( paywallConfig, needsPayWall, isHubPreview ); } ); postContentBodyObserver.observe(contentBodyElement, { subtree: true, childList: true, }); } catch (e) { console.error(e); } }, }); return needsPayWall ? "with-paywall" : "without-paywall"; } // ---------------- // // ----------------

Klaus Hinkel

Transformation und Stadtwerke-Top-Management: "Wir müssen unsere Erfahrungen teilen"