Open editor as part of setEditorData()

Also add a smooth transition between open and closed states.

src/gui/html/elements/loot-plugin-editor.html

@@ -32,6 +32,14 @@ loot-editor-close
         height: 264px;
         min-height: 56px;
         max-height: calc(100% - 56px);
+        transition: height 0.6s, min-height 0.6s;
+      }
+      :host(.hidden) {
+        height: 0;
+        min-height: 0;
+      }
+      :host(.resizing) {
+        transition: unset;
       }
 
       /* Material Design for non-button icons. */
@@ -240,7 +248,10 @@ loot-editor-close
 
       _onSplitterDrag(evt) {
         if (evt.detail.state === 'start') {
+          this.parentNode.host.classList.toggle('resizing', true);
           this.parentNode.host.style.height = parseInt(window.getComputedStyle(this.parentNode.host).height, 10) + 'px';
+        } else if (evt.detail.state === 'end') {
+          this.parentNode.host.classList.toggle('resizing', false);
         }
         this.parentNode.host.style.height = (parseInt(this.parentNode.host.style.height, 10) - evt.detail.ddy) + 'px';
       },
@@ -327,8 +338,9 @@ loot-editor-close
         }
 
         if (isValid || evt.target.id !== 'accept') {
-          /* Reset height to default */
-          this.parentElement.parentNode.host.style.height = '264px';
+          /* Now hide editor. */
+          evt.target.parentElement.parentNode.host.style.height = '';
+          evt.target.parentElement.parentNode.host.classList.toggle('hidden', true);
 
           /* Fire the close event, saying whether or not to save data. */
           evt.target.dispatchEvent(new CustomEvent('loot-editor-close', {
@@ -424,6 +436,9 @@ loot-editor-close
             }
           }
         }
+
+        /* Now show editor. */
+        this.classList.toggle('hidden', false);
       },
     });
   </script>

src/gui/html/index.html

@@ -335,7 +335,7 @@
           <!-- Generated <loot-plugin-card> elements go here. -->
         </iron-list>
       </div>
-      <loot-plugin-editor id="editor" hidden>
+      <loot-plugin-editor id="editor" class="hidden">
         <h1></h1>
       </loot-plugin-editor>
     </div>

src/gui/html/js/events.js

@@ -414,16 +414,12 @@ function onShowSettingsDialog() {
 
 function onEditorOpen(evt) {
   /* Set the editor data. */
-  const editor = document.getElementById('editor');
-  editor.setEditorData(evt.target.data);
+  document.getElementById('editor').setEditorData(evt.target.data);
 
   /* Set body attribute so that sidebar items are styled correctly. */
   document.body.setAttribute('data-editors', true);
   document.getElementById('cardsNav').notifyResize();
 
-  /* Unhide editor. */
-  editor.hidden = false;
-
   /* Set up drag 'n' drop event handlers. */
   const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
   for (let i = 0; i < elements.length; ++i) {
@@ -478,9 +474,6 @@ function onEditorClose(evt) {
     document.body.removeAttribute('data-editors');
     document.getElementById('cardsNav').notifyResize();
 
-    /* Hide editor. */
-    evt.target.hidden = true;
-
     /* Remove drag 'n' drop event handlers. */
     const elements = document.getElementById('cardsNav').getElementsByTagName('loot-plugin-item');
     for (let i = 0; i < elements.length; ++i) {