Skip to content

Commit

Permalink
Merge pull request #55 from milafrerichs/feat/responsiveness
Browse files Browse the repository at this point in the history
feat: add responsiveness to iframe
  • Loading branch information
milafrerichs authored Sep 7, 2019
2 parents da2c2d6 + e77b73d commit 48fe5f7
Show file tree
Hide file tree
Showing 10 changed files with 43 additions and 16 deletions.
1 change: 0 additions & 1 deletion example/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 <[email protected]>",
Expand Down
5 changes: 4 additions & 1 deletion src/Console.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
import { code } from './stores.js'
export let width;
export let height;
let message = '';
$: if($code) {
message = `
Expand All @@ -23,4 +26,4 @@
`
}
</script>
<Result html={''} code={message} />
<Result {width} {height} html={''} code={message} />
6 changes: 4 additions & 2 deletions src/Repl.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
let editor;
let manualUpdates = false;
let currentContent = '';
let iframeComtainerWidth;
let iframeComtainerHeight;
const layouts = new Map([
[ 'default', Default ],
Expand Down Expand Up @@ -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} />
Expand Down
8 changes: 8 additions & 0 deletions src/Result.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
let iframe;
export let injectedCSS = '';
export let width;
export let height;
export let code;
export let html;
Expand Down Expand Up @@ -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>
4 changes: 3 additions & 1 deletion src/Viewer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
14 changes: 9 additions & 5 deletions src/ViewerConsole.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
6 changes: 4 additions & 2 deletions src/layouts/Minimal.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script>
export let cssStyles;
let width;
let height;
</script>

<div class="{cssStyles.container}" >
Expand All @@ -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>
6 changes: 4 additions & 2 deletions src/layouts/MinimalReverse.svelte
Original file line number Diff line number Diff line change
@@ -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}">
Expand Down
7 changes: 6 additions & 1 deletion src/srcdoc/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down

0 comments on commit 48fe5f7

Please sign in to comment.