Browse Source

Format js/vue with prettier

pull/3312/head
Alistair McKinlay 2 years ago
parent
commit
133e7bf710
  1. 120
      client/components/App.vue
  2. 34
      client/components/Channel.vue
  3. 17
      client/components/ChannelWrapper.vue
  4. 79
      client/components/Chat.vue
  5. 32
      client/components/ChatInput.vue
  6. 26
      client/components/ChatUserList.vue
  7. 10
      client/components/DateMarker.vue
  8. 13
      client/components/JoinChannel.vue
  9. 115
      client/components/LinkPreview.vue
  10. 2
      client/components/LinkPreviewToggle.vue
  11. 37
      client/components/Message.vue
  12. 89
      client/components/MessageCondensed.vue
  13. 20
      client/components/MessageList.vue
  14. 11
      client/components/MessageTypes/away.vue
  15. 6
      client/components/MessageTypes/back.vue
  16. 8
      client/components/MessageTypes/chghost.vue
  17. 2
      client/components/MessageTypes/ctcp.vue
  18. 2
      client/components/MessageTypes/ctcp_request.vue
  19. 10
      client/components/MessageTypes/invite.vue
  20. 10
      client/components/MessageTypes/kick.vue
  21. 7
      client/components/MessageTypes/motd.vue
  22. 11
      client/components/MessageTypes/part.vue
  23. 11
      client/components/MessageTypes/quit.vue
  24. 16
      client/components/MessageTypes/topic.vue
  25. 26
      client/components/MessageTypes/whois.vue
  26. 5
      client/components/NetworkList.vue
  27. 30
      client/components/NetworkLobby.vue
  28. 4
      client/components/ParsedMessage.vue
  29. 5
      client/components/Special/ListBans.vue
  30. 20
      client/components/Special/ListChannels.vue
  31. 5
      client/components/Special/ListIgnored.vue
  32. 5
      client/components/Special/ListInvites.vue
  33. 7
      client/components/Username.vue
  34. 2
      client/components/UsernameFiltered.vue
  35. 115
      client/js/autocompletion.js
  36. 12
      client/js/constants.js
  37. 37
      client/js/contextMenu.js
  38. 4
      client/js/contextMenuFactory.js
  39. 66
      client/js/keybinds.js
  40. 2
      client/js/libs/handlebars/colorClass.js
  41. 10
      client/js/libs/handlebars/ircmessageparser/anyIntersection.js
  42. 16
      client/js/libs/handlebars/ircmessageparser/findLinks.js
  43. 20
      client/js/libs/handlebars/ircmessageparser/merge.js
  44. 211
      client/js/libs/handlebars/ircmessageparser/parseStyle.js
  45. 108
      client/js/libs/handlebars/parse.js
  46. 3
      client/js/loading-error-handlers.js
  47. 9
      client/js/lounge.js
  48. 21
      client/js/options.js
  49. 59
      client/js/renderPreview.js
  50. 4
      client/js/slideout.js
  51. 9
      client/js/socket-events/auth.js
  52. 8
      client/js/socket-events/changelog.js
  53. 32
      client/js/socket-events/configuration.js
  54. 5
      client/js/socket-events/init.js
  55. 3
      client/js/socket-events/join.js
  56. 14
      client/js/socket-events/msg.js
  57. 17
      client/js/socket-events/network.js
  58. 3
      client/js/socket-events/open.js
  59. 5
      client/js/socket-events/part.js
  60. 6
      client/js/socket-events/setting.js
  61. 22
      client/js/socket-events/sync_sort.js
  62. 22
      client/js/upload.js
  63. 5
      client/js/utils.js
  64. 142
      client/js/webpush.js
  65. 60
      client/service-worker.js
  66. 19
      client/views/index.js
  67. 8
      index.js
  68. 253
      scripts/changelog.js
  69. 21
      scripts/generate-config-doc.js
  70. 28
      scripts/generate-emoji.js
  71. 200
      src/client.js
  72. 55
      src/clientManager.js
  73. 17
      src/command-line/index.js
  74. 82
      src/command-line/install.js
  75. 11
      src/command-line/start.js
  76. 22
      src/command-line/uninstall.js
  77. 18
      src/command-line/upgrade.js
  78. 55
      src/command-line/users/add.js
  79. 9
      src/command-line/users/edit.js
  80. 9
      src/command-line/users/list.js
  81. 33
      src/command-line/users/reset.js
  82. 63
      src/command-line/utils.js
  83. 91
      src/helper.js
  84. 40
      src/identification.js
  85. 5
      src/log.js
  86. 7
      src/models/chan.js
  87. 6
      src/models/msg.js
  88. 62
      src/models/network.js
  89. 8
      src/plugins/auth/ldap.js
  90. 16
      src/plugins/auth/local.js
  91. 2
      src/plugins/changelog.js
  92. 43
      src/plugins/inputs/action.js
  93. 3
      src/plugins/inputs/away.js
  94. 46
      src/plugins/inputs/ban.js
  95. 11
      src/plugins/inputs/connect.js
  96. 24
      src/plugins/inputs/ctcp.js
  97. 201
      src/plugins/inputs/ignore.js
  98. 18
      src/plugins/inputs/invite.js
  99. 11
      src/plugins/inputs/kick.js
  100. 36
      src/plugins/inputs/mode.js

120
client/components/App.vue

@ -1,8 +1,5 @@
<template>
<div
id="viewport"
role="tablist"
>
<div id="viewport" role="tablist">
<aside id="sidebar">
<div class="scrollable-area">
<div class="logo-container">
@ -10,62 +7,55 @@
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
class="logo"
alt="The Lounge"
>
/>
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
:src="
`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
"
class="logo-inverted"
alt="The Lounge"
>
/>
</div>
<NetworkList
:networks="networks"
:active-channel="activeChannel"
/>
<NetworkList :networks="networks" :active-channel="activeChannel" />
</div>
<footer id="footer">
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Sign in"
><button
class="icon sign-in"
data-target="#sign-in"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
><button
class="icon sign-in"
data-target="#sign-in"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network"
><button
class="icon connect"
data-target="#connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
><button
class="icon connect"
data-target="#connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Settings"
><button
class="icon settings"
data-target="#settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
><button
class="icon settings"
data-target="#settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Help"
><button
class="icon help"
data-target="#help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
><button
class="icon help"
data-target="#help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false"
/></span>
</footer>
</aside>
@ -76,35 +66,11 @@
:network="activeChannel.network"
:channel="activeChannel.channel"
/>
<div
id="sign-in"
class="window"
role="tabpanel"
aria-label="Sign-in"
/>
<div
id="connect"
class="window"
role="tabpanel"
aria-label="Connect"
/>
<div
id="settings"
class="window"
role="tabpanel"
aria-label="Settings"
/>
<div
id="help"
class="window"
role="tabpanel"
aria-label="Help"
/>
<div
id="changelog"
class="window"
aria-label="Changelog"
/>
<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in" />
<div id="connect" class="window" role="tabpanel" aria-label="Connect" />
<div id="settings" class="window" role="tabpanel" aria-label="Settings" />
<div id="help" class="window" role="tabpanel" aria-label="Help" />
<div id="changelog" class="window" aria-label="Changelog" />
</article>
</div>
</template>

34
client/components/Channel.vue

@ -1,15 +1,9 @@
<template>
<ChannelWrapper
:network="network"
:channel="channel"
:active-channel="activeChannel"
>
<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
<span class="name">{{ channel.name }}</span>
<span
v-if="channel.unread"
:class="{ highlight: channel.highlight }"
class="badge"
>{{ channel.unread | roundBadgeNumber }}</span>
<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
channel.unread | roundBadgeNumber
}}</span>
<template v-if="channel.type === 'channel'">
<span
v-if="channel.state === 0"
@ -18,25 +12,13 @@
>
<span class="parted-channel-icon" />
</span>
<span
class="close-tooltip tooltipped tooltipped-w"
aria-label="Leave"
>
<button
class="close"
aria-label="Leave"
/>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
<button class="close" aria-label="Leave" />
</span>
</template>
<template v-else>
<span
class="close-tooltip tooltipped tooltipped-w"
aria-label="Close"
>
<button
class="close"
aria-label="Close"
/>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
<button class="close" aria-label="Close" />
</span>
</template>
</ChannelWrapper>

17
client/components/ChannelWrapper.vue

@ -1,11 +1,16 @@
<template>
<div
v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
v-if="
!network.isCollapsed ||
channel.highlight ||
channel.type === 'lobby' ||
(activeChannel && channel === activeChannel.channel)
"
:class="[
'chan',
channel.type,
{ active: activeChannel && channel === activeChannel.channel },
{ 'parted-channel': channel.type === 'channel' && channel.state === 0 }
{active: activeChannel && channel === activeChannel.channel},
{'parted-channel': channel.type === 'channel' && channel.state === 0},
]"
:aria-label="getAriaLabel()"
:title="getAriaLabel()"
@ -16,11 +21,7 @@
:aria-selected="activeChannel && channel === activeChannel.channel"
role="tab"
>
<slot
:network="network"
:channel="channel"
:activeChannel="activeChannel"
/>
<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
</div>
</template>

79
client/components/Chat.vue

@ -1,8 +1,5 @@
<template>
<div
id="chat-container"
class="window"
>
<div id="chat-container" class="window">
<div
id="chat"
:data-id="channel.id"
@ -21,38 +18,24 @@
role="tabpanel"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list"
/>
<button class="lt" aria-label="Toggle channel list" />
<span class="title">{{ channel.name }}</span>
<span
:title="channel.topic"
class="topic"
><ParsedMessage
v-if="channel.topic"
:network="network"
:text="channel.topic"
<span :title="channel.topic" class="topic"
><ParsedMessage
v-if="channel.topic"
:network="network"
:text="channel.topic"
/></span>
<button
class="menu"
aria-label="Open the context menu"
/>
<button class="menu" aria-label="Open the context menu" />
<span
v-if="channel.type === 'channel'"
class="rt-tooltip tooltipped tooltipped-w"
aria-label="Toggle user list"
>
<button
class="rt"
aria-label="Toggle user list"
/>
<button class="rt" aria-label="Toggle user list" />
</span>
</div>
<div
v-if="channel.type === 'special'"
class="chat-content"
>
<div v-if="channel.type === 'special'" class="chat-content">
<div class="chat">
<div class="messages">
<div class="msg">
@ -65,26 +48,19 @@
</div>
</div>
</div>
<div
v-else
class="chat-content"
>
<div v-else class="chat-content">
<div
:class="['scroll-down tooltipped tooltipped-w tooltipped-no-touch', {'scroll-down-shown': !channel.scrolledToBottom}]"
:class="[
'scroll-down tooltipped tooltipped-w tooltipped-no-touch',
{'scroll-down-shown': !channel.scrolledToBottom},
]"
aria-label="Jump to recent messages"
@click="$refs.messageList.jumpToBottom()"
>
<div class="scroll-down-arrow" />
</div>
<MessageList
ref="messageList"
:network="network"
:channel="channel"
/>
<ChatUserList
v-if="channel.type === 'channel'"
:channel="channel"
/>
<MessageList ref="messageList" :network="network" :channel="channel" />
<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
</div>
</div>
</div>
@ -92,12 +68,11 @@
v-if="this.$root.currentUserVisibleError"
id="user-visible-error"
@click="hideUserVisibleError"
>{{ this.$root.currentUserVisibleError }}</div>
>
{{ this.$root.currentUserVisibleError }}
</div>
<span id="upload-progressbar" />
<ChatInput
:network="network"
:channel="channel"
/>
<ChatInput :network="network" :channel="channel" />
</div>
</template>
@ -126,10 +101,14 @@ export default {
computed: {
specialComponent() {
switch (this.channel.special) {
case "list_bans": return ListBans;
case "list_invites": return ListInvites;
case "list_channels": return ListChannels;
case "list_ignored": return ListIgnored;
case "list_bans":
return ListBans;
case "list_invites":
return ListInvites;
case "list_channels":
return ListChannels;
case "list_ignored":
return ListIgnored;
}
return undefined;

32
client/components/ChatInput.vue

@ -1,10 +1,5 @@
<template>
<form
id="form"
method="post"
action=""
@submit.prevent="onSubmit"
>
<form id="form" method="post" action="" @submit.prevent="onSubmit">
<span id="nick">{{ network.nick }}</span>
<textarea
id="input"
@ -23,12 +18,7 @@
aria-label="Upload file"
@click="openFileUpload"
>
<input
id="upload-input"
ref="uploadInput"
type="file"
multiple
>
<input id="upload-input" ref="uploadInput" type="file" multiple />
<button
id="upload"
type="button"
@ -80,7 +70,7 @@ const bracketWraps = {
"*": "*",
"`": "`",
"~": "~",
"_": "_",
_: "_",
};
export default {
@ -130,7 +120,9 @@ export default {
}
if (this.channel.inputHistoryPosition === 0) {
this.channel.inputHistory[this.channel.inputHistoryPosition] = this.channel.pendingMessage;
this.channel.inputHistory[
this.channel.inputHistoryPosition
] = this.channel.pendingMessage;
}
if (key === "up") {
@ -141,7 +133,9 @@ export default {
this.channel.inputHistoryPosition--;
}
this.channel.pendingMessage = this.$refs.input.value = this.channel.inputHistory[this.channel.inputHistoryPosition];
this.channel.pendingMessage = this.$refs.input.value = this.channel.inputHistory[
this.channel.inputHistoryPosition
];
this.setInputSize();
return false;
@ -173,7 +167,8 @@ export default {
// Use scrollHeight to calculate how many lines there are in input, and ceil the value
// because some browsers tend to incorrently round the values when using high density
// displays or using page zoom feature
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
this.$refs.input.style.height =
Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
});
},
getInputPlaceholder(channel) {
@ -219,7 +214,10 @@ export default {
const args = text.substr(1).split(" ");
const cmd = args.shift().toLowerCase();
if (Object.prototype.hasOwnProperty.call(commands, cmd) && commands[cmd].input(args)) {
if (
Object.prototype.hasOwnProperty.call(commands, cmd) &&
commands[cmd].input(args)
) {
return false;
}
}

26
client/components/ChatUserList.vue

@ -1,14 +1,12 @@
<template>
<aside
ref="userlist"
class="userlist"
@mouseleave="removeHoverUser"
>
<aside ref="userlist" class="userlist" @mouseleave="removeHoverUser">
<div class="count">
<input
ref="input"
:value="userSearchInput"
:placeholder="channel.users.length + ' user' + (channel.users.length === 1 ? '' : 's')"
:placeholder="
channel.users.length + ' user' + (channel.users.length === 1 ? '' : 's')
"
type="search"
class="search"
aria-label="Search among the user list"
@ -19,7 +17,7 @@
@keydown.page-up="navigateUserList($event, -10)"
@keydown.page-down="navigateUserList($event, 10)"
@keydown.enter="selectUser"
>
/>
</div>
<div class="names">
<div
@ -84,15 +82,11 @@ export default {
// filteredUsers is computed, to avoid unnecessary filtering
// as it is shared between filtering and keybindings.
filteredUsers() {
return fuzzy.filter(
this.userSearchInput,
this.channel.users,
{
pre: "<b>",
post: "</b>",
extract: (u) => u.nick,
}
);
return fuzzy.filter(this.userSearchInput, this.channel.users, {
pre: "<b>",
post: "</b>",
extract: (u) => u.nick,
});
},
groupedUsers() {
const groups = {};

10
client/components/DateMarker.vue

@ -1,13 +1,7 @@
<template>
<div
:aria-label="localeDate"
class="date-marker-container tooltipped tooltipped-s"
>
<div :aria-label="localeDate" class="date-marker-container tooltipped tooltipped-s">
<div class="date-marker">
<span
:data-label="friendlyDate()"
class="date-marker-text"
/>
<span :data-label="friendlyDate()" class="date-marker-text" />
</div>
</div>
</template>

13
client/components/JoinChannel.vue

@ -19,7 +19,7 @@
maxlength="200"
title="The channel name may not contain spaces"
required
>
/>
<input
v-model="inputPassword"
type="password"
@ -30,11 +30,8 @@
maxlength="200"
title="The channel password may not contain spaces"
autocomplete="new-password"
>
<button
type="submit"
class="btn btn-small"
>Join</button>
/>
<button type="submit" class="btn btn-small">Join</button>
</form>
</template>
@ -63,7 +60,9 @@ export default {
methods: {
onSubmit() {
const channelToFind = this.inputChannel.toLowerCase();
const existingChannel = this.network.channels.find((c) => c.name.toLowerCase() === channelToFind);
const existingChannel = this.network.channels.find(
(c) => c.name.toLowerCase() === channelToFind
);
if (existingChannel) {
const $ = require("jquery");

115
client/components/LinkPreview.vue

@ -1,13 +1,8 @@
<template>
<div
v-if="link.shown"
v-show="link.canDisplay"
ref="container"
class="preview"
>
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview">
<div
ref="content"
:class="['toggle-content', 'toggle-type-' + link.type, { opened: isContentShown }]"
:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
>
<template v-if="link.type === 'link'">
<a
@ -25,7 +20,7 @@
@error="onThumbnailError"
@abort="onThumbnailError"
@load="onPreviewReady"
>
/>
</a>
<div class="toggle-text">
<div class="head">
@ -35,7 +30,8 @@
:title="link.head"
target="_blank"
rel="noopener"
>{{ link.head }}</a>
>{{ link.head }}</a
>
</div>
<button
@ -44,81 +40,48 @@
:aria-label="moreButtonLabel"
class="more"
@click="onMoreClick"
><span class="more-caret" /></button>
>
<span class="more-caret" />
</button>
</div>
<div class="body overflowable">
<a
:href="link.link"
:title="link.body"
target="_blank"
rel="noopener"
>{{ link.body }}</a>
<a :href="link.link" :title="link.body" target="_blank" rel="noopener">{{
link.body
}}</a>
</div>
</div>
</template>
<template v-else-if="link.type === 'image'">
<a
:href="link.link"
class="toggle-thumbnail"
target="_blank"
rel="noopener"
>
<img
:src="link.thumb"
decoding="async"
alt=""
@load="onPreviewReady"
>
<a :href="link.link" class="toggle-thumbnail" target="_blank" rel="noopener">
<img :src="link.thumb" decoding="async" alt="" @load="onPreviewReady" />
</a>
</template>
<template v-else-if="link.type === 'video'">
<video
preload="metadata"
controls
@canplay="onPreviewReady"
>
<source
:src="link.media"
:type="link.mediaType"
>
<video preload="metadata" controls @canplay="onPreviewReady">
<source :src="link.media" :type="link.mediaType" />
</video>
</template>
<template v-else-if="link.type === 'audio'">
<audio
controls
preload="metadata"
@canplay="onPreviewReady"
>
<source
:src="link.media"
:type="link.mediaType"
>
<audio controls preload="metadata" @canplay="onPreviewReady">
<source :src="link.media" :type="link.mediaType" />
</audio>
</template>
<template v-else-if="link.type === 'error'">
<em v-if="link.error === 'image-too-big'">
This image is larger than {{ link.maxSize | friendlysize }} and cannot be
previewed.
<a
:href="link.link"
target="_blank"
rel="noopener"
>Click here</a>
<a :href="link.link" target="_blank" rel="noopener">Click here</a>
to open it in a new window.
</em>
<template v-else-if="link.error === 'message'">
<div>
<em>
A preview could not be loaded.
<a
:href="link.link"
target="_blank"
rel="noopener"
>Click here</a>
<a :href="link.link" target="_blank" rel="noopener">Click here</a>
to open it in a new window.
</em>
<br>
<br />
<pre class="prefetch-error">{{ link.message }}</pre>
</div>
@ -127,7 +90,9 @@
:aria-label="moreButtonLabel"
class="more"
@click="onMoreClick"
><span class="more-caret" /></button>
>
<span class="more-caret" />
</button>
</template>
</template>
</div>
@ -217,27 +182,31 @@ export default {
return;
}
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
this.showMoreButton =
this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
});
},
updateShownState() {
let defaultState = true;
switch (this.link.type) {
case "error":
defaultState = this.link.error === "image-too-big" ? this.$root.settings.media : this.$root.settings.links;
break;
case "loading":
defaultState = false;
break;
case "link":
defaultState = this.$root.settings.links;
break;
default:
defaultState = this.$root.settings.media;
case "error":
defaultState =
this.link.error === "image-too-big"
? this.$root.settings.media
: this.$root.settings.links;
break;
case "loading":
defaultState = false;
break;
case "link":
defaultState = this.$root.settings.links;
break;
default:
defaultState = this.$root.settings.media;
}
this.link.shown = this.link.shown && defaultState;

2
client/components/LinkPreviewToggle.vue

@ -1,7 +1,7 @@
<template>
<button
v-if="link.type !== 'loading'"
:class="['toggle-button', 'toggle-preview', { opened: link.shown }]"
:class="['toggle-button', 'toggle-preview', {opened: link.shown}]"
:aria-label="ariaLabel"
@click="onClick"
/>

37
client/components/Message.vue

@ -4,26 +4,18 @@
:class="['msg', message.type, {self: message.self, highlight: message.highlight}]"
:data-from="message.from && message.from.nick"
>
<span
:aria-label="message.time | localetime"
class="time tooltipped tooltipped-e"
>{{ messageTime }} </span>
<span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e"
>{{ messageTime }}
</span>
<template v-if="message.type === 'unhandled'">
<span class="from">[{{ message.command }}]</span>
<span class="content">
<span
v-for="(param, id) in message.params"
:key="id"
>{{ param }} </span>
<span v-for="(param, id) in message.params" :key="id">{{ param }} </span>
</span>
</template>
<template v-else-if="isAction()">
<span class="from"><span class="only-copy">*** </span></span>
<Component
:is="messageComponent"
:network="network"
:message="message"
/>
<Component :is="messageComponent" :network="network" :message="message" />
</template>
<template v-else-if="message.type === 'action'">
<span class="from"><span class="only-copy">* </span></span>
@ -41,20 +33,14 @@
</span>
</template>
<template v-else>
<span
v-if="message.type === 'message'"
class="from"
>
<span v-if="message.type === 'message'" class="from">
<template v-if="message.from && message.from.nick">
<span class="only-copy">&lt;</span>
<Username :user="message.from" />
<span class="only-copy">&gt; </span>
</template>
</span>
<span
v-else
class="from"
>
<span v-else class="from">
<template v-if="message.from && message.from.nick">
<span class="only-copy">-</span>
<Username :user="message.from" />
@ -62,10 +48,7 @@
</template>
</span>
<span class="content">
<ParsedMessage
:network="network"
:message="message"
/>
<ParsedMessage :network="network" :message="message" />
<LinkPreview
v-for="preview in message.previews"
:key="preview.link"
@ -100,7 +83,9 @@ export default {
},
computed: {
messageTime() {
const format = this.$root.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
const format = this.$root.settings.showSeconds
? constants.timeFormats.msgWithSeconds
: constants.timeFormats.msgDefault;
return moment(this.message.time).format(format);
},

89
client/components/MessageCondensed.vue

@ -1,14 +1,11 @@
<template>
<div :class="[ 'msg', 'condensed', { closed: isCollapsed } ]">
<div :class="['msg', 'condensed', {closed: isCollapsed}]">
<div class="condensed-summary">
<span class="time" />
<span class="from" />
<span
class="content"
@click="onCollapseClick"
>{{ condensedText }}<button
class="toggle-button"
aria-label="Toggle status messages"
<span class="content" @click="onCollapseClick"
>{{ condensedText
}}<button class="toggle-button" aria-label="Toggle status messages"
/></span>
</div>
<Message
@ -58,30 +55,60 @@ export default {
constants.condensedTypes.forEach((type) => {
if (obj[type]) {
switch (type) {
case "away":
strings.push(obj[type] + (obj[type] > 1 ? " users have gone away" : " user has gone away"));
break;
case "back":
strings.push(obj[type] + (obj[type] > 1 ? " users have come back" : " user has come back"));
break;
case "chghost":
strings.push(obj[type] + (obj[type] > 1 ? " users have changed hostname" : " user has changed hostname"));
break;
case "join":
strings.push(obj[type] + (obj[type] > 1 ? " users have joined" : " user has joined"));
break;
case "part":
strings.push(obj[type] + (obj[type] > 1 ? " users have left" : " user has left"));
break;
case "nick":
strings.push(obj[type] + (obj[type] > 1 ? " users have changed nick" : " user has changed nick"));
break;
case "kick":
strings.push(obj[type] + (obj[type] > 1 ? " users were kicked" : " user was kicked"));
break;
case "mode":
strings.push(obj[type] + (obj[type] > 1 ? " modes were set" : " mode was set"));
break;
case "away":
strings.push(
obj[type] +
(obj[type] > 1
? " users have gone away"
: " user has gone away")
);
break;
case "back":
strings.push(
obj[type] +
(obj[type] > 1
? " users have come back"
: " user has come back")
);
break;
case "chghost":
strings.push(
obj[type] +
(obj[type] > 1
? " users have changed hostname"
: " user has changed hostname")
);
break;
case "join":
strings.push(
obj[type] +
(obj[type] > 1 ? " users have joined" : " user has joined")
);
break;
case "part":
strings.push(
obj[type] + (obj[type] > 1 ? " users have left" : " user has left")
);
break;
case "nick":
strings.push(
obj[type] +
(obj[type] > 1
? " users have changed nick"
: " user has changed nick")
);
break;
case "kick":
strings.push(
obj[type] +
(obj[type] > 1 ? " users were kicked" : " user was kicked")
);
break;
case "mode":
strings.push(
obj[type] + (obj[type] > 1 ? " modes were set" : " mode was set")
);
break;
}
}
});

20
client/components/MessageList.vue

@ -1,10 +1,6 @@
<template>
<div
ref="chat"
class="chat"
tabindex="-1"
>
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
<div ref="chat" class="chat" tabindex="-1">
<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
<button
ref="loadMoreButton"
:disabled="channel.historyLoading || !$root.isConnected"
@ -85,7 +81,9 @@ export default {
// If actions are hidden, just return a message list with them excluded
if (this.$root.settings.statusMessages === "hidden") {
return this.channel.messages.filter((message) => !constants.condensedTypes.includes(message.type));
return this.channel.messages.filter(
(message) => !constants.condensedTypes.includes(message.type)
);
}
// If actions are not condensed, just return raw message list
@ -99,7 +97,11 @@ export default {
for (const message of this.channel.messages) {
// If this message is not condensable, or its an action affecting our user,
// then just append the message to container and be done with it
if (message.self || message.highlight || !constants.condensedTypes.includes(message.type)) {
if (
message.self ||
message.highlight ||
!constants.condensedTypes.includes(message.type)
) {
lastCondensedContainer = null;
condensed.push(message);
@ -199,7 +201,7 @@ export default {
return true;
}
return (new Date(previousMessage.time)).getDay() !== (new Date(message.time)).getDay();
return new Date(previousMessage.time).getDay() !== new Date(message.time).getDay();
},
shouldDisplayUnreadMarker(id) {
if (!this.unreadMarkerShown && id > this.channel.firstUnread) {

11
client/components/MessageTypes/away.vue

@ -1,17 +1,10 @@
<template>
<span class="content">
<ParsedMessage
v-if="message.self"
:network="network"
:message="message"
/>
<ParsedMessage v-if="message.self" :network="network" :message="message" />
<template v-else>
<Username :user="message.from" />
is away
<i class="away-message">(<ParsedMessage
:network="network"
:message="message"
/>)</i>
<i class="away-message">(<ParsedMessage :network="network" :message="message" />)</i>
</template>
</span>
</template>

6
client/components/MessageTypes/back.vue

@ -1,10 +1,6 @@
<template>
<span class="content">
<ParsedMessage
v-if="message.self"
:network="network"
:message="message"
/>
<ParsedMessage v-if="message.self" :network="network" :message="message" />
<template v-else>
<Username :user="message.from" />
is back

8
client/components/MessageTypes/chghost.vue

@ -2,8 +2,12 @@
<span class="content">
<Username :user="message.from" />
has changed
<span v-if="message.new_ident">username to <b>{{ message.new_ident }}</b></span>
<span v-if="message.new_host">hostname to <i class="hostmask">{{ message.new_host }}</i></span>
<span v-if="message.new_ident"
>username to <b>{{ message.new_ident }}</b></span
>
<span v-if="message.new_host"
>hostname to <i class="hostmask">{{ message.new_host }}</i></span
>
</span>
</template>

2
client/components/MessageTypes/ctcp.vue

@ -1,7 +1,7 @@
<template>
<span class="content">
<Username :user="message.from" />&#32;
<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
</span>
</template>

2
client/components/MessageTypes/ctcp_request.vue

@ -2,7 +2,7 @@
<span class="content">
<Username :user="message.from" />
sent a <abbr title="Client-to-client protocol">CTCP</abbr> request:
<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
</span>
</template>

10
client/components/MessageTypes/invite.vue

@ -3,14 +3,8 @@
<Username :user="message.from" />
invited
<span v-if="message.invitedYou">you</span>
<Username
v-else
:user="message.target"
/>
to <ParsedMessage
:network="network"
:text="message.channel"
/>
<Username v-else :user="message.target" />
to <ParsedMessage :network="network" :text="message.channel" />
</span>
</template>

10
client/components/MessageTypes/kick.vue

@ -3,13 +3,9 @@
<Username :user="message.from" />
has kicked
<Username :user="message.target" />
<i
v-if="message.text"
class="part-reason"
> (<ParsedMessage
:network="network"
:message="message"
/>)</i>
<i v-if="message.text" class="part-reason">
(<ParsedMessage :network="network" :message="message" />)</i
>
</span>
</template>

7
client/components/MessageTypes/motd.vue

@ -1,9 +1,6 @@
<template>
<span class="content">
<span class="text"><ParsedMessage
:network="network"
:text="cleanText"
/></span>
<span class="text"><ParsedMessage :network="network" :text="cleanText"/></span>
</span>
</template>
@ -31,7 +28,7 @@ export default {
// Remove empty lines around the MOTD (but not within it)
return lines
.map((line) => line.replace(/\s*$/,""))
.map((line) => line.replace(/\s*$/, ""))
.join("\n")
.replace(/^[\r\n]+|[\r\n]+$/g, "");
},

11
client/components/MessageTypes/part.vue

@ -1,13 +1,10 @@
<template>
<span class="content">
<Username :user="message.from" />
<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel <i
v-if="message.text"
class="part-reason"
>(<ParsedMessage
:network="network"
:message="message"
/>)</i>
<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel
<i v-if="message.text" class="part-reason"
>(<ParsedMessage :network="network" :message="message" />)</i
>
</span>
</template>

11
client/components/MessageTypes/quit.vue

@ -1,13 +1,10 @@
<template>
<span class="content">
<Username :user="message.from" />
<i class="hostmask"> ({{ message.hostmask }})</i> has quit <i
v-if="message.text"
class="quit-reason"
>(<ParsedMessage
:network="network"
:message="message"
/>)</i>
<i class="hostmask"> ({{ message.hostmask }})</i> has quit
<i v-if="message.text" class="quit-reason"
>(<ParsedMessage :network="network" :message="message" />)</i
>
</span>
</template>

16
client/components/MessageTypes/topic.vue

@ -1,13 +1,13 @@
<template>
<span class="content">
<template v-if="message.from && message.from.nick"><Username :user="message.from" /> has changed the topic to: </template>
<template v-else>The topic is: </template>
<span
v-if="message.text"
class="new-topic"
><ParsedMessage
:network="network"
:message="message"
<template v-if="message.from && message.from.nick"
><Username :user="message.from" /> has changed the topic to:
</template>
<template v-else
>The topic is:
</template>
<span v-if="message.text" class="new-topic"
><ParsedMessage :network="network" :message="message"
/></span>
</span>
</template>

26
client/components/MessageTypes/whois.vue

@ -21,17 +21,17 @@
:href="'https://ipinfo.io/' + message.whois.actual_ip"
target="_blank"
rel="noopener"
>{{ message.whois.actual_ip }}</a>
<i v-if="message.whois.actual_hostname != message.whois.actual_ip"> ({{ message.whois.actual_hostname }})</i>
>{{ message.whois.actual_ip }}</a
>
<i v-if="message.whois.actual_hostname != message.whois.actual_ip">
({{ message.whois.actual_hostname }})</i
>
</dd>
</template>
<template v-if="message.whois.real_name">
<dt>Real name:</dt>
<dd><ParsedMessage
:network="network"
:text="message.whois.real_name"
/></dd>
<dd><ParsedMessage :network="network" :text="message.whois.real_name" /></dd>
</template>
<template v-if="message.whois.registered_nick">
@ -41,10 +41,7 @@
<template v-if="message.whois.channels">
<dt>Channels:</dt>
<dd><ParsedMessage
:network="network"
:text="message.whois.channels"
/></dd>
<dd><ParsedMessage :network="network" :text="message.whois.channels" /></dd>
</template>
<template v-if="message.whois.modes">
@ -76,10 +73,7 @@
<template v-if="message.whois.away">
<dt>Away:</dt>
<dd><ParsedMessage
:network="network"
:text="message.whois.away"
/></dd>
<dd><ParsedMessage :network="network" :text="message.whois.away" /></dd>
</template>
<template v-if="message.whois.secure">
@ -89,7 +83,9 @@
<template v-if="message.whois.server">
<dt>Connected to:</dt>
<dd>{{ message.whois.server }} <i>({{ message.whois.server_info }})</i></dd>
<dd>
{{ message.whois.server }} <i>({{ message.whois.server_info }})</i>
</dd>
</template>
<template v-if="message.whois.logonTime">

5
client/components/NetworkList.vue

@ -1,8 +1,5 @@
<template>
<div
v-if="networks.length === 0"
class="empty"
>
<div v-if="networks.length === 0" class="empty">
You are not connected to any networks yet.
</div>
<Draggable

30
client/components/NetworkLobby.vue

@ -1,9 +1,5 @@
<template>
<ChannelWrapper
:network="network"
:channel="channel"
:active-channel="activeChannel"
>
<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
<button
v-if="network.channels.length > 1"
:aria-controls="'network-' + network.uuid"
@ -11,16 +7,12 @@
:aria-expanded="!network.isCollapsed"
class="collapse-network"
@click.stop="onCollapseClick"
><span class="collapse-network-icon" /></button>
<span
v-else
class="collapse-network"
/>
>
<span class="collapse-network-icon" />
</button>
<span v-else class="collapse-network" />
<div class="lobby-wrap">
<span
:title="channel.name"
class="name"
>{{ channel.name }}</span>
<span :title="channel.name" class="name">{{ channel.name }}</span>
<span
v-if="network.status.connected && !network.status.secure"
class="not-secure-tooltip tooltipped tooltipped-w"
@ -35,18 +27,16 @@
>
<span class="not-connected-icon" />
</span>
<span
v-if="channel.unread"
:class="{ highlight: channel.highlight }"
class="badge"
>{{ channel.unread | roundBadgeNumber }}</span>
<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
channel.unread | roundBadgeNumber
}}</span>
</div>
<span
:aria-label="joinChannelLabel"
class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
>
<button
:class="['add-channel', { opened: isJoinChannelShown }]"
:class="['add-channel', {opened: isJoinChannelShown}]"
:aria-controls="'join-channel-' + channel.id"
:aria-label="joinChannelLabel"
@click.stop="$emit('toggleJoinChannel')"

4
client/components/ParsedMessage.vue

@ -12,7 +12,9 @@ export default {
render(createElement, context) {