svgedit/src/editor/dialogs/SePlainAlertDialog.js

Powerful SVG-Editor for your browser

import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'
import { template, keydown } from 'elix/src/base/internal.js'
import { fragmentFrom } from 'elix/src/core/htmlLiterals.js'

/**
 * @class SePlainAlertDialog
 */
export default class SePlainAlertDialog extends PlainAlertDialog {
  /**
    * @function get
    * @returns {PlainObject}
  */
  get [template] () {
    const result = super[template]
    // Replace the default slot with a new default slot and a button container.
    const defaultSlot = result.content.querySelector('#frameContent')
    if (defaultSlot) {
      defaultSlot.replaceWith(fragmentFrom.html`
        <div id="alertDialogContent">
          <div id="se-content-alert">
            <slot></slot>
          </div>
          <div id="choiceButtonContainer" part="choice-button-container"></div>
        </div>
      `)
    }
    result.content.append(
      fragmentFrom.html`
        <style>
          [part~="frame"] {
            padding: 1em;
            background: #CCC;
            width: 300px;
            border: 1px outset #777;
            font-size: 0.8em;
            font-family: Verdana,Helvetica,sans-serif;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
          }

          [part~="choice-button-container"] {
            margin-top: 1em;
            text-align: center;
          }

          [part~="choice-button"]:not(:first-child) {
            margin-left: 0.5em;
          }
          #se-content-alert{
            height: 95px;
            background: #DDD;
            overflow: auto;
            text-align: left;
            border: 1px solid #5a6162;
            padding: 1em;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
          }
        </style>
      `
    )
    return result
  }

  /**
   * Tracks if users wants to cancel (close dialog without any changes) with Esc
   * if null - seConfirm will use responce.choice
   */
  keyChoice = null

  get [keydown] () {
    /**
     * Listens to Esc key to close dialog
     */
    return (e) => {
      if (e.key === 'Escape') {
        this.keyChoice = 'Cancel'
        this.close()
      }
    }
  }
}

customElements.define('se-elix-alert-dialog', SePlainAlertDialog)