79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
class LogTerminal extends HTMLElement {
|
|
|
|
#maxlines = 10;
|
|
#rootdoc = null;
|
|
#lines = []
|
|
|
|
constructor(){
|
|
super()
|
|
this.#maxlines = this.getAttribute("maxlines")
|
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
|
this.render()
|
|
}
|
|
|
|
connectedCallback(){
|
|
|
|
}
|
|
|
|
get lines(){
|
|
return this.#lines
|
|
}
|
|
|
|
render(){
|
|
this.#rootdoc.innerHTML = `
|
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
|
<style>
|
|
.terminal-container{
|
|
overflow: hidden;
|
|
}
|
|
.terminal{
|
|
background-color: black;
|
|
max-height: 10rem;
|
|
height: 10rem;
|
|
min-height:10rem;
|
|
padding: 5px;
|
|
overflow:auto;
|
|
}
|
|
|
|
.terminal > .line {
|
|
font-family: 'VT323', monospace;
|
|
color: #88ff00;
|
|
text-shadow: 1px 1px 1px rgba(0, 200, 0, .6), 0 0 .5em rgba(0, 200, 0, .6)
|
|
}
|
|
|
|
.terminal > .line.error {
|
|
color: #ff3300;
|
|
text-shadow: 1px 1px 1px rgba(200, 0, 0, .6), 0 0 .5em rgba(200, 0, 0, .6)
|
|
}
|
|
</style>
|
|
<template id="TERMINAL_TEMPLATE">
|
|
<div name="terminal" class="container">
|
|
<div class="terminal" id="t">
|
|
<div class="line"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div name="terminal" class="container"></div>
|
|
`
|
|
}
|
|
|
|
refresh(){
|
|
BSS.apply(this.#terminal_bss, this.#rootdoc)
|
|
}
|
|
|
|
#terminal_bss = {
|
|
template : "#TERMINAL_TEMPLATE",
|
|
target : "div[name=terminal]",
|
|
in : ()=>this,
|
|
recurse : {
|
|
target : "div.line",
|
|
in: d=>d.lines,
|
|
apply: (e,d,i)=>{
|
|
if(d.source === "stderr") e.classList.add("error");
|
|
e.innerHTML = `<span>${d.line}</span>`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
window.customElements.define('d4s-ccp-logterminal', LogTerminal); |