add embed link with theme (#568)

2023-01-04 19:34:23 -08:00 · 2023-01-04 19:34:23 -08:00 · b1c99da3d3
--- a/docs/embed/v4/sanddance-embed.html
+++ b/docs/embed/v4/sanddance-embed.html
@ -8,9 +8,7 @@
 </head>

 <body>
-    <script src="https://unpkg.com/@msrvida/sanddance-embed@4.3/dist/umd/sanddance-embed.js"></script>
-
-    <div id="app"></div>
+    <script src="https://unpkg.com/@msrvida/sanddance-embed@4.4/dist/umd/sanddance-embed.js"></script>

    <!--EMBED-->

--- a/docs/embed/v4/test.html
+++ b/docs/embed/v4/test.html
@ -15,6 +15,10 @@

    <iframe id="embed" title="embed" style="width: 90%; height: 600px" src="sanddance-embed.html"></iframe>

+    <div>
+        <button id="button_theme">toggle dark theme</button>
+    </div>
+
    <script>
        window.onmessage = (e) => {
            console.log('messaged', e.data);
@ -26,9 +30,16 @@
                .then(response => response.text())
                .then(rawText => {
                    const data = { rawText, type: 'tsv' };
-                    embedWindow.postMessage({ action: 'load', data }, '*');
+                    embedWindow.postMessage({ action: 'load', data, props: { theme: 'dark-theme' } }, '*');
                });
        };
+
+        let dark = true;
+        const button_theme = document.getElementById('button_theme');
+        button_theme.onclick = () => {
+            dark = !dark;
+            embedIframe.contentWindow.postMessage({ action: 'theme', dark }, '*');
+        };
    </script>

 </body>
--- a/docs/examples/index.md
+++ b/docs/examples/index.md
@ -30,6 +30,7 @@ title: Examples
 * [Power BI custom visual](../dist/powerbi/v4/SandDance201929976D117A654D0BAB8E96507442D80B.4.1.0.pbiviz) 4.1.0
 * [Azure Data Studio extension](../dist/azdata/v4/azdata-sanddance-4.0.1.vsix) 4.0.1
 * [VSCode extension](../dist/vscode/v4/vscode-sanddance-4.0.2.vsix) 4.0.2
+* [sanddance-embed example](../embed/v4/test.html)

 ## Previous versions

--- a/packages/sanddance-embed/test/test.html
+++ b/packages/sanddance-embed/test/test.html
@ -66,7 +66,7 @@
        const localQs = testLocal ? `?${encodeURIComponent(JSON.stringify(deps))}` : '';
        embedIframe.src = 'sanddance-embed.html' + localQs;

-        let dark = false;
+        let dark = true;
        const button1 = document.getElementById('button1');
        button1.onclick = () => {
            dark = !dark;