fox-send/app/ui/archiveTile.js

453 lines
13 KiB
JavaScript
Raw Normal View History

2019-01-16 17:05:39 +00:00
/* global Android */
2018-10-25 02:07:10 +00:00
const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../common/assets');
2019-01-16 21:20:15 +00:00
const {
bytes,
copyToClipboard,
list,
percent,
2019-01-23 23:10:09 +00:00
platform,
2019-01-16 21:20:15 +00:00
timeLeft
} = require('../utils');
2018-10-25 02:07:10 +00:00
const expiryOptions = require('./expiryOptions');
function expiryInfo(translate, archive) {
const l10n = timeLeft(archive.expiresAt - Date.now());
return raw(
translate('frontPageExpireInfo', {
downloadCount: translate('downloadCount', {
num: archive.dlimit - archive.dtotal
}),
timespan: translate(l10n.id, l10n)
})
);
}
2018-10-30 02:06:15 +00:00
function password(state) {
const MAX_LENGTH = 32;
return html`
2019-01-30 15:59:22 +00:00
<div class="my-2 px-4">
2018-11-09 00:24:32 +00:00
<div class="checkbox inline-block mr-3">
<input
id="add-password"
type="checkbox"
${state.password ? 'checked' : ''}
autocomplete="off"
onchange="${togglePasswordInput}"
/>
<label for="add-password">
${state.translate('addPasswordMessage')}
</label>
</div>
2018-10-30 02:06:15 +00:00
<input
2018-11-09 00:24:32 +00:00
id="password-input"
2019-01-23 23:10:09 +00:00
class="${state.password
? ''
: 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
2018-10-30 02:06:15 +00:00
autocomplete="off"
2018-11-09 00:24:32 +00:00
maxlength="${MAX_LENGTH}"
type="password"
oninput="${inputChanged}"
onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}"
value="${state.password || ''}"
/>
<label
id="password-msg"
for="password-input"
class="block text-xs text-grey-darker mt-1"
></label>
2018-10-30 02:06:15 +00:00
</div>
2018-11-09 00:24:32 +00:00
`;
2018-10-30 02:06:15 +00:00
function togglePasswordInput(event) {
event.stopPropagation();
const checked = event.target.checked;
const input = document.getElementById('password-input');
if (checked) {
input.classList.remove('invisible');
input.focus();
} else {
input.classList.add('invisible');
input.value = '';
document.getElementById('password-msg').textContent = '';
state.password = null;
}
}
function inputChanged() {
const passwordInput = document.getElementById('password-input');
const pwdmsg = document.getElementById('password-msg');
const password = passwordInput.value;
const length = password.length;
if (length === MAX_LENGTH) {
pwdmsg.textContent = state.translate('maxPasswordLength', {
length: MAX_LENGTH
});
} else {
pwdmsg.textContent = '';
}
state.password = password;
}
function focused(event) {
event.preventDefault();
const el = document.getElementById('password-input');
if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
el.placeholder = '';
}
}
}
2018-10-25 02:07:10 +00:00
function fileInfo(file, action) {
return html`
<send-file class="flex flex-row items-center p-3 w-full">
2018-10-25 02:07:10 +00:00
<img class="" src="${assets.get('blue_file.svg')}"/>
2018-11-02 09:27:59 +00:00
<p class="ml-4 w-full">
2018-11-05 23:46:49 +00:00
<h1 class="text-sm font-medium word-break-all">${file.name}</h1>
2018-11-02 09:27:59 +00:00
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
file.size
)}</div>
2018-10-25 02:07:10 +00:00
<div class="hidden">${file.type}</div>
</p>
${action}
</send-file>`;
2018-10-25 02:07:10 +00:00
}
function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) {
return html`
2018-11-09 00:24:32 +00:00
<details
2019-01-29 20:06:23 +00:00
class="w-full pb-1"
2018-11-09 00:24:32 +00:00
${archive.open ? 'open' : ''}
ontoggle="${toggled}"
>
<summary
2019-01-23 23:10:09 +00:00
>${translate('fileCount', {
num: archive.manifest.files.length
})}</summary
2018-11-09 00:24:32 +00:00
>
2019-01-23 23:10:09 +00:00
${list(
archive.manifest.files.map(f => fileInfo(f)),
'list-reset h-full'
)}
2018-11-09 00:24:32 +00:00
</details>
`;
2018-10-25 02:07:10 +00:00
}
2018-10-30 18:37:33 +00:00
function toggled(event) {
event.stopPropagation();
archive.open = event.target.open;
}
2018-10-25 02:07:10 +00:00
}
module.exports = function(state, emit, archive) {
2019-01-16 17:05:39 +00:00
const copyOrShare =
2019-01-23 23:10:09 +00:00
platform() !== 'android'
2019-01-16 17:05:39 +00:00
? html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
onclick=${copy}
>
2019-01-23 23:10:09 +00:00
<img src="${assets.get('copy-16.svg')}" class="mr-2" />
${state.translate('copyUrlHover')}
2019-01-16 17:05:39 +00:00
</button>
`
: html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
onclick=${share}
>
2019-01-23 14:42:13 +00:00
<img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
2019-01-16 17:05:39 +00:00
</button>
`;
2019-01-23 23:10:09 +00:00
const dl =
platform() === 'web'
? html`
<a
2019-01-28 23:44:14 +00:00
class="flex items-end text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
2019-01-23 23:10:09 +00:00
href="${archive.url}"
>
2019-01-28 23:44:14 +00:00
<img src="${assets.get('download.svg')}" class="mr-1" />
2019-01-23 23:10:09 +00:00
${state.translate('downloadButtonLabel')}
</a>
`
: html`
<div></div>
`;
2018-10-25 02:07:10 +00:00
return html`
<send-archive
id="archive-${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
2018-10-25 02:07:10 +00:00
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
type="image"
2019-01-18 08:09:17 +00:00
class="float-right self-center text-white delete"
2018-10-25 02:07:10 +00:00
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
2018-11-05 23:46:49 +00:00
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
2018-11-02 09:27:59 +00:00
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
2018-10-25 02:07:10 +00:00
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${archiveDetails(state.translate, archive)}
2018-11-02 09:27:59 +00:00
<hr class="w-full border-t my-4">
2019-01-23 23:10:09 +00:00
<div class="flex justify-between w-full">
${dl}
${copyOrShare}
</div>
</send-archive>`;
2018-10-25 02:07:10 +00:00
function copy(event) {
event.stopPropagation();
copyToClipboard(archive.url);
const text = event.target.lastChild;
text.textContent = state.translate('copiedUrl');
setTimeout(
() => (text.textContent = state.translate('copyUrlHover')),
1000
);
2018-10-25 02:07:10 +00:00
}
function del(event) {
event.stopPropagation();
emit('delete', { file: archive, location: 'success-screen' });
}
2019-01-16 17:05:39 +00:00
function share(event) {
event.stopPropagation();
Android.shareUrl(archive.url);
}
2018-10-25 02:07:10 +00:00
};
module.exports.wip = function(state, emit) {
return html`
2019-01-16 22:58:10 +00:00
<send-upload-area class="flex flex-col bg-white md:h-full w-full" id="wip">
2019-01-23 23:10:09 +00:00
${list(
Array.from(state.archive.files)
.reverse()
.map(f => fileInfo(f, remove(f))),
2019-01-29 20:06:23 +00:00
'list-reset overflow-y-auto px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
2019-01-23 23:10:09 +00:00
'bg-white px-2 mt-3 border border-grey-light rounded'
)}
2019-01-30 15:59:22 +00:00
<div
class="flex-grow flex items-end p-4 bg-blue-lightest mb-6 font-medium"
>
2018-11-09 00:24:32 +00:00
<input
id="file-upload"
class="hidden"
type="file"
multiple
onchange="${add}"
/>
<label
for="file-upload"
2018-11-17 01:17:57 +00:00
class="flex flex-row items-center justify-between w-full p-2 cursor-pointer"
2018-11-09 00:24:32 +00:00
title="${state.translate('addFilesButton')}"
>
2018-11-17 01:17:57 +00:00
<div class="flex items-center">
2019-01-23 23:10:09 +00:00
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
${state.translate('addFilesButton')}
2018-11-17 01:17:57 +00:00
</div>
<div class="font-normal text-sm text-grey-darker">
${state.translate('totalSize', { size: bytes(state.archive.size) })}
</div>
2018-11-09 00:24:32 +00:00
</label>
</div>
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
2019-01-30 15:59:22 +00:00
class="btn rounded flex-no-shrink"
2018-12-11 23:11:38 +00:00
title="${state.translate('uploadFilesButton')}"
2018-11-09 00:24:32 +00:00
onclick="${upload}"
>
2018-12-11 23:11:38 +00:00
${state.translate('uploadFilesButton')}
2018-11-09 00:24:32 +00:00
</button>
</send-upload-area>
2018-11-09 00:24:32 +00:00
`;
2018-10-25 02:07:10 +00:00
function upload(event) {
2018-11-05 08:12:40 +00:00
window.scrollTo(0, 0);
2018-10-25 02:07:10 +00:00
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
emit('upload', {
type: 'click',
dlimit: state.downloadCount || 1,
password: state.password
});
}
}
function add(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
setTimeout(() => {
document
.querySelector('#wip > ul > li:first-child')
.scrollIntoView({ block: 'center' });
});
2018-10-25 02:07:10 +00:00
}
function remove(file) {
return html`
2018-11-09 00:24:32 +00:00
<input
type="image"
2019-01-18 08:09:17 +00:00
class="self-center text-white ml-4 delete"
2018-11-09 00:24:32 +00:00
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick="${del}"
/>
`;
2018-10-25 02:07:10 +00:00
function del(event) {
event.stopPropagation();
emit('removeUpload', file);
}
}
};
module.exports.uploading = function(state, emit) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
const archive = state.archive;
return html`
<send-upload-area
2018-10-25 02:07:10 +00:00
id="${archive.id}"
2019-01-16 22:58:10 +00:00
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
2018-10-25 02:07:10 +00:00
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
2018-11-05 23:46:49 +00:00
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
2018-11-02 09:27:59 +00:00
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
2018-10-25 02:07:10 +00:00
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, {
dlimit: state.downloadCount || 1,
dtotal: 0,
expiresAt: Date.now() + 500 + state.timeLimit * 1000
})}
</div>
2018-11-02 09:27:59 +00:00
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
2018-10-25 02:07:10 +00:00
<button
2019-01-11 09:15:03 +00:00
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium"
2018-10-25 02:07:10 +00:00
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
</send-upload-area>`;
2018-10-25 02:07:10 +00:00
function cancel(event) {
event.stopPropagation();
event.target.disabled = true;
emit('cancel');
}
};
module.exports.empty = function(state, emit) {
return html`
<send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
2019-01-23 23:10:09 +00:00
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
2018-11-09 00:24:32 +00:00
}
2019-01-23 23:10:09 +00:00
}}"
2018-11-09 00:24:32 +00:00
>
<img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div
class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
>
${state.translate('uploadDropDragMessage')}
</div>
<div class="pb-6 text-center text-base italic">
${state.translate('uploadDropClickMessage')}
</div>
<input
id="file-upload"
class="hidden"
type="file"
multiple
onchange="${add}"
onclick="${e => e.stopPropagation()}"
/>
<label
for="file-upload"
role="button"
2019-01-16 20:38:43 +00:00
class="btn rounded flex items-center mt-4"
2018-11-09 00:24:32 +00:00
title="${state.translate('addFilesButton')}"
>
2018-10-25 02:07:10 +00:00
${state.translate('addFilesButton')}
2018-11-09 00:24:32 +00:00
</label>
</send-upload-area>
2018-11-09 00:24:32 +00:00
`;
2018-10-25 02:07:10 +00:00
function add(event) {
event.preventDefault();
const newFiles = Array.from(event.target.files);
emit('addFiles', { files: newFiles });
}
};
module.exports.preview = function(state, emit) {
const archive = state.fileInfo;
2018-10-30 18:37:33 +00:00
if (archive.open === undefined) {
archive.open = true;
}
2018-10-25 02:07:10 +00:00
return html`
2019-01-30 15:50:17 +00:00
<send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 w-full md:w-4/5">
<p class="w-full mb-4">
2018-10-25 02:07:10 +00:00
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
2018-11-05 23:46:49 +00:00
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
2018-11-02 09:27:59 +00:00
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
2018-10-25 02:07:10 +00:00
</p>
2019-01-30 15:50:17 +00:00
<div class="h-full md:h-48 overflow-y-auto">
${archiveDetails(state.translate, archive)}
</div>
2018-10-25 02:07:10 +00:00
<button
2018-10-31 18:31:17 +00:00
id="download-btn"
2019-01-16 20:38:43 +00:00
class="btn rounded mt-4 w-full flex-no-shrink"
2018-10-25 02:07:10 +00:00
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
</button>
</send-archive>`;
2018-10-25 02:07:10 +00:00
function download(event) {
event.preventDefault();
event.target.disabled = true;
emit('download', archive);
}
};
2019-01-30 15:50:17 +00:00
module.exports.downloading = function(state) {
2018-10-25 02:07:10 +00:00
const archive = state.fileInfo;
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
2019-01-30 15:50:17 +00:00
<send-archive class="flex flex-col bg-white border border-grey-light p-4 w-full md:w-4/5">
2018-10-25 02:07:10 +00:00
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
2018-11-05 23:46:49 +00:00
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
2018-11-02 09:27:59 +00:00
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
2018-10-25 02:07:10 +00:00
</p>
2018-11-02 09:27:59 +00:00
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
</send-archive>`;
2018-10-25 02:07:10 +00:00
};