@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/dialog/index.js

@@ -1,14 +1,18 @@
 // https://www.w3.org/TR/wai-aria-practices/#dialog_modal
 
-import { Button } from '../button/index';
-import { getChildElementByClass, findElementParentByClassName, dispatchDomEvent } from '../common/dom';
+import {
+  dispatchDomEvent,
+  getChildElementByClass,
+  setTextNode,
+} from '../../core/dom.js';
+import * as Button from '../button/index.js';
 
 class DialogStack {
   /**
    * @param {Element} element
-   * @param {Element} previousFocus
-   * @param {Object=} state
-   * @param {Object=} previousState
+   * @param {?Element} [previousFocus]
+   * @param {{hash:string}} [state]
+   * @param {{hash:string}} [previousState]
    */
   constructor(element, previousFocus, state, previousState) {
     this.element = element;
@@ -20,507 +24,578 @@ class DialogStack {
 
 /** @type {DialogStack[]} */
 const OPEN_DIALOGS = [];
-class Dialog {
-  static get CANCEL_EVENT() {
-    return 'mdw:dialog-cancel';
-  }
 
-  static get CONFIRM_EVENT() {
-    return 'mdw:dialog-confirm';
+export const CANCEL_EVENT = 'mdw:dialog-cancel';
+export const CONFIRM_EVENT = 'mdw:dialog-confirm';
+export const CUSTOM_EVENT = 'mdw:dialog-custom';
+export const DISMISS_EVENT = 'mdw:dialog-dismiss';
+
+/**
+ * @param {TransitionEvent} event
+ * @return {void}
+ */
+export function onTransitionEnd(event) {
+  if (event.propertyName !== 'opacity') {
+    return;
   }
-
-  static get CUSTOM_EVENT() {
-    return 'mdw:dialog-custom';
+  const dialogElement = /** @type {HTMLElement} */ (event.currentTarget);
+  if (dialogElement.getAttribute('aria-hidden') !== 'true') {
+    return;
+  }
+  const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  if (!popupElement) {
+    return;
   }
+  popupElement.style.removeProperty('display');
+}
 
-  static get DISMISS_EVENT() {
-    return 'mdw:dialog-dismiss';
+/**
+ * @param {Element} dialogElement
+ * @return {void}
+ */
+export function setupARIA(dialogElement) {
+  if (dialogElement.hasAttribute('mdw-no-aria')) {
+    return;
+  }
+  dialogElement.setAttribute('role', 'dialog');
+  dialogElement.setAttribute('aria-modal', 'true');
+  if (!dialogElement.hasAttribute('aria-hidden')) {
+    dialogElement.setAttribute('aria-hidden', 'true');
+  }
+  const popupElement = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
+  if (!popupElement) {
+    return;
   }
 
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  static attach(element) {
-    let dialogCloser = getChildElementByClass(element, 'mdw-dialog__close');
-    if (!dialogCloser) {
-      dialogCloser = document.createElement('div');
-      dialogCloser.classList.add('mdw-dialog__close');
-      if (element.firstChild) {
-        element.insertBefore(dialogCloser, element.firstChild);
-      } else {
-        element.appendChild(dialogCloser);
-      }
-    }
-    dialogCloser.addEventListener('click', Dialog.onCancelClick);
-    const popup = getChildElementByClass(element, 'mdw-dialog__popup');
-    popup.addEventListener('keydown', Dialog.onKeyDown);
-    const buttons = popup.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-    let foundConfirmButton = false;
-    let foundCancelButton = false;
-    for (let i = 0; i < buttons.length; i += 1) {
-      const button = buttons.item(i);
-      Button.attach(button);
-      if (button.hasAttribute('mdw-custom')) {
-        button.addEventListener('click', Dialog.onCustomButtonClick);
-      } else if (!foundConfirmButton) {
-        button.addEventListener('click', Dialog.onConfirmClick);
-        foundConfirmButton = true;
-      } else if (!foundCancelButton) {
-        button.addEventListener('click', Dialog.onCancelClick);
-        foundCancelButton = true;
-      } else {
-        button.addEventListener('click', Dialog.onCustomButtonClick);
-      }
+  if (!popupElement.hasAttribute('aria-label') && !popupElement.hasAttribute('aria-labelledby')) {
+    const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
+    if (titleElement) {
+      // titleElement
     }
   }
+}
 
-  static detach(dialogElement) {
-    const dialogCloser = getChildElementByClass(dialogElement, 'mdw-dialog__close');
-    if (dialogCloser) {
-      dialogCloser.removeEventListener('click', Dialog.onCancelClick);
-    }
-    dialogElement.removeAttribute('mdw-js');
-    dialogElement.removeAttribute('mdw-show');
-    dialogElement.removeAttribute('mdw-hide');
-    const popupElement = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
-    if (popupElement) {
-      popupElement.removeEventListener('keydown', Dialog.onKeyDown);
-      popupElement.style.removeProperty('transform-origin');
-      if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
-        popupElement.removeAttribute('style');
+/**
+ * @param {Element} dialogElement
+ * @return {boolean} handled
+ */
+export function hide(dialogElement) {
+  if (dialogElement.getAttribute('aria-hidden') === 'true') {
+    return false;
+  }
+  if (!dispatchDomEvent(dialogElement, DISMISS_EVENT)) {
+    return false;
+  }
+  dialogElement.setAttribute('aria-hidden', 'true');
+  // .mdw-dialog__popup hidden by transitionEnd event
+  let stackIndex = -1;
+  OPEN_DIALOGS.some((stack, index) => {
+    if (stack.element === dialogElement) {
+      stackIndex = index;
+      return true;
+    }
+    return false;
+  });
+  if (stackIndex !== -1) {
+    const stack = OPEN_DIALOGS[stackIndex];
+    if (stack.previousFocus && stack.previousFocus instanceof HTMLElement && document.activeElement?.closest('.mdw-dialog') === dialogElement) {
+      // Only pop focus back when hiding a dialog with focus within itself.
+      try {
+        stack.previousFocus.focus();
+      } catch {
+        // Failed to focus
       }
     }
-    const buttons = popupElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-    for (let i = 0; i < buttons.length; i += 1) {
-      const button = buttons.item(i);
-      Button.detach(button);
-      button.removeEventListener('click', Dialog.onConfirmClick);
-      button.removeEventListener('click', Dialog.onCancelClick);
-      button.removeEventListener('click', Dialog.onCustomButtonClick);
+    OPEN_DIALOGS.splice(stackIndex, 1);
+    if (stack.state && window.history && window.history.state // IE11 returns a cloned state object, not the original
+      && stack.state.hash === window.history.state.hash) {
+      window.history.back();
     }
   }
+  if (!OPEN_DIALOGS.length) {
+    // eslint-disable-next-line no-use-before-define
+    window.removeEventListener('popstate', onPopState);
+  }
+  return true;
+}
 
-  static onCancelClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    if (dispatchDomEvent(event.currentTarget, Dialog.CANCEL_EVENT)) {
-      const dialogElement = findElementParentByClassName(event.currentTarget, 'mdw-dialog');
-      Dialog.hide(dialogElement);
-    }
+/**
+ * @param {Element} dialogElement
+ * @return {void}
+ */
+export function cancel(dialogElement) {
+  if (dispatchDomEvent(dialogElement, CANCEL_EVENT)) {
+    hide(dialogElement);
   }
+}
 
-  static onConfirmClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    if (dispatchDomEvent(event.currentTarget, Dialog.CONFIRM_EVENT)) {
-      const dialogElement = findElementParentByClassName(event.currentTarget, 'mdw-dialog');
-      Dialog.hide(dialogElement);
-    }
+/**
+ * @param {Element} dialogElement
+ * @return {void}
+ */
+export function confirm(dialogElement) {
+  if (dispatchDomEvent(dialogElement, CONFIRM_EVENT)) {
+    hide(dialogElement);
   }
+}
 
-  static onCustomButtonClick(event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      event.preventDefault();
-    }
-    if (dispatchDomEvent(event.currentTarget, Dialog.CUSTOM_EVENT)) {
-      const dialogElement = findElementParentByClassName(event.currentTarget, 'mdw-dialog');
-      Dialog.hide(dialogElement);
-    }
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCancelClick(event) {
+  if (event && event.currentTarget instanceof HTMLAnchorElement) {
+    event.preventDefault();
   }
+  const cancelElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = cancelElement.closest('.mdw-dialog');
+  cancel(dialogElement);
+}
 
-  static onKeyDown(event) {
-    if (event.key === 'Tab') {
-      Dialog.handleTabKeyPress(event);
-      return;
-    }
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      Dialog.onEscapeKeyDown(event);
-    }
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onConfirmClick(event) {
+  if (event && event.currentTarget instanceof HTMLAnchorElement) {
+    event.preventDefault();
   }
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = button.closest('.mdw-dialog');
+  confirm(dialogElement);
+}
 
-  static onEscapeKeyDown(event) {
-    event.stopPropagation();
+/**
+ * @param {MouseEvent} event
+ * @return {void}
+ */
+export function onCustomButtonClick(event) {
+  if (event && event.currentTarget instanceof HTMLAnchorElement) {
     event.preventDefault();
-    const dialogElement = findElementParentByClassName(event.currentTarget, 'mdw-dialog');
-    Dialog.cancel(dialogElement);
   }
+  const button = /** @type {HTMLElement} */ (event.currentTarget);
+  if (dispatchDomEvent(button, CUSTOM_EVENT)) {
+    const dialogElement = button.closest('.mdw-dialog');
+    hide(dialogElement);
+  }
+}
 
-  /**
-   * @param {PopStateEvent} event
-   * @return {void}
-   */
-  static onPopState(event) {
-    if (!event.state) {
-      return;
-    }
-    const lastOpenDialog = OPEN_DIALOGS[OPEN_DIALOGS.length - 1];
-    if (!lastOpenDialog || !lastOpenDialog.previousState) {
-      return;
-    }
-    if ((lastOpenDialog.previousState === event.state) || Object.keys(event.state)
-      .every(key => event.state[key] === lastOpenDialog.previousState[key])) {
-      if (dispatchDomEvent(lastOpenDialog.element, Dialog.CANCEL_EVENT)) {
-        Dialog.hide(lastOpenDialog.element);
-      } else {
-        // Revert pop state by pushing state again
-        const title = Dialog.getTitleText(lastOpenDialog.element);
-        window.history.pushState(lastOpenDialog.state, title);
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function handleTabKeyPress(event) {
+  const popupElement = /** @type {Element} */ (event.currentTarget);
+  const focusableElements = popupElement.querySelectorAll([
+    'button:not(:disabled):not([tabindex="-1"])',
+    '[href]:not(:disabled):not([tabindex="-1"])',
+    'input:not(:disabled):not([tabindex="-1"])',
+    'select:not(:disabled):not([tabindex="-1"])',
+    'textarea:not(:disabled):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])'].join(', '));
+  let foundTarget = false;
+  let candidate = null;
+  for (const el of focusableElements) {
+    if (el === event.target) {
+      foundTarget = true;
+      if (event.shiftKey) {
+        break;
       }
+    } else if (event.shiftKey) {
+      candidate = el;
+    } else if (foundTarget) {
+      candidate = el;
+      break;
     }
   }
-
-  /**
-   * @param {Element} dialogElement
-   * @return {void}
-   */
-  static cancel(dialogElement) {
-    if (dispatchDomEvent(dialogElement, Dialog.CANCEL_EVENT)) {
-      Dialog.hide(dialogElement);
+  if (!candidate) {
+    candidate = event.shiftKey ? focusableElements[focusableElements.length - 1] : focusableElements[0];
+  }
+  event.stopPropagation();
+  event.preventDefault();
+  if (candidate && candidate instanceof HTMLElement) {
+    try {
+      candidate.focus();
+    } catch {
+      // Failed to focus
     }
   }
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @return {void}
-   */
-  static confirm(dialogElement) {
-    if (dispatchDomEvent(dialogElement, Dialog.CONFIRM_EVENT)) {
-      Dialog.hide(dialogElement);
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onEscapeKeyDown(event) {
+  event.stopPropagation();
+  event.preventDefault();
+  const popupElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const dialogElement = popupElement.closest('.mdw-dialog');
+  cancel(dialogElement);
+}
+
+/**
+ * @param {KeyboardEvent} event
+ * @return {void}
+ */
+export function onKeyDown(event) {
+  if (event.key === 'Tab') {
+    handleTabKeyPress(event);
+    return;
+  }
+  if (event.key === 'Escape' || event.key === 'Esc') {
+    onEscapeKeyDown(event);
+  }
+}
+
+/**
+ * @param {Element} dialogElement
+ * @return {string}
+ */
+export function getTitleText(dialogElement) {
+  let title = 'Dialog';
+  const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
+  if (titleElement) {
+    title = titleElement.textContent ?? '';
+  } else {
+    const bodyElement = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
+    if (bodyElement) {
+      title = bodyElement.textContent ?? '';
     }
   }
+  return title;
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @return {string}
-   */
-  static getTitleText(dialogElement) {
-    let title = 'Dialog';
-    const titleElement = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
-    if (titleElement) {
-      title = titleElement.textContent;
+/**
+ * @param {PopStateEvent} event
+ * @return {void}
+ */
+export function onPopState(event) {
+  if (!event.state) {
+    return;
+  }
+  const lastOpenDialog = OPEN_DIALOGS[OPEN_DIALOGS.length - 1];
+  if (!lastOpenDialog || !lastOpenDialog.previousState) {
+    return;
+  }
+  if ((lastOpenDialog.previousState === event.state) || Object.keys(event.state)
+    .every((key) => event.state[key] === lastOpenDialog.previousState[key])) {
+    if (dispatchDomEvent(lastOpenDialog.element, CANCEL_EVENT)) {
+      hide(lastOpenDialog.element);
     } else {
-      const bodyElement = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
-      if (bodyElement) {
-        title = bodyElement.textContent;
-      }
+      // Revert pop state by pushing state again
+      const title = getTitleText(lastOpenDialog.element);
+      window.history.pushState(lastOpenDialog.state, title);
     }
-    return title;
   }
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @return {boolean} handled
-   */
-  static hide(dialogElement) {
-    if (dialogElement.hasAttribute('mdw-hide')) {
-      return false;
-    }
-    if (!dispatchDomEvent(dialogElement, Dialog.DISMISS_EVENT)) {
-      return false;
-    }
-    dialogElement.setAttribute('mdw-hide', '');
-    let stackIndex = -1;
-    OPEN_DIALOGS.some((stack, index) => {
-      if (stack.element === dialogElement) {
-        stackIndex = index;
-        return true;
-      }
-      return false;
-    });
-    if (stackIndex !== -1) {
-      const stack = OPEN_DIALOGS[stackIndex];
-      if (stack.previousFocus) {
-        if (findElementParentByClassName(document.activeElement, 'mdw-dialog') === dialogElement) {
-          // Only pop focus back when hiding a dialog with focus within itself.
-          stack.previousFocus.focus();
-        }
-      }
-      OPEN_DIALOGS.splice(stackIndex, 1);
-      if (stack.state && window.history && window.history.state) {
-        // IE11 returns a cloned state object, not the original
-        if (stack.state.hash === window.history.state.hash) {
-          window.history.back();
-        }
-      }
-    }
-    if (!OPEN_DIALOGS.length) {
-      window.removeEventListener('popstate', Dialog.onPopState);
+/**
+ * @param {Element} dialogElement
+ * @param {(DocumentFragment|string|null)} [content]
+ * @return {void}
+ */
+export function updateTitle(dialogElement, content) {
+  let title = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
+  if (!content) {
+    if (!title) {
+      // Nothing to be done
+      return;
     }
-    return true;
+    title.remove();
+    return;
   }
-
-  /**
-   * @param {Element} dialogElement
-   * @param {(MouseEvent|KeyboardEvent|PointerEvent)=} event
-   * @return {boolean} handled
-   */
-  static show(dialogElement, event) {
-    if (event && event.currentTarget instanceof HTMLAnchorElement) {
-      // Prevent anchor link
-      event.preventDefault();
+  if (!title) {
+    title = document.createElement('div');
+    title.className = 'mdw-dialog__title';
+    const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
+    popup.prepend(title);
+  }
+  if (content instanceof DocumentFragment) {
+    while (title.lastChild) {
+      title.removeChild(title.lastChild);
     }
-    let changed = false;
+    title.appendChild(content);
+  } else {
+    title.textContent = content;
+  }
+}
 
-    Dialog.updateTransformOrigin(dialogElement, event);
-    if (dialogElement.hasAttribute('mdw-hide')) {
-      dialogElement.removeAttribute('mdw-hide');
-      changed = true;
-    }
-    if (!dialogElement.hasAttribute('mdw-show')) {
-      dialogElement.setAttribute('mdw-show', '');
-      changed = true;
-    }
-    if (changed) {
-      Dialog.attach(dialogElement);
-      const previousFocus = document.activeElement;
-      const newState = { hash: Math.random().toString(36).substr(2, 16) };
-      let previousState = null;
-      if (window.history && window.history.pushState) {
-        if (!window.history.state) {
-          // Create new previous state
-          window.history.replaceState({
-            hash: Math.random().toString(36).substr(2, 16),
-          }, document.title);
-        }
-        previousState = window.history.state;
-        const title = Dialog.getTitleText(dialogElement);
-        window.history.pushState(newState, title);
-        window.addEventListener('popstate', Dialog.onPopState);
-      }
-      const dialogStack = new DialogStack(dialogElement, previousFocus, newState, previousState);
-      OPEN_DIALOGS.push(dialogStack);
-      const focusElement = dialogElement.querySelector('[mdw-autofocus]');
-      if (focusElement) {
-        focusElement.focus();
-      } else {
-        dialogElement.focus();
-      }
-    }
-    return changed;
+/**
+ * @param {Element} dialogElement
+ * @param {string[]} texts
+ * @return {void}
+ */
+export function updateButtonText(dialogElement, texts) {
+  const buttons = dialogElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  for (let i = 0; i < buttons.length; i++) {
+    setTextNode(buttons.item(i), texts[i]);
   }
+}
 
-  /**
-   * @param {KeyboardEvent} event
-   * @return {void}
-   */
-  static handleTabKeyPress(event) {
-    const popupElement = event.currentTarget;
-    const focusableElements = popupElement.querySelectorAll([
-      'button:not(:disabled):not([tabindex="-1"])',
-      '[href]:not(:disabled):not([tabindex="-1"])',
-      'input:not(:disabled):not([tabindex="-1"])',
-      'select:not(:disabled):not([tabindex="-1"])',
-      'textarea:not(:disabled):not([tabindex="-1"])',
-      '[tabindex]:not([tabindex="-1"])'].join(', '));
-    let foundTarget = false;
-    let candidate = null;
-    for (let i = 0; i < focusableElements.length; i += 1) {
-      const el = focusableElements.item(i);
-      if (el === event.target) {
-        foundTarget = true;
-        if (event.shiftKey) {
-          break;
-        }
-      } else if (event.shiftKey) {
-        candidate = el;
-      } else if (foundTarget) {
-        candidate = el;
-        break;
-      }
+/**
+ * @param {Element} dialogElement
+ * @param {(DocumentFragment|string)} [content]
+ * @return {void}
+ */
+export function updateBody(dialogElement, content) {
+  let body = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
+  if (!content) {
+    if (!body) {
+      // Nothing to be done
+      return;
     }
-    if (!candidate) {
-      if (event.shiftKey) {
-        // Select last item
-        candidate = focusableElements[focusableElements.length - 1];
-      } else {
-        // Select first item
-        candidate = focusableElements[0];
-      }
+    body.remove();
+    return;
+  }
+  if (!body) {
+    body = document.createElement('div');
+    body.className = 'mdw-dialog__body mdw-theme';
+    body.setAttribute('mdw-ink', 'medium');
+    const title = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
+    if (title) {
+      title.after(body);
+    } else {
+      const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
+      popup.prepend(body);
     }
-    event.stopPropagation();
-    event.preventDefault();
-    if (candidate) {
-      candidate.focus();
+  }
+  if (content instanceof DocumentFragment) {
+    while (body.lastChild) {
+      body.removeChild(body.lastChild);
     }
+    body.appendChild(content);
+  } else {
+    body.textContent = content;
   }
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @param {(DocumentFragment|string)=} content
-   * @return {void}
-   */
-  static updateTitle(dialogElement, content) {
-    let title = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
-    if (!content) {
-      if (!title) {
-        // Nothing to be done
-        return;
-      }
-      title.parentElement.removeChild(title);
+/**
+ * @param {Element} dialogElement
+ * @param {Event|MouseEvent} [event]
+ * @return {void}
+ */
+export function updateTransformOrigin(dialogElement, event) {
+  const popup = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  popup.style.removeProperty('transform-origin');
+  if (!event) {
+    return;
+  }
+  const hadLayer = popup.style.getPropertyValue('display') != null;
+  if (!hadLayer) {
+    popup.style.setProperty('display', 'flex');
+  }
+  let pageX;
+  let pageY;
+  const dialogRect = dialogElement.getBoundingClientRect();
+  if ('pageX' in event && 'pageY' in event) {
+    pageX = event.pageX - window.pageXOffset;
+    pageY = event.pageY - window.pageYOffset;
+  } else {
+    const target = (event.target || event.currentTarget);
+    if (!(target instanceof Element)) {
       return;
     }
-    if (!title) {
-      title = document.createElement('div');
-      title.classList.add('mdw-dialog__title');
-      const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
-      popup.insertBefore(title, popup.firstChild);
-    }
-    if (content instanceof DocumentFragment) {
-      while (title.lastChild) {
-        title.removeChild(title.lastChild);
-      }
-      title.appendChild(content);
-    } else {
-      title.textContent = content;
+    const rect = target.getBoundingClientRect();
+    if (!rect.width && !rect.width && !rect.left && !rect.top) {
+      return;
     }
+    pageX = rect.left + (rect.width / 2);
+    pageY = rect.top + (rect.height / 2);
   }
+  const transformOriginX = pageX - dialogRect.left - popup.offsetLeft;
+  const transformOriginY = pageY - dialogRect.top - popup.offsetTop;
+  popup.style.setProperty('transform-origin', `${transformOriginX}px ${transformOriginY}px`);
+  if (!hadLayer) {
+    popup.style.removeProperty('display');
+  }
+}
 
-
-  /**
-   * @param {Element} dialogElement
-   * @param {string[]} texts
-   * @return {void}
-   */
-  static updateButtonText(dialogElement, texts) {
-    const buttonElements = dialogElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
-    for (let i = 0; i < buttonElements.length; i += 1) {
-      const button = buttonElements.item(i);
-      button.textContent = texts[i];
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('mdw-dialog-js', '');
+  element.addEventListener('transitionend', onTransitionEnd);
+
+  let dialogCloser = getChildElementByClass(element, 'mdw-dialog__close');
+  if (!dialogCloser) {
+    dialogCloser = document.createElement('div');
+    dialogCloser.className = 'mdw-dialog__close';
+    if (element.firstChild) {
+      element.prepend(dialogCloser);
+    } else {
+      element.appendChild(dialogCloser);
     }
   }
+  dialogCloser.addEventListener('click', onCancelClick);
+  const popup = getChildElementByClass(element, 'mdw-dialog__popup');
+  popup.addEventListener('keydown', onKeyDown);
+  const buttons = popup.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  let foundConfirmButton = false;
+  let foundCancelButton = false;
+  for (const button of buttons) {
+    Button.attach(button);
+    if (button.hasAttribute('mdw-custom')) {
+      button.addEventListener('click', onCustomButtonClick);
+      continue;
+    }
+    if (!foundConfirmButton) {
+      button.addEventListener('click', onConfirmClick);
+      foundConfirmButton = true;
+      continue;
+    }
+    if (!foundCancelButton) {
+      button.addEventListener('click', onCancelClick);
+      foundCancelButton = true;
+      continue;
+    }
+    button.addEventListener('click', onCustomButtonClick);
+  }
+  setupARIA(element);
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @param {(DocumentFragment|string)=} content
-   * @return {void}
-   */
-  static updateBody(dialogElement, content) {
-    let body = dialogElement.getElementsByClassName('mdw-dialog__body')[0];
-    if (!content) {
-      if (!body) {
-        // Nothing to be done
-        return;
+/**
+ * @param {Object} options
+ * @param {(DocumentFragment|string)} [options.title]
+ * @param {(DocumentFragment|string)} [options.body]
+ * @param {string[]} [options.buttons]
+ * @param {boolean} [options.stacked=false]
+ * @param {Element} [options.parent]
+ * @param {boolean} [options.custom=false] Use custom button events
+ * @param {(string|number)} [options.autofocus=0] Autofocus button by index or text
+ * @return {Element}
+ */
+export function create(options) {
+  const element = document.createElement('div');
+  element.className = 'mdw-dialog';
+
+  const popup = document.createElement('div');
+  popup.className = 'mdw-dialog__popup mdw-theme';
+  popup.setAttribute('mdw-surface', 'card');
+  element.appendChild(popup);
+
+  updateTitle(element, options.title);
+  updateBody(element, options.body);
+
+  if (options.buttons) {
+    const buttonArea = document.createElement('div');
+    buttonArea.className = 'mdw-dialog__button-area';
+    let index = 0;
+    for (const buttonText of options.buttons) {
+      const button = document.createElement('div');
+      button.className = 'mdw-button mdw-theme';
+      button.setAttribute('tabindex', '0');
+      button.setAttribute('mdw-ink', 'secondary');
+      if (options.custom) {
+        button.setAttribute('mdw-custom', '');
       }
-      body.parentElement.removeChild(body);
-      return;
-    }
-    if (!body) {
-      body = document.createElement('div');
-      body.classList.add('mdw-dialog__body');
-      const title = dialogElement.getElementsByClassName('mdw-dialog__title')[0];
-      if (title) {
-        title.insertAdjacentElement('afterend', body);
-      } else {
-        const popup = dialogElement.getElementsByClassName('mdw-dialog__popup')[0];
-        popup.insertBefore(body, popup.firstChild);
+      button.textContent = buttonText;
+      buttonArea.appendChild(button);
+      if ((options.autofocus == null && index === 0)
+        || options.autofocus === index || options.autofocus === buttonText) {
+        button.setAttribute('mdw-autofocus', '');
       }
+      index += 1;
     }
-    if (content instanceof DocumentFragment) {
-      while (body.lastChild) {
-        body.removeChild(body.lastChild);
-      }
-      body.appendChild(content);
-    } else {
-      body.textContent = content;
+    if (options.stacked) {
+      buttonArea.setAttribute('mdw-stacked', '');
     }
+    popup.appendChild(buttonArea);
   }
+  if (options.parent) {
+    options.parent.appendChild(element);
+  }
+  attach(element);
+  return element;
+}
 
-  /**
-   * @param {Object} options
-   * @param {(DocumentFragment|string)=} options.title
-   * @param {(DocumentFragment|string)=} options.body
-   * @param {string[]=} options.buttons
-   * @param {boolean=} options.stacked
-   * @param {Element=} options.parent
-   * @param {boolean} [options.custom=false] Use custom button events
-   * @param {(string|number)=} [options.autofocus=0] Autofocus button by index or text
-   * @return {Element}
-   */
-  static create(options) {
-    const element = document.createElement('div');
-    element.classList.add('mdw-dialog');
-
-    const popup = document.createElement('div');
-    popup.classList.add('mdw-dialog__popup');
-    element.appendChild(popup);
-
-    Dialog.updateTitle(element, options.title);
-    Dialog.updateBody(element, options.body);
-
-    if (options.buttons) {
-      const buttonArea = document.createElement('div');
-      buttonArea.classList.add('mdw-dialog__button-area');
-      let index = 0;
-      options.buttons.forEach((buttonText) => {
-        const button = document.createElement('div');
-        button.classList.add('mdw-button');
-        button.setAttribute('tabindex', '0');
-        button.setAttribute('mdw-theme-color', 'accent');
-        if (options.custom) {
-          button.setAttribute('mdw-custom', '');
-        }
-        button.textContent = buttonText;
-        buttonArea.appendChild(button);
-        if ((options.autofocus == null && index === 0)
-          || options.autofocus === index || options.autofocus === buttonText) {
-          button.setAttribute('mdw-autofocus', '');
-        }
-        index += 1;
-      });
-      if (options.stacked) {
-        buttonArea.setAttribute('mdw-stacked', '');
+/**
+ * @param {Element} dialogElement
+ * @param {Event} [event]
+ * @return {boolean} handled
+ */
+export function show(dialogElement, event) {
+  if (event && event.type === 'click' && event.currentTarget instanceof HTMLAnchorElement) {
+    // Prevent anchor link
+    event.preventDefault();
+  }
+  let changed = false;
+
+  if (dialogElement.getAttribute('aria-hidden') !== 'false') {
+    dialogElement.setAttribute('aria-hidden', 'false');
+    const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+    popupElement.style.setProperty('display', 'flex');
+    changed = true;
+  }
+
+  updateTransformOrigin(dialogElement, event);
+
+  if (!changed) {
+    return false;
+  }
+  attach(dialogElement);
+  const previousFocus = document.activeElement;
+  const newState = { hash: Math.random().toString(36).slice(2, 18) };
+  let previousState = null;
+  if (window.history && window.history.pushState) {
+    if (!window.history.state) {
+      // Create new previous state
+      window.history.replaceState({
+        hash: Math.random().toString(36).slice(2, 18),
+      }, document.title);
+    }
+    previousState = window.history.state;
+    const title = getTitleText(dialogElement);
+    window.history.pushState(newState, title);
+    window.addEventListener('popstate', onPopState);
+  }
+  const dialogStack = new DialogStack(dialogElement, previousFocus, newState, previousState);
+  OPEN_DIALOGS.push(dialogStack);
+  const focusElement = dialogElement.querySelector('[mdw-autofocus]');
+  try {
+    if (focusElement && focusElement instanceof HTMLElement) {
+      if (focusElement.scrollIntoView) {
+        focusElement.scrollIntoView();
       }
-      popup.appendChild(buttonArea);
+      focusElement.focus();
+    } else if (dialogElement instanceof HTMLElement) {
+      dialogElement.focus();
     }
-    if (options.parent) {
-      options.parent.appendChild(element);
-    }
-    Dialog.attach(element);
-    return element;
+  } catch {
+    // Failed to focus
   }
+  return true;
+}
 
-  /**
-   * @param {Element} dialogElement
-   * @param {(MouseEvent|KeyboardEvent|PointerEvent)=} event
-   * @return {void}
-   */
-  static updateTransformOrigin(dialogElement, event) {
-    /** @type {HTMLElement} */
-    const popup = getChildElementByClass(dialogElement, 'mdw-dialog__popup');
-    popup.style.removeProperty('transform-origin');
-    if (!event) {
-      return;
-    }
-    let popupPageX = 0;
-    let popupPageY = 0;
-    let element = popup;
-    while (element != null) {
-      popupPageX += element.offsetLeft - element.scrollLeft;
-      popupPageY += element.offsetTop - element.scrollTop;
-      element = element.offsetParent;
-    }
-    let { pageX, pageY } = event;
-    if (!pageX && !pageY) {
-      const target = event.currentTarget || event.target;
-      const rect = target.getBoundingClientRect();
-      if (!rect.width && !rect.width && !rect.x && !rect.y) {
-        return;
-      }
-      pageX = rect.x + (rect.width / 2);
-      pageY = rect.y + (rect.height / 2);
+/**
+ * @param {Element} dialogElement
+ * @return {void}
+ */
+export function detach(dialogElement) {
+  dialogElement.removeEventListener('transitionend', onTransitionEnd);
+  dialogElement.removeAttribute('mdw-dialog-js');
+  const dialogCloser = getChildElementByClass(dialogElement, 'mdw-dialog__close');
+  if (dialogCloser) {
+    dialogCloser.removeEventListener('click', onCancelClick);
+  }
+  const popupElement = /** @type {HTMLElement} */ (dialogElement.getElementsByClassName('mdw-dialog__popup')[0]);
+  if (popupElement) {
+    popupElement.removeEventListener('keydown', onKeyDown);
+    popupElement.style.removeProperty('transform-origin');
+    if (popupElement.hasAttribute('style') && !popupElement.getAttribute('style')) {
+      popupElement.removeAttribute('style');
     }
-    const transformOriginX = `${pageX - popupPageX}px`;
-    const transformOriginY = `${pageY - popupPageY}px`;
-    popup.style.setProperty('transform-origin', `${transformOriginX} ${transformOriginY}`);
+  }
+  const buttons = popupElement.querySelectorAll('.mdw-dialog__button-area .mdw-button');
+  for (const button of buttons) {
+    Button.detach(button);
+    button.removeEventListener('click', onConfirmClick);
+    button.removeEventListener('click', onCancelClick);
+    button.removeEventListener('click', onCustomButtonClick);
   }
 }
 
 // Aliases
-Dialog.dismiss = Dialog.hide;
-
-export {
-  Dialog,
-};
+export const dismiss = hide;