fix(gv-expression-language): resolve hint overlay

fix gravitee-io/issues#4943

fix #364

src/index.js

@@ -30,6 +30,7 @@ export { GvCardList } from './molecules/gv-card-list';
 export { GvCard } from './molecules/gv-card';
 export { GvCategoryList } from './molecules/gv-category-list';
 export { GvCategory } from './molecules/gv-category';
+export { GvCodeHint } from './molecules/gv-code-hint';
 export { GvCode } from './molecules/gv-code';
 export { GvConfirm } from './molecules/gv-confirm';
 export { GvCronEditor } from './molecules/gv-cron-editor';

src/molecules/gv-code-hint.js

@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { css, LitElement } from 'lit-element';
+import { html } from 'lit-html';
+
+/**
+ * Code hint component
+ */
+export class GvCodeHint extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (this.firstElementChild != null) {
+      const elementNodeListOf = this.firstElementChild.querySelectorAll('.CodeMirror-hint');
+      elementNodeListOf.forEach((e) => {
+        e.style = 'padding: 4px;border-radius: 2px;white-space: pre;cursor: pointer;';
+        if (e.classList.contains('CodeMirror-hint-active')) {
+          e.style.backgroundColor = 'var(--gv-theme-color, #5a7684)';
+          e.style.color = 'white';
+        }
+      });
+    }
+  }
+
+  static get styles() {
+    return [
+      // language=CSS
+      css`
+        ::slotted(.CodeMirror-hints) {
+          position: absolute;
+          z-index: 80;
+          overflow: hidden;
+          list-style: none;
+          margin: 0;
+          padding: 2px;
+          -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
+          border-radius: 3px;
+          border: 1px solid silver;
+          background: white;
+          font-family: monospace;
+          max-height: 20em;
+          overflow-y: auto;
+        }
+      `,
+    ];
+  }
+}
+
+window.customElements.define('gv-code-hint', GvCodeHint);

src/molecules/gv-expression-language.js

@@ -16,6 +16,7 @@
 import { css, LitElement } from 'lit-element';
 import { html } from 'lit-html';
 import '../molecules/gv-code';
+import '../molecules/gv-code-hint';
 import CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/addon/hint/show-hint';
 import { get } from 'object-path';
@@ -54,6 +55,7 @@ export class GvExpressionLanguage extends LitElement {
 
   constructor() {
     super();
+    this.hintId = 'gv-expression-language_hint';
     this.addEventListener('gv-code:ready', this._onReady);
     this.addEventListener('gv-code:input', this._onInput);
   }
@@ -64,6 +66,14 @@ export class GvExpressionLanguage extends LitElement {
     // CodeMirror.registerHelper('lint', 'javascript', this._lintValidator);
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const hintElement = document.querySelector(`#${this.hintId}`);
+    if (hintElement != null) {
+      hintElement.parent.removeChild(hintElement);
+    }
+  }
+
   _onReady(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -76,6 +86,7 @@ export class GvExpressionLanguage extends LitElement {
     });
     codemirror.on('keydown', (cm, event) => {
       this._lastKeyDown = event.key;
+      this._getOrCreateHint().requestUpdate();
     });
     dispatchCustomEvent(this, 'ready', { currentTarget: this });
   }
@@ -380,12 +391,24 @@ export class GvExpressionLanguage extends LitElement {
     this.dispatchEvent(new Event('input'), { bubbles: true, cancelable: true });
   }
 
+  _getOrCreateHint() {
+    let element = document.querySelector(`#${this.hintId}`);
+    if (element == null) {
+      element = document.createElement('gv-code-hint');
+      element.id = this.hintId;
+      document.body.appendChild(element);
+    } else {
+      element.requestUpdate();
+    }
+    return element;
+  }
+
   _doSuggest(suggestions = [], prefix = '#') {
     if (suggestions == null) {
       suggestions = [];
     }
     const code = this.codeElement;
-    const hint = this.shadowRoot.querySelector('#hint');
+    const hint = this._getOrCreateHint();
     const codemirror = code.getCM();
     CodeMirror.showHint(
       codemirror,
@@ -444,7 +467,6 @@ export class GvExpressionLanguage extends LitElement {
         .placeholder="${this.placeholder}"
         .description="${this.description}"
       ></gv-code>
-      <div id="hint"></div>
     </div>`;
   }
 
@@ -461,41 +483,6 @@ export class GvExpressionLanguage extends LitElement {
           margin: 0;
           font-size: 14px;
         }
-
-        .CodeMirror-hints {
-          position: absolute;
-          z-index: 80;
-          overflow: hidden;
-          list-style: none;
-
-          margin: 0;
-          padding: 2px;
-
-          -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
-          -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
-          box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
-          border-radius: 3px;
-          border: 1px solid silver;
-
-          background: white;
-          font-family: monospace;
-
-          max-height: 20em;
-          overflow-y: auto;
-        }
-
-        .CodeMirror-hint {
-          padding: 4px;
-          border-radius: 2px;
-          white-space: pre;
-          color: black;
-          cursor: pointer;
-        }
-
-        li.CodeMirror-hint-active {
-          background: var(--gv-theme-color, #5a7684);
-          color: white;
-        }
       `,
     ];
   }

wc/gv-code-hint.js

@@ -0,0 +1 @@
+import '../src/molecules/gv-code-hint';