drop.chapril.org-firefoxsend/app/pages/share/index.js
2018-08-08 11:07:09 -07:00

111 lines
3.2 KiB
JavaScript

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');
const uploadedFileList = require('../../templates/uploadedFileList');
const timeLimitText = require('../../templates/timeLimitText');
const { allowedCopy, delay, fadeOut } = require('../../utils');
module.exports = function(state, emit) {
const file = state.storage.getFileById(state.params.id);
if (!file) {
return notFound(state);
}
const passwordReminderClass = file._hasPassword
? ''
: 'passwordReminder--hidden';
return html`
<div class="page effect--fadeIn" id="shareWrapper">
<a href="/" class="goBackButton">
<img src="${assets.get('back-arrow.svg')}"/>
</a>
${expireInfo(file, state.translate)}
${uploadedFileList(file, state, emit)}
<div class="sharePage__copyText">
${state.translate('copyUrlLabel')}
<div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
</div>
<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')}
</button>
<div class="sharePage__deletePopup">
${deletePopup(
state.translate('deletePopupText'),
state.translate('deletePopupYes'),
state.translate('deletePopupCancel'),
deleteFile
)}
</div>
<button
class="btn--cancel btn--delete"
title="${state.translate('deleteFileButton')}"
onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
</button>
</div>
`;
function showDeletePopup() {
const popup = document.querySelector('.popup');
popup.classList.add('popup--show');
popup.focus();
}
async function copyLink() {
if (allowedCopy()) {
emit('copy', { url: file.url, location: 'success-screen' });
const input = document.getElementById('fileUrl');
input.disabled = true;
const copyBtn = document.getElementById('copyBtn');
copyBtn.disabled = true;
copyBtn.classList.add('copyBtn--copied');
copyBtn.replaceChild(
html`<label>${state.translate('copiedUrl')}</label>`,
copyBtn.firstChild
);
await delay(2000);
input.disabled = false;
copyBtn.disabled = false;
copyBtn.classList.remove('copyBtn--copied');
copyBtn.textContent = state.translate('copyUrlFormButton');
}
}
async function deleteFile() {
emit('delete', { file, location: 'success-screen' });
await fadeOut('#shareWrapper');
emit('pushState', '/');
}
};
function expireInfo(file, translate) {
const el = html`<div class="shareTitle">
${raw(
translate('expireInfo', {
downloadCount: translate('downloadCount', { num: file.dlimit }),
timespan: timeLimitText(translate, file.timeLimit)
})
)}
</div>`;
return el;
}