Rebase image uploading to Vue
This commit is contained in:
Pavel Djundik
parent
5c69fe104d
commit
c3a1c77447
@ -69,7 +69,9 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="this.$root.connectionError"
|
||||
id="connection-error">{{ this.$root.connectionError }}</div>
|
||||
id="connection-error"
|
||||
@click="this.$root.connectionError = null">{{ this.$root.connectionError }}</div>
|
||||
<span id="upload-progressbar" />
|
||||
<ChatInput
|
||||
:network="network"
|
||||
:channel="channel" />
|
||||
|
||||
@ -14,6 +14,22 @@
|
||||
class="mousetrap"
|
||||
@input="setPendingMessage"
|
||||
@keypress.enter.exact.prevent="onSubmit" />
|
||||
<span
|
||||
v-if="this.$root.connected && this.$root.fileUploadEnabled"
|
||||
id="upload-tooltip"
|
||||
class="tooltipped tooltipped-w tooltipped-no-touch"
|
||||
aria-label="Upload File"
|
||||
@click="openFileUpload">
|
||||
<input
|
||||
id="upload-input"
|
||||
ref="uploadInput"
|
||||
type="file"
|
||||
multiple>
|
||||
<button
|
||||
id="upload"
|
||||
type="button"
|
||||
aria-label="Upload file" />
|
||||
</span>
|
||||
<span
|
||||
id="submit-tooltip"
|
||||
class="tooltipped tooltipped-w tooltipped-no-touch"
|
||||
@ -29,6 +45,7 @@
|
||||
<script>
|
||||
const commands = require("../js/commands/index");
|
||||
const socket = require("../js/socket");
|
||||
const upload = require("../js/upload");
|
||||
const Mousetrap = require("mousetrap");
|
||||
const {wrapCursor} = require("undate");
|
||||
|
||||
@ -97,6 +114,10 @@ export default {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
if (this.$root.fileUploadEnabled) {
|
||||
upload.initialize();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
require("../js/autocompletion").disable();
|
||||
@ -160,6 +181,9 @@ export default {
|
||||
|
||||
socket.emit("input", {target, text});
|
||||
},
|
||||
openFileUpload() {
|
||||
this.$refs.uploadInput.click();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -48,28 +48,7 @@
|
||||
|
||||
</head>
|
||||
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
|
||||
<div id="viewport" role="tablist">
|
||||
<aside id="sidebar">
|
||||
<div class="scrollable-area">
|
||||
<div class="logo-container">
|
||||
<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge">
|
||||
<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge">
|
||||
</div>
|
||||
<div class="networks"></div>
|
||||
<div class="empty">
|
||||
You are not connected to any networks yet.
|
||||
</div>
|
||||
</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"></button></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></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"></button></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"></button></span>
|
||||
</footer>
|
||||
</aside>
|
||||
<div id="sidebar-overlay"></div>
|
||||
<article id="windows">
|
||||
<div id="loading" class="window active">
|
||||
<div id="loading">
|
||||
<div id="loading-status-container">
|
||||
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
|
||||
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
|
||||
@ -81,29 +60,6 @@
|
||||
</div>
|
||||
<script async src="js/loading-error-handlers.js"></script>
|
||||
</div>
|
||||
<div id="chat-container" class="window">
|
||||
<div id="chat"></div>
|
||||
<div id="connection-error"></div>
|
||||
<span id="upload-progressbar"></span>
|
||||
<form id="form" method="post" action="">
|
||||
<span id="nick"></span>
|
||||
<textarea id="input" class="mousetrap"></textarea>
|
||||
<span id="upload-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Upload file">
|
||||
<input id="upload-input" type="file" multiple>
|
||||
<button id="upload" type="button" aria-label="Upload file"></button>
|
||||
</span>
|
||||
<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">
|
||||
<button id="submit" type="submit" aria-label="Send message"></button>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in"></div>
|
||||
<div id="connect" class="window" role="tabpanel" aria-label="Connect"></div>
|
||||
<div id="settings" class="window" role="tabpanel" aria-label="Settings"></div>
|
||||
<div id="help" class="window" role="tabpanel" aria-label="Help"></div>
|
||||
<div id="changelog" class="window" aria-label="Changelog"></div>
|
||||
</article>
|
||||
</div>
|
||||
<div id="viewport"></div>
|
||||
|
||||
<div id="context-menu-container"></div>
|
||||
|
||||
@ -8,6 +8,7 @@ const webpush = require("../webpush");
|
||||
const connect = $("#connect");
|
||||
const utils = require("../utils");
|
||||
const upload = require("../upload");
|
||||
const {vueApp} = require("../vue");
|
||||
|
||||
window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
|
||||
$("#webapp-install-button")
|
||||
@ -24,11 +25,7 @@ window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
|
||||
});
|
||||
|
||||
socket.on("configuration", function(data) {
|
||||
if (data.fileUpload) {
|
||||
$("#upload").show();
|
||||
} else {
|
||||
$("#upload").hide();
|
||||
}
|
||||
vueApp.fileUploadEnabled = data.fileUpload;
|
||||
|
||||
if (options.initialized) {
|
||||
// Likely a reconnect, request sync for possibly missed settings.
|
||||
@ -52,7 +49,6 @@ socket.on("configuration", function(data) {
|
||||
});
|
||||
|
||||
if (data.fileUpload) {
|
||||
upload.initialize();
|
||||
upload.setMaxFileSize(data.fileUploadMaxFileSize);
|
||||
}
|
||||
|
||||
|
||||
@ -4,15 +4,12 @@ const $ = require("jquery");
|
||||
const socket = require("./socket");
|
||||
const SocketIOFileUpload = require("socketio-file-upload/client");
|
||||
const instance = new SocketIOFileUpload(socket);
|
||||
const {vueApp} = require("./vue");
|
||||
|
||||
function initialize() {
|
||||
instance.listenOnInput(document.getElementById("upload-input"));
|
||||
instance.listenOnDrop(document);
|
||||
|
||||
$("#upload").on("click", () => {
|
||||
$("#upload-input").trigger("click");
|
||||
});
|
||||
|
||||
instance.addEventListener("complete", () => {
|
||||
// Reset progressbar
|
||||
$("#upload-progressbar").width(0);
|
||||
@ -26,7 +23,7 @@ function initialize() {
|
||||
instance.addEventListener("error", (event) => {
|
||||
// Reset progressbar
|
||||
$("#upload-progressbar").width(0);
|
||||
$("#connection-error").addClass("shown").text(event.message);
|
||||
vueApp.connectionError = event.message;
|
||||
});
|
||||
|
||||
const $form = $(document);
|
||||
|
||||
@ -24,6 +24,7 @@ const vueApp = new Vue({
|
||||
initialized: false,
|
||||
connected: false,
|
||||
connectionError: false,
|
||||
fileUploadEnabled: false,
|
||||
appName: document.title,
|
||||
activeChannel: null,
|
||||
networks: [],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user