Make nick links clickable

This commit is contained in:
Simon Ser 2020-06-25 18:45:41 +02:00
parent 4485950b67
commit c05af5bb6d
No known key found for this signature in database
GPG key ID: 0FDE7BE0E88F5E48
2 changed files with 36 additions and 9 deletions

View file

@ -48,6 +48,7 @@ export default class App extends Component {
this.handleConnectSubmit = this.handleConnectSubmit.bind(this);
this.handleBufferListClick = this.handleBufferListClick.bind(this);
this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
this.handleNickClick = this.handleNickClick.bind(this);
if (window.localStorage && localStorage.getItem("autoconnect")) {
var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
@ -310,11 +311,23 @@ export default class App extends Component {
this.connect(connectParams);
}
handleNickClick(nick) {
this.open(nick);
}
isChannel(name) {
// TODO: use the ISUPPORT token if available
return irc.STD_CHANNEL_TYPES.indexOf(name[0]) >= 0;
}
open(target) {
if (this.isChannel(target)) {
this.client.send({ command: "JOIN", params: [target] });
}
this.createBuffer(target);
this.switchBuffer(target);
}
close(target) {
if (target == SERVER_BUFFER) {
this.client.close();
@ -342,6 +355,14 @@ export default class App extends Component {
}
this.client.close();
break;
case "query":
var nick = args[0];
if (!nick) {
console.error("Missing nickname");
return;
}
this.open(nick);
break;
case "close":
var target = this.state.activeBuffer;
if (!target || target == SERVER_BUFFER) {
@ -444,7 +465,7 @@ export default class App extends Component {
${topbar}
<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>
<section id="buffer" ref=${this.buffer}>
<${Buffer} buffer=${activeBuffer}/>
<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>
</section>
</>
<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>

View file

@ -13,7 +13,7 @@ function djb2(s) {
function Nick(props) {
function handleClick(event) {
event.preventDefault();
// TODO
props.onClick();
}
var colorIndex = djb2(props.nick) % 16 + 1;
@ -25,6 +25,12 @@ function Nick(props) {
function LogLine(props) {
var msg = props.message;
function createNick(nick) {
return html`
<${Nick} nick=${nick} onClick=${() => props.onNickClick(nick)}/>
`;
}
var date = new Date(msg.tags["time"]);
var timestamp = date.toLocaleTimeString(undefined, {
timeStyle: "short",
@ -46,32 +52,32 @@ function LogLine(props) {
var action = text.slice(actionPrefix.length, -1);
lineClass = "me-tell";
content = html`* <${Nick} nick=${msg.prefix.name}/> ${linkify(action)}`;
content = html`* ${createNick(msg.prefix.name)} ${linkify(action)}`;
} else {
lineClass = "talk";
content = html`${"<"}<${Nick} nick=${msg.prefix.name}/>${">"} ${linkify(text)}`;
content = html`${"<"}${createNick(msg.prefix.name)}${">"} ${linkify(text)}`;
}
break;
case "JOIN":
content = html`
<${Nick} nick=${msg.prefix.name}/> has joined
${createNick(msg.prefix.name)} has joined
`;
break;
case "PART":
content = html`
<${Nick} nick=${msg.prefix.name}/> has left
${createNick(msg.prefix.name)} has left
`;
break;
case "NICK":
var newNick = msg.params[0];
content = html`
<${Nick} nick=${msg.prefix.name}/> is now known as <${Nick} nick=${newNick}/>
${createNick(msg.prefix.name)} is now known as <${Nick} nick=${newNick}/>
`;
break;
case "TOPIC":
var topic = msg.params[1];
content = html`
<${Nick} nick=${msg.prefix.name}/> changed the topic to: ${linkify(topic)}
${createNick(msg.prefix.name)} changed the topic to: ${linkify(topic)}
`;
break;
default:
@ -91,7 +97,7 @@ export default function Buffer(props) {
return html`
<div class="logline-list">
${props.buffer.messages.map((msg) => html`
<${LogLine} message=${msg}/>
<${LogLine} message=${msg} onNickClick=${props.onNickClick}/>
`)}
</div>
`;