it works!!

This commit is contained in:
Hamcha 2023-11-30 10:29:30 +01:00
parent d7d814015f
commit cc39e659a8
5 changed files with 21 additions and 14 deletions

View file

@ -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"))

View file

@ -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;

View file

@ -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;
} }
} }

View file

@ -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");

View file

@ -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");