From 6a8ffa44a82c8f3ebb68ccdab3a99749574a4cad Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 16 Aug 2022 13:11:23 +0100
Subject: [PATCH] datawrapper chart, more specific query of iframe

---
 .../DatawrapperChart/DatawrapperChart.svelte  | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
index 3585b233..671a9d34 100644
--- a/src/components/DatawrapperChart/DatawrapperChart.svelte
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
   import type { ContainerWidth } from '../@types/global';
   /**
@@ -50,24 +50,33 @@
    * of the text well. Can't ever be wider than `width`.
    * @type {string}
    */
-   export let textWidth: ContainerWidth | null = null;
+  export let textWidth: ContainerWidth | null = null;
+
+  let frameElement;
+
+  $: frameFiller = (e) => {
+    if (void 0 !== e.data['datawrapper-height']) {
+      const t = [frameElement];
+      for (const a in e.data['datawrapper-height']) {
+        for (let r = 0; r < t.length; r++) {
+          if (t[r].contentWindow === e.source) {
+            t[r].style.height = e.data['datawrapper-height'][a] + 'px';
+          }
+        }
+      }
+    }
+  }
 
   onMount(() => {
     if (typeof window !== 'undefined') {
-      window.addEventListener('message', function (e) {
-        if (void 0 !== e.data['datawrapper-height']) {
-          const t = document.querySelectorAll('iframe');
-          for (const a in e.data['datawrapper-height']) {
-            for (let r = 0; r < t.length; r++) {
-              if (t[r].contentWindow === e.source) {
-                t[r].style.height = e.data['datawrapper-height'][a] + 'px';
-              }
-            }
-          }
-        }
-      });
+      window.addEventListener('message', frameFiller);
     }
   });
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', frameFiller);
+    }
+  })
 </script>
 
 <GraphicBlock {width} {textWidth} {title} {description} {notes}>
@@ -78,6 +87,7 @@
 
   <div class="datawrapper-chart">
     <iframe
+      bind:this={frameElement}
       title="{frameTitle}"
       aria-label="{ariaLabel}"
       id="{id}"