svgedit/src/editor/dialogs/editorPreferencesDialog.js

Powerful SVG-Editor for your browser

const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
  <style>
  :not(:defined) {
    display: none;
  }

  /* Force the scroll bar to appear so we see it hide when overlay opens. */
  body::-webkit-scrollbar {
    background: lightgray;
  }
  body::-webkit-scrollbar-thumb {
    background: darkgray;
  }
  .toolbar_button button {
    border:1px solid #dedede;
    line-height:130%;
    float: left;
    background: #E8E8E8 none;
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
    margin: 5px 20px 0 0;
    border: 1px var(--border-color) solid;
    border-top-color: #FFF;
    border-left-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
  }
  
  .toolbar_button button:hover {
    border: 1px #e0a874 solid;
    border-top-color: #fcd9ba;
    border-left-color: #fcd9ba;
    background-color: #FFC;
  }
  .toolbar_button button:active {
    background-color: #F4E284;
    border-left: 1px solid #663300;
    border-top: 1px solid #663300;
  }
  
  .toolbar_button button .svg_icon {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
  }
  .color_block {
    top: 0;
    left: 0;
  }  
  .color_block svg {
    display: block;
  }
  #bg_blocks {
    overflow: auto;
    margin-left: 30px;
  }  
  #bg_blocks .color_block {
    position: static;
  }
  #svginfo_bg_note {
    font-size: .9em;
    font-style: italic;
    color: #444;
  }
  #svg_prefs #svg_prefs_container {
    padding: 10px;
    background-color: #5a6162;
    color: #c5c5c5;
    border: 1px outset #777;
    opacity: 1.0;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: .8em;
    z-index: 20001;
  }
  
  #tool_prefs_back {
    margin-left: 1em;
    overflow: auto;
  }

  #tool_prefs_save {
    width: 30%;
    background-color: #c79605;
    margin-left: 20%;
  }

  #tool_prefs_cancel {
    width: 30%;
    background-color: #c8c8c8;
  }
  
  #svg_prefs #svg_docprops_prefs {
    float: left;
    width: 221px;
    margin: 5px .7em;
    overflow: hidden;
  }
  
  #svg_prefs_container fieldset + fieldset {
    float: right;
  }
  
  #svg_prefs legend {
    max-width: 195px;
  }
  
  #svg_prefs_container > fieldset > legend {
    font-weight: bold;
    font-size: 1.1em;
  }
  
  #svg_prefs fieldset {
    padding: 5px;
    margin: 5px;
    border: 1px solid #DDD;
  }
  
  #svg_prefs_container label {
    display: block;
    margin: .5em;
  }
  #svg_prefs_container div.color_block {
    float: left;
    margin: 2px;
    padding: 20px;
    border: 1px solid #6f6f6f;
  }
  
  #change_background div.cur_background {
    border: 2px solid blue;
    padding: 19px;
  }
  #canvas_bg_url {
    display: block;
    width: 96%;
  }
  #svg_prefs button {
    margin-top: 0;
    margin-bottom: 5px;
  }
  </style>
  <elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
    <div id="svg_prefs_container">
      <div id="tool_prefs_back" class="toolbar_button">
        <button id="tool_prefs_save"></button>
        <button id="tool_prefs_cancel"></button>
      </div>
      <fieldset>
        <legend id="svginfo_editor_prefs"></legend>
        <label>
          <span id="svginfo_lang"></span>
          <!-- Source: https://en.wikipedia.org/wiki/Language_names -->
          <select id="lang_select">
            <option id="lang_ar" value="ar">العربية</option>
            <option id="lang_cs" value="cs">Čeština</option>
            <option id="lang_de" value="de">Deutsch</option>
            <option id="lang_en" value="en" selected="selected">English</option>
            <option id="lang_es" value="es">Español</option>
            <option id="lang_fa" value="fa">فارسی</option>
            <option id="lang_fr" value="fr">Français</option>
            <option id="lang_fy" value="fy">Frysk</option>
            <option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
            <option id="lang_it" value="it">Italiano</option>
            <option id="lang_ja" value="ja">日本語</option>
            <option id="lang_nl" value="nl">Nederlands</option>
            <option id="lang_pl" value="pl">Polski</option>
            <option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
            <option id="lang_ro" value="ro">Română</option>
            <option id="lang_ru" value="ru">Русский</option>
            <option id="lang_sk" value="sk">Slovenčina</option>
            <option id="lang_sl" value="sl">Slovenščina</option>
            <option id="lang_zh-CN" value="zh-CN">简体中文</option>
            <option id="lang_zh-TW" value="zh-TW">繁體中文</option>
          </select>
        </label>
        <fieldset id="change_background">
          <legend id="svginfo_change_background"></legend>
          <div id="bg_blocks"></div>
          <label>
            <span id="svginfo_bg_url"></span>
            <input type="text" id="canvas_bg_url" />
          </label>
          <p id="svginfo_bg_note"></p>
        </fieldset>
        <fieldset id="change_grid">
          <legend id="svginfo_grid_settings"></legend>
          <label for="svginfo_snap_onoff">
            <span id="svginfo_snap_onoff"></span>
            <input type="checkbox" value="snapping_on" id="grid_snapping_on" />
          </label>
          <label for="grid_snapping_step">
            <span id="svginfo_snap_step"></span>
            <input type="text" id="grid_snapping_step" size="3" value="10" />
          </label>
          <label>
            <span id="svginfo_grid_color"></span>
            <input type="text" id="grid_color" size="3" value="#000" />
          </label>
        </fieldset>
        <fieldset id="units_rulers">
          <legend id="svginfo_units_rulers"></legend>
          <label>
            <span id="svginfo_rulers_onoff"></span>
            <input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
          </label>
          <label>
            <span id="svginfo_unit"></span>
            <select id="base_unit">
              <option value="px">Pixels</option>
              <option value="cm">Centimeters</option>
              <option value="mm">Millimeters</option>
              <option value="in">Inches</option>
              <option value="pt">Points</option>
              <option value="pc">Picas</option>
              <option value="em">Ems</option>
              <option value="ex">Exs</option>
            </select>
          </label>
        </fieldset>
      </fieldset>
    </div>
  </elix-dialog>  
`;
/**
 * @class SeEditPrefsDialog
 */
export class SeEditPrefsDialog extends HTMLElement {
  /**
    * @function constructor
    */
  constructor () {
    super();
    // create the shadowDom and insert the template
    this.colorBlocks = [ '#FFF', '#888', '#000', 'chessboard' ];
    this._shadowRoot = this.attachShadow({ mode: 'open' });
    this._shadowRoot.append(template.content.cloneNode(true));
    this.$dialog = this._shadowRoot.querySelector('#svg_prefs');
    this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save');
    this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel');
    this.$langSelect = this._shadowRoot.querySelector('#lang_select');
    this.$bgBlocks = this._shadowRoot.querySelector('#bg_blocks');
    this.$bgURL = this._shadowRoot.querySelector('#canvas_bg_url');
    this.$gridSnappingOn = this._shadowRoot.querySelector('#grid_snapping_on');
    this.$gridSnappingStep = this._shadowRoot.querySelector('#grid_snapping_step');
    this.$gridColor = this._shadowRoot.querySelector('#grid_color');
    this.$showRulers = this._shadowRoot.querySelector('#show_rulers');
    this.$baseUnit = this._shadowRoot.querySelector('#base_unit');
  }
  /**
   * @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('config-editor_prefs', i18next.t('config.editor_prefs'));
    this.setAttribute('config-language', i18next.t('config.language'));
    this.setAttribute('config-background', i18next.t('config.background'));
    this.setAttribute('common-url', i18next.t('common.url'));
    this.setAttribute('config-editor_bg_note', i18next.t('config.editor_bg_note'));
    this.setAttribute('config-grid', i18next.t('config.grid'));
    this.setAttribute('config-snapping_onoff', i18next.t('config.snapping_onoff'));
    this.setAttribute('config-snapping_stepsize', i18next.t('config.snapping_stepsize'));
    this.setAttribute('config-grid_color', i18next.t('config.grid_color'));
    this.setAttribute('config-units_and_rulers', i18next.t('config.units_and_rulers'));
    this.setAttribute('config-show_rulers', i18next.t('config.show_rulers'));
    this.setAttribute('config-base_unit', i18next.t('config.base_unit'));
  }
  /**
   * @function observedAttributes
   * @returns {any} observed
   */
  static get observedAttributes () {
    // eslint-disable-next-line max-len
    return [ 'dialog', 'lang', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit', 'common-ok', 'common-cancel', 'config-editor_prefs', 'config-language', 'config-background', 'common-url', 'config-editor_bg_note', 'config-grid', 'config-snapping_onoff', 'config-snapping_stepsize', 'config-grid_color', 'config-units_and_rulers', 'config-show_rulers', 'config-base_unit' ];
  }
  /**
   * @function attributeChangedCallback
   * @param {string} name
   * @param {string} oldValue
   * @param {string} newValue
   * @returns {void}
   */
  attributeChangedCallback (name, oldValue, newValue) {
    if (oldValue === newValue) return;
    const blocks = this.$bgBlocks.querySelectorAll('div');
    const curBg = 'cur_background';
    let node;
    switch (name) {
    case 'dialog':
      if (newValue === 'open') {
        this.$dialog.open();
      } else {
        this.$dialog.close();
      }
      break;
    case 'lang':
      this.$langSelect.value = newValue;
      break;
    case 'canvasbg':
      if (!newValue) {
        if (blocks.length > 0) {
          blocks[0].classList.add(curBg);
        }
      } else {
        blocks.forEach(function (blk) {
          const isBg = blk.dataset.bgColor === newValue;
          if (isBg) {
            blk.classList.add(curBg);
          } else {
            blk.classList.remove(curBg);
          }
        });
      }
      break;
    case 'bgurl':
      this.$bgURL.value = newValue;
      break;
    case 'gridsnappingon':
      if (newValue === 'true') {
        this.$gridSnappingOn.checked = true;
      } else if (newValue === 'false') {
        this.$gridSnappingOn.checked = false;
      }
      break;
    case 'gridsnappingstep':
      this.$gridSnappingStep.value = newValue;
      break;
    case 'gridcolor':
      this.$gridColor.value = newValue;
      break;
    case 'showrulers':
      if (newValue === 'true') {
        this.$showRulers.checked = true;
      } else if (newValue === 'false') {
        this.$showRulers.checked = false;
      }
      break;
    case 'baseunit':
      this.$baseUnit.value = newValue;
      break;
    case 'common-ok':
      this.$saveBtn.textContent = newValue;
      break;
    case 'common-cancel':
      this.$cancelBtn.textContent = newValue;
      break;
    case 'config-editor_prefs':
      node = this._shadowRoot.querySelector('#svginfo_editor_prefs');
      node.textContent = newValue;
      break;
    case 'config-language':
      node = this._shadowRoot.querySelector('#svginfo_lang');
      node.textContent = newValue;
      break;
    case 'config-background':
      node = this._shadowRoot.querySelector('#svginfo_change_background');
      node.textContent = newValue;
      break;
    case 'common-url':
      node = this._shadowRoot.querySelector('#svginfo_bg_url');
      node.textContent = newValue;
      break;
    case 'config-editor_bg_note':
      node = this._shadowRoot.querySelector('#svginfo_bg_note');
      node.textContent = newValue;
      break;
    case 'config-grid':
      node = this._shadowRoot.querySelector('#svginfo_grid_settings');
      node.textContent = newValue;
      break;
    case 'config-snapping_onoff':
      node = this._shadowRoot.querySelector('#svginfo_snap_onoff');
      node.textContent = newValue;
      break;
    case 'config-snapping_stepsize':
      node = this._shadowRoot.querySelector('#svginfo_snap_step');
      node.textContent = newValue;
      break;
    case 'config-grid_color':
      node = this._shadowRoot.querySelector('#svginfo_grid_color');
      node.textContent = newValue;
      break;
    case 'config-units_and_rulers':
      node = this._shadowRoot.querySelector('#svginfo_units_rulers');
      node.textContent = newValue;
      break;
    case 'config-show_rulers':
      node = this._shadowRoot.querySelector('#svginfo_rulers_onoff');
      node.textContent = newValue;
      break;
    case 'config-base_unit':
      node = this._shadowRoot.querySelector('#svginfo_unit');
      node.textContent = newValue;
      break;
    default:
      super.attributeChangedCallback(name, oldValue, newValue);
      break;
    }
  }
  /**
   * @function get
   * @returns {any}
   */
  get lang () {
    return this.getAttribute('lang');
  }

  /**
   * @function set
   * @returns {void}
   */
  set lang (value) {
    this.setAttribute('lang', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get canvasbg () {
    return this.getAttribute('canvasbg');
  }
  /**
   * @function set
   * @returns {void}
   */
  set canvasbg (value) {
    this.setAttribute('canvasbg', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get bgurl () {
    return this.getAttribute('bgurl');
  }
  /**
   * @function set
   * @returns {void}
   */
  set bgurl (value) {
    this.setAttribute('bgurl', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get dialog () {
    return this.getAttribute('dialog');
  }
  /**
   * @function set
   * @returns {void}
   */
  set dialog (value) {
    this.setAttribute('dialog', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get gridsnappingon () {
    return this.getAttribute('gridsnappingon');
  }
  /**
   * @function set
   * @returns {void}
   */
  set gridsnappingon (value) {
    this.setAttribute('gridsnappingon', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get gridsnappingstep () {
    return this.getAttribute('gridsnappingstep');
  }
  /**
   * @function set
   * @returns {void}
   */
  set gridsnappingstep (value) {
    this.setAttribute('gridsnappingstep', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get gridcolor () {
    return this.getAttribute('gridcolor');
  }
  /**
   * @function set
   * @returns {void}
   */
  set gridcolor (value) {
    this.setAttribute('gridcolor', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get showrulers () {
    return this.getAttribute('showrulers');
  }
  /**
   * @function set
   * @returns {void}
   */
  set showrulers (value) {
    this.setAttribute('showrulers', value);
  }
  /**
   * @function get
   * @returns {any}
   */
  get baseunit () {
    return this.getAttribute('baseunit');
  }
  /**
   * @function set
   * @returns {void}
   */
  set baseunit (value) {
    this.setAttribute('baseunit', value);
  }
  /**
   * @function connectedCallback
   * @returns {void}
   */
  connectedCallback () {
    const onCancelHandler = () => {
      const closeEvent = new CustomEvent('change', { detail: {
        dialog: 'closed'
      } });
      this.dispatchEvent(closeEvent);
    };
    const onSaveHandler = () => {
      const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF';
      const closeEvent = new CustomEvent('change', { detail: {
        lang: this.$langSelect.value,
        dialog: 'close',
        bgcolor: color,
        bgurl: this.$bgURL.value,
        gridsnappingon: this.$gridSnappingOn.checked,
        gridsnappingstep: this.$gridSnappingStep.value,
        showrulers: this.$showRulers.checked,
        baseunit: this.$baseUnit.value
      } });
      this.dispatchEvent(closeEvent);
    };
    // Set up editor background functionality
    const currentObj = this;
    this.colorBlocks.forEach(function (e) {
      const newdiv = document.createElement('div');
      if (e === 'chessboard') {
        newdiv.dataset.bgColor = e;
        // eslint-disable-next-line max-len
        newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)';
        newdiv.classList.add('color_block');
      } else {
        newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e);
        newdiv.style.backgroundColor = e;
        newdiv.classList.add('color_block');
      }
      currentObj.$bgBlocks.append(newdiv);
    });
    const blocks = this.$bgBlocks.querySelectorAll('div');
    const curBg = 'cur_background';
    blocks.forEach(function (blk) {
      blk.addEventListener('click', function () {
        blocks.forEach((el) => el.classList.remove(curBg));
        blk.classList.add(curBg);
      });
    });
    this.$saveBtn.addEventListener('click', onSaveHandler);
    this.$cancelBtn.addEventListener('click', onCancelHandler);
    this.$dialog.addEventListener('close', onCancelHandler);
  }
}

// Register
customElements.define('se-edit-prefs-dialog', SeEditPrefsDialog);