[6.0] Implement progress bar for Media Manager image edits

administrator/components/com_media/tmpl/file/default.php

@@ -62,6 +62,9 @@
     <?php echo $this->getDocument()->getToolbar('toolbar')->render(); ?>
 </div>
 <?php endif; ?>
+<div id="progress" class="progress visually-hidden">
+    <div id="progress-bar" class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
 <form action="#" method="post" name="adminForm" id="media-form" class="form-validate main-card media-form mt-3">
     <?php $fieldSets = $form->getFieldsets(); ?>
     <?php if ($fieldSets) : ?>

build/media_source/com_media/js/edit-images.es6.js

@@ -155,17 +155,26 @@ class Edit {
   // eslint-disable-next-line class-methods-use-this
   Redo() { }
 
-  // @TODO Create the progress bar
-  // eslint-disable-next-line class-methods-use-this
-  createProgressBar() { }
+  createProgressBar() {
+    this.progress = document.getElementById('progress');
+    this.progressBar = document.querySelector('.progress-bar');
+    this.progress.classList.remove('visually-hidden');
+  }
 
-  // @TODO Update the progress bar
-  // eslint-disable-next-line class-methods-use-this
-  updateProgressBar(/* position */) { }
+  updateProgressBar(position) {
+    if (this.progressBar) {
+      this.progressBar.style.width = `${position}%`;
+      this.progressBar.setAttribute('aria-valuenow', position);
+    }
+  }
 
-  // @TODO Remove the progress bar
-  // eslint-disable-next-line class-methods-use-this
-  removeProgressBar() { }
+  removeProgressBar() {
+    if (this.progress && this.progressBar) {
+      this.progress.classList.add('visually-hidden');
+      this.progressBar.style.width = '0';
+      this.progressBar.setAttribute('aria-valuenow', '0');
+    }
+  }
 
   /**
    * Uploads