Start using lit element in the main web interface. It's getting out of control, and if I can finish a refactor, it will reel it in.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4266 ed5197a5-7fde-0310-b194-c3ffbd925b24

core/client.js

@@ -1,3 +1,5 @@
+import {LitElement, html} from '/static/lit/lit-all.min.js';
+
 let gSocket;
 let gCredentials;
 let gPermissions;
@@ -26,6 +28,68 @@ const k_api = {
 	setHash: {args: ['hash'], func: api_setHash},
 };
 
+class TfFilesElement extends LitElement {
+	static get properties() {
+		return {
+			current: {type: String},
+			files: {type: Object},
+		};
+	}
+
+	constructor() {
+		super();
+		this.files = {};
+	}
+
+	file_click(file) {
+		this.dispatchEvent(new CustomEvent('file_click', {
+			detail: {
+				file: file,
+			},
+			bubbles: true,
+			composed: true,
+		}));
+	}
+
+	render_file(file) {
+		let classes = ['file'];
+		if (file == this.current) {
+			classes.push('current');
+		}
+		if (!this.files[file].clean) {
+			classes.push('dirty');
+		}
+		return html`<div class="${classes.join(' ')}" @click=${x => this.file_click(file)}>${file}</div>`;
+	}
+
+	render() {
+		let self = this;
+		return html`
+			<style>
+				div.file {
+					padding: 0.5em;
+				}
+				div.file::before {
+					content: '📄 ';
+				}
+
+				div.file.current {
+					font-weight: bold;
+					background-color: #2aa198;
+				}
+
+				div.file.dirty::after {
+					content: '*';
+				}
+			</style>
+			<div>
+				${Object.keys(this.files).sort().map(x => self.render_file(x))}
+			</div>
+		`;
+	}
+}
+customElements.define('tf-files', TfFilesElement);
+
 window.addEventListener("keydown", function(event) {
 	if (event.keyCode == 83 && (event.altKey || event.ctrlKey)) {
 		if (editing()) {
@@ -922,28 +986,12 @@ function openFile(name) {
 	gEditor.focus();
 }
 
-function onFileClicked(event) {
-	openFile(event.target.textContent);
-}
-
 function updateFiles() {
-	let node = document.getElementById("files");
-	while (node.firstChild) {
-		node.removeChild(node.firstChild);
-	}
-
-	for (let file of Object.keys(gFiles).sort()) {
-		let li = document.createElement("li");
-		li.onclick = onFileClicked;
-		li.appendChild(document.createTextNode(file));
-		if (file == gCurrentFile) {
-			li.classList.add("current");
-		}
-		if (!gFiles[file].doc.isClean(gFiles[file].generation)) {
-			li.classList.add("dirty");
-		}
-		node.appendChild(li);
-	}
+	let files = document.getElementById("files_list");
+	files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, {
+		clean: gFiles[file].doc.isClean(gFiles[file].generation),
+	}]));
+	files.current = gCurrentFile;
 
 	gEditor.focus();
 }
@@ -1041,4 +1089,5 @@ window.addEventListener("load", function() {
 	} else {
 		closeStats();
 	}
+	document.getElementById('files_list').addEventListener('file_click', event => openFile(event.detail.file));
 });

core/core.js

@@ -837,6 +837,8 @@ loadSettings().then(function() {
 			return blobHandler(request, response, match[1], match[2]);
 		} else if (match = /^\/([&\%][^\.]{44}(?:\.\w+)?)(\/?.*)/.exec(request.uri)) {
 			return blobHandler(request, response, match[1], match[2]);
+		} else if (match = /^\/static\/lit\/([\.\w-/]*)$/.exec(request.uri)) {
+			return staticDirectoryHandler(request, response, 'deps/lit/', match[1]);
 		} else if (match = /^\/static(\/.*)/.exec(request.uri)) {
 			return staticFileHandler(request, response, null, match[1]);
 		} else if (match = /^\/codemirror\/([\.\w-/]*)$/.exec(request.uri)) {

core/index.html

@@ -43,6 +43,7 @@
 							<span id="files_hide">«</span>
 							<span id="files_show">»</span>
 						</div>
+						<tf-files id="files_list"></tf-files>
 						<div id="files_content">
 							<ul id="files"></ul>
 							<br>

core/style.css

@@ -207,25 +207,6 @@ a:active {
 	display: block;
 }
 
-#files {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-}
-
-#files > li {
-	padding: 0.5em;
-}
-
-#files > li.current {
-	font-weight: bold;
-	background-color: #2aa198;
-}
-
-#files > li.dirty::after {
-	content: '*';
-}
-
 .tooltip {
 	position: absolute;
 	z-index: 1;