fox-send/app/templates/file.js

100 lines
2.9 KiB
JavaScript
Raw Normal View History

const html = require('choo/html');
const assets = require('../../common/assets');
2018-01-24 18:23:13 +00:00
function timeLeft(milliseconds, state) {
const minutes = Math.floor(milliseconds / 1000 / 60);
const hours = Math.floor(minutes / 60);
if (hours >= 1) {
2018-01-24 18:23:13 +00:00
return state.translate('expiresHoursMinutes', {
hours,
minutes: minutes % 60
});
} else if (hours === 0) {
2018-01-24 18:23:13 +00:00
if (minutes === 0) {
return state.translate('expiresMinutes', { minutes: '< 1' });
}
return state.translate('expiresMinutes', { minutes });
}
return null;
}
module.exports = function(file, state, emit) {
const ttl = file.expiresAt - Date.now();
2018-01-24 18:23:13 +00:00
const remainingTime =
timeLeft(ttl, state) || state.translate('linkExpiredAlt');
2018-01-23 02:11:48 +00:00
const downloadLimit = file.dlimit || 1;
const totalDownloads = file.dtotal || 0;
const row = html`
<tr id="${file.id}">
2018-01-24 18:23:13 +00:00
<td class="overflow-col" title="${file.name}">
<a class="link" href="/share/${file.id}">${file.name}</a>
</td>
2017-09-06 21:09:17 +00:00
<td class="center-col">
2018-01-24 18:23:13 +00:00
<img
onclick=${copyClick}
src="${assets.get('copy-16.svg')}"
class="icon-copy"
title="${state.translate('copyUrlHover')}">
<span class="text-copied" hidden="true">
${state.translate('copiedUrl')}
</span>
</td>
2018-02-02 18:37:28 +00:00
<td class="overflow-col">${remainingTime}</td>
2018-01-24 18:23:13 +00:00
<td class="center-col">${totalDownloads} / ${downloadLimit}</td>
2017-09-06 21:09:17 +00:00
<td class="center-col">
2018-01-24 18:23:13 +00:00
<img
onclick=${showPopup}
src="${assets.get('close-16.svg')}"
class="icon-delete"
title="${state.translate('deleteButtonHover')}">
<div class="popup">
<div class="popuptext" onblur=${cancel} tabindex="-1">
<div class="popup-message">${state.translate('deletePopupText')}</div>
<div class="popup-action">
2018-01-24 18:23:13 +00:00
<span class="popup-no" onclick=${cancel}>
${state.translate('deletePopupCancel')}
</span>
<span class="popup-yes" onclick=${deleteFile}>
${state.translate('deletePopupYes')}
</span>
</div>
</div>
</div>
</td>
</tr>
`;
function copyClick(e) {
emit('copy', { url: file.url, location: 'upload-list' });
const icon = e.target;
const text = e.target.nextSibling;
icon.hidden = true;
text.hidden = false;
setTimeout(() => {
icon.hidden = false;
text.hidden = true;
}, 500);
}
function showPopup() {
const tr = document.getElementById(file.id);
const popup = tr.querySelector('.popuptext');
popup.classList.add('show');
popup.focus();
}
function cancel(e) {
e.stopPropagation();
const tr = document.getElementById(file.id);
const popup = tr.querySelector('.popuptext');
popup.classList.remove('show');
}
function deleteFile() {
emit('delete', { file, location: 'upload-list' });
emit('render');
}
return row;
};