@astronox/core 0.1.0

package/src/patterns/MapViewport/mapViewportController.ts

@@ -0,0 +1,636 @@
+import type {
+  MapViewportCell,
+  MapViewportImageLayer,
+  MapViewportMarker,
+  MapViewportModel,
+  MapViewportShape,
+  MapViewportSizing,
+} from './contracts';
+import { getMapViewportSceneGeometry } from './geometry';
+
+const initializedAttribute = 'data-map-viewport-initialized';
+const dragThreshold = 4;
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const noop = (): void => undefined;
+
+export type MapViewportSelectionDetail = {
+  cellId: string;
+};
+
+export type MapViewportRenderOptions = {
+  revealSelected?: 'center' | 'nearest';
+};
+
+type DragState = {
+  canScrollBlock: boolean;
+  canScrollInline: boolean;
+  pointerId: number;
+  startClientX: number;
+  startClientY: number;
+  startScrollLeft: number;
+  startScrollTop: number;
+  moved: boolean;
+};
+
+function createSvgElement<K extends keyof SVGElementTagNameMap>(
+  name: K,
+): SVGElementTagNameMap[K] {
+  return document.createElementNS(svgNamespace, name);
+}
+
+function setAttributes(
+  element: Element,
+  attributes: Readonly<Record<string, string | number | undefined>>,
+): void {
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value !== undefined) element.setAttribute(name, String(value));
+  }
+}
+
+function applySceneGeometry(root: HTMLElement, model: MapViewportModel): void {
+  const sizing: MapViewportSizing =
+    root.dataset.sizing === 'fill' ? 'fill' : 'aspect';
+  const geometry = getMapViewportSceneGeometry(model, sizing);
+  const frame = root.closest<HTMLElement>('.map-viewport-frame');
+  const modalId = frame?.dataset.modalSource;
+  const modalCard = modalId
+    ? document.querySelector<HTMLElement>(
+        `[data-map-viewport-modal-card="${CSS.escape(modalId)}"]`,
+      )
+    : null;
+
+  root.dataset.mapLogicalOverflowBlock = String(geometry.overflowsBlock);
+  root.dataset.mapLogicalOverflowInline = String(geometry.overflowsInline);
+  root.dataset.mapOverflowBlock = String(geometry.overflowsBlock);
+  root.dataset.mapOverflowInline = String(geometry.overflowsInline);
+  root.dataset.mapReferenceRatio = geometry.referenceRatio;
+
+  for (const element of [root, frame, modalCard]) {
+    if (!element) continue;
+    element.style.setProperty(
+      '--map-viewport-reference-aspect-ratio',
+      geometry.aspectRatio,
+    );
+    element.style.setProperty(
+      '--map-viewport-reference-ratio',
+      geometry.referenceRatio,
+    );
+    element.style.setProperty(
+      '--map-viewport-scene-inline-size',
+      geometry.inlineSize,
+    );
+    element.style.setProperty(
+      '--map-viewport-scene-block-size',
+      geometry.blockSize,
+    );
+  }
+}
+
+function appendTitle(element: SVGElement, label: string): void {
+  const title = createSvgElement('title');
+  title.textContent = label;
+  element.append(title);
+}
+
+function createLayer(
+  layer: MapViewportImageLayer,
+  model: MapViewportModel,
+): SVGImageElement {
+  const image = createSvgElement('image');
+  setAttributes(image, {
+    'data-map-layer': layer.id,
+    href: layer.media.src,
+    x: 0,
+    y: 0,
+    width: model.width,
+    height: model.height,
+    preserveAspectRatio: 'none',
+  });
+  return image;
+}
+
+function createShape(shape: MapViewportShape): SVGGElement {
+  const group = createSvgElement('g');
+  setAttributes(group, {
+    class: 'map-viewport__shape',
+    'data-map-shape': shape.kind,
+    'data-map-shape-palette': shape.palette,
+  });
+
+  if (shape.kind === 'circle') {
+    const circle = createSvgElement('circle');
+    setAttributes(circle, { cx: shape.x, cy: shape.y, r: shape.radius });
+    group.append(circle);
+  } else if (shape.kind === 'ring') {
+    const path = createSvgElement('path');
+    const data = [
+      `M ${shape.x - shape.radius} ${shape.y}`,
+      `a ${shape.radius} ${shape.radius} 0 1 0 ${shape.radius * 2} 0`,
+      `a ${shape.radius} ${shape.radius} 0 1 0 ${-shape.radius * 2} 0`,
+      `M ${shape.x - shape.innerRadius} ${shape.y}`,
+      `a ${shape.innerRadius} ${shape.innerRadius} 0 1 1 ${shape.innerRadius * 2} 0`,
+      `a ${shape.innerRadius} ${shape.innerRadius} 0 1 1 ${-shape.innerRadius * 2} 0`,
+    ].join(' ');
+    setAttributes(path, { d: data, 'fill-rule': 'evenodd' });
+    group.append(path);
+  } else if (shape.kind === 'polygon') {
+    const polygon = createSvgElement('polygon');
+    setAttributes(polygon, {
+      points: shape.points.map((point) => `${point.x},${point.y}`).join(' '),
+    });
+    group.append(polygon);
+  } else if (shape.kind === 'diagonal-cross') {
+    const rotated = createSvgElement('g');
+    const vertical = createSvgElement('rect');
+    const horizontal = createSvgElement('rect');
+    setAttributes(rotated, {
+      transform: `rotate(45 ${shape.x} ${shape.y})`,
+    });
+    setAttributes(vertical, {
+      x: shape.x - shape.halfWidth,
+      y: shape.y - shape.radius,
+      width: shape.halfWidth * 2,
+      height: shape.radius * 2,
+    });
+    setAttributes(horizontal, {
+      x: shape.x - shape.radius,
+      y: shape.y - shape.halfWidth,
+      width: shape.radius * 2,
+      height: shape.halfWidth * 2,
+    });
+    rotated.append(vertical, horizontal);
+    group.append(rotated);
+  } else {
+    if (shape.kind === 'horizontal-line' || shape.kind === 'cross') {
+      const horizontal = createSvgElement('rect');
+      setAttributes(horizontal, {
+        x: shape.x - shape.radius,
+        y: shape.y - shape.halfWidth,
+        width: shape.radius * 2,
+        height: shape.halfWidth * 2,
+      });
+      group.append(horizontal);
+    }
+    if (shape.kind === 'vertical-line' || shape.kind === 'cross') {
+      const vertical = createSvgElement('rect');
+      setAttributes(vertical, {
+        x: shape.x - shape.halfWidth,
+        y: shape.y - shape.radius,
+        width: shape.halfWidth * 2,
+        height: shape.radius * 2,
+      });
+      group.append(vertical);
+    }
+  }
+
+  return group;
+}
+
+function createCell(
+  cell: MapViewportCell,
+  interaction: MapViewportModel['interaction'],
+): SVGGElement {
+  const group = createSvgElement('g');
+  const interactive =
+    interaction === 'single-selection' &&
+    (cell.state === 'available' || cell.state === 'selected');
+  setAttributes(group, {
+    class: 'map-viewport__cell',
+    'data-map-cell': cell.id,
+    'data-map-cell-state': cell.state,
+    'data-map-cell-palette': cell.palette,
+    role: interactive ? 'button' : undefined,
+    tabindex: interactive ? 0 : undefined,
+    'aria-label': interactive ? cell.label : undefined,
+    'aria-pressed': interactive
+      ? cell.state === 'selected'
+        ? 'true'
+        : 'false'
+      : undefined,
+  });
+  appendTitle(group, cell.label);
+  const rect = createSvgElement('rect');
+  setAttributes(rect, {
+    x: cell.x,
+    y: cell.y,
+    width: cell.width,
+    height: cell.height,
+  });
+  group.append(rect);
+  return group;
+}
+
+function createMarker(marker: MapViewportMarker): SVGGElement {
+  const group = createSvgElement('g');
+  setAttributes(group, {
+    class: 'map-viewport__marker',
+    'data-map-marker': marker.id,
+  });
+  appendTitle(group, marker.label);
+  const image = createSvgElement('image');
+  setAttributes(image, {
+    href: marker.media.src,
+    x: marker.x,
+    y: marker.y,
+    width: marker.width,
+    height: marker.height,
+    preserveAspectRatio: 'xMidYMid meet',
+  });
+  group.append(image);
+  return group;
+}
+
+function refreshOverflowState(root: HTMLElement): void {
+  const logicalInline = root.dataset.mapLogicalOverflowInline === 'true';
+  const logicalBlock = root.dataset.mapLogicalOverflowBlock === 'true';
+  let canScrollInline = logicalInline;
+  let canScrollBlock = logicalBlock;
+
+  if (root.dataset.sizing === 'fill' && !logicalInline && !logicalBlock) {
+    const bounds = root.getBoundingClientRect();
+    const styles = window.getComputedStyle(root);
+    const inlineSize =
+      bounds.width -
+      parseCssLength(styles.borderInlineStartWidth) -
+      parseCssLength(styles.borderInlineEndWidth);
+    const blockSize =
+      bounds.height -
+      parseCssLength(styles.borderBlockStartWidth) -
+      parseCssLength(styles.borderBlockEndWidth);
+    const referenceRatio = Number(root.dataset.mapReferenceRatio);
+
+    if (
+      inlineSize > 0 &&
+      blockSize > 0 &&
+      Number.isFinite(referenceRatio) &&
+      referenceRatio > 0
+    ) {
+      const referenceBlockSize = inlineSize / referenceRatio;
+      canScrollInline = blockSize > referenceBlockSize + 1;
+      canScrollBlock = referenceBlockSize > blockSize + 1;
+    }
+  }
+
+  root.dataset.mapOverflowInline = String(canScrollInline);
+  root.dataset.mapOverflowBlock = String(canScrollBlock);
+  const maxScrollLeft = Math.max(0, root.scrollWidth - root.clientWidth);
+  const maxScrollTop = Math.max(0, root.scrollHeight - root.clientHeight);
+
+  root.scrollLeft = canScrollInline
+    ? Math.max(0, Math.min(root.scrollLeft, maxScrollLeft))
+    : 0;
+  root.scrollTop = canScrollBlock
+    ? Math.max(0, Math.min(root.scrollTop, maxScrollTop))
+    : 0;
+}
+
+function parseCssLength(value: string): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+function scheduleSelectedCellReveal(
+  root: HTMLElement,
+  mode: 'center' | 'nearest',
+): number {
+  return window.requestAnimationFrame(() => {
+    refreshOverflowState(root);
+    const svg = root.querySelector<SVGSVGElement>('[data-map-viewport-svg]');
+    const selectedRect = svg?.querySelector<SVGRectElement>(
+      '[data-map-cell-state="selected"] rect',
+    );
+    const viewBox = svg?.viewBox.baseVal;
+    if (
+      !svg ||
+      !selectedRect ||
+      !viewBox ||
+      viewBox.width <= 0 ||
+      viewBox.height <= 0
+    ) {
+      return;
+    }
+
+    const scaleX = svg.clientWidth / viewBox.width;
+    const scaleY = svg.clientHeight / viewBox.height;
+    const rootBounds = root.getBoundingClientRect();
+    const svgBounds = svg.getBoundingClientRect();
+    const sceneLeft =
+      svgBounds.left - rootBounds.left - root.clientLeft + root.scrollLeft;
+    const sceneTop =
+      svgBounds.top - rootBounds.top - root.clientTop + root.scrollTop;
+    const left = sceneLeft + selectedRect.x.baseVal.value * scaleX;
+    const top = sceneTop + selectedRect.y.baseVal.value * scaleY;
+    const right = left + selectedRect.width.baseVal.value * scaleX;
+    const bottom = top + selectedRect.height.baseVal.value * scaleY;
+    const canScrollInline = root.dataset.mapOverflowInline === 'true';
+    const canScrollBlock = root.dataset.mapOverflowBlock === 'true';
+
+    if (mode === 'center') {
+      root.scrollLeft = canScrollInline
+        ? (left + right - root.clientWidth) / 2
+        : 0;
+      root.scrollTop = canScrollBlock
+        ? (top + bottom - root.clientHeight) / 2
+        : 0;
+      return;
+    }
+
+    if (canScrollInline) {
+      if (left < root.scrollLeft) {
+        root.scrollLeft = left;
+      } else if (right > root.scrollLeft + root.clientWidth) {
+        root.scrollLeft = right - root.clientWidth;
+      }
+    } else {
+      root.scrollLeft = 0;
+    }
+
+    if (canScrollBlock) {
+      if (top < root.scrollTop) {
+        root.scrollTop = top;
+      } else if (bottom > root.scrollTop + root.clientHeight) {
+        root.scrollTop = bottom - root.clientHeight;
+      }
+    } else {
+      root.scrollTop = 0;
+    }
+  });
+}
+
+export function renderMapViewport(
+  root: HTMLElement,
+  model: MapViewportModel,
+  options: MapViewportRenderOptions = {},
+): void {
+  const svg = root.querySelector<SVGSVGElement>('[data-map-viewport-svg]');
+  if (!svg) return;
+
+  const focusedCellId =
+    document.activeElement instanceof Element
+      ? document.activeElement
+          .closest<SVGElement>('[data-map-cell]')
+          ?.getAttribute('data-map-cell')
+      : null;
+  applySceneGeometry(root, model);
+  root.dataset.mapInteraction = model.interaction;
+  root.setAttribute('aria-label', model.label);
+  setAttributes(svg, {
+    viewBox: `0 0 ${model.width} ${model.height}`,
+    'aria-label': model.label,
+    role: model.interaction === 'none' ? 'img' : 'group',
+  });
+  svg.replaceChildren();
+
+  const background = model.layers
+    .filter((layer) => layer.plane === 'background')
+    .toSorted((left, right) => left.order - right.order)
+    .map((layer) => createLayer(layer, model));
+  const shapes = createSvgElement('g');
+  setAttributes(shapes, {
+    class: 'map-viewport__shapes',
+    'data-map-shapes': '',
+    'aria-hidden': 'true',
+  });
+  shapes.append(...(model.shapes ?? []).map(createShape));
+  const cells = createSvgElement('g');
+  setAttributes(cells, {
+    class: 'map-viewport__cells',
+    'data-map-cells': '',
+  });
+  cells.append(
+    ...model.cells.map((cell) => createCell(cell, model.interaction)),
+  );
+  const markers = createSvgElement('g');
+  setAttributes(markers, {
+    class: 'map-viewport__markers',
+    'data-map-markers': '',
+  });
+  markers.append(...(model.markers ?? []).map(createMarker));
+  const foreground = model.layers
+    .filter((layer) => layer.plane === 'foreground')
+    .toSorted((left, right) => left.order - right.order)
+    .map((layer) => {
+      const image = createLayer(layer, model);
+      image.setAttribute('pointer-events', 'none');
+      return image;
+    });
+
+  svg.append(...background, cells, shapes, markers, ...foreground);
+
+  if (focusedCellId) {
+    svg
+      .querySelector<SVGElement>(
+        `[data-map-cell="${CSS.escape(focusedCellId)}"]`,
+      )
+      ?.focus();
+  }
+
+  scheduleSelectedCellReveal(root, options.revealSelected ?? 'nearest');
+}
+
+export function initMapViewport(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const svg = root.querySelector<SVGSVGElement>('[data-map-viewport-svg]');
+  const scene = root.querySelector<HTMLElement>('[data-map-viewport-scene]');
+  const frame = root.closest<HTMLElement>('.map-viewport-frame');
+  if (!svg || !scene) return noop;
+  root.setAttribute(initializedAttribute, 'true');
+  let dragState: DragState | null = null;
+  let suppressClick = false;
+  let suppressClickTimeout: number | undefined;
+  let layoutFrame: number | null = null;
+  let revealFrame: number | null = scheduleSelectedCellReveal(root, 'center');
+
+  const scheduleLayoutRefresh = (): void => {
+    if (layoutFrame !== null) return;
+    layoutFrame = window.requestAnimationFrame(() => {
+      layoutFrame = null;
+      refreshOverflowState(root);
+    });
+  };
+  const revealSelection = (mode: 'center' | 'nearest'): void => {
+    if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
+    revealFrame = scheduleSelectedCellReveal(root, mode);
+  };
+  const handleModalLayoutChange = (): void => {
+    scheduleLayoutRefresh();
+    revealSelection('nearest');
+  };
+  const resizeObserver =
+    'ResizeObserver' in window
+      ? new ResizeObserver(scheduleLayoutRefresh)
+      : null;
+  const handleWindowResize = (): void => scheduleLayoutRefresh();
+
+  if (resizeObserver) {
+    resizeObserver.observe(root);
+    resizeObserver.observe(scene);
+  } else {
+    window.addEventListener('resize', handleWindowResize);
+  }
+  frame?.addEventListener('modal:open', handleModalLayoutChange);
+  frame?.addEventListener('modal:restore', handleModalLayoutChange);
+  scheduleLayoutRefresh();
+
+  const select = (cell: SVGGElement): void => {
+    if (
+      root.dataset.mapInteraction !== 'single-selection' ||
+      cell.dataset.mapCellState !== 'available'
+    ) {
+      return;
+    }
+
+    const announcement = root.querySelector<HTMLElement>(
+      '[data-map-announcement]',
+    );
+    if (announcement) {
+      announcement.textContent = cell.getAttribute('aria-label') ?? '';
+    }
+
+    root.dispatchEvent(
+      new CustomEvent<MapViewportSelectionDetail>('mapviewport:select', {
+        bubbles: true,
+        detail: { cellId: cell.dataset.mapCell ?? '' },
+      }),
+    );
+  };
+
+  const getCell = (target: EventTarget | null): SVGGElement | null =>
+    target instanceof Element
+      ? target.closest<SVGGElement>('[data-map-cell]')
+      : null;
+
+  const handleClick = (event: MouseEvent): void => {
+    const cell = getCell(event.target);
+    if (cell && root.contains(cell)) select(cell);
+  };
+  const handleClickCapture = (event: MouseEvent): void => {
+    if (!suppressClick) return;
+    suppressClick = false;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  const handleMouseDown = (event: MouseEvent): void => {
+    const cell = getCell(event.target);
+    if (cell?.getAttribute('role') === 'button' && root.contains(cell)) {
+      event.preventDefault();
+    }
+  };
+  const handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    const cell = getCell(event.target);
+    if (!cell || !root.contains(cell)) return;
+    event.preventDefault();
+    select(cell);
+  };
+  const handlePointerDown = (event: PointerEvent): void => {
+    const canScrollInline =
+      root.dataset.mapOverflowInline === 'true' &&
+      root.scrollWidth > root.clientWidth;
+    const canScrollBlock =
+      root.dataset.mapOverflowBlock === 'true' &&
+      root.scrollHeight > root.clientHeight;
+
+    if (
+      event.pointerType !== 'mouse' ||
+      event.button !== 0 ||
+      event.isPrimary === false ||
+      (!canScrollInline && !canScrollBlock)
+    ) {
+      return;
+    }
+
+    const bounds = root.getBoundingClientRect();
+    const overVerticalScrollbar =
+      event.clientX - bounds.left >= root.clientWidth;
+    const overHorizontalScrollbar =
+      event.clientY - bounds.top >= root.clientHeight;
+    if (overVerticalScrollbar || overHorizontalScrollbar) return;
+
+    dragState = {
+      canScrollBlock,
+      canScrollInline,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startScrollLeft: root.scrollLeft,
+      startScrollTop: root.scrollTop,
+      moved: false,
+    };
+  };
+  const handlePointerMove = (event: PointerEvent): void => {
+    if (dragState?.pointerId !== event.pointerId) return;
+
+    const deltaX = event.clientX - dragState.startClientX;
+    const deltaY = event.clientY - dragState.startClientY;
+    if (!dragState.moved && Math.hypot(deltaX, deltaY) < dragThreshold) {
+      return;
+    }
+
+    dragState.moved = true;
+    if (!root.hasPointerCapture(event.pointerId)) {
+      root.setPointerCapture(event.pointerId);
+    }
+    root.dataset.mapViewportDragging = 'true';
+    if (dragState.canScrollInline) {
+      root.scrollLeft = dragState.startScrollLeft - deltaX;
+    }
+    if (dragState.canScrollBlock) {
+      root.scrollTop = dragState.startScrollTop - deltaY;
+    }
+    event.preventDefault();
+  };
+  const finishDrag = (event: PointerEvent, canceled = false): void => {
+    if (dragState?.pointerId !== event.pointerId) return;
+
+    const moved = dragState.moved;
+    dragState = null;
+    delete root.dataset.mapViewportDragging;
+    if (root.hasPointerCapture(event.pointerId)) {
+      root.releasePointerCapture(event.pointerId);
+    }
+
+    if (!moved || canceled) return;
+    suppressClick = true;
+    window.clearTimeout(suppressClickTimeout);
+    suppressClickTimeout = window.setTimeout(() => {
+      suppressClick = false;
+    }, 0);
+  };
+  const handlePointerUp = (event: PointerEvent): void => {
+    finishDrag(event);
+  };
+  const handlePointerCancel = (event: PointerEvent): void => {
+    finishDrag(event, true);
+  };
+
+  root.addEventListener('click', handleClickCapture, true);
+  root.addEventListener('pointerdown', handlePointerDown);
+  root.addEventListener('pointermove', handlePointerMove);
+  root.addEventListener('pointerup', handlePointerUp);
+  root.addEventListener('pointercancel', handlePointerCancel);
+  svg.addEventListener('mousedown', handleMouseDown);
+  svg.addEventListener('click', handleClick);
+  svg.addEventListener('keydown', handleKeydown);
+
+  return () => {
+    if (layoutFrame !== null) window.cancelAnimationFrame(layoutFrame);
+    if (revealFrame !== null) window.cancelAnimationFrame(revealFrame);
+    window.clearTimeout(suppressClickTimeout);
+    resizeObserver?.disconnect();
+    window.removeEventListener('resize', handleWindowResize);
+    frame?.removeEventListener('modal:open', handleModalLayoutChange);
+    frame?.removeEventListener('modal:restore', handleModalLayoutChange);
+    root.removeEventListener('click', handleClickCapture, true);
+    root.removeEventListener('pointerdown', handlePointerDown);
+    root.removeEventListener('pointermove', handlePointerMove);
+    root.removeEventListener('pointerup', handlePointerUp);
+    root.removeEventListener('pointercancel', handlePointerCancel);
+    svg.removeEventListener('mousedown', handleMouseDown);
+    svg.removeEventListener('click', handleClick);
+    svg.removeEventListener('keydown', handleKeydown);
+    delete root.dataset.mapViewportDragging;
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/Modal/Modal.astro

@@ -0,0 +1,64 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import ModalClose from './ModalClose.astro';
+
+type ModalCloseControl = 'default' | 'delegated';
+type ModalSizing = 'content' | 'viewport';
+
+type Props = HTMLAttributes<'dialog'> & {
+  id: string;
+  label: string;
+  closeLabel: string;
+  closeControl?: ModalCloseControl;
+  sizing?: ModalSizing;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  id,
+  label,
+  closeLabel,
+  closeControl = 'default',
+  sizing = 'viewport',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<dialog
+  {...attrs}
+  class:list={['modal', className]}
+  id={id}
+  data-pattern="modal"
+  data-modal
+  data-sizing={sizing}
+  data-tone={resolvedTone}
+  aria-label={label}
+  aria-modal="true"
+  tabindex="-1"
+>
+  <div class="modal__content" data-modal-content>
+    {
+      closeControl === 'default' ? (
+        <div class="modal__default-close">
+          <ModalClose label={closeLabel} />
+        </div>
+      ) : null
+    }
+    <slot />
+  </div>
+</dialog>
+
+<script>
+  import { initModal } from './modalController';
+
+  for (const root of document.querySelectorAll('[data-modal]')) {
+    if (root instanceof HTMLDialogElement) {
+      initModal(root);
+    }
+  }
+</script>