Merge pull request #256 from mozilla/ui

add file size limit message
mozilla · Jul 19, 2017 · 64e7182 · 64e7182
2 parents 262322b + 8c1ba8b
commit 64e7182
Show file tree

Hide file tree

Showing 7 changed files with 2,439 additions and 393 deletions.
diff --git a/frontend/src/download.js b/frontend/src/download.js
@@ -5,7 +5,6 @@ require('jquery-circle-progress');
 
 const Raven = window.Raven;
 $(document).ready(function() {
-  $('#download-progress').hide();
   //link back to homepage
   $('.send-new').attr('href', window.location.origin);
 
@@ -23,8 +22,8 @@ $(document).ready(function() {
     const fileReceiver = new FileReceiver();
 
     fileReceiver.on('progress', progress => {
-      $('#download-page-one').hide();
-      $('#download-progress').show();
+      $('#download-page-one').attr('hidden', true);
+      $('#download-progress').removeAttr('hidden');
       const percent = progress[0] / progress[1];
       // update progress bar
       $('#dl-progress').circleProgress('value', percent);
@@ -50,7 +49,7 @@ $(document).ready(function() {
                      .then(translated => {
                        notify(translated[0]);
                        $('.title').html(translated[1]);
-                     })
+                     });
       }
     });
 
@@ -78,9 +77,9 @@ $(document).ready(function() {
         document.l10n.formatValue('expiredPageHeader')
                      .then(translated => {
                        $('.title').text(translated);
-                     })
-        $('#download-btn').hide();
-        $('#expired-img').show();
+                     });
+        $('#download-btn').attr('hidden', true);
+        $('#expired-img').removeAttr('hidden');
         console.log('The file has expired, or has already been deleted.');
         return;
       })

diff --git a/frontend/src/upload.js b/frontend/src/upload.js
@@ -7,8 +7,8 @@ const Raven = window.Raven;
 
 $(document).ready(function() {
   gcmCompliant().catch(err => {
-    $('#page-one').hide();
-    $('#unsupported-browser').show();
+    $('#page-one').attr('hidden', true);
+    $('#unsupported-browser').removeAttr('hidden');
   });
 
   $('#file-upload').change(onUpload);
@@ -19,12 +19,6 @@ $(document).ready(function() {
   $('#link').attr('disabled', false);
   $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
 
-  $('#upload-progress').hide();
-  $('#share-link').hide();
-  $('#upload-error').hide();
-  $('#unsupported-browser').hide();
-  $('#compliance-error').hide();
-  $('#page-one').show();
 
   if (localStorage.length === 0) {
     toggleHeader();
@@ -75,6 +69,12 @@ $(document).ready(function() {
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
+    $('#page-one').attr('hidden', true);
+    $('#upload-error').attr('hidden', true);
+    $('#upload-progress').removeAttr('hidden');
+    //don't allow drag and drop when not on page-one
+    $('body').off('drop', onUpload);
+
     let file = '';
     if (event.type === 'drop') {
       file = event.originalEvent.dataTransfer.files[0];
@@ -89,17 +89,11 @@ $(document).ready(function() {
       location.reload();
       document.l10n.formatValue('uploadCancelNotification')
                    .then(str => {
-                     console.log('here')
                      notify(str);
-                   })
+                   });
     });
 
     fileSender.on('progress', progress => {
-      $('#page-one').hide();
-      $('#upload-error').hide();
-      $('#upload-progress').show();
-      //don't allow drag and drop when not on page-one
-      $('body').off('drop', onUpload);
       const percent = progress[0] / progress[1];
       // update progress bar
       $('#ul-progress').circleProgress('value', percent);
@@ -163,23 +157,24 @@ $(document).ready(function() {
         localStorage.setItem(info.fileId, JSON.stringify(fileData));
         $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
         t = window.setTimeout(() => {
-          $('#page-one').hide();
-          $('#upload-progress').hide();
-          $('#upload-error').hide();
-          $('#share-link').show();
+          $('#page-one').attr('hidden', true);
+          $('#upload-progress').attr('hidden', true);
+          $('#upload-error').attr('hidden', true);
+          $('#share-link').removeAttr('hidden');
         }, 2000);
 
         populateFileList(JSON.stringify(fileData));
-        document.l10n.formatValue('notifyUploadDone').then(str => {
-          notify(str);
-        });
+        document.l10n.formatValue('notifyUploadDone')
+                     .then(str => {
+                       notify(str);
+                     });
       })
       .catch(err => {
         Raven.captureException(err);
         console.log(err);
-        $('#page-one').hide();
-        $('#upload-progress').hide();
-        $('#upload-error').show();
+        $('#page-one').attr('hidden', true);
+        $('#upload-progress').attr('hidden', true);
+        $('#upload-error').removeAttr('hidden');
         window.clearTimeout(t);
       });
   }
@@ -263,8 +258,8 @@ $(document).ready(function() {
       document.body.removeChild(aux);
       document.l10n.formatValue('copiedUrl')
                    .then(translated => {
-        link.innerHTML = translated;
-      })
+                     link.innerHTML = translated;
+                   });
       window.setTimeout(() => {
         const linkImg = document.createElement('img');
         $(linkImg).addClass('icon-copy');
@@ -381,9 +376,9 @@ $(document).ready(function() {
   function toggleHeader() {
     //hide table header if empty list
     if (document.querySelector('tbody').childNodes.length === 1) {
-      $('#file-list').hide();
+      $('#file-list').attr('hidden', true);
     } else {
-      $('#file-list').show();
+      $('#file-list').removeAttr('hidden');
     }
   }
 });