drop.chapril.org-firefoxsend/app/ui/archiveTile.js

585 lines
16 KiB
JavaScript
Raw Normal View History

/* global Android */
2019-01-16 18:05:39 +01:00
2018-10-25 04:07:10 +02:00
const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../common/assets');
2019-01-16 22:20:15 +01:00
const {
bytes,
copyToClipboard,
list,
percent,
2019-01-24 00:10:09 +01:00
platform,
2019-01-16 22:20:15 +01:00
timeLeft
} = require('../utils');
2018-10-25 04:07:10 +02:00
const expiryOptions = require('./expiryOptions');
function expiryInfo(translate, archive) {
const l10n = timeLeft(archive.expiresAt - Date.now());
return raw(
translate('archiveExpiryInfo', {
2018-10-25 04:07:10 +02:00
downloadCount: translate('downloadCount', {
num: archive.dlimit - archive.dtotal
}),
timespan: translate(l10n.id, l10n)
})
);
}
2018-10-30 03:06:15 +01:00
function password(state) {
const MAX_LENGTH = 32;
return html`
2019-02-13 04:14:01 +01:00
<div class="mb-2 px-1">
2018-11-09 01:24:32 +01:00
<div class="checkbox inline-block mr-3">
<input
id="add-password"
type="checkbox"
2019-02-12 20:50:06 +01:00
${state.archive.password ? 'checked' : ''}
2018-11-09 01:24:32 +01:00
autocomplete="off"
onchange="${togglePasswordInput}"
/>
<label for="add-password">
${state.translate('addPassword')}
2018-11-09 01:24:32 +01:00
</label>
</div>
2018-10-30 03:06:15 +01:00
<input
2018-11-09 01:24:32 +01:00
id="password-input"
2019-02-12 20:50:06 +01:00
class="${state.archive.password
2019-01-24 00:10:09 +01:00
? ''
2019-09-09 19:34:55 +02:00
: 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
2018-10-30 03:06:15 +01:00
autocomplete="off"
2018-11-09 01:24:32 +01:00
maxlength="${MAX_LENGTH}"
type="password"
oninput="${inputChanged}"
onfocus="${focused}"
placeholder="${state.translate('unlockInputPlaceholder')}"
2019-02-12 20:50:06 +01:00
value="${state.archive.password || ''}"
2018-11-09 01:24:32 +01:00
/>
<label
id="password-msg"
for="password-input"
2019-09-09 19:34:55 +02:00
class="block text-xs text-grey-70"
2018-11-09 01:24:32 +01:00
></label>
2018-10-30 03:06:15 +01:00
</div>
2018-11-09 01:24:32 +01:00
`;
2018-10-30 03:06:15 +01: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 = '';
2019-02-12 20:50:06 +01:00
state.archive.password = null;
2018-10-30 03:06:15 +01:00
}
}
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 = '';
}
2019-02-12 20:50:06 +01:00
state.archive.password = password;
2018-10-30 03:06:15 +01:00
}
function focused(event) {
event.preventDefault();
const el = document.getElementById('password-input');
if (el.placeholder !== state.translate('unlockInputPlaceholder')) {
el.placeholder = '';
}
}
}
2018-10-25 04:07:10 +02:00
function fileInfo(file, action) {
return html`
<send-file class="flex flex-row items-center p-3 w-full">
2019-09-09 19:34:55 +02:00
<svg class="h-8 w-8 text-white dark:text-grey-90">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg>
2018-11-02 10:27:59 +01:00
<p class="ml-4 w-full">
2019-02-26 23:52:37 +01:00
<h1 class="text-base font-medium word-break-all">${file.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
2018-11-02 10:27:59 +01:00
file.size
)}</div>
2018-10-25 04:07:10 +02:00
</p>
${action}
</send-file>`;
2018-10-25 04:07:10 +02:00
}
2019-02-27 02:22:45 +01:00
function archiveInfo(archive, action) {
return html`
<p class="w-full flex items-center">
2019-09-09 19:34:55 +02:00
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg>
2019-02-27 02:22:45 +01:00
<p class="flex-grow">
<h1 class="text-base font-medium word-break-all">${archive.name}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
${action}
</p>`;
}
2018-10-25 04:07:10 +02:00
function archiveDetails(translate, archive) {
if (archive.manifest.files.length > 1) {
return html`
2018-11-09 01:24:32 +01:00
<details
2019-01-29 21:06:23 +01:00
class="w-full pb-1"
2018-11-09 01:24:32 +01:00
${archive.open ? 'open' : ''}
ontoggle="${toggled}"
>
<summary
2019-09-09 19:34:55 +02:00
class="flex items-center link-blue text-sm cursor-pointer outline-none"
2018-11-09 01:24:32 +01:00
>
<svg
class="fill-current w-4 h-4 mr-1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"
/>
</svg>
${translate('fileCount', {
num: archive.manifest.files.length
})}
</summary>
2019-06-14 20:30:43 +02:00
${list(archive.manifest.files.map(f => fileInfo(f)))}
2018-11-09 01:24:32 +01:00
</details>
`;
2018-10-25 04:07:10 +02:00
}
2018-10-30 19:37:33 +01:00
function toggled(event) {
event.stopPropagation();
archive.open = event.target.open;
}
2018-10-25 04:07:10 +02:00
}
module.exports = function(state, emit, archive) {
2019-01-16 18:05:39 +01:00
const copyOrShare =
2019-03-10 05:40:06 +01:00
state.capabilities.share || platform() === 'android'
2019-01-16 18:05:39 +01:00
? html`
<button
2019-09-09 19:34:55 +02:00
class="link-blue self-end flex items-start"
2019-03-10 05:40:06 +01:00
onclick=${share}
2019-03-10 05:56:33 +01:00
title="Share link"
2019-01-16 18:05:39 +01:00
>
2019-09-09 19:34:55 +02:00
<svg class="h-4 w-4 mr-2">
<use xlink:href="${assets.get('share-24.svg')}#icon" />
</svg>
Share link
2019-01-16 18:05:39 +01:00
</button>
`
: html`
<button
2019-09-09 19:34:55 +02:00
class="link-blue focus:outline self-end flex items-center"
2019-03-10 05:40:06 +01:00
onclick=${copy}
title="${state.translate('copyLinkButton')}"
2019-01-16 18:05:39 +01:00
>
2019-09-09 19:34:55 +02:00
<svg class="h-4 w-4 mr-2">
<use xlink:href="${assets.get('copy-16.svg')}#icon" />
</svg>
2019-03-10 05:40:06 +01:00
${state.translate('copyLinkButton')}
2019-01-16 18:05:39 +01:00
</button>
`;
2019-01-24 00:10:09 +01:00
const dl =
platform() === 'web'
? html`
<a
2019-09-09 19:34:55 +02:00
class="flex items-baseline link-blue"
2019-01-24 00:10:09 +01:00
href="${archive.url}"
2019-02-21 18:24:43 +01:00
title="${state.translate('downloadButtonLabel')}"
2019-02-21 00:58:44 +01:00
tabindex="0"
2019-01-24 00:10:09 +01:00
>
2019-09-09 19:34:55 +02:00
<svg class="h-4 w-3 mr-2">
<use xlink:href="${assets.get('dl.svg')}#icon" />
</svg>
2019-01-24 00:10:09 +01:00
${state.translate('downloadButtonLabel')}
</a>
`
: html`
<div></div>
`;
2018-10-25 04:07:10 +02:00
return html`
2019-02-27 02:22:45 +01:00
<send-archive
id="archive-${archive.id}"
2019-09-09 19:34:55 +02:00
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
2019-02-27 02:22:45 +01:00
>
${archiveInfo(
archive,
html`
<input
type="image"
2019-06-14 20:30:43 +02:00
class="self-start flex-shrink-0 text-white hover:opacity-75 focus:outline"
2019-02-27 02:22:45 +01:00
alt="${state.translate('deleteButtonHover')}"
title="${state.translate('deleteButtonHover')}"
src="${assets.get('close-16.svg')}"
onclick=${del}
/>
`
)}
<div class="text-sm opacity-75 w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${archiveDetails(state.translate, archive)}
2019-09-09 19:34:55 +02:00
<hr class="w-full border-t my-4 dark:border-grey-70" />
2019-02-27 02:22:45 +01:00
<div class="flex justify-between w-full">
${dl} ${copyOrShare}
</div>
</send-archive>
`;
2018-10-25 04:07:10 +02:00
function copy(event) {
event.stopPropagation();
copyToClipboard(archive.url);
const text = event.target.lastChild;
text.textContent = state.translate('copiedUrl');
setTimeout(
() => (text.textContent = state.translate('copyLinkButton')),
1000
);
2018-10-25 04:07:10 +02:00
}
function del(event) {
event.stopPropagation();
2019-02-12 20:50:06 +01:00
emit('delete', archive);
2018-10-25 04:07:10 +02:00
}
2019-01-16 18:05:39 +01:00
2019-03-10 05:40:06 +01:00
async function share(event) {
2019-01-16 18:05:39 +01:00
event.stopPropagation();
if (platform() === 'android') {
Android.shareUrl(archive.url);
} else {
2019-03-10 05:40:06 +01:00
try {
await navigator.share({
title: state.translate('-send-brand'),
2019-06-14 20:30:43 +02:00
text: `Download "${archive.name}" with Firefox Send: simple, safe file sharing`,
2019-03-10 05:40:06 +01:00
//state.translate('shareMessage', { name }),
url: archive.url
});
} catch (e) {
// ignore
}
}
2019-01-16 18:05:39 +01:00
}
2018-10-25 04:07:10 +02:00
};
module.exports.wip = function(state, emit) {
return html`
2019-09-09 19:34:55 +02:00
<send-upload-area
class="flex flex-col bg-white h-full w-full dark:bg-grey-90"
id="wip"
>
2019-01-24 00:10:09 +01:00
${list(
Array.from(state.archive.files)
.reverse()
2019-02-21 04:59:29 +01:00
.map(f =>
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
),
2019-09-09 19:34:55 +02:00
'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
2019-01-24 00:10:09 +01:00
)}
2019-01-30 16:59:22 +01:00
<div
2019-09-09 19:34:55 +02:00
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
2019-01-30 16:59:22 +01:00
>
2018-11-09 01:24:32 +01:00
<input
id="file-upload"
class="opacity-0 w-0 h-0 appearance-none absolute overflow-hidden"
2018-11-09 01:24:32 +01:00
type="file"
multiple
2019-02-21 00:58:44 +01:00
onfocus="${focus}"
onblur="${blur}"
2018-11-09 01:24:32 +01:00
onchange="${add}"
/>
<div
2019-02-22 16:42:08 +01:00
for="file-upload"
class="flex flex-row items-center justify-between w-full p-2"
2018-11-09 01:24:32 +01:00
>
2019-02-21 04:59:29 +01:00
<label
for="file-upload"
class="flex items-center cursor-pointer"
title="${state.translate('addFilesButton')}"
>
2019-09-09 19:34:55 +02:00
<svg class="w-6 h-6 mr-2 link-blue">
<use xlink:href="${assets.get('addfiles.svg')}#plus" />
</svg>
${state.translate('addFilesButton')}
</label>
2019-09-09 19:34:55 +02:00
<div class="font-normal text-sm text-grey-70 dark:text-grey-40">
${state.translate('totalSize', {
2019-02-22 16:42:08 +01:00
size: bytes(state.archive.size)
})}
2018-11-17 02:17:57 +01:00
</div>
2019-02-21 04:59:29 +01:00
</div>
2018-11-09 01:24:32 +01:00
</div>
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
2019-06-14 20:30:43 +02:00
class="btn rounded-lg flex-shrink-0 focus:outline"
title="${state.translate('uploadButton')}"
2018-11-09 01:24:32 +01:00
onclick="${upload}"
>
${state.translate('uploadButton')}
2018-11-09 01:24:32 +01:00
</button>
</send-upload-area>
2018-11-09 01:24:32 +01:00
`;
2018-10-25 04:07:10 +02:00
2019-02-21 00:58:44 +01:00
function focus(event) {
event.target.nextElementSibling.firstElementChild.classList.add('outline');
}
function blur(event) {
event.target.nextElementSibling.firstElementChild.classList.remove(
'outline'
);
}
2018-10-25 04:07:10 +02:00
function upload(event) {
2018-11-05 09:12:40 +01:00
window.scrollTo(0, 0);
2018-10-25 04:07:10 +02:00
event.preventDefault();
event.target.disabled = true;
if (!state.uploading) {
2019-02-12 20:50:06 +01:00
emit('upload');
2018-10-25 04:07:10 +02:00
}
}
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 04:07:10 +02:00
}
2019-02-21 04:59:29 +01:00
function remove(file, desc) {
2018-10-25 04:07:10 +02:00
return html`
2018-11-09 01:24:32 +01:00
<input
type="image"
2019-02-21 00:58:44 +01:00
class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
2019-02-21 04:59:29 +01:00
alt="${desc}"
title="${desc}"
2018-11-09 01:24:32 +01:00
src="${assets.get('close-16.svg')}"
onclick="${del}"
/>
`;
2018-10-25 04:07:10 +02: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`
2019-02-27 02:22:45 +01:00
<send-upload-area
id="${archive.id}"
2019-09-09 19:34:55 +02:00
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
2019-02-27 02:22:45 +01:00
>
${archiveInfo(archive)}
2019-09-09 19:34:55 +02:00
<div class="text-xs opacity-75 w-full mt-2 mb-2">
2019-02-27 02:22:45 +01:00
${expiryInfo(state.translate, {
dlimit: state.archive.dlimit,
dtotal: 0,
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})}
</div>
2019-09-09 19:34:55 +02:00
<div class="link-blue text-sm font-medium mt-2">
2019-02-27 02:22:45 +01:00
${progressPercent}
</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
2019-09-09 19:34:55 +02:00
class="link-blue self-end font-medium"
2019-02-27 02:22:45 +01:00
onclick=${cancel}
2019-03-05 23:44:06 +01:00
title="${state.translate('deletePopupCancel')}"
2019-02-27 02:22:45 +01:00
>
2019-03-05 23:44:06 +01:00
${state.translate('deletePopupCancel')}
2019-02-27 02:22:45 +01:00
</button>
</send-upload-area>
`;
2018-10-25 04:07:10 +02:00
function cancel(event) {
event.stopPropagation();
event.target.disabled = true;
emit('cancel');
}
};
module.exports.empty = function(state, emit) {
const upsell =
state.user.loggedIn || !state.capabilities.account
? ''
: html`
<button
2019-09-09 19:34:55 +02:00
class="center font-medium text-sm link-blue mt-4 mb-2"
onclick="${event => {
event.stopPropagation();
emit('signup-cta', 'drop');
}}"
>
${state.translate('signInSizeBump', {
size: bytes(state.LIMITS.MAX_FILE_SIZE)
})}
</button>
`;
2018-10-25 04:07:10 +02:00
return html`
<send-upload-area
2019-09-09 19:34:55 +02:00
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
2019-01-24 00:10:09 +01:00
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
2018-11-09 01:24:32 +01:00
}
2019-01-24 00:10:09 +01:00
}}"
2018-11-09 01:24:32 +01:00
>
2019-09-09 19:34:55 +02:00
<svg class="w-10 h-10 link-blue">
<use xlink:href="/${assets.get('addfiles.svg')}#plus" />
</svg>
<div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
${state.translate('dragAndDropFiles')}
2018-11-09 01:24:32 +01:00
</div>
<div class="pb-6 text-center text-base">
${state.translate('orClickWithSize', {
size: bytes(state.user.maxSize)
})}
2018-11-09 01:24:32 +01:00
</div>
<input
id="file-upload"
class="opacity-0 w-0 h-0 appearance-none absolute overflow-hidden"
2018-11-09 01:24:32 +01:00
type="file"
multiple
onfocus="${focus}"
onblur="${blur}"
2018-11-09 01:24:32 +01:00
onchange="${add}"
onclick="${e => e.stopPropagation()}"
/>
<label
for="file-upload"
role="button"
2019-02-11 22:48:06 +01:00
class="btn rounded-lg flex items-center mt-4"
title="${state.translate('addFilesButton', {
2019-03-01 01:31:37 +01:00
size: bytes(state.user.maxSize)
2019-02-22 16:42:08 +01:00
})}"
2018-11-09 01:24:32 +01:00
>
${state.translate('addFilesButton')}
2018-11-09 01:24:32 +01:00
</label>
<p
class="font-normal text-sm text-grey-50 dark:text-grey-40 my-6 mx-12 text-center max-w-sm leading-loose"
>
${state.translate('trustWarningMessage')}
</p>
${upsell}
</send-upload-area>
2018-11-09 01:24:32 +01:00
`;
2018-10-25 04:07:10 +02:00
function focus(event) {
2019-09-09 19:34:55 +02:00
event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
}
function blur(event) {
2019-09-09 19:34:55 +02:00
event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
}
2018-10-25 04:07:10 +02: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 19:37:33 +01:00
if (archive.open === undefined) {
archive.open = true;
}
2019-02-26 23:52:37 +01:00
const single = archive.manifest.files.length === 1;
const details = single
? ''
: html`
<div class="mt-4 h-full md:h-48 overflow-y-auto">
${archiveDetails(state.translate, archive)}
</div>
`;
2018-10-25 04:07:10 +02:00
return html`
2019-09-09 19:34:55 +02:00
<send-archive
class="flex flex-col max-h-full bg-white w-full dark:bg-grey-90"
2019-09-09 19:34:55 +02:00
>
<div class="border rounded py-3 px-4 dark:border-grey-70">
2019-02-27 02:22:45 +01:00
${archiveInfo(archive)} ${details}
</div>
<div class="checkbox inline-block mt-6 mx-auto">
<input
id="trust-download"
type="checkbox"
autocomplete="off"
onchange="${toggleDownloadEnabled}"
/>
<label for="trust-download">
${state.translate('downloadTrustCheckbox', {
count: archive.manifest.files.length
})}
</label>
</div>
2019-02-27 02:22:45 +01:00
<button
id="download-btn"
disabled
2019-06-14 20:30:43 +02:00
class="btn rounded-lg mt-4 w-full flex-shrink-0 focus:outline"
2019-02-27 02:22:45 +01:00
title="${state.translate('downloadButtonLabel')}"
onclick=${download}
>
${state.translate('downloadButtonLabel')}
</button>
</send-archive>
`;
2018-10-25 04:07:10 +02:00
function toggleDownloadEnabled(event) {
event.stopPropagation();
const checked = event.target.checked;
const btn = document.getElementById('download-btn');
btn.disabled = !checked;
}
2018-10-25 04:07:10 +02:00
function download(event) {
event.preventDefault();
event.target.disabled = true;
emit('download', archive);
}
};
2019-01-30 16:50:17 +01:00
module.exports.downloading = function(state) {
2018-10-25 04:07:10 +02:00
const archive = state.fileInfo;
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
2019-02-27 02:22:45 +01:00
<send-archive
2019-09-09 19:34:55 +02:00
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
2019-02-27 02:22:45 +01:00
>
${archiveInfo(archive)}
2019-09-09 19:34:55 +02:00
<div class="link-blue text-sm font-medium mt-2">
2019-02-27 02:22:45 +01:00
${progressPercent}
</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
</send-archive>
`;
2018-10-25 04:07:10 +02:00
};