shimmer 0.0.1 → 0.0.4

data/src/modal.ts

@@ -0,0 +1,100 @@
+import { get } from "@rails/request.js";
+
+export interface ModalOptions {
+  id?: string;
+  url: string;
+  size?: string;
+  close?: boolean;
+}
+
+const loaded: Promise<void> = new Promise((res) => {
+  document.addEventListener("DOMContentLoaded", () => {
+    res();
+  });
+});
+
+async function nextFrame(): Promise<void> {
+  return new Promise((res) => {
+    setTimeout(res, 10);
+  });
+}
+
+async function getHTML(url: string): Promise<string> {
+  const response = await get(url, { headers: { "X-Shimmer": "true" } });
+  if (response.ok) {
+    return await response.response.text();
+  }
+  return "";
+}
+
+function createElement(parent: HTMLElement, className: string): HTMLDivElement {
+  const element = document.createElement("div");
+  element.className = className;
+  parent.append(element);
+  return element;
+}
+
+export class ModalPresenter {
+  private modals: Record<string, Modal> = {};
+
+  constructor() {
+    loaded.then(this.prepareBlind);
+  }
+
+  async open(options: ModalOptions): Promise<void> {
+    const id = (options.id = options.id ?? "default-modal");
+    (this.modals[id] = new Modal({ presenter: this, id })).open(options);
+    this.updateBlindStatus();
+  }
+
+  async close({ id }: { id?: string } = {}): Promise<void> {
+    let promise: Promise<unknown> | null = null;
+    if (id) {
+      promise = this.modals[id]?.close();
+      delete this.modals[id];
+    } else {
+      promise = Promise.all(Object.values(this.modals).map((e) => e.close()));
+      this.modals = {};
+    }
+    this.updateBlindStatus();
+    await promise;
+  }
+
+  private updateBlindStatus(): void {
+    const open = Object.keys(this.modals).length > 0;
+    document.body.classList.toggle("modal-open", open);
+  }
+
+  private async prepareBlind(): Promise<void> {
+    createElement(document.body, "modal-blind");
+  }
+}
+
+export class Modal {
+  private readonly root: HTMLDivElement;
+  private readonly frame: HTMLDivElement;
+  private readonly closeButton: HTMLDivElement;
+
+  constructor({ presenter, id }: { presenter: ModalPresenter; id: string }) {
+    this.root = createElement(document.body, "modal");
+    const content = createElement(this.root, "modal__content");
+    this.closeButton = createElement(content, "modal__close");
+    this.closeButton.addEventListener("click", () => {
+      presenter.close({ id });
+    });
+    this.frame = createElement(content, "modal__frame");
+  }
+
+  async open({ size, url, close }: ModalOptions): Promise<void> {
+    await nextFrame();
+    this.closeButton.style.display = close ?? true ? "block" : "none";
+    this.root.classList.add("modal--open");
+    this.root.classList.add("modal--loading");
+    this.root.classList.toggle("modal--small", size === "small");
+    this.frame.innerHTML = await getHTML(url);
+  }
+
+  async close(): Promise<void> {
+    this.root.classList.remove("modal--open");
+  }
+}

data/src/serviceworker.ts

@@ -0,0 +1,7 @@
+export async function registerServiceWorker(): Promise<void> {
+  if (navigator.serviceWorker) {
+    await navigator.serviceWorker.register("/serviceworker.js", {
+      scope: "./",
+    });
+  }
+}

data/src/touch.ts

@@ -0,0 +1,20 @@
+document.addEventListener("turbo:load", () => {
+  if (window.ontouchstart !== undefined) {
+    document.body.classList.add("touch");
+  } else {
+    document.body.classList.add("no-touch");
+  }
+});
+
+document.addEventListener("focusin", (event) => {
+  const input = event.target as HTMLElement;
+  if (input.tagName === "INPUT" || input.tagName === "TEXTAREA") {
+    document.body.classList.add("keyboard-visible");
+  }
+});
+
+document.addEventListener("focusout", () => {
+  document.body.classList.remove("keyboard-visible");
+});
+
+export {};

data/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["dom", "esnext"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": false,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "es6",
+    "isolatedModules": true,
+    "declaration": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "files": ["src/index.ts"]
+}

data/typings.d.ts

@@ -0,0 +1 @@
+declare module "@rails/request.js";