Sha256: 70827b30a81c7e1bfc71e51159a6e09a54803385452c06d882693fa077f272de

Contents?: true

Size: 1.9 KB

Versions: 2

Compression:

Stored size: 1.9 KB

Contents

import { initializeActions } from "actions/initialize-actions";
import { initializeInputs } from "inputs/initialize-inputs";

interface ComponentDefinition {
  component: string;
  state: any;
  id: string;
}

const initializeComponents = async () => {
  const components = document.querySelector("#clapton")?.getAttribute("data-clapton") || "[]";
  const componentArray = JSON.parse(components);
  for (const component of componentArray) {
    await createAndAppendComponent(component, document.querySelector("#clapton")!);
  }
  const elements = document.querySelectorAll(".clapton-component");
  for (const element of elements) {
    const component = JSON.parse(element.getAttribute("data-clapton") || "{}");
    await createAndAppendComponent(component, element as HTMLElement);
  }
};

const createAndAppendComponent = async (component: ComponentDefinition, element: HTMLElement) => {
  if (!element) {
    return;
  }
  const componentDom = document.createElement('div');
  const module = await import(`${component.component}`);
  const instance = new (module[component.component] as any)(component.state);
  componentDom.innerHTML = instance.renderWrapper;
  const firstChild = componentDom.firstChild as HTMLElement;
  if (firstChild) {
    if (element.children.length > 0) {
      element.appendChild(firstChild);
    } else {
      element.outerHTML = firstChild.outerHTML;
    }
  }
};

document.addEventListener("DOMContentLoaded", async () => {
  await initializeComponents();
  initializeActions();
  initializeInputs();
  const event = new Event('clapton:render');
  document.dispatchEvent(event);
});

window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('scrollPosition', window.scrollY.toString());
});

document.addEventListener("clapton:render", () => {
  const scrollPosition = sessionStorage.getItem('scrollPosition');
  if (scrollPosition) {
    window.scrollTo(0, parseInt(scrollPosition));
  }
});

Version data entries

2 entries across 2 versions & 1 rubygems

Version Path
clapton-0.0.22 lib/clapton/javascripts/src/client.ts
clapton-0.0.21 lib/clapton/javascripts/src/client.ts