diff --git a/frontend/src/download.js b/frontend/src/download.js
index 9663c5f9..230a2062 100644
--- a/frontend/src/download.js
+++ b/frontend/src/download.js
@@ -9,16 +9,22 @@ const links = require('./links');
const $ = require('jquery');
require('jquery-circle-progress');
-$(document).ready(function() {
+$(() => {
gcmCompliant()
- .then(function() {
- $('.send-new').click(function() {
+ .then(() => {
+ const $downloadBtn = $('#download-btn');
+ const $sendNew = $('.send-new');
+ const $dlProgress = $('#dl-progress');
+ const $progressText = $('.progress-text');
+ const $title = $('.title');
+
+ $sendNew.on('click', () => {
sendEvent('recipient', 'restarted', {
cd2: 'completed'
});
});
- $('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
+ $('.legal-links a, .social-links a, #dl-firefox').on('click', function(target) {
const metric = findMetric(target.currentTarget.href);
// record exited event by recipient
sendEvent('recipient', 'exited', {
@@ -31,17 +37,17 @@ $(document).ready(function() {
const timeToExpiry = Number($('#dl-ttl').text());
//initiate progress bar
- $('#dl-progress').circleProgress({
+ $dlProgress.circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
size: 158,
animation: { duration: 300 }
});
- $('#download-btn').click(download);
- function download() {
+
+ const download = () => {
// Disable the download button to avoid accidental double clicks.
- $('#download-btn').attr('disabled', 'disabled');
+ $downloadBtn.attr('disabled', 'disabled');
links.setOpenInNewTab(true);
storage.totalDownloads += 1;
@@ -66,9 +72,9 @@ $(document).ready(function() {
$('#download-progress').removeAttr('hidden');
const percent = progress[0] / progress[1];
// update progress bar
- $('#dl-progress').circleProgress('value', percent);
+ $dlProgress.circleProgress('value', percent);
$('.percent-number').text(`${Math.floor(percent * 100)}`);
- $('.progress-text').text(
+ $progressText.text(
`${filename} (${bytes(progress[0], {
decimalPlaces: 1,
fixedDecimals: true
@@ -83,7 +89,7 @@ $(document).ready(function() {
fileReceiver.removeAllListeners('progress');
window.onunload = null;
document.l10n.formatValue('decryptingFile').then(decryptingFile => {
- $('.progress-text').text(decryptingFile);
+ $progressText.text(decryptingFile);
});
} else {
downloadEnd = Date.now();
@@ -94,15 +100,15 @@ $(document).ready(function() {
// The file is being hashed to make sure a malicious user hasn't tampered with it
if (isStillHashing) {
document.l10n.formatValue('verifyingFile').then(verifyingFile => {
- $('.progress-text').text(verifyingFile);
+ $progressText.text(verifyingFile);
});
} else {
- $('.progress-text').text(' ');
+ $progressText.text(' ');
document.l10n
.formatValues('downloadNotification', 'downloadFinish')
.then(translated => {
notify(translated[0]);
- $('.title').text(translated[1]);
+ $title.text(translated[1]);
});
}
});
@@ -135,9 +141,9 @@ $(document).ready(function() {
location.reload();
} else {
document.l10n.formatValue('errorPageHeader').then(translated => {
- $('.title').text(translated);
+ $title.text(translated);
});
- $('#download-btn').attr('hidden', true);
+ $downloadBtn.attr('hidden', true);
$('#expired-img').removeAttr('hidden');
}
throw err;
@@ -181,6 +187,8 @@ $(document).ready(function() {
})
.then(() => links.setOpenInNewTab(false));
}
+
+ $downloadBtn.on('click', download);
})
.catch(err => {
sendEvent('sender', 'unsupported', {
diff --git a/frontend/src/upload.js b/frontend/src/upload.js
index 290cfdf6..1423f6d4 100644
--- a/frontend/src/upload.js
+++ b/frontend/src/upload.js
@@ -26,21 +26,30 @@ const allowedCopy = () => {
return support ? document.queryCommandSupported('copy') : false;
};
-$(document).ready(function() {
+$(() => {
gcmCompliant()
- .then(function() {
- $('#page-one').removeAttr('hidden');
- $('#file-upload').change(onUpload);
+ .then(function () {
+ const $pageOne = $('#page-one');
+ const $copyBtn = $('#copy-btn');
+ const $link = $('#link');
+ const $uploadWindow = $('.upload-window');
+ const $ulProgress = $('#ul-progress');
+ const $uploadError = $('#upload-error');
+ const $uploadProgress = $('#upload-progress');
+ const $progressText = $('.progress-text');
+ const $fileList = $('#file-list');
- $('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
- const metric = findMetric(target.currentTarget.href);
+ $pageOne.removeAttr('hidden');
+ $('#file-upload').on('change', onUpload);
+
+ $('.legal-links a, .social-links a, #dl-firefox').on('click', function(target) {
// record exited event by recipient
sendEvent('sender', 'exited', {
- cd3: metric
+ cd3: findMetric(target.currentTarget.href)
});
});
- $('#send-new-completed').click(function() {
+ $('#send-new-completed').on('click', function() {
// record restarted event
storage.referrer = 'errored-upload';
sendEvent('sender', 'restarted', {
@@ -48,7 +57,7 @@ $(document).ready(function() {
});
});
- $('#send-new-error').click(function() {
+ $('#send-new-error').on('click', function() {
// record restarted event
storage.referrer = 'errored-upload';
sendEvent('sender', 'restarted', {
@@ -56,12 +65,26 @@ $(document).ready(function() {
});
});
- $('body').on('dragover', allowDrop).on('drop', onUpload);
+ $(document.body)
+ .on('dragover', allowDrop)
+ .on('drop', onUpload);
+
// reset copy button
- const $copyBtn = $('#copy-btn');
- $copyBtn.attr('disabled', false);
- $('#link').attr('disabled', false);
- $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
+ $copyBtn.attr({
+ disabled: !allowedCopy(),
+ 'data-l10n-id': 'copyUrlFormButton'
+ })
+
+ $link.attr('disabled', false);
+
+ const toggleHeader = () => {
+ //hide table header if empty list
+ if (document.querySelector('tbody').childNodes.length === 1) {
+ $fileList.attr('hidden', true);
+ } else {
+ $fileList.removeAttr('hidden');
+ }
+ }
const files = storage.files;
if (files.length === 0) {
@@ -76,34 +99,38 @@ $(document).ready(function() {
}
// copy link to clipboard
- $copyBtn.click(() => {
- if (allowedCopy() && copyToClipboard($('#link').attr('value'))) {
+ $copyBtn.on('click', () => {
+ if (allowedCopy() && copyToClipboard($link.attr('value'))) {
// record copied event from success screen
sendEvent('sender', 'copied', {
cd4: 'success-screen'
});
+
//disable button for 3s
$copyBtn.attr('disabled', true);
- $('#link').attr('disabled', true);
+ $link.attr('disabled', true);
$copyBtn.html(
''
);
- window.setTimeout(() => {
- $copyBtn.attr('disabled', false);
- $('#link').attr('disabled', false);
- $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
+ setTimeout(() => {
+ $copyBtn.attr({
+ disabled: false,
+ 'data-l10n-id': 'copyUrlFormButton'
+ });
+ $link.attr('disabled', false);
}, 3000);
}
});
- $('.upload-window').on('dragover', () => {
- $('.upload-window').addClass('ondrag');
- });
- $('.upload-window').on('dragleave', () => {
- $('.upload-window').removeClass('ondrag');
+ $uploadWindow.on('dragover', () => {
+ $uploadWindow.addClass('ondrag');
+ })
+ .on('dragleave', () => {
+ $uploadWindow.removeClass('ondrag');
});
+
//initiate progress bar
- $('#ul-progress').circleProgress({
+ $ulProgress.circleProgress({
value: 0.0,
startAngle: -Math.PI / 2,
fill: '#3B9DFF',
@@ -119,7 +146,7 @@ $(document).ready(function() {
event.preventDefault();
// don't allow upload if not on upload page
- if ($('#page-one').attr('hidden')) {
+ if ($pageOne.attr('hidden')) {
return;
}
@@ -128,14 +155,14 @@ $(document).ready(function() {
let file = '';
if (event.type === 'drop') {
if (!event.originalEvent.dataTransfer.files[0]) {
- $('.upload-window').removeClass('ondrag');
+ $uploadWindow.removeClass('ondrag');
return;
}
if (
event.originalEvent.dataTransfer.files.length > 1 ||
event.originalEvent.dataTransfer.files[0].size === 0
) {
- $('.upload-window').removeClass('ondrag');
+ $uploadWindow.removeClass('ondrag');
document.l10n
.formatValue('uploadPageMultipleFilesAlert')
.then(str => {
@@ -154,17 +181,17 @@ $(document).ready(function() {
.then(alert);
}
- $('#page-one').attr('hidden', true);
- $('#upload-error').attr('hidden', true);
- $('#upload-progress').removeAttr('hidden');
+ $pageOne.attr('hidden', true);
+ $uploadError.attr('hidden', true);
+ $uploadProgress.removeAttr('hidden');
document.l10n.formatValue('importingFile').then(importingFile => {
- $('.progress-text').text(importingFile);
+ $progressText.text(importingFile);
});
//don't allow drag and drop when not on page-one
- $('body').off('drop', onUpload);
+ $(document.body).off('drop', onUpload);
const fileSender = new FileSender(file);
- $('#cancel-upload').click(() => {
+ $('#cancel-upload').on('click', () => {
fileSender.cancel();
storage.referrer = 'cancelled-upload';
@@ -183,13 +210,11 @@ $(document).ready(function() {
fileSender.on('progress', progress => {
const percent = progress[0] / progress[1];
// update progress bar
- $('#ul-progress').circleProgress('value', percent);
- $('#ul-progress')
- .circleProgress()
- .on('circle-animation-end', function() {
- $('.percent-number').text(`${Math.floor(percent * 100)}`);
- });
- $('.progress-text').text(
+ $ulProgress.circleProgress('value', percent);
+ $ulProgress.circleProgress().on('circle-animation-end', function() {
+ $('.percent-number').text(`${Math.floor(percent * 100)}`);
+ });
+ $progressText.text(
`${file.name} (${bytes(progress[0], {
decimalPlaces: 1,
fixedDecimals: true
@@ -201,7 +226,7 @@ $(document).ready(function() {
// The file is being hashed
if (isStillHashing) {
document.l10n.formatValue('verifyingFile').then(verifyingFile => {
- $('.progress-text').text(verifyingFile);
+ $progressText.text(verifyingFile);
});
}
});
@@ -211,7 +236,7 @@ $(document).ready(function() {
// The file is being encrypted
if (isStillEncrypting) {
document.l10n.formatValue('encryptingFile').then(encryptingFile => {
- $('.progress-text').text(encryptingFile);
+ $progressText.text(encryptingFile);
});
} else {
uploadStart = Date.now();
@@ -276,9 +301,9 @@ $(document).ready(function() {
'uploadSuccessConfirmHeader'
);
t = window.setTimeout(() => {
- $('#page-one').attr('hidden', true);
- $('#upload-progress').attr('hidden', true);
- $('#upload-error').attr('hidden', true);
+ $pageOne.attr('hidden', true);
+ $uploadProgress.attr('hidden', true);
+ $uploadError.attr('hidden', true);
$('#share-link').removeAttr('hidden');
}, 1000);
@@ -294,9 +319,9 @@ $(document).ready(function() {
}
// only show error page when the error is anything other than user cancelling the upload
Raven.captureException(err);
- $('#page-one').attr('hidden', true);
- $('#upload-progress').attr('hidden', true);
- $('#upload-error').removeAttr('hidden');
+ $pageOne.attr('hidden', true);
+ $uploadProgress.attr('hidden', true);
+ $uploadError.removeAttr('hidden');
window.clearTimeout(t);
// record upload-stopped (errored) by sender
@@ -338,7 +363,7 @@ $(document).ready(function() {
}
//update file table with current files in storage
- function populateFileList(file) {
+ const populateFileList = (file) => {
const row = document.createElement('tr');
const name = document.createElement('td');
const link = document.createElement('td');
@@ -360,13 +385,12 @@ $(document).ready(function() {
const cellText = document.createTextNode(file.name);
const url = file.url.trim() + `#${file.secretKey}`.trim();
+
+ $link.attr('value', url);
+ $('#copy-text')
+ .attr('data-l10n-args', `{"filename": "${file.name}"}`)
+ .attr('data-l10n-id', 'copyUrlFormLabelWithName');
- $('#link').attr('value', url);
- $('#copy-text').attr(
- 'data-l10n-args',
- '{"filename": "' + file.name + '"}'
- );
- $('#copy-text').attr('data-l10n-id', 'copyUrlFormLabelWithName');
$popupText.attr('tabindex', '-1');
name.appendChild(cellText);
@@ -374,19 +398,21 @@ $(document).ready(function() {
// create delete button
const delSpan = document.createElement('span');
- $(delSpan).addClass('icon-cancel-1');
- $(delSpan).attr('data-l10n-id', 'deleteButtonHover');
+ $(delSpan)
+ .addClass('icon-cancel-1')
+ .attr('data-l10n-id', 'deleteButtonHover');
del.appendChild(delSpan);
const linkSpan = document.createElement('span');
- $(linkSpan).addClass('icon-docs');
- $(linkSpan).attr('data-l10n-id', 'copyUrlHover');
- link.appendChild(linkSpan);
+ $(linkSpan)
+ .addClass('icon-docs')
+ .attr('data-l10n-id', 'copyUrlHover');
+ link.appendChild(linkSpan);
link.style.color = '#0A8DFF';
//copy link to clipboard when icon clicked
- $copyIcon.click(function() {
+ $copyIcon.on('click', () => {
// record copied event from upload list
sendEvent('sender', 'copied', {
cd4: 'upload-list'
@@ -395,11 +421,13 @@ $(document).ready(function() {
document.l10n.formatValue('copiedUrl').then(translated => {
link.innerHTML = translated;
});
- window.setTimeout(() => {
+ setTimeout(() => {
const linkImg = document.createElement('img');
- $(linkImg).addClass('icon-copy');
- $(linkImg).attr('data-l10n-id', 'copyUrlHover');
- $(linkImg).attr('src', '/resources/copy-16.svg');
+ $(linkImg)
+ .addClass('icon-copy')
+ .attr('data-l10n-id', 'copyUrlHover')
+ .attr('src', '/resources/copy-16.svg');
+
$(link).html(linkImg);
}, 500);
});
@@ -415,9 +443,7 @@ $(document).ready(function() {
let hours = Math.floor(minutes / 60);
let seconds = Math.floor(countdown / 1000 % 60);
- poll();
-
- function poll() {
+ const poll = () => {
countdown = future.getTime() - Date.now();
minutes = Math.floor(countdown / 1000 / 60);
hours = Math.floor(minutes / 60);
@@ -426,7 +452,7 @@ $(document).ready(function() {
if (hours >= 1) {
expiry.innerHTML = hours + 'h ' + minutes % 60 + 'm';
- t = window.setTimeout(() => {
+ t = setTimeout(() => {
poll();
}, 60000);
} else if (hours === 0) {
@@ -444,6 +470,8 @@ $(document).ready(function() {
}
}
+ poll();
+
// create popup
popupDiv.classList.add('popup');
const $popupMessage = $('