fox-send/app/pages/welcome/index.js

141 lines
3.8 KiB
JavaScript
Raw Normal View History

const html = require('choo/html');
const assets = require('../../../common/assets');
2018-07-31 18:09:18 +00:00
const title = require('../../templates/title');
const setPasswordSection = require('../../templates/setPasswordSection');
const uploadBox = require('../../templates/uploadedFileList');
const expireInfo = require('../../templates/expireInfo');
module.exports = function(state, emit) {
// the page flickers if both the server and browser set 'effect--fadeIn'
const fade = state.layout ? '' : 'effect--fadeIn';
2018-08-03 19:24:41 +00:00
const hasAnUpload = state.archive && state.archive.numFiles > 0;
2018-07-31 18:09:18 +00:00
const optionClass = state.uploading ? 'uploadOptions--faded' : '';
const btnUploading = state.uploading ? 'btn--stripes' : '';
2018-07-31 22:19:18 +00:00
const cancelVisible = state.uploading ? '' : 'noDisplay';
2018-08-03 19:24:41 +00:00
const faded = hasAnUpload ? 'uploadArea--faded' : '';
const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
const sendFileClass = hasAnUpload > 0 ? '' : 'btn--hidden';
2018-07-31 18:09:18 +00:00
let btnText = '';
if (state.encrypting) {
btnText = state.translate('encryptingFile');
} else if (state.uploading) {
btnText = `sending... ${Math.floor(state.transfer.progressRatio * 100)}%`;
} else {
//default pre-upload text
btnText = state.translate('uploadSuccessConfirmHeader');
}
2018-02-16 20:56:53 +00:00
return html`
2018-07-31 18:09:18 +00:00
<div id="page-one" class="page ${fade}">
${title(state)}
<label class="uploadArea"
2018-08-08 18:07:09 +00:00
ondragover=${dragover}
ondragleave=${dragleave}>
2018-07-31 18:09:18 +00:00
2018-08-03 19:24:41 +00:00
${uploadBox(state.archive, state, emit)}
2018-07-31 18:09:18 +00:00
<div class="uploadedFilesWrapper ${faded}">
<img
class="uploadArea__icon"
src="${assets.get('addfile.svg')}"
title="${state.translate('uploadSvgAlt')}"/>
<div class="uploadArea__msg">
${state.translate('uploadDropDragMessage')}
</div>
<span class="uploadArea__clickMsg">
${state.translate('uploadDropClickMessage')}
</span>
</div>
2018-07-31 18:09:18 +00:00
<input id="file-upload"
2018-07-31 18:09:18 +00:00
class="inputFile fileBox"
type="file"
2018-07-26 05:26:11 +00:00
multiple
name="fileUploaded"
onfocus=${onfocus}
onblur=${onblur}
2018-07-31 18:09:18 +00:00
onchange=${addFiles} />
2018-08-07 22:40:17 +00:00
2018-07-31 18:09:18 +00:00
</label>
<div class="uploadOptions ${optionClass}">
2018-08-07 22:40:17 +00:00
${expireInfo(state, emit)}
2018-07-31 18:09:18 +00:00
${setPasswordSection(state)}
</div>
2018-07-31 18:09:18 +00:00
<label for="file-upload"
class="btn btn--file ${selectFileClass}"
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}
</label>
<button
class="btn ${btnUploading} ${sendFileClass}"
onclick=${state.uploading ? noop : upload}
2018-07-31 18:09:18 +00:00
title="${btnText}">
${btnText}
</button>
2018-07-31 22:19:18 +00:00
<button class="btn--cancel uploadCancel ${cancelVisible}"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</div>
`;
function noop() {}
function dragover(event) {
const div = document.querySelector('.uploadArea');
div.classList.add('uploadArea--dragging');
}
function dragleave(event) {
const div = document.querySelector('.uploadArea');
div.classList.remove('uploadArea--dragging');
}
function onfocus(event) {
event.target.classList.add('inputFile--focused');
}
function onblur(event) {
event.target.classList.remove('inputFile--focused');
}
2018-07-31 22:19:18 +00:00
function cancel(event) {
if (state.uploading) {
emit('cancel');
const cancelBtn = document.querySelector('.uploadCancel');
cancelBtn.innerHTML = state.translate('uploadCancelNotification');
}
}
function addFiles(event) {
event.preventDefault();
2018-08-03 19:24:41 +00:00
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
2018-07-31 18:09:18 +00:00
}
2018-07-26 05:26:11 +00:00
function upload(event) {
2018-07-31 18:09:18 +00:00
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
};