diff --git a/src/sandbox/index.js b/src/sandbox/index.js
index 4753b98..68a0d20 100644
--- a/src/sandbox/index.js
+++ b/src/sandbox/index.js
@@ -9,6 +9,19 @@ import '../icon/index.js'
import { gzip } from '@bytedo/gzip'
import { colorHtml, colorJs, colorCss } from '../code/colorful.js'
+const template = `
+
+
+
+
+
+
+
+
+
+
+`
+
function trim(str) {
return str
.trim()
@@ -19,7 +32,12 @@ function trim(str) {
class Sandbox extends Component {
static props = {
- tab: { type: String, default: 'preview', attribute: false }
+ tab: { type: String, default: 'preview', attribute: false },
+ playground: {
+ type: String,
+ default: 'https://bd-js.github.io/playground.html',
+ attribute: false
+ }
}
static styles = css`
@@ -121,7 +139,7 @@ class Sandbox extends Component {
this.tab = key
} else {
- window.open('https://bd-js.github.io/playground.html#' + gzip(this.code))
+ window.open(this.playground + '#' + gzip(this.code))
}
}
@@ -149,61 +167,48 @@ class Sandbox extends Component {
this.#cache[lang].panel = slot
}
- this.updatePreview(lang)
+ this.updatePreview(lang, slot.code)
this.$requestUpdate()
})
}
- updatePreview(lang) {
- let doc = this.$refs.preview.contentWindow.document
+ updatePreview(lang, code) {
+ let doc = this.$refs.preview.contentDocument
if (this.#created) {
switch (lang) {
case 'css':
- doc.head.querySelector('style').innerText = this.#cache.css.code
+ doc.head.children.namedItem('css').textContent = code
break
case 'javascript':
- doc.head.querySelector('script[type="module"]').innerText =
- this.#cache.javascript.code
+ doc.head.children.namedItem('js').textContent = code
break
-
case 'html':
- doc.body.innerHTML = this.#cache.html.code
+ doc.body.innerHTML = code
break
}
- } else {
- let html = `
-
-
-
-
-
-
-
-
-
-
- ${this.#cache.html.code}
-
- `
-
- try {
- doc.open()
- doc.write(html)
- doc.close()
- this.#created = true
- } catch (e) {}
}
}
contentLoaded(ev) {
let elem = ev.target
- let body = elem.contentWindow.document.body
+ let body = elem.contentDocument.body
elem.style.height = body.clientHeight + 'px'
}
+ renderTemplate() {
+ let doc = this.$refs.preview.contentDocument
+ try {
+ doc.open()
+ doc.write(template)
+ doc.close()
+ this.#created = true
+ } catch (e) {}
+ }
+
mounted() {
//
this.#cache.preview.panel = this.$refs.preview
+ this.renderTemplate()
this.$refs.preview.style.display = 'block'
}
diff --git a/src/steps/index.js b/src/steps/index.js
index f1b398e..8684fb4 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -34,13 +34,16 @@ class Steps extends Component {
$updateStepStatus() {
;[...this.children].forEach((it, i) => {
- it.index = i + 1
- it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
- it.vertical = this.vertical
- if (i === 0) {
- it.setAttribute('first', '')
- } else if (i === this.children.length - 1) {
- it.setAttribute('last', '')
+ if (it.tagName === 'WC-STEP' && it.root) {
+ it.index = i + 1
+ it.status = it.index <= this.active ? 2 : i === this.active ? 1 : 0
+ it.vertical = this.vertical
+
+ if (i === 0) {
+ it.setAttribute('first', '')
+ } else if (i === this.children.length - 1) {
+ it.setAttribute('last', '')
+ }
}
})
}