cory/tildefriends
4
5
Fork 1
Code Issues 29 Pull Requests 1 Actions Releases 26 Wiki Activity

Files pane => lit.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
core/client.js
View File

@ -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`<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 {
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));
});

14
core/index.html
View File

@ -26,19 +26,7 @@
<input type="button" id="stats_button" value="Stats">
</div>
<div class="hbox" style="height: 100%">
<div id="filesPane">
<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>
<tf-files-pane></tf-files-pane>
<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
<div style="flex: 1 1 50%; position: relative">
<textarea id="editor" class="main"></textarea>

45
core/style.css
View File

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