bug #5538 fix #5526 #5527 #5532 by updating js style modifications to…

… classes (moismailzai) This PR was merged into the 4.x branch. Discussion ---------- fix #5526 #5527 #5532 by updating js style modifications to classes I believe this addresses the items I missed in #5504. Specifically, JavaScripts that modify HTML elements now use classes instead of styles. This should close out issues #5526 #5527 and #5532. Commits ------- 3e37635 fix #5526 #5527 #5532 by updating js style modifications to classes
EasyCorp · Dec 21, 2022 · 3739633 · 3739633
2 parents 1f2cb5d + 3e37635
commit 3739633
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -4,6 +4,7 @@ require('../css/app.scss');
 import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
 import Mark from 'mark.js/src/vanilla';
 import Autocomplete from './autocomplete';
+import {toggleVisibilityClasses} from "./helpers";
 
 // Provide Bootstrap variable globally to allow custom backend pages to use it
 window.bootstrap = bootstrap;
@@ -260,16 +261,16 @@ class App {
                 const batchActions = content.querySelector('.batch-actions');
 
                 if (null !== contentTitle) {
-                    contentTitle.style.visibility = rowsAreSelected ? 'hidden' : 'visible';
+                    toggleVisibilityClasses(contentTitle, rowsAreSelected);
                 }
                 if (null !== filters) {
-                    filters.style.display = rowsAreSelected ? 'none' : 'block';
+                    toggleVisibilityClasses(filters, rowsAreSelected);
                 }
                 if (null !== globalActions) {
-                    globalActions.style.display = rowsAreSelected ? 'none' : 'block';
+                    toggleVisibilityClasses(globalActions, rowsAreSelected);
                 }
                 if (null !== batchActions) {
-                    batchActions.style.display = rowsAreSelected ? 'block' : 'none';
+                    toggleVisibilityClasses(batchActions, !rowsAreSelected);
                 }
             });
         });

diff --git a/assets/js/field-file-upload.js b/assets/js/field-file-upload.js
@@ -1,3 +1,5 @@
+import {toggleVisibilityClasses} from "./helpers";
+
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.ea-fileupload input[type="file"]').forEach((fileUploadElement) => {
         new FileUploadField(fileUploadElement);
@@ -50,7 +52,7 @@ class FileUploadField {
         }
         this.field.value = '';
         this.#getFieldCustomInput().innerHTML = '';
-        this.#getFieldDeleteButton().style.display = 'none';
+        toggleVisibilityClasses(this.#getFieldDeleteButton(), true);
 
         this.#getFieldSizeLabel().childNodes.forEach((fileSizeLabelChild) => {
             if (fileSizeLabelChild.nodeType === Node.TEXT_NODE) {
@@ -59,7 +61,7 @@ class FileUploadField {
         });
 
         if (null !== fieldListOfFiles) {
-            fieldListOfFiles.style.display = 'none';
+            toggleVisibilityClasses(fieldListOfFiles, true);
         }
     }
 

diff --git a/assets/js/helpers.js b/assets/js/helpers.js
@@ -0,0 +1,9 @@
+export function toggleVisibilityClasses(element, removeVisibility) {
+    if (removeVisibility) {
+        element.classList.remove('d-block')
+        element.classList.add('d-none')
+    } else {
+        element.classList.remove('d-none')
+        element.classList.add('d-block')
+    }
+}