Files pane => lit.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4282 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-05-03 23:12:34 +00:00
parent e9d83262c4
commit 07a912fb9a
3 changed files with 64 additions and 83 deletions

View File

@ -207,6 +207,62 @@ class TfFilesElement extends LitElement {
} }
customElements.define('tf-files', TfFilesElement); 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`<span @click=${() => self.set_expanded(false)} class="expander">«</span>` :
html`<span @click=${() => self.set_expanded(true)} class="expander">»</span>`;
let content = html`
<div id="files_content">
<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
<br>
<div><button @click=${() => newFile()}>New File</button></div>
<div><button @click=${() => removeFile()}>Remove File</button></div>
</div>
`;
return html`
<style>
.expander {
font-weight: bold;
width: 100%;
right: 0;
flex: 0;
padding: 0.25em;
cursor: pointer;
}
</style>
<div>
<div style="display: flex; flex-direction: row">
${this.expanded ? html`<span style="font-weight: bold; text-align: center; flex: 1">Files</span>` : undefined}
${expander}
</div>
${this.expanded ? content : undefined}
</div>
`;
}
}
customElements.define('tf-files-pane', TfFilesPaneElement);
class TfSparkLineElement extends LitElement { class TfSparkLineElement extends LitElement {
static get properties() { static get properties() {
return { 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() { function trace() {
window.open(`/speedscope/#profileURL=${encodeURIComponent('/trace')}`); window.open(`/speedscope/#profileURL=${encodeURIComponent('/trace')}`);
} }
@ -1058,11 +1104,13 @@ function openFile(name) {
} }
function updateFiles() { function updateFiles() {
let files = document.getElementById("files_list"); let files = document.getElementsByTagName("tf-files-pane")[0];
if (files) {
files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, { files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, {
clean: gFiles[file].doc.isClean(gFiles[file].generation), clean: gFiles[file].doc.isClean(gFiles[file].generation),
}])); }]));
files.current = gCurrentFile; files.current = gCurrentFile;
}
gEditor.focus(); gEditor.focus();
} }
@ -1096,8 +1144,6 @@ window.addEventListener("load", function() {
window.addEventListener("message", message, false); window.addEventListener("message", message, false);
window.addEventListener("online", connectSocket); window.addEventListener("online", connectSocket);
document.getElementById("name").value = window.location.pathname; 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('closeStats').addEventListener('click', () => closeStats());
document.getElementById('closeEditor').addEventListener('click', () => closeEditor()); document.getElementById('closeEditor').addEventListener('click', () => closeEditor());
document.getElementById('save').addEventListener('click', () => save()); document.getElementById('save').addEventListener('click', () => save());
@ -1111,8 +1157,6 @@ window.addEventListener("load", function() {
event.preventDefault(); event.preventDefault();
toggleStats(); toggleStats();
}); });
document.getElementById('new_file_button').addEventListener('click', () => newFile());
document.getElementById('remove_file_button').addEventListener('click', () => removeFile());
for (let tag of document.getElementsByTagName('a')) { for (let tag of document.getElementsByTagName('a')) {
if (tag.accessKey) { if (tag.accessKey) {
tag.classList.add('tooltip_parent'); tag.classList.add('tooltip_parent');
@ -1145,15 +1189,9 @@ window.addEventListener("load", function() {
} else { } else {
closeEditor(); closeEditor();
} }
if (window.localStorage.getItem('files') == '1') {
showFiles();
} else {
hideFiles();
}
if (window.localStorage.getItem('stats') == '1') { if (window.localStorage.getItem('stats') == '1') {
stats(); stats();
} else { } else {
closeStats(); closeStats();
} }
document.getElementById('files_list').addEventListener('file_click', event => openFile(event.detail.file));
}); });

View File

@ -26,19 +26,7 @@
<input type="button" id="stats_button" value="Stats"> <input type="button" id="stats_button" value="Stats">
</div> </div>
<div class="hbox" style="height: 100%"> <div class="hbox" style="height: 100%">
<div id="filesPane"> <tf-files-pane></tf-files-pane>
<div class="hbox">
<span id="files_header">Files</span>
<span id="files_hide">«</span>
<span id="files_show">»</span>
</div>
<div id="files_content">
<tf-files id="files_list"></tf-files>
<br>
<div><button id="new_file_button">New File</button></div>
<div><button id="remove_file_button">Remove File</button></div>
</div>
</div>
<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column"> <div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
<div style="flex: 1 1 50%; position: relative"> <div style="flex: 1 1 50%; position: relative">
<textarea id="editor" class="main"></textarea> <textarea id="editor" class="main"></textarea>

View File

@ -157,51 +157,6 @@ a:active {
.cyan { color: #2aa198; } .cyan { color: #2aa198; }
.green { color: #859900; } .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 { .tooltip {
position: absolute; position: absolute;
z-index: 1; z-index: 1;