it works!!
This commit is contained in:
parent
d7d814015f
commit
cc39e659a8
5 changed files with 21 additions and 14 deletions
2
build.rs
2
build.rs
|
@ -13,7 +13,7 @@ use swc_common::{
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
// Find all Typescript files (that are not type declaration)
|
// Find all Typescript files (that are not type declaration)
|
||||||
let ts_files: Vec<_> = glob::glob(&format!("{}/**/*.ts", "static/source"))
|
let ts_files: Vec<_> = glob::glob(&format!("{}/**/*.ts", "static/scripts"))
|
||||||
.expect("Failed to read glob pattern")
|
.expect("Failed to read glob pattern")
|
||||||
.filter_map(|entry| entry.ok())
|
.filter_map(|entry| entry.ok())
|
||||||
.filter(|entry| !entry.to_string_lossy().ends_with(".d.ts"))
|
.filter(|entry| !entry.to_string_lossy().ends_with(".d.ts"))
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import "../vendor/ace/ace.js";
|
import "../vendor/ace/ace.js";
|
||||||
import { findNearestParent } from "./node-utils.mjs";
|
import { findNearestParent } from "./node-utils.js";
|
||||||
|
|
||||||
export default class Editor {
|
export default class Editor {
|
||||||
editor;
|
editor;
|
||||||
|
|
|
@ -6,6 +6,7 @@ class Editor extends HTMLElement {
|
||||||
private tabEl: HTMLDivElement;
|
private tabEl: HTMLDivElement;
|
||||||
private files: Record<string, AceAjax.IEditSession>;
|
private files: Record<string, AceAjax.IEditSession>;
|
||||||
private root: ShadowRoot;
|
private root: ShadowRoot;
|
||||||
|
private addTabButton: HTMLDivElement;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
@ -14,13 +15,15 @@ class Editor extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.tabEl = $el("div", { className: "tab-container" });
|
this.addTabButton = $el("div", { className: "tab" }, "+");
|
||||||
|
this.tabEl = $el("div", { className: "tab-container" }, this.addTabButton);
|
||||||
this.root.append(this.tabEl);
|
this.root.append(this.tabEl);
|
||||||
|
|
||||||
const style = $el("style");
|
const style = $el("style");
|
||||||
style.textContent = `
|
style.textContent = `
|
||||||
.tab-container {
|
.tab-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-bottom: -2px;
|
||||||
|
|
||||||
& .tab {
|
& .tab {
|
||||||
border: 2px solid var(--table-border-color);
|
border: 2px solid var(--table-border-color);
|
||||||
|
@ -73,6 +76,14 @@ class Editor extends HTMLElement {
|
||||||
tab.click();
|
tab.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setCurrent(name: string) {
|
||||||
|
this.editor.setSession(this.files[name]);
|
||||||
|
this.tabEl.querySelectorAll<HTMLDivElement>(".tab").forEach(el => {
|
||||||
|
if (el.dataset.name === name) el.classList.add("active");
|
||||||
|
else el.classList.remove("active");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create a new tab
|
* Create a new tab
|
||||||
* @param name Tab name
|
* @param name Tab name
|
||||||
|
@ -81,13 +92,10 @@ class Editor extends HTMLElement {
|
||||||
#addTab(name: string) {
|
#addTab(name: string) {
|
||||||
const tab = $el("div", {
|
const tab = $el("div", {
|
||||||
className: "tab",
|
className: "tab",
|
||||||
"@click": () => {
|
dataset: { name },
|
||||||
this.editor.setSession(this.files[name]);
|
"@click": () => this.setCurrent(name)
|
||||||
this.tabEl.querySelectorAll(".tab").forEach(el => el.classList.remove("active"));
|
|
||||||
tab.classList.add("active");
|
|
||||||
}
|
|
||||||
}, name);
|
}, name);
|
||||||
this.tabEl.append(tab);
|
this.tabEl.insertBefore(tab, this.addTabButton);
|
||||||
return tab;
|
return tab;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
{% block title %}Stack {{stack_name}}{% endblock %}
|
{% block title %}Stack {{stack_name}}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<script type="module" src="/static/components/editor/script.mjs" defer></script>
|
<script type="module" src="/static/scripts/components/editor/script.js" defer></script>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
|
<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
|
||||||
|
@ -113,12 +113,11 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { add_check } from "/static/js/enhancements/check.mjs";
|
|
||||||
|
|
||||||
const editor = document.querySelector("file-editor");
|
const editor = document.querySelector("file-editor");
|
||||||
document.querySelectorAll("script[type=stackfile]").forEach((script) => {
|
document.querySelectorAll("script[type=stackfile]").forEach((script) => {
|
||||||
editor.addFile(script.dataset.name, script.innerText);
|
editor.addFile(script.dataset.name, script.innerText);
|
||||||
});
|
});
|
||||||
|
editor.setCurrent("arion-compose.nix");
|
||||||
|
|
||||||
/* Enforce check pre-submit */
|
/* Enforce check pre-submit */
|
||||||
//const form = document.getElementById("editor-form");
|
//const form = document.getElementById("editor-form");
|
||||||
|
|
|
@ -28,8 +28,8 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import Editor from "/static/js/ace.mjs";
|
import Editor from "/static/scripts/ace.mjs";
|
||||||
import { add_check } from "/static/js/enhancements/check.mjs";
|
import { add_check } from "/static/scripts/enhancements/check.js";
|
||||||
|
|
||||||
const editor = new Editor("editor");
|
const editor = new Editor("editor");
|
||||||
|
|
||||||
|
|
Reference in a new issue