Add blurring event on view and loader containers

Author: gsbm

css/style.css

@@ -766,6 +766,12 @@ Viewer
     align-items: center;
     justify-content: center;
     position: absolute;
+    opacity: 1;
+    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.viewer-container.blur {
+    opacity: 0.25;
 }
 
 .viewer-preview {
@@ -942,8 +948,12 @@ Loader
     transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
+.loader-container.active.blur {
+    opacity: 0.25;
+}
+
 .loader-container.active {
-   opacity: 1;
+    opacity: 1;
 }
 
 .loader-container.active.static .loader-cube .cube,

js/script.js

@@ -162,10 +162,11 @@ const informations_container = document.querySelector('.informations-container')
 const loader_container = document.querySelector('.loader-container');
 const loader_label = document.querySelector('.loader-label');
 
-const status_container = document.querySelector('.status-container');
-const status_content = document.querySelector('.status-content');
-const status_label = document.querySelector('.status-label');
+// const status_container = document.querySelector('.status-container');
+// const status_content = document.querySelector('.status-content');
+// const status_label = document.querySelector('.status-label');
 
+const viewer_container = document.querySelector('.viewer-container');
 const viewer_preview = document.querySelector('.viewer-preview');
 const viewer_content = document.querySelector('.viewer-content');
 
@@ -179,6 +180,8 @@ Form events
 function toggleForm() {
     form_settings_container.classList.toggle('active');
     form_settings_label.classList.toggle('active');
+    loader_container.classList.toggle('blur');
+    viewer_container.classList.toggle('blur');
     // form_type_container.classList.toggle('disabled');
 }
 form_settings_label.addEventListener('click', toggleForm);
@@ -338,7 +341,7 @@ Viewer container events
     viewer_content.addEventListener(event, () => {
         form_container.classList.add('blur');
         properties_container.classList.add('blur');
-        status_container.classList.add('blur');
+        // status_container.classList.add('blur');
         if (form_settings_container.classList.contains('active')) {
             toggleForm();
         }
@@ -348,22 +351,22 @@ Viewer container events
     viewer_content.addEventListener(event, () => {
         form_container.classList.remove('blur');
         properties_container.classList.remove('blur');
-        status_container.classList.remove('blur');
+        // status_container.classList.remove('blur');
     });
 });
 
 
 /****************************************************************************************
 Status container events
 ****************************************************************************************/
-status_label.addEventListener('mouseenter', () => {
-    status_label.classList.add('active');
-    status_content.classList.add('active');
-});
-status_container.addEventListener('mouseleave', () => {
-    status_label.classList.remove('active');
-    status_content.classList.remove('active');
-});
+// status_label.addEventListener('mouseenter', () => {
+//     status_label.classList.add('active');
+//     status_content.classList.add('active');
+// });
+// status_container.addEventListener('mouseleave', () => {
+//     status_label.classList.remove('active');
+//     status_content.classList.remove('active');
+// });
 
 
 /****************************************************************************************