ccp-features #8

Merged
m.lettere merged 44 commits from ccp-features into master 2023-06-28 19:18:25 +02:00
1 changed files with 75 additions and 0 deletions
Showing only changes of commit ca00575ea8 - Show all commits

View File

@ -0,0 +1,75 @@
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(){
}
render(){
this.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="terminal"></div>
`
}
refresh(){
BSS.apply(this.#terminal_bss)
}
#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);