forked from snxraven/LinkUp-P2P-Chat
Add room names to room view header, add a copy topic button and remove the display of the topics
This commit is contained in:
parent
6eab069cc5
commit
7a74d3fc4d
28
app.js
28
app.js
@ -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);
|
||||||
|
|
||||||
|
66
index.html
66
index.html
@ -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>
|
||||||
|
21
style.css
21
style.css
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user