Move closeChan functionality to vue.
This commit is contained in:
parent
5b17a2fbe4
commit
e73bf1e9a7
@ -1,5 +1,10 @@
|
|||||||
<template>
|
<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 class="name">{{ channel.name }}</span>
|
||||||
<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
|
<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
|
||||||
channel.unread | roundBadgeNumber
|
channel.unread | roundBadgeNumber
|
||||||
@ -12,13 +17,27 @@
|
|||||||
>
|
>
|
||||||
<span class="parted-channel-icon" />
|
<span class="parted-channel-icon" />
|
||||||
</span>
|
</span>
|
||||||
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
|
<span
|
||||||
<button class="close" aria-label="Leave" />
|
class="close-tooltip tooltipped tooltipped-w"
|
||||||
|
aria-label="Leave"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="close"
|
||||||
|
aria-label="Leave"
|
||||||
|
@click="close"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
|
<span
|
||||||
<button class="close" aria-label="Close" />
|
class="close-tooltip tooltipped tooltipped-w"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="close"
|
||||||
|
aria-label="Close"
|
||||||
|
@click="close"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</ChannelWrapper>
|
</ChannelWrapper>
|
||||||
@ -37,5 +56,10 @@ export default {
|
|||||||
network: Object,
|
network: Object,
|
||||||
channel: Object,
|
channel: Object,
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
close() {
|
||||||
|
this.$refs.wrapper.close();
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
:data-name="channel.name"
|
:data-name="channel.name"
|
||||||
:aria-controls="'#chan-' + channel.id"
|
:aria-controls="'#chan-' + channel.id"
|
||||||
:aria-selected="activeChannel && channel === activeChannel.channel"
|
:aria-selected="activeChannel && channel === activeChannel.channel"
|
||||||
|
:style="closed ? {transition: 'none', opacity: 0.4} : null"
|
||||||
role="tab"
|
role="tab"
|
||||||
>
|
>
|
||||||
<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
|
<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
|
||||||
@ -26,6 +27,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import socket from "../js/socket";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ChannelWrapper",
|
name: "ChannelWrapper",
|
||||||
props: {
|
props: {
|
||||||
@ -33,7 +36,30 @@ export default {
|
|||||||
channel: Object,
|
channel: Object,
|
||||||
activeChannel: Object,
|
activeChannel: Object,
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
closed: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
methods: {
|
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() {
|
getAriaLabel() {
|
||||||
const extra = [];
|
const extra = [];
|
||||||
|
|
||||||
|
@ -123,7 +123,16 @@ function addCloseItem() {
|
|||||||
className: "close",
|
className: "close",
|
||||||
displayName: getCloseDisplay,
|
displayName: getCloseDisplay,
|
||||||
data: (target) => target.attr("data-target"),
|
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
|
// See https://github.com/thelounge/thelounge/issues/2257
|
||||||
$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
|
$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
if (channel && channel.channel.usersOutdated) {
|
if (channel && channel.channel.usersOutdated) {
|
||||||
channel.channel.usersOutdated = false;
|
channel.channel.usersOutdated = false;
|
||||||
@ -205,10 +205,6 @@ window.vueMounted = () => {
|
|||||||
$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
|
$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
|
||||||
$("#changelog").on("click", "#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", () => {
|
$(document).on("visibilitychange focus click", () => {
|
||||||
utils.synchronizeNotifiedState();
|
utils.synchronizeNotifiedState();
|
||||||
});
|
});
|
||||||
|
@ -15,7 +15,6 @@ module.exports = {
|
|||||||
scrollIntoViewNicely,
|
scrollIntoViewNicely,
|
||||||
hasRoleInChannel,
|
hasRoleInChannel,
|
||||||
move,
|
move,
|
||||||
closeChan,
|
|
||||||
synchronizeNotifiedState,
|
synchronizeNotifiedState,
|
||||||
requestIdleCallback,
|
requestIdleCallback,
|
||||||
};
|
};
|
||||||
@ -121,31 +120,6 @@ function move(array, old_index, new_index) {
|
|||||||
return array;
|
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) {
|
function requestIdleCallback(callback, timeout) {
|
||||||
if (window.requestIdleCallback) {
|
if (window.requestIdleCallback) {
|
||||||
// During an idle period the user agent will run idle callbacks in FIFO order
|
// During an idle period the user agent will run idle callbacks in FIFO order
|
||||||
|
Loading…
Reference in New Issue
Block a user