add progress bars

This commit is contained in:
Daniela Arcese 2017-06-20 15:23:12 -04:00
parent e077160a47
commit 9e228417b4
5 changed files with 118 additions and 54 deletions

View File

@ -2,6 +2,7 @@ const FileReceiver = require('./fileReceiver');
const $ = require('jquery');
$(document).ready(function() {
$('#download-progress').hide();
$('#send-file').click(() => {
window.location.replace(`${window.location.origin}`);
});
@ -10,16 +11,22 @@ $(document).ready(function() {
let li = document.createElement('li');
let name = document.createElement('p');
let progress = document.createElement('p');
let btn = $('#download-btn');
let $btn = $('#download-btn');
fileReceiver.on('progress', percentComplete => {
progress.innerText = `Progress: ${percentComplete}%`;
$('#download-page-one').hide();
$('.send-new').hide();
$('#download-progress').show();
// update progress bar
document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%');
$('#progress-text').html(`${percentComplete}%`);
//on complete
if (percentComplete === 100) {
fileReceiver.removeAllListeners('progress');
btn.text('Download complete!');
btn.attr('disabled', 'true');
$('#download-text').html('Download complete!');
$('.send-new').show();
$btn.text('Download complete!');
$btn.attr('disabled', 'true');
}
});

View File

@ -3,25 +3,32 @@ const $ = require('jquery');
$(document).ready(function() {
// reset copy button
let copyBtn = $('#copy-btn');
copyBtn.attr('disabled', false);
copyBtn.html('Copy');
let $copyBtn = $('#copy-btn');
$copyBtn.attr('disabled', false);
$copyBtn.html('Copy');
$('#page-one').show();
$('#file-list').hide();
$('#upload-progress').hide();
$('#share-link').hide();
//load existing uploads
for (fileId in localStorage){
}
// copy link to clipboard
copyBtn.click(() => {
$copyBtn.click(() => {
var aux = document.createElement('input');
aux.setAttribute('value', $('#link').attr('value'));
document.body.appendChild(aux);
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
copyBtn.attr('disabled', true);
copyBtn.html('Copied!');
//disable button for 3s
$copyBtn.attr('disabled', true)
$copyBtn.html('Copied!');
});
// link back to home page
@ -30,8 +37,8 @@ $(document).ready(function() {
$('#file-list').show();
$('#upload-progress').hide();
$('#share-link').hide();
copyBtn.attr('disabled', false);
copyBtn.html('Copy');
$copyBtn.attr('disabled', false);
$copyBtn.html('Copy');
});
// on file upload by browse or drag & drop
@ -49,11 +56,11 @@ $(document).ready(function() {
let link = document.createElement('td');
let expiry = document.createElement('td');
let del = document.createElement('td');
del.setAttribute('align', 'center');
let btn = document.createElement('button');
let popupDiv = document.createElement('div');
let $popupText = $('<span>', { 'class': 'popuptext' });
let cellText = document.createTextNode(file.name);
let progress = document.createElement('p');
name.appendChild(cellText);
@ -75,7 +82,6 @@ $(document).ready(function() {
$(popupDiv).append($popupText);
del.appendChild(popupDiv);
row.appendChild(del);
$fileList.append(row); //add row to table
const fileSender = new FileSender(file);
fileSender.on('progress', percentComplete => {
@ -83,7 +89,9 @@ $(document).ready(function() {
$('#file-list').hide();
$('#upload-progress').show();
$('#upload-filename').innerHTML += file.name;
progress.innerText = `Progress: ${percentComplete}%`;
// update progress bar
document.querySelector('#progress-bar').style.setProperty('--progress', percentComplete+'%');
$('#progress-text').html(`${percentComplete}%`);
});
fileSender.upload().then(info => {
const url = info.url.trim() + `#${info.secretKey}`.trim();
@ -96,17 +104,20 @@ $(document).ready(function() {
FileSender.delete(
info.fileId,
localStorage.getItem(info.fileId)
).then(() => {
//
).then(() => {
$(e.target).parents('tr').remove();
localStorage.removeItem(info.fileId);
});
});
// show popup
btn.addEventListener('click', toggleShow);
del.addEventListener('click', toggleShow);
// hide popup
$popupText.find('.nvm').click(toggleShow);
$fileList.append(row); //add row to table
$('#page-one').hide();
$('#file-list').hide();
$('#upload-progress').hide();
$('#share-link').show();
});

View File

@ -43,6 +43,7 @@ input, select, textarea, button {
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
#browse {
@ -110,49 +111,55 @@ td {
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
transition: opacity 0.5s;
opacity: 0;
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
transition: opacity 0.5s;
opacity: 0;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.popup .show {
visibility: visible;
opacity: 1;
visibility: visible;
opacity: 1;
}
/** upload-progress **/
#progress-bar {
width: 300px;
height: 5px;
background: linear-gradient(90deg, #FD9800, #D73000 var(--progress), white var(--progress));
border: 0.5px solid;
border-radius: 5px;
}
/** share-link **/
.share-window {
@ -233,10 +240,32 @@ td {
cursor: auto;
}
#download {
#download-page-one {
margin: 0 auto;
width: 470px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
#expired-img {
display: none;
}
#download-progress {
margin: 0 auto;
width: 470px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
#download-text {
margin-bottom: 40px;
}

View File

@ -16,15 +16,29 @@
Your friend is sending you a file: <br>
{{{filename}}} ({{{filesize}}})
</div>
<div class="share-window">
<button id="download-btn" onclick="download()">Download File</button>
<img id="expired-img" src="/resources/link_expired.png"/>
<div id="download-page-one">
<div>
<button id="download-btn" onclick="download()">Download File</button>
</div>
</div>
<div id="download-progress">
<div id="download-text">
Downloading File...
</div>
<div class="upload">
<!-- progress bar here -->
<div id="progress-bar"></div>
<div id="progress-text"></div>
</div>
</div>
<div class="send-new" id="send-file">
Send your own files
</div>
{{else}}
<div class="title">
This link has expired or never existed in the first place.
</div>
@ -35,12 +49,13 @@
<div class="send-new" id="send-file">
Send your own files
</div>
{{/if}}
</div>
</div>
<!-- <ul id="downloaded_files">
</ul> -->
</ul> -->
</body>
</html>

View File

@ -52,6 +52,8 @@
<div id="upload-img"><img src="/resources/upload.svg"/></div>
<div class="upload">
<!-- progress bar here -->
<div id="progress-bar"></div>
<div id="progress-text"></div>
</div>
</div>
</div>