Kovové jednořadé hranaté garnýže s drážkou

/* ======================================================================== GARNYZE24.CZ DESKTOP MEGA MENU V3 ------------------------------------------------------------------------ - používá stávající menu Eshop-rychle pouze jako zdroj dat - zachovává původní URL kategorií - zachovává původní obrázky kategorií - mega menu vykresluje přímo do BODY - odstraní pozůstatky starších G24 mega-menu verzí - desktop od 1100 px ======================================================================== */ (function () { 'use strict'; var G24_DESKTOP_MIN = 1100; var OPEN_DELAY = 60; var CLOSE_DELAY = 320; var openTimer = null; var closeTimer = null; var activeItem = null; var activeTrigger = null; var activePanel = null; var overlay = null; var menuItems = []; /* ===================================================================== KONFIGURACE HLAVNÍCH KATEGORIÍ ===================================================================== */ var CONFIG = { '/kovove-garnyze-jednorade': { kicker: 'Jedna řada', title: 'Jednořadé garnýže', description: 'Pro záclonu nebo závěs. Porovnejte moderní, cenově výhodné, hranaté, barokní i garnýže s drážkou.', allLabel: 'Všechny jednořadé garnýže', middleTitle: 'Vyberte typ garnýže', middleNote: 'Jedna řada pro záclonu nebo závěs', helpTitle: 'Jak vybrat správnou garnýž?', helpText: 'Poradíme s délkou, průměrem tyče, konzolami i správným přesahem garnýže přes okno.' }, '/kovove-garnyze-dvourade': { kicker: 'Dvě řady', title: 'Dvouřadé garnýže', description: 'Pro kombinaci záclony a závěsu. Vyberte moderní, cenově výhodné, hranaté, barokní nebo další provedení.', allLabel: 'Všechny dvouřadé garnýže', middleTitle: 'Vyberte typ garnýže', middleNote: 'Záclona a závěs v jednom systému', helpTitle: 'Jak vybrat dvouřadou garnýž?', helpText: 'Pomůžeme zvolit vhodnou délku, průměry tyčí i rozestup jednotlivých řad.' }, '/stropni-garnyze': { kicker: 'Montáž do stropu', title: 'Stropní garnýže', description: 'Garnýže určené pro montáž přímo do stropu. Praktické řešení tam, kde není vhodné nebo možné upevnění na stěnu.', allLabel: 'Všechny stropní garnýže', middleTitle: 'Vyberte provedení', middleNote: 'Kulaté i hranaté stropní systémy', helpTitle: 'Kdy zvolit montáž do stropu?', helpText: 'Zjistěte, zda je pro vaše okno vhodnější montáž garnýže na stěnu, nebo přímo do stropu.' }, '/prislusenstvi-ke-garnyzim': { kicker: 'Komponenty', title: 'Příslušenství ke garnýžím', description: 'Tyče, konzoly, koncovky a další komponenty pro doplnění, úpravu nebo opravu garnýžového systému.', allLabel: 'Všechno příslušenství', middleTitle: 'Vyberte typ systému', middleNote: 'Příslušenství podle kolekce garnýže', helpTitle: 'Nevíte, který díl potřebujete?', helpText: 'Pomůžeme vám najít kompatibilní tyč, konzolu, koncovku nebo jinou součást garnýže.' } }; /* ===================================================================== ZÁKLADNÍ HELPERY ===================================================================== */ function isDesktop() { return window.innerWidth >= G24_DESKTOP_MIN; } function cleanText(text) { return (text || '') .replace(/\s+/g, ' ') .trim(); } function normalizePath(href) { if (!href) { return ''; } try { var url = new URL( href, window.location.origin ); return ( url.pathname .replace(/\/+$/, '') || '/' ); } catch (error) { return href; } } function createElement( tag, className, text ) { var node = document.createElement(tag); if (className) { node.className = className; } if ( text !== undefined && text !== null ) { node.textContent = text; } return node; } function createLink( className, href, text ) { var link = createElement( 'a', className, text ); link.href = href || '#'; return link; } function directChild( parent, selector ) { if (!parent) { return null; } for ( var i = 0; i < parent.children.length; i++ ) { if ( parent.children[i] .matches(selector) ) { return parent.children[i]; } } return null; } /* ===================================================================== ODSTRANĚNÍ POZŮSTATKŮ PŘEDCHOZÍCH G24 VERZÍ ===================================================================== */ function cleanupOldVersions() { var selectors = [ '.g24-mega-panel', '.g24-mega-backdrop', '.g24-mega-portal', '.g24-mega-screen' ]; selectors.forEach( function (selector) { document .querySelectorAll(selector) .forEach( function (node) { node.remove(); } ); } ); document .querySelectorAll( '.g24-menu-open' ) .forEach( function (node) { node.classList.remove( 'g24-menu-open' ); } ); } /* ===================================================================== OVERLAY ===================================================================== */ function createOverlay() { overlay = createElement( 'div', 'g24-mega-screen' ); overlay.setAttribute( 'aria-hidden', 'true' ); document.body.appendChild( overlay ); overlay.addEventListener( 'click', function () { closeMenu(); } ); overlay.addEventListener( 'mouseenter', function () { scheduleClose(); } ); } /* ===================================================================== BENEFITY ===================================================================== */ function createBenefits() { var benefits = createElement( 'div', 'g24-mega-portal__benefits' ); var values = [ 'Doprava zdarma nad 2 500 Kč bez DPH', 'Vrácení zboží do 30 dnů', 'Showroom a výdejní místo ve Fulneku' ]; values.forEach( function (text) { benefits.appendChild( createElement( 'div', 'g24-mega-portal__benefit', text ) ); } ); return benefits; } /* ===================================================================== LEVÝ SLOUPEC ===================================================================== */ function createIntro( config, mainHref ) { var intro = createElement( 'div', 'g24-mega-portal__intro' ); intro.appendChild( createElement( 'span', 'g24-mega-portal__kicker', config.kicker ) ); intro.appendChild( createElement( 'h2', '', config.title ) ); intro.appendChild( createElement( 'p', '', config.description ) ); intro.appendChild( createLink( 'g24-mega-portal__all', mainHref, config.allLabel ) ); intro.appendChild( createBenefits() ); return intro; } /* ===================================================================== NALEZENÍ TITULKU PODKATEGORIE ===================================================================== */ function findCategoryTitleLink( source ) { /* * Preferujeme strukturu Eshop-rychle, * kterou už na webu máš. */ var selectors = [ '.c2026 > a.c2004', '.c2026 a[href]', 'a.c2004[href]', '.c1995 a[href]:not(.c2002)', 'a[href]' ]; for ( var i = 0; i < selectors.length; i++ ) { var found = source.querySelector( selectors[i] ); if (found) { return found; } } return null; } /* ===================================================================== OBRÁZEK PODKATEGORIE ===================================================================== */ function findCategoryImage( source ) { return ( source.querySelector( '.c2002 img' ) || source.querySelector( '.c1995 img' ) || source.querySelector( 'img' ) ); } /* ===================================================================== PODODKAZY ===================================================================== */ function findSubLinks( source, titleLink ) { var found = []; var selectors = [ '.c2027 a[href]', '.c2026 ul a[href]', '.c1995 ul a[href]' ]; selectors.forEach( function (selector) { source .querySelectorAll(selector) .forEach( function (link) { if ( link === titleLink ) { return; } var text = cleanText( link.textContent ); if (!text) { return; } if ( text.toLowerCase() === 'další' ) { return; } var alreadyExists = found.some( function (item) { return ( item.href === link.href ); } ); if (!alreadyExists) { found.push(link); } } ); } ); return found; } /* ===================================================================== KARTA KATEGORIE ===================================================================== */ function createCategoryCard( source ) { var titleLink = findCategoryTitleLink( source ); if (!titleLink) { return null; } var titleText = cleanText( titleLink.textContent ); if (!titleText) { return null; } var card = createElement( 'article', 'g24-mega-portal__card' ); /* -------------------------------------------------------------- OBRÁZEK -------------------------------------------------------------- */ var imageContainer = createElement( 'div', 'g24-mega-portal__image' ); var imageLink = document.createElement('a'); imageLink.href = titleLink.href; var originalImage = findCategoryImage( source ); if (originalImage) { var image = document.createElement('img'); image.src = originalImage.getAttribute( 'src' ); image.alt = originalImage.getAttribute( 'alt' ) || titleText; image.loading = 'lazy'; image.decoding = 'async'; imageLink.appendChild( image ); } imageContainer.appendChild( imageLink ); card.appendChild( imageContainer ); /* -------------------------------------------------------------- TEXT -------------------------------------------------------------- */ var body = createElement( 'div', 'g24-mega-portal__cardbody' ); body.appendChild( createLink( 'g24-mega-portal__cardtitle', titleLink.href, titleText ) ); var sourceSubLinks = findSubLinks( source, titleLink ); if ( sourceSubLinks.length > 0 ) { var links = createElement( 'div', 'g24-mega-portal__links' ); sourceSubLinks.forEach( function (sourceLink) { links.appendChild( createLink( '', sourceLink.href, cleanText( sourceLink.textContent ) ) ); } ); body.appendChild( links ); } card.appendChild(body); return card; } /* ===================================================================== NALEZENÍ PŘÍMÝCH PODKATEGORIÍ ===================================================================== */ function getSubcategoryItems( submenu ) { /* * Nejdříve hledáme přesně strom, * který používá Eshop-rychle. */ var list = submenu.querySelector( 'ul.c1993' ); /* * Fallback pro případ, * že se interní třída změní. */ if (!list) { list = submenu.querySelector( 'ul' ); } if (!list) { return []; } var result = []; Array.prototype .slice .call(list.children) .forEach( function (child) { if ( child.tagName === 'LI' ) { result.push(child); } } ); return result; } /* ===================================================================== STŘED MEGA MENU ===================================================================== */ function createMain( config, submenu ) { var main = createElement( 'div', 'g24-mega-portal__main' ); var heading = createElement( 'div', 'g24-mega-portal__heading' ); heading.appendChild( createElement( 'h3', '', config.middleTitle ) ); heading.appendChild( createElement( 'span', '', config.middleNote ) ); main.appendChild( heading ); var grid = createElement( 'div', 'g24-mega-portal__grid' ); var subcategoryItems = getSubcategoryItems( submenu ); console.log( '[G24 V3] nalezených podkategorií:', subcategoryItems.length ); subcategoryItems.forEach( function (sourceItem) { var card = createCategoryCard( sourceItem ); if (card) { grid.appendChild( card ); } } ); /* * Kdyby Eshop-rychle změnil interní HTML * a žádná karta se nevytvořila, * zobrazíme aspoň všechny nalezené odkazy. */ if ( grid.children.length === 0 ) { submenu .querySelectorAll( 'a[href]' ) .forEach( function (sourceLink) { var text = cleanText( sourceLink.textContent ); if (!text) { return; } var fallback = createElement( 'article', 'g24-mega-portal__card' ); var body = createElement( 'div', 'g24-mega-portal__cardbody' ); body.appendChild( createLink( 'g24-mega-portal__cardtitle', sourceLink.href, text ) ); fallback.appendChild( body ); grid.appendChild( fallback ); } ); } main.appendChild( grid ); return main; } /* ===================================================================== PRAVÝ SLOUPEC ===================================================================== */ function createAside( config ) { var aside = createElement( 'aside', 'g24-mega-portal__aside' ); /* -------------------------------------------------------------- PORADNA -------------------------------------------------------------- */ var help = createLink( 'g24-mega-portal__help', '/jak-postupovat-pri-vyberu-garnyze', '' ); help.appendChild( createElement( 'span', 'g24-mega-portal__helpicon', '?' ) ); help.appendChild( createElement( 'span', 'g24-mega-portal__label', 'Poradna' ) ); help.appendChild( createElement( 'strong', '', config.helpTitle ) ); help.appendChild( createElement( 'p', '', config.helpText ) ); aside.appendChild( help ); /* -------------------------------------------------------------- SHOWROOM -------------------------------------------------------------- */ var showroom = createLink( 'g24-mega-portal__showroom', '/showroom', '' ); var showroomIcon = document.createElement('img'); showroomIcon.src = '/fotky44333/usp-images/uspImage41602484240.png'; showroomIcon.alt = 'Showroom Garnýže24.cz ve Fulneku'; showroomIcon.loading = 'lazy'; showroom.appendChild( showroomIcon ); var showroomText = createElement('div'); showroomText.appendChild( createElement( 'span', 'g24-mega-portal__label', 'Showroom' ) ); showroomText.appendChild( createElement( 'strong', '', 'Prohlédněte si garnýže naživo' ) ); showroomText.appendChild( createElement( 'p', '', 'Fulnek · Po–Pá 8:00–16:00' ) ); showroom.appendChild( showroomText ); aside.appendChild( showroom ); return aside; } /* ===================================================================== VYTVOŘENÍ PANELU ===================================================================== */ function createMegaPanel( item, trigger, submenu, index ) { var path = normalizePath( trigger.href ); var config = CONFIG[path]; if (!config) { config = { kicker: 'Kategorie', title: cleanText( trigger.textContent ), description: 'Prohlédněte si dostupné varianty a vyberte vhodné řešení.', allLabel: 'Zobrazit celou kategorii', middleTitle: 'Vyberte podkategorii', middleNote: '', helpTitle: 'Potřebujete poradit?', helpText: 'Pomůžeme vám s výběrem vhodné garnýže a příslušenství.' }; } var panel = createElement( 'section', 'g24-mega-portal' ); panel.id = 'g24-mega-portal-' + index; panel.setAttribute( 'aria-hidden', 'true' ); /* * Kritické atributy dáváme i inline. * Není to nový design CSS. * Pouze tím zabráníme tomu, * aby Eshop-rychle panel přepsal. */ panel.style.position = 'fixed'; panel.style.left = '50%'; panel.style.zIndex = '2147483000'; var inner = createElement( 'div', 'g24-mega-portal__inner' ); inner.appendChild( createIntro( config, trigger.href ) ); inner.appendChild( createMain( config, submenu ) ); inner.appendChild( createAside( config ) ); panel.appendChild( inner ); document.body.appendChild( panel ); trigger.setAttribute( 'aria-haspopup', 'true' ); trigger.setAttribute( 'aria-expanded', 'false' ); trigger.setAttribute( 'aria-controls', panel.id ); /* panel musí zůstat otevřený, když na něj přejedu kurzorem */ panel.addEventListener( 'mouseenter', function () { window.clearTimeout( closeTimer ); } ); panel.addEventListener( 'mouseleave', function () { scheduleClose(); } ); return panel; } /* ===================================================================== POZICE ===================================================================== */ function positionPanel( panel ) { if (!panel) { return; } /* * Nejlepší referencí je přímo * produktová navigace. */ var menu = document.querySelector( '#eshop-menu-wrapper' ); if (!menu) { menu = document.querySelector( '.content-wrapper-header' ); } if (!menu) { return; } var rect = menu.getBoundingClientRect(); var top = Math.round( rect.bottom - 1 ); panel.style.top = top + 'px'; if (overlay) { overlay.style.top = top + 'px'; } } /* ===================================================================== OTEVŘENÍ ===================================================================== */ function openMenu( item, trigger, panel ) { if (!isDesktop()) { return; } window.clearTimeout( openTimer ); window.clearTimeout( closeTimer ); /* * Zavřít předchozí položku. */ if ( activePanel && activePanel !== panel ) { activePanel.classList.remove( 'is-open' ); activePanel.setAttribute( 'aria-hidden', 'true' ); if (activeItem) { activeItem.classList.remove( 'g24-menu-open' ); } if (activeTrigger) { activeTrigger.setAttribute( 'aria-expanded', 'false' ); } } activeItem = item; activeTrigger = trigger; activePanel = panel; positionPanel( panel ); item.classList.add( 'g24-menu-open' ); trigger.setAttribute( 'aria-expanded', 'true' ); panel.setAttribute( 'aria-hidden', 'false' ); panel.classList.add( 'is-open' ); if (overlay) { overlay.setAttribute( 'aria-hidden', 'false' ); overlay.classList.add( 'is-open' ); } console.log( '[G24 V3] otevřeno:', trigger.href ); } /* ===================================================================== ZAVŘENÍ ===================================================================== */ function closeMenu() { window.clearTimeout( openTimer ); window.clearTimeout( closeTimer ); if (activeItem) { activeItem.classList.remove( 'g24-menu-open' ); } if (activeTrigger) { activeTrigger.setAttribute( 'aria-expanded', 'false' ); } if (activePanel) { activePanel.classList.remove( 'is-open' ); activePanel.setAttribute( 'aria-hidden', 'true' ); } if (overlay) { overlay.classList.remove( 'is-open' ); overlay.setAttribute( 'aria-hidden', 'true' ); } activeItem = null; activeTrigger = null; activePanel = null; } /* ===================================================================== TIMER ===================================================================== */ function scheduleOpen( item, trigger, panel ) { window.clearTimeout( closeTimer ); window.clearTimeout( openTimer ); openTimer = window.setTimeout( function () { openMenu( item, trigger, panel ); }, OPEN_DELAY ); } function scheduleClose() { window.clearTimeout( openTimer ); window.clearTimeout( closeTimer ); closeTimer = window.setTimeout( function () { closeMenu(); }, CLOSE_DELAY ); } /* ===================================================================== EVENTY JEDNÉ HLAVNÍ KATEGORIE ===================================================================== */ function bindMenuItem( item, trigger, arrow, panel ) { /* * Celá položka reaguje na hover. */ item.addEventListener( 'mouseenter', function () { scheduleOpen( item, trigger, panel ); } ); item.addEventListener( 'mouseleave', function () { scheduleClose(); } ); /* * Focus z klávesnice. */ trigger.addEventListener( 'focus', function () { if (!isDesktop()) { return; } openMenu( item, trigger, panel ); } ); /* * Text kategorie zůstává normální odkaz. * * Šipka otevře/zavře menu. */ if (arrow) { arrow.setAttribute( 'role', 'button' ); arrow.setAttribute( 'tabindex', '0' ); arrow.setAttribute( 'aria-label', 'Otevřít podmenu' ); arrow.addEventListener( 'click', function (event) { if (!isDesktop()) { return; } event.preventDefault(); event.stopPropagation(); if ( activePanel === panel && panel.classList.contains( 'is-open' ) ) { closeMenu(); } else { openMenu( item, trigger, panel ); } } ); arrow.addEventListener( 'keydown', function (event) { if ( event.key === 'Enter' || event.key === ' ' ) { event.preventDefault(); openMenu( item, trigger, panel ); } } ); } } /* ===================================================================== NAJÍT SUBMENU ===================================================================== */ function findSubmenu( item ) { /* * Nejdříve přímý potom obecný fallback. */ var submenu = directChild( item, '.c2001' ); if (!submenu) { submenu = item.querySelector( '.c2001' ); } /* * Úplný fallback: * libovolný vnořený UL za hlavním řádkem. */ if (!submenu) { submenu = item.querySelector( 'ul' ); } return submenu; } /* ===================================================================== INIT ===================================================================== */ function initG24MegaMenu() { console.log( '[G24 V3] start' ); cleanupOldVersions(); var wrapper = document.querySelector( '#eshop-menu-wrapper' ); if (!wrapper) { console.error( '[G24 V3] CHYBA: #eshop-menu-wrapper nebyl nalezen.' ); return; } createOverlay(); var topItems = Array.prototype.slice.call( wrapper.children ); var count = 0; topItems.forEach( function (item) { if ( item.tagName !== 'LI' ) { return; } /* * Eshop-rychle položka "další". */ if ( item.classList.contains( 'c1999' ) ) { return; } var header = directChild( item, '.c1995' ); if (!header) { header = item.querySelector( '.c1995' ); } if (!header) { console.warn( '[G24 V3] LI bez .c1995', item ); return; } var trigger = header.querySelector( 'a.c1996' ); if (!trigger) { trigger = header.querySelector( 'a[href]' ); } if (!trigger) { console.warn( '[G24 V3] hlavní odkaz nenalezen', item ); return; } var submenu = findSubmenu( item ); if (!submenu) { console.warn( '[G24 V3] submenu nenalezeno:', trigger.href ); return; } var arrow = header.querySelector( '.c1998' ); count++; var panel = createMegaPanel( item, trigger, submenu, count ); menuItems.push({ item: item, trigger: trigger, arrow: arrow, submenu: submenu, panel: panel }); bindMenuItem( item, trigger, arrow, panel ); } ); console.log( '[G24 V3] MEGA MENU HOTOVO. Počet panelů:', menuItems.length ); /* * Umístění panelů. */ menuItems.forEach( function (data) { positionPanel( data.panel ); } ); } /* ===================================================================== ESC ===================================================================== */ document.addEventListener( 'keydown', function (event) { if ( event.key === 'Escape' ) { closeMenu(); } } ); /* ===================================================================== RESIZE ===================================================================== */ var resizeTimer = null; window.addEventListener( 'resize', function () { window.clearTimeout( resizeTimer ); resizeTimer = window.setTimeout( function () { if (!isDesktop()) { closeMenu(); return; } menuItems.forEach( function (data) { positionPanel( data.panel ); } ); }, 100 ); } ); /* ===================================================================== SCROLL ===================================================================== */ window.addEventListener( 'scroll', function () { if ( activePanel && isDesktop() ) { positionPanel( activePanel ); } }, { passive: true } ); /* ===================================================================== SPUŠTĚNÍ ===================================================================== */ if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', initG24MegaMenu ); } else { initG24MegaMenu(); } })();