make only the icons clickable in file list

This commit is contained in:
Daniela Arcese 2017-07-19 10:50:23 -04:00
parent 5b1e2f38f4
commit 3cdd207953
1 changed files with 18 additions and 17 deletions

View File

@ -213,8 +213,10 @@ $(document).ready(function() {
const row = document.createElement('tr'); const row = document.createElement('tr');
const name = document.createElement('td'); const name = document.createElement('td');
const link = document.createElement('td'); const link = document.createElement('td');
const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', title: 'Copy URL' });
const expiry = document.createElement('td'); const expiry = document.createElement('td');
const del = document.createElement('td'); const del = document.createElement('td');
const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', title: 'Delete' });
const popupDiv = document.createElement('div'); const popupDiv = document.createElement('div');
const $popupText = $('<div>', { class: 'popuptext' }); const $popupText = $('<div>', { class: 'popuptext' });
const cellText = document.createTextNode(file.name); const cellText = document.createTextNode(file.name);
@ -228,13 +230,10 @@ $(document).ready(function() {
name.appendChild(cellText); name.appendChild(cellText);
// create delete button
del.innerHTML = '<img src="/resources/close-16.svg" class="icon-delete" title="Delete" />';
link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />';
link.style.color = '#0A8DFF'; //font colour link.style.color = '#0A8DFF'; //font colour
//copy link to clipboard when icon clicked //copy link to clipboard when icon clicked
$(link).click(function() { $copyIcon.click(function() {
const aux = document.createElement('input'); const aux = document.createElement('input');
aux.setAttribute('value', url); aux.setAttribute('value', url);
document.body.appendChild(aux); document.body.appendChild(aux);
@ -293,6 +292,17 @@ $(document).ready(function() {
'<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>' '<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>'
); );
// add data cells to table row
row.appendChild(name);
$(link).append($copyIcon);
row.appendChild(link);
row.appendChild(expiry);
$(popupDiv).append($popupText);
$(del).append($delIcon);
del.appendChild(popupDiv);
row.appendChild(del);
$('tbody').append(row); //add row to table
// delete file // delete file
$popupText.find('.del-file').click(e => { $popupText.find('.del-file').click(e => {
FileSender.delete(file.fileId, file.deleteToken).then(() => { FileSender.delete(file.fileId, file.deleteToken).then(() => {
@ -307,17 +317,8 @@ $(document).ready(function() {
location.reload(); location.reload();
}); });
}; };
// add data cells to table row
row.appendChild(name);
row.appendChild(link);
row.appendChild(expiry);
$(popupDiv).append($popupText);
del.appendChild(popupDiv);
row.appendChild(del);
// show popup // show popup
del.addEventListener('click', function() { $delIcon.click(function() {
$popupText.addClass('show'); $popupText.addClass('show');
$popupText.focus(); $popupText.focus();
}); });
@ -333,7 +334,7 @@ $(document).ready(function() {
$popupText.blur(() => { $popupText.blur(() => {
$popupText.removeClass('show'); $popupText.removeClass('show');
}); });
$('tbody').append(row); //add row to table
toggleHeader(); toggleHeader();
} }