Chapril/drop.chapril.org-firefoxsend
Chapril
/
drop.chapril.org-firefoxsend
24
1
Fork 0
Code Issues Releases Activity

lint

This commit is contained in:
Daniela Arcese 2017-07-13 11:39:46 -04:00
parent 9032e42912
commit fcdb905430
4 changed files with 53 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/download.js
View File

@ -13,7 +13,7 @@ $(document).ready(function() {
//initiate progress bar
$('#dl-progress').circleProgress({
value: 0.0,
startAngle: -Math.PI/2,
startAngle: -Math.PI / 2,
fill: '#00C8D7',
size: 158
});
@ -21,16 +21,18 @@ $(document).ready(function() {
function download() {
const fileReceiver = new FileReceiver();
const name = document.createElement('p');
const $btn = $('#download-btn');
fileReceiver.on('progress', progress => {
$('#download-page-one').hide();
$('#download-progress').show();
let percent = progress[0]/progress[1];
const percent = progress[0] / progress[1];
// update progress bar
$('#dl-progress').circleProgress('value', percent );
$('.percent-number').html(`${Math.floor(percent*100)}`);
$('.progress-text').append(` (${(progress[0]/1000000).toFixed(2)}MB of ${(progress[1]/1000000).toFixed(2)}MB)`);
$('#dl-progress').circleProgress('value', percent);
$('.percent-number').html(`${Math.floor(percent * 100)}`);
$('.progress-text').append(
` (${(progress[0] / 1000000).toFixed(2)}MB of ${(progress[1] /
1000000).toFixed(2)}MB)`
);
//on complete
if (percent === 1) {
fileReceiver.removeAllListeners('progress');

3
frontend/src/fileReceiver.js
View File

@ -13,9 +13,6 @@ class FileReceiver extends EventEmitter {
xhr.onprogress = event => {
if (event.lengthComputable && event.target.status !== 404) {
const percentComplete = Math.floor(
event.loaded / event.total * 100
);
this.emit('progress', [event.loaded, event.total]);
}
};

48
frontend/src/upload.js
View File

@ -47,7 +47,7 @@ $(document).ready(function() {
//disable button for 3s
$copyBtn.attr('disabled', true);
$('#link').attr('disabled', true);
$copyBtn.html("<span class='icon-check'></span>");
$copyBtn.html('<span class=\'icon-check\'></span>');
window.setTimeout(() => {
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
@ -64,7 +64,7 @@ $(document).ready(function() {
//initiate progress bar
$('#ul-progress').circleProgress({
value: 0.0,
startAngle: -Math.PI/2,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158
});
@ -79,9 +79,7 @@ $(document).ready(function() {
$copyBtn.html('Copy to Clipboard');
});
//cancel the upload
$('#cancel-upload').click(() => {
});
$('#cancel-upload').click(() => {});
// on file upload by browse or drag & drop
function onUpload(event) {
event.preventDefault();
@ -98,14 +96,22 @@ $(document).ready(function() {
$('#page-one').hide();
$('#upload-progress').show();
$('#upload-error').hide();
let percent = progress[0]/progress[1];
const percent = progress[0] / progress[1];
// update progress bar
$('#ul-progress').circleProgress('value', percent );
$('.percent-number').html(`${Math.floor(percent*100)}`);
if(progress[1] < 1000000000){
$('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000).toFixed(1)}MB)`);
$('#ul-progress').circleProgress('value', percent);
$('.percent-number').html(`${Math.floor(percent * 100)}`);
if (progress[1] < 1000000000) {
$('.progress-text').html(
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
);
} else {
$('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000000).toFixed(1)}GB)`);
$('.progress-text').html(
`${file.name} (${(progress[0] / 1000000).toFixed(
1
)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
);
}
});
@ -135,7 +141,7 @@ $(document).ready(function() {
console.log('Finished encrypting');
}
});
let t = '';
fileSender
.upload()
.then(info => {
@ -150,7 +156,7 @@ $(document).ready(function() {
};
localStorage.setItem(info.fileId, JSON.stringify(fileData));
$('#upload-filename').html('Ready to Send');
const t = window.setTimeout(() => {
t = window.setTimeout(() => {
$('#page-one').hide();
$('#upload-progress').hide();
$('#share-link').show();
@ -210,15 +216,18 @@ $(document).ready(function() {
const url = file.url.trim() + `#${file.secretKey}`.trim();
$('#link').attr('value', url);
$('#copy-text').html('Copy and share the link to send your file: ' + file.name);
$('#copy-text').html(
'Copy and share the link to send your file: ' + file.name
);
$popupText.attr('tabindex', '-1');
name.appendChild(cellText);
// create delete button
del.innerHTML = "<span class='icon-cancel-1' title='Delete' style='margin-left: -7px'></span>";
del.innerHTML =
'<span class=\'icon-cancel-1\' title=\'Delete\' style=\'margin-left: -7px\'></span>';
link.innerHTML = "<span class='icon-docs' title='Copy URL'></span>"
link.innerHTML = '<span class=\'icon-docs\' title=\'Copy URL\'></span>';
//copy link to clipboard when icon clicked
$(link).click(function() {
const aux = document.createElement('input');
@ -273,7 +282,7 @@ $(document).ready(function() {
// create popup
popupDiv.classList.add('popup');
$popupText.html(
'<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
'<span class=\'del-file\'>Delete</span><span class=\'nvm\' > Nevermind</span>'
);
// delete file
@ -284,7 +293,7 @@ $(document).ready(function() {
toggleHeader();
});
});
document.getElementById('delete-file').onclick = e => {
document.getElementById('delete-file').onclick = () => {
FileSender.delete(file.fileId, file.deleteToken).then(() => {
localStorage.removeItem(file.fileId);
toggleHeader();
@ -296,13 +305,12 @@ $(document).ready(function() {
row.appendChild(name);
row.appendChild(link);
row.appendChild(expiry);
//popupDiv.appendChild(btn);
$(popupDiv).append($popupText);
del.appendChild(popupDiv);
row.appendChild(del);
// show popup
del.addEventListener('click', function(){
del.addEventListener('click', function() {
$popupText.addClass('show');
$popupText.focus();
});

35
public/main.css
View File

@ -36,7 +36,7 @@ span {
line-height: 23px;
width: 630px;
text-align: center;
margin: 0 auto 60px auto;
margin: 0 auto 60px;
color: #0C0C0D;
}
@ -74,7 +74,7 @@ span {
#upload-text {
font-size: 22px;
color: #737373;
margin: 20px 0 30px 0;
margin: 20px 0 30px;
}
#browse {
@ -82,7 +82,7 @@ span {
border-radius: 5px;
font-family: 'SF Pro Text', sans-serif;
font-size: 15px;
color: #FFFFFF;
color: #FFF;
width: 240px;
height: 44px;
display: flex;
@ -111,7 +111,7 @@ td {
font-size: 15px;
vertical-align: top;
color: #4A4A4A;
padding: 17px 19px 0 19px;
padding: 17px 19px 0;
line-height: 23px;
}
@ -212,7 +212,7 @@ tbody {
.progress-text {
font-family: 'SF Pro Text', sans-serif;
font-size: 15px;
color: rgba(0,0,0,0.50);
color: rgba(0, 0, 0, 0.5);
letter-spacing: -0.4px;
margin-top: 24px;
margin-bottom: 74px;
@ -265,7 +265,7 @@ tbody {
#link:disabled {
border: 1px solid #05A700;
background: #FFFFFF;
background: #FFF;
}
#copy-btn {
@ -289,8 +289,8 @@ tbody {
#delete-file {
width: 176px;
height: 44px;
background: #FFFFFF;
border: 1px solid rgba(12,12,13,0.30);
background: #FFF;
border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 5px;
font-size: 15px;
font-family: 'SF Pro Text';
@ -310,7 +310,7 @@ tbody {
text-decoration: underline;
}
/*upload-error*/
/* upload-error */
#upload-error {
display: flex;
justify-content: center;
@ -324,7 +324,7 @@ tbody {
margin-top: 5px;
}
/*unsupported-browser*/
/* unsupported-browser */
#unsupported-browser {
display: flex;
justify-content: center;
@ -339,7 +339,7 @@ tbody {
width: 630px;
text-align: center;
color: #7D7D7D;
margin: 0 auto 23px auto;
margin: 0 auto 23px;
}
#firefox-logo {
@ -350,14 +350,14 @@ tbody {
margin-bottom: 181px;
width: 260px;
height: 80px;
background: #12bc00;
background: #12BC00;
border-radius: 3px;
cursor: pointer;
border: none;
box-shadow: 0 5px 3px rgb(234,234,234);
box-shadow: 0 5px 3px rgb(234, 234, 234);
font-family: 'Fira Sans';
font-weight: 500;
color: #FFFFFF;
color: #FFF;
font-size: 26px;
display: flex;
justify-content: center;
@ -370,7 +370,7 @@ tbody {
margin-left: 20.4px;
}
#dl-firefox-text>span {
#dl-firefox-text > span {
font-family: 'Fira Sans';
font-weight: 300;
font-size: 18px;
@ -409,7 +409,7 @@ tbody {
}
#expired-img {
margin: 51px 0 71px 0;
margin: 51px 0 71px;
}
.expired-description {
@ -418,9 +418,8 @@ tbody {
line-height: 23px;
width: 630px;
text-align: center;
font-size: 15px;
color: #7D7D7D;
margin: 0 auto 23px auto;
margin: 0 auto 23px;
}
#download-progress {