Add connected state

This commit is contained in:
Pavel Djundik 2018-07-08 20:53:23 +03:00 committed by Pavel Djundik
parent 3300276c27
commit a229138ca6
7 changed files with 21 additions and 32 deletions

View File

@ -45,19 +45,16 @@
</div>
<div class="chat-content">
<div class="chat">
<div
v-if="channel.messages.length > 0"
ref="loadMoreButton"
:disabled="channel.historyLoading"
class="show-more show"
@click="onShowMoreClick"
>
<div class="show-more">
<button
v-if="channel.historyLoading"
class="btn">Loading</button>
<button
v-else
class="btn">Show older messages</button>
ref="loadMoreButton"
:disabled="channel.historyLoading || !$root.connected"
class="btn"
@click="onShowMoreClick"
>
<span v-if="channel.historyLoading">Loading</span>
<span v-else>Show older messages</span>
</button>
</div>
<MessageList :channel="channel"/>
</div>

View File

@ -11,10 +11,12 @@
v-model="channel.pendingMessage"
:placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)"
:disabled="!$root.connected"
class="mousetrap"
@keyup.enter="onSubmit"
/>
<span
v-if="$root.connected"
id="submit-tooltip"
class="tooltipped tooltipped-w tooltipped-no-touch"
aria-label="Send message">

View File

@ -1080,7 +1080,6 @@ background on hover (unless active) */
}
#chat .show-more {
display: none;
padding: 10px;
padding-top: 15px;
padding-bottom: 0;

View File

@ -28,8 +28,8 @@ socket.on("init", function(data) {
}
$("#connection-error").removeClass("shown");
$(".show-more button, #input").prop("disabled", false);
$("#submit").show();
vueApp.connected = true;
if (lastMessageId < 0) {
if (data.token) {

View File

@ -7,19 +7,12 @@ const {vueApp, findChannel} = require("../vue");
socket.on("more", function(data) {
let chan = $("#chat #chan-" + data.chan);
const type = chan.data("type");
chan = chan.find(".messages");
// get the scrollable wrapper around messages
const scrollable = chan.closest(".chat");
const heightOld = chan.height() - scrollable.scrollTop();
// If there are no more messages to show, just hide the button and do nothing else
if (!data.messages.length) {
scrollable.find(".show-more").removeClass("show");
return;
}
const channel = findChannel(data.chan);
if (!channel) {

View File

@ -10,9 +10,10 @@ const socket = io({
reconnection: !$(document.body).hasClass("public"),
});
$("#connection-error").on("click", function() {
$(this).removeClass("shown");
});
module.exports = socket;
const {vueApp} = require("./vue");
const {requestIdleCallback} = require("./utils");
socket.on("disconnect", handleDisconnect);
socket.on("connect_error", handleDisconnect);
@ -42,17 +43,13 @@ socket.on("authorized", function() {
function handleDisconnect(data) {
const message = data.message || data;
vueApp.connected = false;
$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
$(".show-more button, #input").prop("disabled", true);
$("#submit").hide();
$("#upload").hide();
// If the server shuts down, socket.io skips reconnection
// and we have to manually call connect to start the process
if (socket.io.skipReconnect) {
const utils = require("./utils");
utils.requestIdleCallback(() => socket.connect(), 2000);
requestIdleCallback(() => socket.connect(), 2000);
}
}
module.exports = socket;

View File

@ -21,6 +21,7 @@ Vue.filter("roundBadgeNumber", roundBadgeNumber);
const vueApp = new Vue({
el: "#viewport",
data: {
connected: false,
appName: document.title,
activeChannel: null,
networks: [],