dees-catalog/ts_web/elements/dees-dataview-codebox.ts

257 lines
6.3 KiB
TypeScript
Raw Normal View History

2023-09-07 16:34:38 +00:00
import { demoFunc } from './dees-dataview-codebox.demo.js';
2023-04-05 12:46:20 +00:00
import {
DeesElement,
html,
customElement,
2023-08-07 18:02:18 +00:00
type TemplateResult,
2023-04-05 12:46:20 +00:00
property,
state,
2023-08-07 17:13:29 +00:00
} from '@design.estate/dees-element';
2023-04-05 12:46:20 +00:00
import hlight from 'highlight.js';
2023-08-07 17:13:29 +00:00
import * as smartstring from '@push.rocks/smartstring';
2023-04-05 12:46:20 +00:00
2023-08-07 17:13:29 +00:00
import * as domtools from '@design.estate/dees-domtools';
2023-04-05 12:46:20 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-dataview-codebox': DeesDataviewCodebox;
}
}
@customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement {
2023-09-07 16:34:38 +00:00
public static demo = demoFunc;
2023-04-05 12:46:20 +00:00
@property()
public progLang: string = 'typescript';
@property({
2023-04-06 15:29:07 +00:00
type: String,
reflect: true,
2023-04-05 12:46:20 +00:00
})
2023-04-06 15:29:07 +00:00
public codeToDisplay: string = '';
2023-04-05 12:46:20 +00:00
constructor() {
super();
}
render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
position: relative;
display: block;
text-align: left;
font-size: 16px;
}
.mainbox {
position: relative;
color: ${this.goBright ? '#333333' : '#ffffff'};
2023-09-07 16:34:38 +00:00
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
background: ${this.goBright ? '#ffffff' : '#191919'};
border-radius: 16px;
overflow: hidden;
}
.appbar {
height: 24px;
background: #161616;
border-bottom: 1px solid #222222;
font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
}
2023-09-17 19:38:02 +00:00
.appbar .macControls {
position: absolute;
top: 6px;
left: 20px;
width: 200px;
display: grid;
grid-template-columns: 24px 24px 24px;
}
.appbar .macControls div {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 50%;
margin: 0px;
padding: 0px;
cursor: pointer;
background: #222222;
}
.appbar .macControls div.close {
background: #FF5F57;
}
.appbar .macControls div.toDock {
background: #FFBD2E;
}
.appbar .macControls div.minMax {
background: #27C93F;
}
.appbar .macControls div:hover {
background: #333333;
}
2023-09-07 16:34:38 +00:00
.appbar .fileName {
text-align: center;
}
.bottomBar {
height: 24px;
background: #161616;
border-top: 1px solid #222222;
font-size: 12px;
2023-09-17 19:38:02 +00:00
color: #888;
2023-09-07 16:34:38 +00:00
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
2023-09-17 19:38:02 +00:00
text-align: right;
padding-right: 100px;
2023-04-05 12:46:20 +00:00
}
.languageLabel {
2023-09-17 19:38:02 +00:00
color: #ccc;
2023-04-05 12:46:20 +00:00
font-size: 12px;
2023-09-07 16:34:38 +00:00
line-height: 24px;
2023-04-05 12:46:20 +00:00
z-index: 10;
2023-09-07 16:34:38 +00:00
background: #6596ff20;
2023-04-05 12:46:20 +00:00
display: inline-block;
position: absolute;
2023-09-07 16:34:38 +00:00
bottom: 0px;
right: 0px;
padding: 0px 16px 0px 8px;
2023-04-05 12:46:20 +00:00
}
.hljs-keyword {
color: #ff65ec;
}
.codegrid {
display: grid;
grid-template-columns: 50px auto;
overflow: hidden;
}
.lineNumbers {
2023-09-07 16:34:38 +00:00
2023-04-05 12:46:20 +00:00
color: ${this.goBright ? '#acacac' : '#666666'};
padding: 30px 16px 0px 0px;
text-align: right;
2023-09-07 16:34:38 +00:00
border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
2023-04-05 12:46:20 +00:00
}
.lineCounter:last-child {
opacity: 50%;
}
pre {
overflow-x: auto;
margin: 0px;
padding: 30px 40px;
}
code {
font-weight: ${this.goBright ? '400' : '300'};
padding: 0px;
margin: 0px;
}
code,
code *,
.lineNumbers {
line-height: 1.4em;
font-weight: 200;
2023-08-07 17:13:29 +00:00
font-family: 'Intel One Mono', 'monospace';
2023-04-05 12:46:20 +00:00
}
.hljs-string {
color: #ffa465;
}
.hljs-built_in {
color: #65ff6a;
}
.hljs-function {
2023-09-07 16:34:38 +00:00
color: ${this.goBright ? '#2765DF' : '#6596ff'};
2023-04-05 12:46:20 +00:00
}
.hljs-params {
2023-09-07 16:34:38 +00:00
color: ${this.goBright ? '#3DB420' : '#65d5ff'};
2023-04-05 12:46:20 +00:00
}
.hljs-comment {
2023-09-07 16:34:38 +00:00
color: ${this.goBright ? '#EF9300' : '#ffd765'};
2023-04-05 12:46:20 +00:00
}
</style>
<div class="mainbox">
2023-09-07 16:34:38 +00:00
<div class="appbar">
2023-09-17 19:38:02 +00:00
<div class="macControls">
<div class="close"></div>
<div class="toDock"></div>
<div class="minMax"></div>
</div>
2023-09-07 16:34:38 +00:00
<div class="fileName">index.ts</div>
</div>
2023-04-05 12:46:20 +00:00
<div class="codegrid">
<div class="lineNumbers">
${(() => {
let lineCounter = 0;
2023-09-07 16:34:38 +00:00
return this.codeToDisplay.split('\n').map((lineArg) => {
2023-04-05 12:46:20 +00:00
lineCounter++;
return html`<div class="lineCounter">${lineCounter}</div>`;
2023-09-07 16:34:38 +00:00
});
2023-04-05 12:46:20 +00:00
})()}
</div>
2023-04-06 15:29:07 +00:00
<pre><code></code></pre>
2023-04-05 12:46:20 +00:00
</div>
2023-09-07 16:34:38 +00:00
<div class="bottomBar">
Spaces: 2
<div class="languageLabel">${this.progLang}</div>
</div>
2023-04-05 12:46:20 +00:00
</div>
`;
}
2023-04-06 15:29:07 +00:00
@state()
private codeToDisplayStore = '';
2023-04-05 12:46:20 +00:00
public async updated(_changedProperties) {
super.updated(_changedProperties);
console.log('highlighting now');
console.log(this.childNodes);
const slottedCodeNodes: Text[] = [];
this.childNodes.forEach((childNode) => {
if (childNode.nodeName === '#text') {
slottedCodeNodes.push(childNode as Text);
}
});
2023-04-06 15:29:07 +00:00
if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
2023-04-09 22:17:38 +00:00
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
2023-04-06 15:29:07 +00:00
}
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
2023-09-07 16:34:38 +00:00
this.codeToDisplayStore = smartstring.indent
.normalize(slottedCodeNodes[0].wholeText)
.trimStart();
2023-04-06 15:29:07 +00:00
this.codeToDisplay = this.codeToDisplayStore;
2023-04-05 12:46:20 +00:00
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
2023-09-07 16:34:38 +00:00
const html = hlight.highlight(this.codeToDisplayStore, {
language: this.progLang,
ignoreIllegals: true,
});
2023-04-06 15:29:07 +00:00
localCodeNode.innerHTML = html.value;
2023-04-05 12:46:20 +00:00
}
}