diff --git a/tools/playground/app.js b/tools/playground/app.js index 83beee7c..8fd5ce6e 100644 --- a/tools/playground/app.js +++ b/tools/playground/app.js @@ -226,6 +226,15 @@ class App extends owl.Component { this.downloadCode = debounce(this.downloadCode, 250, true); this.content = useRef("content"); this.updateCode = this.updateCode.bind(this); + if (window.location.hash) { + try { + const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1)))); + if (![js, css, xml].every(item => typeof item === "string")) { + return; + } + Object.assign(this.state, { js, css, xml }); + } catch {} + } } runCode() { @@ -237,6 +246,18 @@ class App extends owl.Component { this.content.el.appendChild(subiframe); } + shareCode() { + const state = btoa(JSON.stringify({ js: this.state.js, css: this.state.css, xml: this.state.xml })); + const link = new URL(window.location.href); + link.hash = state; + if (navigator.clipboard) { + navigator.clipboard.writeText(link.href); + clearTimeout(this.state.copied) + this.state.copied = setTimeout(() => this.state.copied = null, 2000); + } + window.location.href = link.href; + } + setSample(ev) { const sample = this.SAMPLES.find(s => s.description === ev.target.value); this.state.js = sample.code; diff --git a/tools/playground/playground.css b/tools/playground/playground.css index bff9db39..191bf196 100644 --- a/tools/playground/playground.css +++ b/tools/playground/playground.css @@ -79,6 +79,19 @@ body { margin: 5px; } +.share-code { + position: relative; +} + +.copied-notification { + font-size: x-small; + position: absolute; + bottom: -5px; + white-space: nowrap; + left: 50%; + transform: translateX(-50%); +} + /* TABBED EDITOR ****************************************/ .tabbed-editor { diff --git a/tools/playground/templates.xml b/tools/playground/templates.xml index 63dbb68d..602d5e81 100644 --- a/tools/playground/templates.xml +++ b/tools/playground/templates.xml @@ -22,6 +22,7 @@ +