blob: 9e3cfb618997a9b7cb0888788444fdae9916c523 [file] [log] [blame]
{
"version": 3,
"sources": ["unit.ts"],
"sourcesContent": ["/**\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nconst headerHeight = 3.5;\n\n/**\n * MainLayoutController calculates dynamic height values for header elements\n * to support variable size sticky positioned elements in the header so that\n * banners and breadcumbs may overflow to multiple lines.\n */\nexport class MainLayoutController {\n private headerObserver: IntersectionObserver;\n private navObserver: IntersectionObserver;\n private asideObserver: IntersectionObserver;\n\n constructor(\n private mainHeader?: Element | null,\n private mainNav?: Element | null,\n private mainAside?: Element | null\n ) {\n this.headerObserver = new IntersectionObserver(\n ([e]) => {\n if (e.intersectionRatio < 1) {\n for (const x of document.querySelectorAll('[class^=\"go-Main-header\"')) {\n x.setAttribute('data-fixed', 'true');\n }\n } else {\n for (const x of document.querySelectorAll('[class^=\"go-Main-header\"')) {\n x.removeAttribute('data-fixed');\n }\n this.handleResize();\n }\n },\n { threshold: 1, rootMargin: `${headerHeight * 16}px` }\n );\n this.navObserver = new IntersectionObserver(\n ([e]) => {\n if (e.intersectionRatio < 1) {\n this.mainNav?.classList.add('go-Main-nav--fixed');\n this.mainNav?.setAttribute('data-fixed', 'true');\n } else {\n this.mainNav?.classList.remove('go-Main-nav--fixed');\n this.mainNav?.removeAttribute('data-fixed');\n }\n },\n { threshold: 1, rootMargin: `-${headerHeight * 16 + 10}px` }\n );\n this.asideObserver = new IntersectionObserver(\n ([e]) => {\n if (e.intersectionRatio < 1) {\n this.mainHeader?.setAttribute('data-raised', 'true');\n } else {\n this.mainHeader?.removeAttribute('data-raised');\n }\n },\n { threshold: 1, rootMargin: `-${headerHeight * 16 + 20}px 0px 0px 0px` }\n );\n this.init();\n }\n\n private init() {\n this.handleResize();\n window.addEventListener('resize', this.handleResize);\n this.mainHeader?.addEventListener('dblclick', this.handleDoubleClick);\n const siteHeader = document.querySelector('.js-siteHeader');\n if (this.mainHeader?.hasChildNodes() && siteHeader) {\n const headerSentinel = document.createElement('div');\n siteHeader.prepend(headerSentinel);\n this.headerObserver.observe(headerSentinel);\n }\n if (this.mainNav?.hasChildNodes()) {\n const navSentinel = document.createElement('div');\n this.mainNav.prepend(navSentinel);\n this.navObserver.observe(navSentinel);\n }\n if (this.mainAside) {\n const asideSentinel = document.createElement('div');\n this.mainAside.prepend(asideSentinel);\n this.asideObserver.observe(asideSentinel);\n }\n }\n\n private handleDoubleClick: EventListener = e => {\n const target = e.target;\n if (target === this.mainHeader?.lastElementChild) {\n window.getSelection()?.removeAllRanges();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n };\n\n private handleResize = () => {\n const setProp = (name: string, value: string) =>\n document.documentElement.style.setProperty(name, value);\n setProp('--js-unit-header-height', '0');\n setTimeout(() => {\n const mainHeaderHeight = (this.mainHeader?.getBoundingClientRect().height ?? 0) / 16;\n setProp('--js-unit-header-height', `${mainHeaderHeight}rem`);\n setProp('--js-sticky-header-height', `${headerHeight}rem`);\n setProp('--js-unit-header-top', `${(mainHeaderHeight - headerHeight) * -1}rem`);\n });\n };\n}\n\nconst el = <T extends HTMLElement>(selector: string) => document.querySelector<T>(selector);\nnew MainLayoutController(el('.js-mainHeader'), el('.js-mainNav'), el('.js-mainAside'));\n"],
"mappings": "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",
"names": ["MainLayoutController", "mainHeader", "mainNav", "mainAside", "e", "_a", "_b", "setProp", "name", "value", "mainHeaderHeight", "x", "_c", "_d", "siteHeader", "headerSentinel", "navSentinel", "asideSentinel", "el", "selector"]
}