From 9ee341d09ce8e8dfa9d0d9351ff34f9c9179f2db Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 28 Apr 2023 17:14:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dsteps=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=9C=A8=E5=8E=9F=E7=94=9F=E7=8E=AF=E5=A2=83=E4=B8=8B=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E4=BF=AE=E6=94=B9=E7=8A=B6=E6=80=81=E7=9A=84bug;?= =?UTF-8?q?=E4=BC=98=E5=8C=96sandbox=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sandbox/index.js | 71 ++++++++++++++++++++++++-------------------- src/steps/index.js | 17 ++++++----- 2 files changed, 48 insertions(+), 40 deletions(-) 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', '') + } } }) }