oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve comment modal UI and streamline event listener setup in UIManager

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-25 19:59:37 +02:00
parent dbb02ba4e1
commit fa08f2f8b9
2 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -64,8 +64,8 @@
</div> </div>
<div id="comment-modal-background" class="comment-modal-background"></div> <div id="comment-modal-background" class="comment-modal-background"></div>
<div id="comment-modal" class="comment-modal"> <div id="comment-modal" class="comment-modal">
<h2>Comment Content Editor</h2>
<textarea id="comment-textarea" placeholder="Add your comment here..."></textarea> <textarea id="comment-textarea" placeholder="Add your comment here..."></textarea>
<button class="button" id="comment-modal-save">Save</button>
</div> </div>
<script type="module" src="src/main.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>

42
src/UIManager.js
View File

@@ -5,16 +5,22 @@ export class UIManager {
} }
setupEventListeners() { setupEventListeners() {
document.getElementById('new-snippet').onclick = () => this.snippetManager.createNewSnippet(); this.setupEventListener('new-snippet', 'onclick', () => this.snippetManager.createNewSnippet());
document.getElementById('save-snippet').onclick = () => this.snippetManager.saveCurrentSnippet(); this.setupEventListener('save-snippet', 'onclick', () => this.snippetManager.saveCurrentSnippet());
document.getElementById('version-switch').onclick = () => { this.setupEventListener('version-switch', 'onclick', () => {
this.snippetManager.loadSnippet(this.snippetManager.currentSnippetId, !this.snippetManager.isDraftVersion); this.snippetManager.loadSnippet(this.snippetManager.currentSnippetId, !this.snippetManager.isDraftVersion);
}; });
document.getElementById('export-snippets').onclick = () => this.snippetManager.storageManager.exportSnippets(); this.setupEventListener('export-snippets', 'onclick', () => this.snippetManager.storageManager.exportSnippets());
document.getElementById('import-snippets').onclick = () => document.getElementById('import-file').click(); this.setupEventListener('import-snippets', 'onclick', () => document.getElementById('import-file').click());
document.getElementById('import-file').onchange = (e) => this.handleImport(e); this.setupEventListener('import-file', 'onchange', (e) => this.handleImport(e));
document.getElementById('comment-modal-save').onclick = () => this.saveComment(); this.setupEventListener('comment-modal-background', 'onclick', () => this.closeCommentModal());
document.getElementById('comment-modal-background').onclick = () => this.closeCommentModal(); }
setupEventListener(elementId, event, handler) {
const element = document.getElementById(elementId);
if (element) {
element[event] = handler;
}
} }
async handleImport(e) { async handleImport(e) {
@@ -44,10 +50,10 @@ export class UIManager {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = `snippet-item ${snippet.id === currentSnippetId ? 'active' : ''}`; div.className = `snippet-item ${snippet.id === currentSnippetId ? 'active' : ''}`;
div.onclick = () => this.snippetManager.loadSnippet(snippet.id); div.onclick = () => this.snippetManager.loadSnippet(snippet.id);
const hasChanges = this.snippetManager.hasDraftChanges(snippet.id); const hasChanges = this.snippetManager.hasDraftChanges(snippet.id);
const indicator = hasChanges ? '🟡' : '🟢'; const indicator = hasChanges ? '🟡' : '🟢';
const contentDiv = document.createElement('div'); const contentDiv = document.createElement('div');
contentDiv.className = 'snippet-content'; contentDiv.className = 'snippet-content';
contentDiv.textContent = `${indicator} ${snippet.name}`; contentDiv.textContent = `${indicator} ${snippet.name}`;
@@ -71,16 +77,16 @@ export class UIManager {
this.snippetManager.renameSnippet(snippet.id); this.snippetManager.renameSnippet(snippet.id);
})); }));
buttonsDiv.appendChild(this.createButton('❌', 'delete-snippet', (e) => {
e.stopPropagation();
this.snippetManager.deleteSnippet(snippet.id);
}));
buttonsDiv.appendChild(this.createButton('📄', 'duplicate-snippet', (e) => { buttonsDiv.appendChild(this.createButton('📄', 'duplicate-snippet', (e) => {
e.stopPropagation(); e.stopPropagation();
this.snippetManager.duplicateSnippet(snippet.id); this.snippetManager.duplicateSnippet(snippet.id);
})); }));
buttonsDiv.appendChild(this.createButton('❌', 'delete-snippet', (e) => {
e.stopPropagation();
this.snippetManager.deleteSnippet(snippet.id);
}));
div.appendChild(buttonsDiv); div.appendChild(buttonsDiv);
container.appendChild(div); container.appendChild(div);
}); });
@@ -137,8 +143,8 @@ export class UIManager {
if (!versionSwitch) return; if (!versionSwitch) return;
versionSwitch.style.display = hasDraftChanges ? 'block' : 'none'; versionSwitch.style.display = hasDraftChanges ? 'block' : 'none';
versionSwitch.textContent = isDraftVersion ? versionSwitch.textContent = isDraftVersion ?
'View Saved' : 'View Saved' :
'View Draft'; 'View Draft';
} }
} }