From 07a912fb9aa4d6cb451585a474b2f4bd22713f2b Mon Sep 17 00:00:00 2001 From: Cory McWilliams Date: Wed, 3 May 2023 23:12:34 +0000 Subject: [PATCH] Files pane => lit. git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4282 ed5197a5-7fde-0310-b194-c3ffbd925b24 --- core/client.js | 88 +++++++++++++++++++++++++++++++++++-------------- core/index.html | 14 +------- core/style.css | 45 ------------------------- 3 files changed, 64 insertions(+), 83 deletions(-) diff --git a/core/client.js b/core/client.js index dd7cc2a4..52d66d8a 100644 --- a/core/client.js +++ b/core/client.js @@ -207,6 +207,62 @@ class TfFilesElement extends LitElement { } customElements.define('tf-files', TfFilesElement); +class TfFilesPaneElement extends LitElement { + static get properties() { + return { + expanded: {type: Boolean}, + current: {type: String}, + files: {type: Object}, + }; + } + + constructor() { + super(); + this.expanded = window.localStorage.getItem('files') == '1'; + this.files = {}; + } + + set_expanded(expanded) { + this.expanded = expanded; + window.localStorage.setItem('files', expanded ? '1' : '0'); + } + + render() { + let self = this; + let expander = this.expanded ? + html` self.set_expanded(false)} class="expander">«` : + html` self.set_expanded(true)} class="expander">»`; + let content = html` +
+ openFile(event.detail.file)}> +
+
+
+
+ `; + return html` + +
+
+ ${this.expanded ? html`Files` : undefined} + ${expander} +
+ ${this.expanded ? content : undefined} +
+ `; + } +} +customElements.define('tf-files-pane', TfFilesPaneElement); + class TfSparkLineElement extends LitElement { static get properties() { return { @@ -362,16 +418,6 @@ function edit() { }); } -function hideFiles() { - window.localStorage.setItem('files', '0'); - document.getElementById('filesPane').classList.add('collapsed'); -} - -function showFiles() { - window.localStorage.setItem('files', '1'); - document.getElementById('filesPane').classList.remove('collapsed'); -} - function trace() { window.open(`/speedscope/#profileURL=${encodeURIComponent('/trace')}`); } @@ -1058,11 +1104,13 @@ function openFile(name) { } function updateFiles() { - 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; + let files = document.getElementsByTagName("tf-files-pane")[0]; + if (files) { + files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, { + clean: gFiles[file].doc.isClean(gFiles[file].generation), + }])); + files.current = gCurrentFile; + } gEditor.focus(); } @@ -1096,8 +1144,6 @@ window.addEventListener("load", function() { window.addEventListener("message", message, false); window.addEventListener("online", connectSocket); document.getElementById("name").value = window.location.pathname; - document.getElementById('files_hide').addEventListener('click', () => hideFiles()); - document.getElementById('files_show').addEventListener('click', () => showFiles()); document.getElementById('closeStats').addEventListener('click', () => closeStats()); document.getElementById('closeEditor').addEventListener('click', () => closeEditor()); document.getElementById('save').addEventListener('click', () => save()); @@ -1111,8 +1157,6 @@ window.addEventListener("load", function() { event.preventDefault(); toggleStats(); }); - document.getElementById('new_file_button').addEventListener('click', () => newFile()); - document.getElementById('remove_file_button').addEventListener('click', () => removeFile()); for (let tag of document.getElementsByTagName('a')) { if (tag.accessKey) { tag.classList.add('tooltip_parent'); @@ -1145,15 +1189,9 @@ window.addEventListener("load", function() { } else { closeEditor(); } - if (window.localStorage.getItem('files') == '1') { - showFiles(); - } else { - hideFiles(); - } if (window.localStorage.getItem('stats') == '1') { stats(); } else { closeStats(); } - document.getElementById('files_list').addEventListener('file_click', event => openFile(event.detail.file)); }); diff --git a/core/index.html b/core/index.html index bdbd69b1..9b9d1c77 100644 --- a/core/index.html +++ b/core/index.html @@ -26,19 +26,7 @@
-
-
- Files - « - » -
-
- -
-
-
-
-
+
diff --git a/core/style.css b/core/style.css index 23099de9..c3ec0278 100644 --- a/core/style.css +++ b/core/style.css @@ -157,51 +157,6 @@ a:active { .cyan { color: #2aa198; } .green { color: #859900; } -#files_header { - font-weight: bold; - text-align: center; - flex: 1; -} - -#files_hide { - font-weight: bold; - width: 100%; - right: 0; - flex: 0; - padding: 0.25em; - cursor: pointer; -} - -#files_show { - display: none; - padding: 0.25em; - cursor: pointer; -} - -#filesPane { - flex: 1 1 10%; -} - -#filesPane.collapsed { - flex: 0; -} - -.collapsed #files_header { - display: none; -} - -.collapsed #files_content { - display: none; -} - -.collapsed #files_hide { - display: none; -} - -.collapsed #files_show { - display: block; -} - .tooltip { position: absolute; z-index: 1;