Move closeChan functionality to vue.
This commit is contained in:
parent
5b17a2fbe4
commit
e73bf1e9a7
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
|
||||
<ChannelWrapper
|
||||
ref="wrapper"
|
||||
: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
|
||||
@ -12,13 +17,27 @@
|
||||
>
|
||||
<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"
|
||||
@click="close"
|
||||
/>
|
||||
</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"
|
||||
@click="close"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
</ChannelWrapper>
|
||||
@ -37,5 +56,10 @@ export default {
|
||||
network: Object,
|
||||
channel: Object,
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$refs.wrapper.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -19,6 +19,7 @@
|
||||
:data-name="channel.name"
|
||||
:aria-controls="'#chan-' + channel.id"
|
||||
:aria-selected="activeChannel && channel === activeChannel.channel"
|
||||
:style="closed ? {transition: 'none', opacity: 0.4} : null"
|
||||
role="tab"
|
||||
>
|
||||
<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
|
||||
@ -26,6 +27,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import socket from "../js/socket";
|
||||
|
||||
export default {
|
||||
name: "ChannelWrapper",
|
||||
props: {
|
||||
@ -33,7 +36,30 @@ export default {
|
||||
channel: Object,
|
||||
activeChannel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
closed: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
let cmd = "/close";
|
||||
|
||||
if (this.channel.type === "lobby") {
|
||||
cmd = "/quit";
|
||||
|
||||
if (!confirm(`Are you sure you want to remove ${this.channel.name}?`)) { // eslint-disable-line no-alert
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
this.closed = true;
|
||||
|
||||
socket.emit("input", {
|
||||
target: Number(this.channel.id),
|
||||
text: cmd,
|
||||
});
|
||||
},
|
||||
getAriaLabel() {
|
||||
const extra = [];
|
||||
|
||||
|
@ -123,7 +123,16 @@ function addCloseItem() {
|
||||
className: "close",
|
||||
displayName: getCloseDisplay,
|
||||
data: (target) => target.attr("data-target"),
|
||||
callback: (itemData) => utils.closeChan($(`.networks .chan[data-target="${itemData}"]`)),
|
||||
callback(itemData) {
|
||||
const close = document.querySelector(
|
||||
`.networks .chan[data-target="${itemData}"] .close`
|
||||
);
|
||||
|
||||
if (close) {
|
||||
// TODO: After context menus are ported to Vue, figure out a direct api
|
||||
close.click();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -161,7 +161,7 @@ window.vueMounted = () => {
|
||||
// See https://github.com/thelounge/thelounge/issues/2257
|
||||
$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
||||
if (channel && channel.channel.usersOutdated) {
|
||||
channel.channel.usersOutdated = false;
|
||||
@ -205,10 +205,6 @@ window.vueMounted = () => {
|
||||
$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
|
||||
$("#changelog").on("click", "#back-to-help", openWindow);
|
||||
|
||||
sidebar.on("click", ".close", function() {
|
||||
utils.closeChan($(this).closest(".chan"));
|
||||
});
|
||||
|
||||
$(document).on("visibilitychange focus click", () => {
|
||||
utils.synchronizeNotifiedState();
|
||||
});
|
||||
|
@ -15,7 +15,6 @@ module.exports = {
|
||||
scrollIntoViewNicely,
|
||||
hasRoleInChannel,
|
||||
move,
|
||||
closeChan,
|
||||
synchronizeNotifiedState,
|
||||
requestIdleCallback,
|
||||
};
|
||||
@ -121,31 +120,6 @@ function move(array, old_index, new_index) {
|
||||
return array;
|
||||
}
|
||||
|
||||
function closeChan(chan) {
|
||||
const socket = require("./socket");
|
||||
let cmd = "/close";
|
||||
|
||||
if (chan.hasClass("lobby")) {
|
||||
cmd = "/quit";
|
||||
const server = chan.find(".name").html();
|
||||
|
||||
// eslint-disable-next-line no-alert
|
||||
if (!confirm(`Are you sure you want to remove ${server}?`)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
socket.emit("input", {
|
||||
target: Number(chan.attr("data-id")),
|
||||
text: cmd,
|
||||
});
|
||||
chan.css({
|
||||
transition: "none",
|
||||
opacity: 0.4,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function requestIdleCallback(callback, timeout) {
|
||||
if (window.requestIdleCallback) {
|
||||
// During an idle period the user agent will run idle callbacks in FIFO order
|
||||
|
Loading…
Reference in New Issue
Block a user