From e77b73dc5767fc49d5c068b34dc7977ad5ff0679 Mon Sep 17 00:00:00 2001
From: milafrerichs <mila.frerichs@gmail.com>
Date: Sat, 7 Sep 2019 11:39:29 +0200
Subject: [PATCH] feat: add responsiveness to iframe

set width and height for iframe from the parent elements
for the minimal layouts use slot props to pass the width and height from the layout files to the
slots and then to the viewer
add a resize handler that reavaluates the code to update the content of
the iframe
---
 example/public/index.html         |  1 -
 package.json                      |  2 +-
 src/Console.svelte                |  5 ++++-
 src/Repl.svelte                   |  6 ++++--
 src/Result.svelte                 |  8 ++++++++
 src/Viewer.svelte                 |  4 +++-
 src/ViewerConsole.svelte          | 14 +++++++++-----
 src/layouts/Minimal.svelte        |  6 ++++--
 src/layouts/MinimalReverse.svelte |  6 ++++--
 src/srcdoc/index.html             |  7 ++++++-
 10 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/example/public/index.html b/example/public/index.html
index c6f0621..3b0baf2 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -7,7 +7,6 @@
 	<title>Svelte app</title>
 
 	<link rel='icon' type='image/png' href='favicon.png'>
-	<link rel='stylesheet' href='global.css'>
 	<link rel='stylesheet' href='bundle.css'>
 	<link rel='stylesheet' href='codemirror.css'>
 </head>
diff --git a/package.json b/package.json
index 96c9b77..4dbdd90 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "javascript-repl",
   "svelte": "src/Repl.svelte",
   "module": "index.mjs",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "",
   "main": "index.js",
   "author": "Mila Frerichs <mila.frerichs@gmail.com>",
diff --git a/src/Console.svelte b/src/Console.svelte
index 5eab369..029e48c 100644
--- a/src/Console.svelte
+++ b/src/Console.svelte
@@ -4,6 +4,9 @@
 
   import { code } from './stores.js'
 
+  export let width;
+  export let height;
+
   let message = '';
 	$: if($code) {
 		message = `
@@ -23,4 +26,4 @@
 		`
 	}
 </script>
-<Result html={''} code={message} />
+<Result {width} {height} html={''} code={message} />
diff --git a/src/Repl.svelte b/src/Repl.svelte
index f2d4563..bd2e8e1 100644
--- a/src/Repl.svelte
+++ b/src/Repl.svelte
@@ -20,6 +20,8 @@
   let editor;
   let manualUpdates = false;
   let currentContent = '';
+  let iframeComtainerWidth;
+  let iframeComtainerHeight;
 
   const layouts = new Map([
     [ 'default', Default ],
@@ -139,12 +141,12 @@
   }
 </style>
 
-<svelte:component this={selectedLayout} {cssStyles} >
+<svelte:component this={selectedLayout} {cssStyles} let:width={width} let:height={height} >
   <div slot="editor">
     <Editor bind:this={editor} on:change={debounceChangeCode}/>
   </div>
   <div slot="viewer">
-    <Viewer {cssStyles} />
+    <Viewer {width} {height} />
   </div>
   <div slot="viewer-console">
     <ViewerConsole {cssStyles} />
diff --git a/src/Result.svelte b/src/Result.svelte
index 004a07a..1b83f68 100644
--- a/src/Result.svelte
+++ b/src/Result.svelte
@@ -10,6 +10,8 @@
 
 	let iframe;
 	export let injectedCSS = '';
+  export let width;
+  export let height;
   export let code;
   export let html;
 
@@ -44,10 +46,16 @@
       }`
     })
   }
+  function handleResize() {
+		iframe.contentWindow.postMessage({ script: message }, '*');
+  }
 </script>
+<svelte:window on:resize={handleResize}/>
 <iframe
 	title="Result"
 	sandbox="allow-scripts allow-same-origin"
 	bind:this={iframe}
 	{srcdoc}
+  {width}
+  {height}
 	></iframe>
diff --git a/src/Viewer.svelte b/src/Viewer.svelte
index 1645871..ddb2c62 100644
--- a/src/Viewer.svelte
+++ b/src/Viewer.svelte
@@ -2,7 +2,9 @@
   import Result from './Result.svelte';
 
   import { code, html } from './stores.js'
+  export let width;
+  export let height;
 
 </script>
 
-<Result code={$code} html={$html} />
+<Result {width} {height} code={$code} html={$html} />
diff --git a/src/ViewerConsole.svelte b/src/ViewerConsole.svelte
index 8b8a62c..33fd537 100644
--- a/src/ViewerConsole.svelte
+++ b/src/ViewerConsole.svelte
@@ -5,6 +5,10 @@
   import { code } from './stores.js'
 
   export let cssStyles;
+  export let width = 0;
+  export let height = 0;
+  let iframeComtainerWidth;
+  let iframeComtainerHeight;
 
   let tab = 'viewer';
 
@@ -25,12 +29,12 @@
       <a class:active="{tab == 'console'}" class="{cssStyles.viewerActions.link}" on:click="{() => showConsole()}">Console</a>
     </div>
   </div>
-  <div class="{cssStyles.viewerConsoleContainer}">
-    <div class:hidden="{tab != 'viewer'}" class="{cssStyles.viewer}">
-      <Viewer />
+  <div class="{cssStyles.viewerConsoleContainer}" bind:clientWidth={iframeComtainerWidth} bind:clientHeight={iframeComtainerHeight} >
+    <div class:hidden="{tab != 'viewer'}" class="{cssStyles.viewer}" >
+      <Viewer width={iframeComtainerWidth} height={iframeComtainerHeight} />
     </div>
-    <div class:hidden="{tab != 'console'}" class="{cssStyles.console}">
-      <Console />
+    <div class:hidden="{tab != 'console'}" class="{cssStyles.console}" >
+      <Console width={iframeComtainerWidth} height={iframeComtainerHeight} />
     </div>
   </div>
 </div>
diff --git a/src/layouts/Minimal.svelte b/src/layouts/Minimal.svelte
index 54958f5..960eede 100644
--- a/src/layouts/Minimal.svelte
+++ b/src/layouts/Minimal.svelte
@@ -1,5 +1,7 @@
 <script>
   export let cssStyles;
+  let width;
+  let height;
 </script>
 
 <div class="{cssStyles.container}" >
@@ -8,8 +10,8 @@
     </slot>
   </div>
   <div class="{cssStyles.viewerContainer}">
-    <div class="{cssStyles.viewerConsoleContainer}">
-      <slot name="viewer"></slot>
+    <div class="{cssStyles.viewerConsoleContainer}" bind:clientWidth={width} bind:clientHeight={height} >
+      <slot {width} {height} name="viewer"></slot>
     </div>
   </div>
 </div>
diff --git a/src/layouts/MinimalReverse.svelte b/src/layouts/MinimalReverse.svelte
index f90cb9a..7704d30 100644
--- a/src/layouts/MinimalReverse.svelte
+++ b/src/layouts/MinimalReverse.svelte
@@ -1,11 +1,13 @@
 <script>
   export let cssStyles;
+  let width;
+  let height;
 </script>
 
 <div class="{cssStyles.container}" >
   <div class="{cssStyles.viewerContainer}">
-    <div class="{cssStyles.viewerConsoleContainer}">
-      <slot name="viewer"></slot>
+    <div class="{cssStyles.viewerConsoleContainer}" bind:clientWidth={width} bind:clientHeight={height} >
+      <slot {width} {height} name="viewer"></slot>
     </div>
   </div>
   <div class="result-container {cssStyles.resultContainer}">
diff --git a/src/srcdoc/index.html b/src/srcdoc/index.html
index 4cf80e0..1b96327 100644
--- a/src/srcdoc/index.html
+++ b/src/srcdoc/index.html
@@ -2,8 +2,13 @@
 <html>
   <head>
     <style>
+			html, body {
+				width: 100%;
+				height: 100%;
+				margin: 0 !important;
+				padding: 0 !important;
+			}
     </style>
-		<!-- Inject Style instead of adding it here --!>
 		<script src="https://d3js.org/d3.v5.min.js"></script>
     <script>
       (function(){