From 3c640061f0b69c16ae0876d9d0e486b26e4f91d4 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Fri, 4 Aug 2017 22:41:06 +0200 Subject: [PATCH] Chain jQuery calls, do not use events alias and store often used selectors --- frontend/src/download.js | 40 +++++--- frontend/src/upload.js | 205 ++++++++++++++++++++++----------------- 2 files changed, 139 insertions(+), 106 deletions(-) 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 = $('
', { class: 'popup-message' }); @@ -471,7 +499,7 @@ $(document).ready(function() { const unexpiredFiles = storage.numFiles; // delete file - $popupText.find('.popup-yes').click(e => { + $popupText.find('.popup-yes').on('click', e => { FileSender.delete(file.fileId, file.deleteToken).then(() => { $(e.target).parents('tr').remove(); const timeToExpiry = @@ -494,7 +522,7 @@ $(document).ready(function() { }); }); - document.getElementById('delete-file').onclick = () => { + $('#delete-file').on('click', () => { FileSender.delete(file.fileId, file.deleteToken).then(() => { const timeToExpiry = ONE_DAY_IN_MS - (Date.now() - file.creationDate.getTime()); @@ -514,35 +542,32 @@ $(document).ready(function() { location.reload(); }); }); - }; - // show popup - $delIcon.click(function() { - $popupText.addClass('show'); - $popupText.focus(); }); + + // show popup + $delIcon.on('click', () => { + $popupText + .addClass('show') + .focus(); + }); + // hide popup - $popupText.find('.popup-no').click(function(e) { + $popupText.find('.popup-no').on('click', e => { e.stopPropagation(); $popupText.removeClass('show'); }); - $popupText.click(function(e) { + + $popupText.on('click', e => { e.stopPropagation(); }); + //close when popup loses focus - $popupText.blur(() => { + $popupText.on('blur', () => { $popupText.removeClass('show'); }); toggleHeader(); } - function toggleHeader() { - //hide table header if empty list - if (document.querySelector('tbody').childNodes.length === 1) { - $('#file-list').attr('hidden', true); - } else { - $('#file-list').removeAttr('hidden'); - } - } }) .catch(err => { sendEvent('sender', 'unsupported', {