' : ''; return ( '' + '

' + meta + '

' + '

' + escapeHtml(card.title) + '

' + '

' + imageMarkup + '' ); } function renderSkeletonCard() { return ( '' ); } function renderLoadingSkeletons(mount, count) { var skeletonCount = count || 12; var skeletonCards = []; for (var index = 0; index < skeletonCount; index++) { skeletonCards.push(renderSkeletonCard()); } mount.innerHTML = skeletonCards.join(''); mount.setAttribute('aria-busy', 'true'); } function fetchNewsFeed(feedUrl) { if (NEWS_FEED_REQUESTS[feedUrl]) { log('Reusing existing news feed request:', feedUrl); return NEWS_FEED_REQUESTS[feedUrl]; } log('Starting new news feed request:', feedUrl); NEWS_FEED_REQUESTS[feedUrl] = fetch(feedUrl, { method: 'GET', mode: 'cors', credentials: 'omit', cache: 'default', headers: { 'Accept': 'application/json' } }) .then(function(response) { if (!response.ok) { throw new Error( 'News feed request failed with HTTP status ' + response.status + ' ' + response.statusText ); } return response.json(); }) .catch(function(requestError) { /* * Allow a later retry if the request genuinely failed. */ delete NEWS_FEED_REQUESTS[feedUrl]; throw requestError; }); return NEWS_FEED_REQUESTS[feedUrl]; } function loadMount(mountConfig) { var mount = document.getElementById(mountConfig.id); if (!mount) { return; } if ( mount.getAttribute('data-news-loading') === 'true' || mount.getAttribute('data-news-loaded') === 'true' || mount.getAttribute('data-news-error') === 'true' ) { return; } var culture = detectCulture(); var feedUrl = NEWS_API_BASE_URL + '/' + culture + (mountConfig.count ? '?count=' + mountConfig.count : ''); var fallbackMarkup = mount.innerHTML; mount.setAttribute('data-news-loading', 'true'); renderLoadingSkeletons(mount, mountConfig.count); fetchNewsFeed(feedUrl) .then(function(cards) { mount.removeAttribute('data-news-loading'); mount.removeAttribute('aria-busy'); if (!Array.isArray(cards) || !cards.length) { throw new Error('The news feed response is empty.'); } mount.innerHTML = cards.map(function(card) { return renderCard(card, culture); }).join(''); mount.setAttribute('data-news-loaded', 'true'); log( 'Rendered ' + cards.length + ' card(s) into #' + mountConfig.id ); }) .catch(function(requestError) { mount.removeAttribute('data-news-loading'); mount.removeAttribute('aria-busy'); mount.setAttribute('data-news-error', 'true'); mount.innerHTML = fallbackMarkup; error( 'Could not load the dynamic news feed:', requestError ); warn( 'Static fallback markup (if any) restored.' ); }); } function initialize() { log('Initializing news feed integration.'); log('Document ready state:', document.readyState); MOUNTS.forEach(loadMount); /* * Document360 may render or replace page content asynchronously. * The observer detects when a mount element becomes available again. */ var observerTimeout = null; var observer = new MutationObserver(function() { window.clearTimeout(observerTimeout); observerTimeout = window.setTimeout(function() { MOUNTS.forEach(loadMount); }, 100); }); observer.observe(document.body, { childList: true, subtree: true }); log('DOM observer registered.'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initialize); } else { initialize(); } })(); /* * GDPR/DSGVO consent gate for embedded YouTube videos. * * General rule: every article that embeds a YouTube iframe (youtube.com or * youtube-nocookie.com) is automatically protected here - no per-article * disclaimer markup should be added manually. This runs on every page and * rewrites matching iframes into a click-to-load placeholder (thumbnail + * disclaimer + "Activate YouTube" button + privacy policy link, matching the * pattern used on homag.com product pages) so no data is sent to Google * before the visitor consents. */ (function() { 'use strict'; var YT_IFRAME_SELECTOR = 'iframe[src*="youtube.com"]:not([data-homag-yt-live]), iframe[src*="youtube-nocookie.com"]:not([data-homag-yt-live])'; var STRINGS = { de: { message: 'Bitte best\u00E4tigen Sie, dass bei der Nutzung von YouTube Daten wie Ihre IP-Adresse, Browser-Kennung und \u00E4hnliches an Google \u00FCbermittelt werden k\u00F6nnen.', button: 'YouTube aktivieren', privacyLabel: '\u00BB Datenschutzerkl\u00E4rung', privacyUrl: 'https://www.homag.com/datenschutz' }, en: { message: 'Please confirm that, when using YouTube, data such as your IP address, browser identifier and similar information may be transmitted to Google.', button: 'Activate YouTube', privacyLabel: '\u00BB Privacy Policy', privacyUrl: 'https://www.homag.com/en/policy' } }; function detectCulture() { var pathMatch = window.location.pathname.match(/\/docs\/([a-z]{2})(?:-[a-z]{2})?(?:\/|$)/i); if (pathMatch && STRINGS[pathMatch[1].toLowerCase()]) { return pathMatch[1].toLowerCase(); } var documentCulture = (document.documentElement.lang || '').slice(0, 2).toLowerCase(); return STRINGS[documentCulture] ? documentCulture : 'de'; } var CONSENT_STORAGE_KEY = 'homagYoutubeConsent'; function hasConsent() { try { return window.localStorage.getItem(CONSENT_STORAGE_KEY) === 'true'; } catch (storageError) { return false; } } function setConsent() { try { window.localStorage.setItem(CONSENT_STORAGE_KEY, 'true'); } catch (storageError) { // Ignore - consent simply won't persist (e.g. private browsing). } } function extractVideoId(src) { var match = src.match(/\/embed\/([a-zA-Z0-9_-]+)/); return match ? match[1] : null; } function withAutoplay(src) { return src + (src.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1'; } function buildLiveIframe(src, attrs, autoplay) { var liveIframe = document.createElement('iframe'); liveIframe.setAttribute('src', autoplay ? withAutoplay(src) : src); liveIframe.setAttribute('frameborder', attrs.frameborder || '0'); liveIframe.setAttribute('allow', attrs.allow || 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'); liveIframe.setAttribute('allowfullscreen', 'true'); liveIframe.setAttribute('title', attrs.title || ''); liveIframe.setAttribute('data-homag-yt-live', 'true'); if (attrs.width) { liveIframe.setAttribute('width', attrs.width); } if (attrs.height) { liveIframe.setAttribute('height', attrs.height); } if (attrs.style) { liveIframe.setAttribute('style', attrs.style); } return liveIframe; } function revealOtherPlaceholders(exclude) { document.querySelectorAll('.homag-yt-consent').forEach(function(placeholder) { if (placeholder !== exclude && typeof placeholder.__homagActivate === 'function') { placeholder.__homagActivate(); } }); } function injectStyleOnce() { if (document.getElementById('homag-yt-consent-style')) { return; } var style = document.createElement('style'); style.id = 'homag-yt-consent-style'; style.textContent = ` .homag-yt-consent { position: relative; display: block; overflow: hidden; border-radius: 8px; background: linear-gradient(134deg, #001941 13%, #003a66 100%); cursor: pointer; border: 0; padding: 0; font: inherit; max-width: 100%; } .homag-yt-consent__play { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); } .homag-yt-consent__play svg { width: 20px; height: 20px; margin-left: 3px; fill: #ffffff; } .homag-yt-consent__inner { position: relative; z-index: 1; display: flex; height: 100%; max-width: calc(100% - 32px); flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px 24px; margin: 0 auto; text-align: center; } .homag-yt-consent__message { max-width: 520px; margin: 0; color: #ccd1d9 !important; font-size: 14px; line-height: 1.5; } .homag-yt-consent__button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: #0099d6; color: #ffffff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color 160ms ease; } .homag-yt-consent:hover .homag-yt-consent__button { background: #0088c0; } .homag-yt-consent__privacy { color: #ccd1d9 !important; font-size: 12px; text-decoration: underline; } `; document.head.appendChild(style); } function buildConsentInner(strings) { var inner = document.createElement('span'); inner.className = 'homag-yt-consent__inner'; var play = document.createElement('span'); play.className = 'homag-yt-consent__play'; play.innerHTML = ''; inner.appendChild(play); var message = document.createElement('p'); message.className = 'homag-yt-consent__message'; message.textContent = strings.message; inner.appendChild(message); var activateLabel = document.createElement('span'); activateLabel.className = 'homag-yt-consent__button'; activateLabel.textContent = strings.button; inner.appendChild(activateLabel); var privacyLink = document.createElement('a'); privacyLink.className = 'homag-yt-consent__privacy'; privacyLink.href = strings.privacyUrl; privacyLink.target = '_blank'; privacyLink.rel = 'noopener noreferrer'; privacyLink.textContent = strings.privacyLabel; inner.appendChild(privacyLink); return inner; } function gateIframe(iframe) { var src = iframe.getAttribute('src') || ''; var videoId = extractVideoId(src); if (!videoId) { return; } var attrs = { frameborder: iframe.getAttribute('frameborder'), allow: iframe.getAttribute('allow'), title: iframe.getAttribute('title'), width: iframe.getAttribute('width'), height: iframe.getAttribute('height'), style: iframe.getAttribute('style') || '' }; if (hasConsent()) { iframe.replaceWith(buildLiveIframe(src, attrs, false)); return; } var culture = detectCulture(); var strings = STRINGS[culture]; var placeholder = document.createElement('button'); placeholder.type = 'button'; placeholder.className = 'homag-yt-consent'; placeholder.setAttribute('aria-label', strings.button); placeholder.setAttribute('style', attrs.style); if (attrs.width) { placeholder.style.width = attrs.width + 'px'; } if (attrs.height) { placeholder.style.height = attrs.height + 'px'; } placeholder.appendChild(buildConsentInner(strings)); placeholder.__homagActivate = function() { placeholder.replaceWith(buildLiveIframe(src, attrs, false)); }; placeholder.addEventListener('click', function(clickEvent) { if (clickEvent.target.closest('.homag-yt-consent__privacy')) { return; } setConsent(); placeholder.replaceWith(buildLiveIframe(src, attrs, true)); revealOtherPlaceholders(placeholder); }); iframe.replaceWith(placeholder); } function gateAllYoutubeIframes() { document.querySelectorAll(YT_IFRAME_SELECTOR).forEach(gateIframe); } function initialize() { injectStyleOnce(); gateAllYoutubeIframes(); var observer = new MutationObserver(function() { gateAllYoutubeIframes(); }); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initialize); } else { initialize(); } })();

Video tutorials

References

SmartWOP