supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rebase image uploading to Vue

Browse Source
This commit is contained in:
Pavel Djundik 2018-09-03 10:58:33 +03:00
parent 5c69fe104d
commit c3a1c77447
6 changed files with 43 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/Chat.vue
View File

@ -69,7 +69,9 @@
</div> </div>
<div <div
v-if="this.$root.connectionError" 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 <ChatInput
:network="network" :network="network"
:channel="channel" /> :channel="channel" />

24
client/components/ChatInput.vue
View File

@ -14,6 +14,22 @@
class="mousetrap" class="mousetrap"
@input="setPendingMessage" @input="setPendingMessage"
@keypress.enter.exact.prevent="onSubmit" /> @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 <span
id="submit-tooltip" id="submit-tooltip"
class="tooltipped tooltipped-w tooltipped-no-touch" class="tooltipped tooltipped-w tooltipped-no-touch"
@ -29,6 +45,7 @@
<script> <script>
const commands = require("../js/commands/index"); const commands = require("../js/commands/index");
const socket = require("../js/socket"); const socket = require("../js/socket");
const upload = require("../js/upload");
const Mousetrap = require("mousetrap"); const Mousetrap = require("mousetrap");
const {wrapCursor} = require("undate"); const {wrapCursor} = require("undate");
@ -97,6 +114,10 @@ export default {
return false; return false;
} }
}); });
if (this.$root.fileUploadEnabled) {
upload.initialize();
}
}, },
destroyed() { destroyed() {
require("../js/autocompletion").disable(); require("../js/autocompletion").disable();
@ -160,6 +181,9 @@ export default {
socket.emit("input", {target, text}); socket.emit("input", {target, text});
}, },
openFileUpload() {
this.$refs.uploadInput.click();
},
}, },
}; };
</script> </script>

66
client/index.html.tpl
View File

@ -48,61 +48,17 @@
</head> </head>
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>"> <body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="viewport" role="tablist"> <div id="loading">
<aside id="sidebar"> <div id="loading-status-container">
<div class="scrollable-area"> <img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
<div class="logo-container"> <img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg.svg" class="logo" alt="The Lounge"> <p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
<img src="img/logo-<%- public ? 'horizontal-' : '' %>transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge"> </div>
</div> <div id="loading-reload-container">
<div class="networks"></div> <p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
<div class="empty"> <button id="loading-reload" class="btn">Reload page</button>
You are not connected to any networks yet. </div>
</div> <script async src="js/loading-error-handlers.js"></script>
</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-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">
<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
</div>
<div id="loading-reload-container">
<p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
<button id="loading-reload" class="btn">Reload page</button>
</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>
<div id="viewport"></div> <div id="viewport"></div>

8
client/js/socket-events/configuration.js
View File

@ -8,6 +8,7 @@ const webpush = require("../webpush");
const connect = $("#connect"); const connect = $("#connect");
const utils = require("../utils"); const utils = require("../utils");
const upload = require("../upload"); const upload = require("../upload");
const {vueApp} = require("../vue");
window.addEventListener("beforeinstallprompt", (installPromptEvent) => { window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
$("#webapp-install-button") $("#webapp-install-button")
@ -24,11 +25,7 @@ window.addEventListener("beforeinstallprompt", (installPromptEvent) => {
}); });
socket.on("configuration", function(data) { socket.on("configuration", function(data) {
if (data.fileUpload) { vueApp.fileUploadEnabled = data.fileUpload;
$("#upload").show();
} else {
$("#upload").hide();
}
if (options.initialized) { if (options.initialized) {
// Likely a reconnect, request sync for possibly missed settings. // Likely a reconnect, request sync for possibly missed settings.
@ -52,7 +49,6 @@ socket.on("configuration", function(data) {
}); });
if (data.fileUpload) { if (data.fileUpload) {
upload.initialize();
upload.setMaxFileSize(data.fileUploadMaxFileSize); upload.setMaxFileSize(data.fileUploadMaxFileSize);
} }

7
client/js/upload.js
View File

@ -4,15 +4,12 @@ const $ = require("jquery");
const socket = require("./socket"); const socket = require("./socket");
const SocketIOFileUpload = require("socketio-file-upload/client"); const SocketIOFileUpload = require("socketio-file-upload/client");
const instance = new SocketIOFileUpload(socket); const instance = new SocketIOFileUpload(socket);
const {vueApp} = require("./vue");
function initialize() { function initialize() {
instance.listenOnInput(document.getElementById("upload-input")); instance.listenOnInput(document.getElementById("upload-input"));
instance.listenOnDrop(document); instance.listenOnDrop(document);
$("#upload").on("click", () => {
$("#upload-input").trigger("click");
});
instance.addEventListener("complete", () => { instance.addEventListener("complete", () => {
// Reset progressbar // Reset progressbar
$("#upload-progressbar").width(0); $("#upload-progressbar").width(0);
@ -26,7 +23,7 @@ function initialize() {
instance.addEventListener("error", (event) => { instance.addEventListener("error", (event) => {
// Reset progressbar // Reset progressbar
$("#upload-progressbar").width(0); $("#upload-progressbar").width(0);
$("#connection-error").addClass("shown").text(event.message); vueApp.connectionError = event.message;
}); });
const $form = $(document); const $form = $(document);

1
client/js/vue.js
View File

@ -24,6 +24,7 @@ const vueApp = new Vue({
initialized: false, initialized: false,
connected: false, connected: false,
connectionError: false, connectionError: false,
fileUploadEnabled: false,
appName: document.title, appName: document.title,
activeChannel: null, activeChannel: null,
networks: [], networks: [],