diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx index 97d1446d2d0dc9c29505aeea27530923f552d73b..f8d2abad4ce57d2eabc61afff940586138447376 100644 --- a/src/components/site-header/site-search/site-search.tsx +++ b/src/components/site-header/site-search/site-search.tsx @@ -128,6 +128,8 @@ export class SiteSearch { // Close desktop menu panel and lang menu panel if they are open. this.searchPanelToggled.emit(); + this.adjustPosition(this.el); + /* let hyHeader = this.el.closest('.hy-site-header') as HTMLElement; const headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active') ? `${hyHeader.offsetHeight}px` @@ -135,12 +137,6 @@ export class SiteSearch { const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement; searchPanel.style.top = headerHeight; - // Remove hidden class from cludo suggestions - let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement; - if (cludoSayt) { - cludoSayt.classList.remove('hidden'); - } - // Add shadow backdrop let rect = searchPanel.getBoundingClientRect(); @@ -148,6 +144,13 @@ export class SiteSearch { ? hyHeader.offsetHeight + rect.height : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height; this.showBackdropShadow('open', shadowTop); + */ + + // Remove hidden class from cludo suggestions + let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement; + if (cludoSayt) { + cludoSayt.classList.remove('hidden'); + } // Without setTimeout it will not focus the input because it hasn't rendered yet. setTimeout(() => { @@ -160,6 +163,66 @@ export class SiteSearch { event.stopPropagation(); } + adjustPosition(target) { + let headerHeight = '0'; + let shadowTop = 0; + const searchPanel = target.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement; + let rect = searchPanel.getBoundingClientRect(); + + if (this.isGroup) { + let hyHeader = target.closest('.hy-site-header__content-top') as HTMLElement; + if (hyHeader) { + let rectHeader = hyHeader.getBoundingClientRect(); + headerHeight = `${rectHeader.height}px`; + + // Add shadow backdrop + //@todo For some reason rect (Search Panel) is { + // "x": 0, + // "y": 0, + // "width": 0, + // "height": 0, + // "top": 0, + // "right": 0, + // "bottom": 0, + // "left": 0 + // } + shadowTop = hyHeader.offsetHeight + rect.height; + } + } else { + let hyHeader = target.closest('.hy-site-header') as HTMLElement; + headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active') + ? `${hyHeader.offsetHeight}px` + : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`; + + // Add shadow backdrop + shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active') + ? hyHeader.offsetHeight + rect.height + : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height; + } + + searchPanel.style.top = headerHeight; + this.showBackdropShadow('open', shadowTop); + + /* + let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement; + + if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) { + console.log('do mobile stuff'); + } else { + let mainMenuToggle = target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement; + let mainMenuDropdown = target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement; + let mainMenuList = target.shadowRoot.querySelector('.list') as HTMLElement; + if (mainMenuDropdown && mainMenuList && mainMenuToggle) { + let rectHeader = hyTopHeader.getBoundingClientRect(); + let rectMenuToggle = mainMenuToggle.getBoundingClientRect(); + mainMenuDropdown.style.top = `${rectHeader.height}px`; + + mainMenuList.style.left = `${rectMenuToggle.left}px`; + } + } + */ + } + showBackdropShadow(state = 'close', top = 0) { let hyHeader = this.el.closest('.hy-site-header') as HTMLElement; let hyBackdropDiv = hyHeader.children[0] as HTMLElement;