Spaces:
Running
Running
File size: 1,302 Bytes
fd2b294 e9f86ad 5306698 75d6174 fd2b294 5306698 e9f86ad 50bb1bc 5306698 fd2b294 5306698 fd2b294 5306698 ee6aff9 5306698 fd2b294 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let elem_classes: string[] = [];
export let value: string;
export let visible = true;
export let min_height = false;
export let height = "100%";
export let width = "100%";
const dispatch = createEventDispatcher<{ change: undefined }>();
let iframeElement;
const onLoad = () => {
try {
const iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
if (height === "100%") {
iframeElement.style.height = `${iframeDocument.documentElement.scrollHeight}px`;
}else {
iframeElement.style.height = height;
}
} catch (e) {
console.error("Error accessing iframe content:", e);
}
};
$: value, dispatch("change");
</script>
<div
class="prose {elem_classes.join(' ')}"
class:min={min_height}
class:hide={!visible}
class:height={height}
>
<iframe
bind:this={iframeElement}
title="iframe component"
width={width}
srcdoc={value}
height={height}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
on:load={onLoad}
></iframe>
</div>
<style>
.min {
min-height: var(--size-24);
}
.hide {
display: none;
}
</style>
|