-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
50 lines (48 loc) · 1.83 KB
/
index.js
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
import worker from "./worker.js"
const template = Object.assign(document.createElement("template"), { innerHTML: /*html*/ ` <pre class="line-num"><code></code></pre> ` })
class CodeViewer extends HTMLElement {
name = "Подсветка синтаксиса кода"
input = {
src: { name: { ru: "Код", }, type: "String", value: "" },
lineno: { name: { ru: "Номера строк", }, type: "Boolean", value: true },
fold: { name: { ru: "Свертки строк", }, type: "Boolean", value: false },
}
output = {
dst: { name: { ru: "Код", }, type: String, value: "" },
}
property = {}
constructor() {
super()
const shadow = this.attachShadow({ mode: "closed" })
shadow.innerHTML = /*html*/ `<link rel="stylesheet" type="text/css" href="./styles.css" />`
this._preview = template.content.querySelector("code")
shadow.appendChild(template.content)
}
connectedCallback() { }
attributeChangedCallback(attrName, oldValue, newValue) {
console.log(attrName)
}
/**
* @param {any} value
*/
set state({ input, output, property }) {
this.output = output
this.input = input
this.property = property
this._preview.innerHTML = output.dst.value
}
send({ fold = this.input.fold.default, lineno = this.input.lineno.default, src = this.input.src.default, lang = "js" }) {
worker(fold, lineno, src, lang).then((result) => {
this._preview.innerHTML = result
this.input.fold.value = fold
this.input.lineno.value = lineno
this.input.src.value = src
this.output.dst.value = result
this.dispatchEvent(new CustomEvent("complete", { detail: result }))
})
}
subscribe(cb) {
this.addEventListener("complete", () => cb({ input: this.input, output: this.output, property: this.property }))
}
}
customElements.define("code-viewer", CodeViewer)