Merge pull request #23 from OptimistikSAS/svgSourceEditorDialog

#svgSourceEditorDiaog  editor dialog changed

src/editor/dialogs/editorPreferencesDialog.js

@@ -505,7 +505,7 @@ export class SeEditPrefsDialog extends HTMLElement {
       this.dispatchEvent(closeEvent);
     };
     // Set up editor background functionality
-    const self = this;
+    const currentObj = this;
     this.colorBlocks.forEach(function (e, i) {
       const newdiv = document.createElement('div');
       if (e === 'chessboard') {
@@ -518,7 +518,7 @@ export class SeEditPrefsDialog extends HTMLElement {
         newdiv.style.backgroundColor = e;
         newdiv.classList.add('color_block');
       }
-      self.$bgBlocks.append(newdiv);
+      currentObj.$bgBlocks.append(newdiv);
     });
     const blocks = this.$bgBlocks.querySelectorAll('div');
     const curBg = 'cur_background';

src/editor/dialogs/index.js

@@ -1,2 +1,3 @@
 import './imagePropertiesDialog.js';
 import './editorPreferencesDialog.js';
+import './svgSourceDialog.js';

src/editor/dialogs/svgSourceDialog.js

@@ -0,0 +1,238 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Dialog.js';
+
+const template = document.createElement('template');
+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;
+  }
+ 
+  #svg_source_editor #svg_source_container {
+    background-color: #B0B0B0;
+    opacity: 1.0;
+    text-align: center;
+    border: 1px outset #777;
+    z-index: 6;
+  }
+  
+  #save_output_btns {
+    display: none;
+    text-align: left;
+  }  
+  #save_output_btns p {
+    margin: .5em 1.5em;
+    display: inline-block;
+  }
+  #svg_source_editor form {
+    width: 100%;
+  }  
+  #svg_source_editor #svg_source_textarea {
+    padding: 5px;
+    font-size: 12px;
+    min-height: 200px;
+    width: 95%;
+    height: 95%;
+  }
+  
+  #svg_source_editor #tool_source_back {
+    text-align: left;
+    margin: 5px 10px;
+  }  
+  </style>
+  <elix-dialog id="svg_source_editor" aria-label="SVG Source Editor" closed>
+    <div id="svg_source_container">
+      <div id="tool_source_back" class="toolbar_button">
+        <button id="tool_source_save">
+          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
+          Apply Changes
+        </button>
+        <button id="tool_source_cancel">
+          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
+          Cancel
+        </button>
+      </div>
+      <div id="save_output_btns">
+        <p id="copy_save_note">
+          Copy the contents of this box into a text editor,
+          then save the file with a .svg extension.</p>
+        <button id="copy_save_done">Done</button>
+      </div>
+      <form>
+        <textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>
+      </form>
+    </div>    
+  </elix-dialog>  
+`;
+/**
+ * @class SeSvgSourceEditorDialog
+ */
+export class SeSvgSourceEditorDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$dialog = this._shadowRoot.querySelector('#svg_source_editor');
+    this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done');
+    this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save');
+    this.$cancelBtn = this._shadowRoot.querySelector('#tool_source_cancel');
+    this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea');
+    this.$copySec = this._shadowRoot.querySelector('#save_output_btns');
+    this.$applySec = this._shadowRoot.querySelector('#tool_source_back');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['dialog', 'value', 'applysec', 'copysec'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'dialog':
+      if (newValue === 'open') {
+        this.$sourceTxt.focus();
+        this.$dialog.open();
+      } else {
+        this.$dialog.close();
+        this.$sourceTxt.blur();
+      }
+      break;
+    case 'applysec':
+      if (newValue === 'false') {
+        this.$applySec.style.display = 'none';
+      } else {
+        this.$applySec.style.display = 'block';
+      }
+      break;
+    case 'copysec':
+      if (newValue === 'false') {
+        this.$copySec.style.display = 'none';
+      } else {
+        this.$copySec.style.display = 'block';
+      }
+      break;
+    case 'value':
+      this.$sourceTxt.value = 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 get
+   * @returns {any}
+   */
+  get value () {
+    return this.getAttribute('value');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set value (value) {
+    this.setAttribute('value', value);
+  }
+
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get applysec () {
+    return this.getAttribute('applysec');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set applysec (value) {
+    this.setAttribute('applysec', value);
+  }
+
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get copysec () {
+    return this.getAttribute('copysec');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set copysec (value) {
+    this.setAttribute('copysec', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    const onCancelHandler = (ev) => {
+      const closeEvent = new CustomEvent('change', {detail: {
+        dialog: 'closed'
+      }});
+      this.dispatchEvent(closeEvent);
+    };
+    const onCopyHandler = (ev) => {
+      const closeEvent = new CustomEvent('change', {
+        detail: {
+          copy: 'click',
+          value: this.$sourceTxt.value
+        }
+      });
+      this.dispatchEvent(closeEvent);
+    };
+    const onSaveHandler = (ev) => {
+      const closeEvent = new CustomEvent('change', {detail: {
+        value: this.$sourceTxt.value,
+        dialog: 'close'
+      }});
+      this.dispatchEvent(closeEvent);
+    };
+    this.$copyBtn.addEventListener('click', onCopyHandler);
+    this.$saveBtn.addEventListener('click', onSaveHandler);
+    this.$cancelBtn.addEventListener('click', onCancelHandler);
+    this.$dialog.addEventListener('close', onCancelHandler);
+  }
+}
+
+// Register
+customElements.define('se-svg-source-editor-dialog', SeSvgSourceEditorDialog);

src/editor/index.html

@@ -412,24 +412,6 @@
       </div>
       <!-- hidden divs -->
       <div id="color_picker"></div>
-    </div> <!-- svg_editor -->
-    <div id="svg_source_editor">
-      <div class="overlay"></div>
-      <div id="svg_source_container">
-        <div id="tool_source_back" class="toolbar_button">
-          <button id="tool_source_save">Apply Changes</button>
-          <button id="tool_source_cancel">Cancel</button>
-        </div>
-        <div id="save_output_btns">
-          <p id="copy_save_note">
-            Copy the contents of this box into a text editor,
-            then save the file with a .svg extension.</p>
-          <button id="copy_save_done">Done</button>
-        </div>
-        <form>
-          <textarea id="svg_source_textarea" spellcheck="false"></textarea>
-        </form>
-      </div>
     </div>
     <div id="dialog_box">
       <div class="overlay"></div>

src/editor/svgedit.css

@@ -963,27 +963,6 @@ ul li.current {
   width: 96%;
 }
 
-
-#svg_source_editor form {
-  position: absolute;
-  top: 40px;
-  bottom: 30px;
-  width: 100%;
-}
-
-#svg_source_editor #svg_source_textarea {
-  position: relative;
-  width: 95%;
-  height: 95%;
-  padding: 5px;
-  font-size: 12px;
-}
-
-#svg_source_editor #tool_source_back {
-  text-align: left;
-  padding-left: 20px;
-}
-
 #svg_prefs_container div.color_block {
   float: left;
   margin: 2px;

src/editor/svgedit.js

@@ -234,6 +234,10 @@ editor.init = () => {
     const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
     newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
     document.body.append(newSeEditPrefsDialog);
+    // svg editor source dialoag added to DOM
+    const newSeEditorDialog = document.createElement('se-svg-source-editor-dialog');
+    newSeEditorDialog.setAttribute('id', 'se-svg-editor-dialog');
+    document.body.append(newSeEditorDialog);
   } catch (err) {}
 
   configObj.load();
@@ -634,14 +638,13 @@ editor.init = () => {
   */
   const showSourceEditor = function (e, forSaving) {
     if (editingsource) { return; }
-
     editingsource = true;
     origSource = svgCanvas.getSvgString();
-    $('#save_output_btns').toggle(Boolean(forSaving));
-    $('#tool_source_back').toggle(!forSaving);
-    $('#svg_source_textarea').val(origSource);
-    $('#svg_source_editor').fadeIn();
-    $('#svg_source_textarea').focus();
+    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    $editorDialog.setAttribute('dialog', 'open');
+    $editorDialog.setAttribute('value', origSource);
+    $editorDialog.setAttribute('copysec', Boolean(forSaving));
+    $editorDialog.setAttribute('applysec', !forSaving);
   };
 
   let selectedElement = null;
@@ -2822,18 +2825,17 @@ editor.init = () => {
   * @returns {void}
   */
   const hideSourceEditor = () => {
-    $('#svg_source_editor').hide();
+    const $editorDialog = document.getElementById('se-svg-editor-dialog');
+    $editorDialog.setAttribute('dialog', 'closed');
     editingsource = false;
-    $('#svg_source_textarea').blur();
   };
 
   /**
-  *
+  * @param {Event} e
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  const saveSourceEditor = async () => {
+  const saveSourceEditor = async (e) => {
     if (!editingsource) { return; }
-
     const saveChanges = () => {
       svgCanvas.clearSelection();
       hideSourceEditor();
@@ -2843,7 +2845,7 @@ editor.init = () => {
       prepPaints();
     };
 
-    if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
+    if (!svgCanvas.setSvgString(e.detail.value)) {
       const ok = await $.confirm(uiStrings.notification.QerrorsRevertToSource);
       if (!ok) {
         return;
@@ -2938,10 +2940,10 @@ editor.init = () => {
   };
 
   /**
-  *
+  * @param {Event} e
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  const cancelOverlays = async () => {
+  const cancelOverlays = async (e) => {
     $('#dialog_box').hide();
     if (!editingsource && !docprops && !preferences) {
       if (curContext) {
@@ -2951,7 +2953,7 @@ editor.init = () => {
     }
 
     if (editingsource) {
-      if (origSource !== $('#svg_source_textarea').val()) {
+      if (origSource !== e.detail.value) {
         const ok = await $.confirm(uiStrings.notification.QignoreSourceChanges);
         if (ok) {
           hideSourceEditor();
@@ -3446,11 +3448,9 @@ editor.init = () => {
     $id('font_size').addEventListener('change', (e) => changeFontSize(e));
 
     // register actions in top toolbar
-    $id('tool_source_save').addEventListener('click', saveSourceEditor);
     $id('tool_ungroup').addEventListener('click', clickGroup);
     $id('tool_unlink_use').addEventListener('click', clickGroup);
     $id('sidepanel_handle').addEventListener('click', toggleSidePanel);
-    $id('copy_save_done').addEventListener('click', cancelOverlays);
 
     $id('tool_bold').addEventListener('click', clickBold);
     $id('tool_italic').addEventListener('click', clickItalic);
@@ -3490,6 +3490,15 @@ editor.init = () => {
         savePreferences(e);
       }
     });
+    $id('se-svg-editor-dialog').addEventListener('change', function (e) {
+      if (e?.detail?.copy === 'click') {
+        cancelOverlays(e);
+      } else if (e?.detail?.dialog === 'closed') {
+        hideSourceEditor();
+      } else {
+        saveSourceEditor(e);
+      }
+    });
     layersPanel.addEvents();
     const toolButtons = [
       // Shortcuts not associated with buttons