From 3a911317efca8798a3700a6b0a277bb3188a19d7 Mon Sep 17 00:00:00 2001
From: Rashid Khan <github.fliplap@spamgourmet.com>
Date: Wed, 28 Mar 2018 10:55:59 -0700
Subject: [PATCH] Remove innerHTML (#392)

* Replace child instead of using innerHTML. Closes #332

* Fix displayName
---
 public/expression_types/views/revealImage.js  |  2 +-
 public/render_functions/reveal_image/index.js | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/public/expression_types/views/revealImage.js b/public/expression_types/views/revealImage.js
index 1d30d7a990a04..78e4536cb90aa 100644
--- 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
index be72df0ed6906..58f3aa78a808c 100644
--- 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();
     }