svgedit/src/editor/extensions/ext-storage/storageDialog.js

const template = document.createElement('template');
template.innerHTML = `
  <style>
 
  #dialog_content {
    margin: 10px 10px 5px 10px;
    background: #DDD;
    overflow: auto;
    text-align: left;
    border: 1px solid #5a6162;
  }

  #dialog_content p, #dialog_content select, #dialog_content label {
    margin: 10px;
    line-height: 1.3em;
  }
  
  #dialog_container {
    font-family: Verdana;
    text-align: center;
    left: 50%;
    top: 50%;
    max-width: 440px;
    z-index: 50001;
    background: #5a6162;
    border: 1px outset #777;
    font-family:Verdana,Helvetica,sans-serif;
    font-size:0.8em;
  }
  
  #dialog_container, #dialog_content {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  
  #dialog_buttons input[type=text] {
    width: 90%;
    display: block;
    margin: 0 0 5px 11px;
  }
  
  #dialog_buttons input[type=button] {
    margin: 0 1em;
  }
  </style>
  <elix-dialog id="dialog_box" aria-label="SVG-Edit storage preferences" closed>
    <div class="overlay"></div>
    <div id="dialog_container">
      <div id="dialog_content">
        <p id="notificationNote"> </p>
        <select id="se-storage-pref">
          <option value="prefsAndContent" id="prefsAndContent"></option>
          <option value="prefsOnly" id="prefsOnly"></option>
          <option value="noPrefsOrContent" id="noPrefsOrContent"></option>
        </select> 
        <label title="" id="se-remember-title">
          <input type="checkbox" id="se-remember" value="" checked>
        </label>     
      </div>
      <div id="dialog_buttons">
        <button id="storage_ok"></button>
        <button id="storage_cancel"></button>
      </div>
    </div>
  </elix-dialog>
`;
/**
 * @class SeStorageDialog
 */
export class SeStorageDialog extends HTMLElement {
  /**
    * @function constructor
    */
  constructor () {
    super();
    // create the shadowDom and insert the template
    this._shadowRoot = this.attachShadow({ mode: 'open' });
    this._shadowRoot.append(template.content.cloneNode(true));
    this.$dialog = this._shadowRoot.querySelector('#dialog_box');
    this.$storage = this._shadowRoot.querySelector('#js-storage');
    this.$okBtn = this._shadowRoot.querySelector('#storage_ok');
    this.$cancelBtn = this._shadowRoot.querySelector('#storage_cancel');
    this.$storageInput = this._shadowRoot.querySelector('#se-storage-pref');
    this.$rememberInput = this._shadowRoot.querySelector('#se-remember');
  }
  /**
   * @function init
   * @param {any} name
   * @returns {void}
   */
  init (i18next) {
    this.setAttribute('common-ok', i18next.t('common.ok'));
    this.setAttribute('common-cancel', i18next.t('common.cancel'));
    this.setAttribute('notify-editor_pref_msg', i18next.t('notification.editorPreferencesMsg'));
    this.setAttribute('properties-prefs_and_content', i18next.t('properties.prefs_and_content'));
    this.setAttribute('properties-prefs_only', i18next.t('properties.prefs_only'));
    this.setAttribute('properties-no_prefs_or_content', i18next.t('properties.no_prefs_or_content'));
    this.setAttribute('tools-remember_this_choice', i18next.t('tools.remember_this_choice'));
    this.setAttribute('tools-remember_this_choice_title', i18next.t('tools.remember_this_choice_title'));
  }
  /**
   * @function observedAttributes
   * @returns {any} observed
   */
  static get observedAttributes () {
    return [ 'dialog', 'storage', 'common-ok', 'common-cancel', 'notify-editor_pref_msg', 'properties-prefs_and_content', 'tools-remember_this_choice', 'tools-remember_this_choice_title', 'properties-prefs_only', 'properties-no_prefs_or_content' ];
  }
  /**
   * @function attributeChangedCallback
   * @param {string} name
   * @param {string} oldValue
   * @param {string} newValue
   * @returns {void}
   */
  attributeChangedCallback (name, oldValue, newValue) {
    let node;
    switch (name) {
    case 'dialog':
      if (newValue === 'open') {
        this.$dialog.open();
      } else {
        this.$dialog.close();
      }
      break;
    case 'storage':
      if (newValue === 'true') {
        this.$storageInput.options[0].disabled = false;
      } else {
        this.$storageInput.options[0].disabled = true;
      }
      break;
    case 'common-ok':
      this.$okBtn.textContent = newValue;
      break;
    case 'common-cancel':
      this.$cancelBtn.textContent = newValue;
      break;
    case 'notify-editor_pref_msg':
      node = this._shadowRoot.querySelector('#notificationNote');
      node.textContent = newValue;
      break;
    case 'properties-prefs_and_content':
      node = this._shadowRoot.querySelector('#prefsAndContent');
      node.textContent = newValue;
      break;
    case 'properties-prefs_only':
      node = this._shadowRoot.querySelector('#prefsOnly');
      node.textContent = newValue;
      break;
    case 'properties-no_prefs_or_content':
      node = this._shadowRoot.querySelector('#noPrefsOrContent');
      node.textContent = newValue;
      break;
    case 'tools-remember_this_choice':
      node = this._shadowRoot.querySelector('#se-remember-title');
      node.prepend(newValue);
      break;
    case 'tools-remember_this_choice_title':
      node = this._shadowRoot.querySelector('#se-remember-title');
      node.setAttribute('title', newValue);
      break;
    default:
      // super.attributeChangedCallback(name, oldValue, newValue);
      break;
    }
  }
  /**
   * @function get
   * @returns {any}
   */
  get dialog () {
    return this.getAttribute('dialog');
  }
  /**
   * @function set
   * @returns {void}
   */
  set dialog (value) {
    this.setAttribute('dialog', value);
  }
  /**
   * @function connectedCallback
   * @returns {void}
   */
  connectedCallback () {
    const onSubmitHandler = (e, action) => {
      const triggerEvent = new CustomEvent('change', { detail: {
        trigger: action,
        select: this.$storageInput.value,
        checkbox: this.$rememberInput.checked
      } });
      this.dispatchEvent(triggerEvent);
    };
    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
  }
  /**
 * Sets SVG content as a string with "svgedit-" and the current
 *   canvas name as namespace.
 * @param {string} val
 * @returns {void}
 */
  setSVGContentStorage (val) {
    if (this.storage) {
      const name = 'svgedit-' + this.configObj.curConfig.canvasName;
      if (!val) {
        this.storage.removeItem(name);
      } else {
        this.storage.setItem(name, val);
      }
    }
  }
}

// Register
customElements.define('se-storage-dialog', SeStorageDialog);