@jackuait/blok 0.4.1-beta.4 → 0.4.1-beta.6

package/src/components/polyfills.ts

@@ -0,0 +1,113 @@
+'use strict';
+
+declare global {
+  interface Element {
+    /**
+     * Scrolls the current element into the visible area of the browser window
+     * @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
+     */
+    scrollIntoViewIfNeeded?(centerIfNeeded?: boolean): void;
+  }
+}
+
+/**
+ * ScrollIntoViewIfNeeded polyfill by KilianSSL (forked from hsablonniere)
+ * @see {@link https://gist.github.com/KilianSSL/774297b76378566588f02538631c3137}
+ * @param centerIfNeeded - true, if the element should be aligned so it is centered within the visible area of the scrollable ancestor.
+ */
+if (typeof Element !== 'undefined' && typeof Element.prototype.scrollIntoViewIfNeeded === 'undefined') {
+  Element.prototype.scrollIntoViewIfNeeded = function (this: HTMLElement, centerIfNeeded): void {
+    const shouldCenter = centerIfNeeded ?? true;
+
+    const parent = this.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    const parentComputedStyle = window.getComputedStyle(parent, null);
+    const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'));
+    const parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width'));
+    const overTop = this.offsetTop - parent.offsetTop < parent.scrollTop;
+    const overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight);
+    const overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft;
+    const overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth);
+    const alignWithTop = overTop && !overBottom;
+
+    if ((overTop || overBottom) && shouldCenter) {
+      parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
+    }
+
+    if ((overLeft || overRight) && shouldCenter) {
+      parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
+    }
+
+    if ((overTop || overBottom || overLeft || overRight) && !shouldCenter) {
+      this.scrollIntoView(alignWithTop);
+    }
+  };
+}
+
+/**
+ * RequestIdleCallback polyfill (shims)
+ * @see https://developer.chrome.com/blog/using-requestidlecallback/
+ * @param cb - callback to be executed when the browser is idle
+ */
+type TimeoutHandle = ReturnType<typeof globalThis.setTimeout>;
+const nativeSetTimeout = globalThis.setTimeout.bind(globalThis);
+const nativeClearTimeout = globalThis.clearTimeout.bind(globalThis);
+
+const idleCallbackTimeouts = new Map<number, TimeoutHandle>();
+
+const resolveNumericHandle = (handle: TimeoutHandle): number => {
+  const numericHandle = Number(handle);
+
+  if (Number.isFinite(numericHandle) && numericHandle > 0) {
+    return numericHandle;
+  }
+
+  return Date.now();
+};
+
+if (typeof window !== 'undefined' && typeof window.requestIdleCallback === 'undefined') {
+  window.requestIdleCallback = function (cb) {
+    const start = Date.now();
+    const handleRef: { value?: number } = {};
+    const timeoutHandle = nativeSetTimeout(() => {
+      const handle = handleRef.value;
+
+      if (typeof handle === 'number') {
+        idleCallbackTimeouts.delete(handle);
+      }
+
+      cb({
+        didTimeout: false,
+        timeRemaining: function () {
+           
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+    const numericHandle = resolveNumericHandle(timeoutHandle);
+
+    handleRef.value = numericHandle;
+    idleCallbackTimeouts.set(numericHandle, timeoutHandle);
+
+    return numericHandle;
+  };
+}
+
+if (typeof window !== 'undefined' && typeof window.cancelIdleCallback === 'undefined') {
+  window.cancelIdleCallback = function (id) {
+    const timeoutHandle = idleCallbackTimeouts.get(id);
+
+    if (timeoutHandle !== undefined) {
+      idleCallbackTimeouts.delete(id);
+      nativeClearTimeout(timeoutHandle);
+    }
+
+    globalThis.clearTimeout(id);
+  };
+}
+
+export {};