Move closeChan functionality to vue.

This commit is contained in:
Richard Lewis 2019-03-03 21:43:57 +02:00 committed by Pavel Djundik
parent 5b17a2fbe4
commit e73bf1e9a7
5 changed files with 66 additions and 37 deletions

View File

@ -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>

View File

@ -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 = [];

View File

@ -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();
}
},
});
}

View File

@ -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();
});

View File

@ -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