drop.chapril.org-firefoxsend/app/pages/share/index.js

114 lines
3.2 KiB
JavaScript
Raw Normal View History

/* global EXPIRE_SECONDS */
const html = require('choo/html');
const raw = require('choo/html/raw');
const assets = require('../../../common/assets');
const notFound = require('../notFound');
const deletePopup = require('../../templates/popup');
2018-07-31 20:09:18 +02:00
const uploadedFiles = require('../../templates/uploadedFileList');
const { allowedCopy, delay, fadeOut } = require('../../utils');
module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id);
if (!file) {
2018-07-31 20:09:18 +02:00
return notFound(state);
}
2018-07-31 20:09:18 +02:00
const passwordReminderClass = file._hasPassword
? ''
: 'passwordReminder--hidden';
const multifiles = Array.from(file.manifest.files);
2018-02-16 21:56:53 +01:00
return html`
2018-07-31 20:09:18 +02:00
<div class="page effect--fadeIn" id="shareWrapper">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${expireInfo(file, state.translate)}
${uploadedFiles(multifiles, state, emit)}
<div class="sharePage__copyText">
2018-07-31 20:09:18 +02:00
${state.translate('copyUrlFormLabelWithName', { filename: '' })}
<div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
2018-01-24 19:23:13 +01:00
</div>
2018-07-31 20:09:18 +02:00
<input
id="fileUrl"
class="copySection__url"
type="url"
value="${file.url}"
readonly="true"/>
<button id="copyBtn"
class="btn copyBtn"
title="${state.translate('copyUrlFormButton')}"
onclick=${copyLink}>${state.translate('copyUrlFormButton')}
2018-01-09 16:26:27 +01:00
</button>
2018-07-31 20:09:18 +02:00
<div class="sharePage__deletePopup">
${deletePopup(
state.translate('deletePopupText'),
state.translate('deletePopupYes'),
state.translate('deletePopupCancel'),
deleteFile
)}
2018-01-09 16:26:27 +01:00
</div>
2018-07-31 20:09:18 +02:00
<a
class="error btn--delete"
title="${state.translate('deleteFileButton')}"
onclick=${showPopup}>${state.translate('deleteFileButton')}
</a>
</div>
2018-07-31 20:09:18 +02:00
`;
2017-12-23 04:20:19 +01:00
function showPopup() {
const popup = document.querySelector('.popup');
popup.classList.add('popup--show');
popup.focus();
2017-12-23 04:20:19 +01:00
}
async function copyLink() {
if (allowedCopy()) {
emit('copy', { url: file.url, location: 'success-screen' });
const input = document.getElementById('fileUrl');
2017-08-29 20:25:41 +02:00
input.disabled = true;
const copyBtn = document.getElementById('copyBtn');
copyBtn.disabled = true;
2018-07-31 20:09:18 +02:00
copyBtn.classList.add('copyBtn--copied');
copyBtn.replaceChild(
2018-07-31 20:09:18 +02:00
html`<label>${state.translate('copiedUrl')}</label>`,
copyBtn.firstChild
);
await delay(2000);
2017-08-29 20:25:41 +02:00
input.disabled = false;
copyBtn.disabled = false;
2018-07-31 20:09:18 +02:00
copyBtn.classList.remove('copyBtn--copied');
copyBtn.textContent = state.translate('copyUrlFormButton');
}
}
async function deleteFile() {
emit('delete', { file, location: 'success-screen' });
await fadeOut('#shareWrapper');
emit('pushState', '/');
}
};
2018-02-16 21:56:53 +01:00
2018-07-31 20:09:18 +02:00
function expireInfo(file, translate) {
2018-02-16 21:56:53 +01:00
const hours = Math.floor(EXPIRE_SECONDS / 60 / 60);
2018-07-31 20:09:18 +02:00
const el = html`<div class="shareTitle">${raw(
2018-02-16 21:56:53 +01:00
translate('expireInfo', {
2018-07-31 20:09:18 +02:00
downloadCount: translate('downloadCount', { num: file.dlimit }),
2018-02-16 21:56:53 +01:00
timespan: translate('timespanHours', { num: hours })
})
)}</div>`;
2018-07-31 20:09:18 +02:00
2018-02-16 21:56:53 +01:00
return el;
}