Refactor progress bar implementation & Remove ESLint comments

Author: mahmoudmagdy1-1

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

@@ -58,10 +58,13 @@
 $this->useCoreUI = true;
 ?>
 <?php if ($tmpl === 'component') : ?>
-<div class="subhead noshadow mb-3">
-    <?php echo $this->getDocument()->getToolbar('toolbar')->render(); ?>
-</div>
+    <div class="subhead noshadow mb-3">
+        <?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) : ?>
@@ -72,4 +75,4 @@
     <?php endif; ?>
     <input type="hidden" name="mediatypes" value="<?php echo $this->escape($mediaTypes); ?>">
 </form>
-<script type="module" src="<?php echo $script . '?' . $this->getDocument()->getMediaVersion(); ?>"></script>
+<script type="module" src="<?php echo $script . '?' . $this->getDocument()->getMediaVersion(); ?>"></script>

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

@@ -155,27 +155,24 @@ class Edit {
   // eslint-disable-next-line class-methods-use-this
   Redo() { }
 
-  // eslint-disable-next-line class-methods-use-this
   createProgressBar() {
-    const mediaLoader = document.createElement('div');
-    mediaLoader.id = 'media-edit-progress';
-    mediaLoader.className = 'media-loader';
-
-    mediaLoader.style.top = '0';
-    mediaLoader.style.zIndex = '1000';
-
-    this.baseContainer.insertAdjacentElement('beforebegin', mediaLoader);
+    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);
+    }
+  }
 
-  // eslint-disable-next-line class-methods-use-this
   removeProgressBar() {
-    const mediaLoader = document.getElementById('media-edit-progress');
-    if (mediaLoader) {
-      mediaLoader.remove();
+    if (this.progress && this.progressBar) {
+      this.progress.classList.add('visually-hidden');
+      this.progressBar.style.width = '0';
+      this.progressBar.setAttribute('aria-valuenow', '0');
     }
   }