content/static: rewrite unit_fixed_header.js with typescript

For golang/go#43359

Change-Id: Iae32a7872f207abd7b2667097ac1d3e57f4bbd92
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/299259
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>

content/static/js/unit_fixed_header.js

@@ -1,84 +1,46 @@
-/**
+'use strict';
+/*!
  * @license
  * Copyright 2019-2020 The Go Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-
-/**
- * Shows a fixed element when a separate element begins to go out of view.
- */
 class FixedHeaderController {
-  /**
-   * @param {Element} el
-   * @param {Element} fixedEl
-   */
   constructor(el, fixedEl) {
+    this.el = el;
+    this.fixedEl = fixedEl;
+    this.intersectionObserverCallback = entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.fixedEl.classList.remove('UnitFixedHeader--visible');
+        } else {
+          this.fixedEl.classList.add('UnitFixedHeader--visible');
+        }
+      });
+    };
     if (!el || !fixedEl) {
       throw new Error('Must provide sentinel and fixed elements to constructor.');
     }
-
-    /**
-     * The element to observe to determine whether to show the fixed element.
-     * @type {!Element}
-     * @private
-     */
-    this._el = /** @type {!Element} */ (el);
-
-    /**
-     * The element to show when the other begins to go out of view.
-     * @type {!Element}
-     * @private
-     */
-    this._fixedEl = /** @type {!Element} */ (fixedEl);
-
-    /**
-     * @type {!IntersectionObserver}
-     * @private
-     */
-    this._intersectionObserver = new IntersectionObserver(
-      (entries, observer) => this.intersectionObserverCallback(entries, observer),
-      {
-        threshold: 1.0,
-      }
-    );
-    this._intersectionObserver.observe(this._el);
-
-    // Fixed positioning on Safari iOS is very broken, and without this hack,
-    // focusing on the overflow menu will cause all content to scroll.
-    // The -webkit-overflow-scroll CSS property is only available on mobile
-    // Safari, so check for it and set the appropriate style to fix this.
+    this.intersectionObserver = new IntersectionObserver(this.intersectionObserverCallback, {
+      threshold: 1.0,
+    });
+    this.intersectionObserver.observe(this.el);
     if (window.getComputedStyle(document.body)['-webkit-overflow-scrolling'] !== undefined) {
       [document.documentElement, document.body].forEach(el => {
         el.style.overflow = 'auto';
       });
     }
   }
-
-  /**
-   * @param {!Array<IntersectionObserverEntry>} entries
-   * @param {!IntersectionObserver} observer
-   * @private
-   */
-  intersectionObserverCallback(entries, observer) {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        this._fixedEl.classList.remove('UnitFixedHeader--visible');
-      } else {
-        this._fixedEl.classList.add('UnitFixedHeader--visible');
-      }
-    });
-  }
 }
-
-new FixedHeaderController(
-  document.querySelector('.js-fixedHeaderSentinel'),
-  document.querySelector('.js-fixedHeader')
-);
-
+const fixedHeaderSentinel = document.querySelector('.js-fixedHeaderSentinel');
+const fixedHeader = document.querySelector('.js-fixedHeader');
+if (fixedHeaderSentinel && fixedHeader) {
+  new FixedHeaderController(fixedHeaderSentinel, fixedHeader);
+}
 const overflowSelect = document.querySelector('.js-overflowSelect');
 if (overflowSelect) {
   overflowSelect.addEventListener('change', e => {
     window.location.href = e.target.value;
   });
 }
+//# sourceMappingURL=unit_fixed_header.js.map

content/static/js/unit_fixed_header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit_fixed_header.js","sourceRoot":"","sources":["unit_fixed_header.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;AAKH,MAAM,qBAAqB;IAOzB,YAAoB,EAAW,EAAU,OAAgB;QAArC,OAAE,GAAF,EAAE,CAAS;QAAU,YAAO,GAAP,OAAO,CAAS;QAwBjD,iCAA4B,GAAiC,OAAO,CAAC,EAAE;YAC7E,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,IAAI,KAAK,CAAC,cAAc,EAAE;oBACxB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC;iBAC3D;qBAAM;oBACL,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;iBACxD;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QA/BA,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE;YACnB,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;SAC7E;QAED,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,4BAA4B,EAAE;YACtF,SAAS,EAAE,GAAG;SACf,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAM3C,IAEG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAS,CAAC,4BAA4B,CAAC,KAAK,SAAS,EAC3F;YACA,CAAC,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBACrD,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YAC7B,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;CAWF;AAED,MAAM,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;AAC9E,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;AAC9D,IAAI,mBAAmB,IAAI,WAAW,EAAE;IACtC,IAAI,qBAAqB,CAAC,mBAAmB,EAAE,WAAW,CAAC,CAAC;CAC7D;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAoB,oBAAoB,CAAC,CAAC;AACvF,IAAI,cAAc,EAAE;IAClB,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;QAC5C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;IAC/D,CAAC,CAAC,CAAC;CACJ"}

content/static/js/unit_fixed_header.ts

@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Copyright 2019-2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+/**
+ * Shows a fixed element when a separate element begins to go out of view.
+ */
+class FixedHeaderController {
+  private intersectionObserver: IntersectionObserver;
+
+  /**
+   * @param el The element to observe to determine whether to show the fixed element.
+   * @param fixedEl The element to show when the other begins to go out of view.
+   */
+  constructor(private el: Element, private fixedEl: Element) {
+    if (!el || !fixedEl) {
+      throw new Error('Must provide sentinel and fixed elements to constructor.');
+    }
+
+    this.intersectionObserver = new IntersectionObserver(this.intersectionObserverCallback, {
+      threshold: 1.0,
+    });
+    this.intersectionObserver.observe(this.el);
+
+    // Fixed positioning on Safari iOS is very broken, and without this hack,
+    // focusing on the overflow menu will cause all content to scroll.
+    // The -webkit-overflow-scroll CSS property is only available on mobile
+    // Safari, so check for it and set the appropriate style to fix this.
+    if (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window.getComputedStyle(document.body) as any)['-webkit-overflow-scrolling'] !== undefined
+    ) {
+      [document.documentElement, document.body].forEach(el => {
+        el.style.overflow = 'auto';
+      });
+    }
+  }
+
+  private intersectionObserverCallback: IntersectionObserverCallback = entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.fixedEl.classList.remove('UnitFixedHeader--visible');
+      } else {
+        this.fixedEl.classList.add('UnitFixedHeader--visible');
+      }
+    });
+  };
+}
+
+const fixedHeaderSentinel = document.querySelector('.js-fixedHeaderSentinel');
+const fixedHeader = document.querySelector('.js-fixedHeader');
+if (fixedHeaderSentinel && fixedHeader) {
+  new FixedHeaderController(fixedHeaderSentinel, fixedHeader);
+}
+
+const overflowSelect = document.querySelector<HTMLSelectElement>('.js-overflowSelect');
+if (overflowSelect) {
+  overflowSelect.addEventListener('change', e => {
+    window.location.href = (e.target as HTMLSelectElement).value;
+  });
+}