Remove innerHTML (elastic#392)

* Replace child instead of using innerHTML. Closes elastic#332 * Fix displayName
w33ble · Mar 28, 2018 · 3a91131 · 3a91131
1 parent c029bf8
commit 3a91131
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/public/expression_types/views/revealImage.js b/public/expression_types/views/revealImage.js
@@ -4,7 +4,7 @@ import { isValid } from '../../../common/lib/dataurl';
 
 export const revealImage = () => ({
   name: 'revealImage',
-  displayName: 'Repeating Image',
+  displayName: 'Reveal Image',
   help: '',
   modelArgs: [['size', { label: 'Percentage (Between 0 & 1)' }]],
   args: [

diff --git a/public/render_functions/reveal_image/index.js b/public/render_functions/reveal_image/index.js
@@ -6,7 +6,6 @@ export const revealImage = () => ({
   help: 'Reveal a percentage of an image to make a custom gauge-style chart',
   reuseDomNode: true,
   render(domNode, config, handlers) {
-    const container = document.createElement('div');
     const aligner = document.createElement('div');
     const img = new Image();
     img.onload = function() {
@@ -15,17 +14,17 @@ export const revealImage = () => ({
     };
     handlers.onResize(img.onload);
 
-    container.className = 'revealImage';
     aligner.className = 'revealImageAligner';
     aligner.style.backgroundImage = `url(${config.emptyImage})`;
-    img.style.clipPath = getClipPath(config.percent, config.origin);
-    container.appendChild(aligner);
     aligner.appendChild(img);
+    img.style.clipPath = getClipPath(config.percent, config.origin);
     img.src = config.image;
+    domNode.className = 'revealImage';
 
     function finish() {
-      // eslint-disable-next-line no-unsanitized/property
-      domNode.innerHTML = container.outerHTML;
+      const firstChild = domNode.firstChild;
+      if (firstChild) domNode.replaceChild(aligner, firstChild);
+      else domNode.appendChild(aligner);
       handlers.done();
     }