85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
|
const html = require('choo/html');
|
||
|
|
const assets = require('../../common/assets');
|
||
|
|
|
||
|
|
function timeLeft(milliseconds) {
|
||
|
|
const minutes = Math.floor(milliseconds / 1000 / 60);
|
||
|
|
const hours = Math.floor(minutes / 60);
|
||
|
|
const seconds = Math.floor(milliseconds / 1000 % 60);
|
||
|
|
if (hours >= 1) {
|
||
|
|
return `${hours}h ${minutes % 60}m`;
|
||
|
|
} else if (hours === 0) {
|
||
|
|
return `${minutes}m ${seconds}s`;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = function(file, state, emit) {
|
||
|
|
const ttl = file.expiresAt - Date.now();
|
||
|
|
const remaining = timeLeft(ttl) || state.translate('linkExpiredAlt');
|
||
|
|
const row = html`
|
||
|
|
<tr id="${file.id}">
|
||
|
|
<td>${file.name}</td>
|
||
|
|
<td>
|
||
|
|
<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>
|
||
|
|
<td>${remaining}</td>
|
||
|
|
<td>
|
||
|
|
<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">
|
||
|
|
<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;
|
||
|
|
};
|