Add room names to room view header, add a copy topic button and remove the display of the topics

This commit is contained in:
Raven Scott 2024-06-11 02:52:53 -04:00
parent 6eab069cc5
commit 7a74d3fc4d
3 changed files with 114 additions and 9 deletions

28
app.js
View File

@ -313,6 +313,15 @@ function exitEditMode(roomItem, input, topic) {
roomConfig.alias = newAlias; roomConfig.alias = newAlias;
writeConfigToFile("./config.json"); writeConfigToFile("./config.json");
} }
// Check if the edited room is the current room in view
const currentTopic = document.querySelector('#chat-room-topic').innerText;
if (currentTopic === topic) {
const chatRoomName = document.querySelector('#chat-room-name');
if (chatRoomName) {
chatRoomName.innerText = newAlias;
}
}
} else { } else {
roomItem.textContent = truncateHash(topic); roomItem.textContent = truncateHash(topic);
} }
@ -320,7 +329,24 @@ function exitEditMode(roomItem, input, topic) {
function switchRoom(topic) { function switchRoom(topic) {
console.log('Switching to room:', topic); // Debugging log console.log('Switching to room:', topic); // Debugging log
document.querySelector('#chat-room-topic').innerText = topic; // Set full topic here const chatRoomTopic = document.querySelector('#chat-room-topic');
const chatRoomName = document.querySelector('#chat-room-name');
if (chatRoomTopic) {
chatRoomTopic.innerText = topic; // Set full topic here
} else {
console.error('Element #chat-room-topic not found');
}
if (chatRoomName) {
// Update the room name in the header
const room = config.rooms.find(r => r.topic === topic);
const roomName = room ? room.alias : truncateHash(topic);
chatRoomName.innerText = roomName;
} else {
console.error('Element #chat-room-name not found');
}
clearMessages(); clearMessages();
renderMessagesForRoom(topic); renderMessagesForRoom(topic);

View File

@ -46,10 +46,9 @@
<div id="chat" class="hidden"> <div id="chat" class="hidden">
<div id="header"> <div id="header">
<div id="details"> <div id="details">
<div> <div style="display: inline;">
Topic: <span id="chat-room-topic"></span> <strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a>
</div> <span id="chat-room-topic" style="display: none;"></span>
<div>
</div> </div>
</div> </div>
<div id="user-list"> <div id="user-list">
@ -73,12 +72,71 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const messageInput = document.getElementById('message'); const messageInput = document.getElementById('message');
const copyTopicLink = document.getElementById('copy-topic-link');
const chatRoomTopic = document.getElementById('chat-room-topic');
if (messageInput) {
messageInput.addEventListener('keydown', function(event) { messageInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && !event.shiftKey) { if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault(); event.preventDefault();
document.getElementById('message-form').dispatchEvent(new Event('submit')); document.getElementById('message-form').dispatchEvent(new Event('submit'));
} }
}); });
}
if (copyTopicLink) {
copyTopicLink.addEventListener('click', function(event) {
event.preventDefault();
if (chatRoomTopic) {
const topic = chatRoomTopic.innerText;
navigator.clipboard.writeText(topic).then(() => {
alert('Topic copied to clipboard!');
}).catch(err => {
console.error('Failed to copy topic:', err);
});
} else {
console.error('Element #chat-room-topic not found');
}
});
}
const switchRoom = (topic) => {
console.log('Switching to room:', topic); // Debugging log
const chatRoomTopic = document.querySelector('#chat-room-topic');
const chatRoomName = document.querySelector('#chat-room-name');
if (chatRoomTopic) {
chatRoomTopic.innerText = topic; // Set full topic here
} else {
console.error('Element #chat-room-topic not found');
}
if (chatRoomName) {
// Update the room name in the header
const room = config.rooms.find(r => r.topic === topic);
const roomName = room ? room.alias : truncateHash(topic);
chatRoomName.innerText = roomName;
} else {
console.error('Element #chat-room-name not found');
}
clearMessages();
renderMessagesForRoom(topic);
// Show chat UI elements
document.querySelector('#chat').classList.remove('hidden');
document.querySelector('#setup').classList.add('hidden');
};
const roomList = document.querySelector('#room-list');
if (roomList) {
roomList.addEventListener('click', function(event) {
const roomItem = event.target.closest('li');
if (roomItem) {
switchRoom(roomItem.dataset.topic);
}
});
}
}); });
</script> </script>
</body> </body>

View File

@ -12,6 +12,27 @@ body {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
.mini-button {
display: inline-block;
padding: 3px 7px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #7289da;
border: none;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
}
.mini-button:hover {
background-color: #0056b3;
}
.bold {
font-weight: bold;
}
pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; } pear-ctrl[data-platform="darwin"] { float: right; margin-top: 4px; }
pear-ctrl { pear-ctrl {