Use .classList.replace() not .classList.remove() + .classList.add() for button toggling.

1 files changed, 8 insertions, 16 deletions

diff --git a/main.js b/main.js
index 4764407..aa4427f 100644
--- a/main.js
+++ b/main.js
@@ -281,16 +281,14 @@ if (window.location !== window.parent.location) {
     if (btn.getAttribute('aria-expanded') === 'true') {
       panel.setAttribute('aria-hidden', 'true');
       btn.setAttribute('aria-expanded', 'false');
-      btn.classList.add('btn-light');
-      btn.classList.remove('btn-dark');
+      btn.classList.replace('btn-dark', 'btn-light');
     } else {
       if (btn2.getAttribute('aria-expanded') === 'true') {
         btn2.click();
       }
       panel.setAttribute('aria-hidden', 'false');
       btn.setAttribute('aria-expanded', 'true');
-      btn.classList.add('btn-dark');
-      btn.classList.remove('btn-light');
+      btn.classList.replace('btn-light', 'btn-dark');
     }
   };
 
@@ -299,16 +297,14 @@ if (window.location !== window.parent.location) {
     if (btn2.getAttribute('aria-expanded') === 'true') {
       panel2.setAttribute('aria-hidden', 'true');
       btn2.setAttribute('aria-expanded', 'false');
-      btn2.classList.add('btn-light');
-      btn2.classList.remove('btn-dark');
+      btn2.classList.replace('btn-dark', 'btn-light');
     } else {
       if (btn.getAttribute('aria-expanded') === 'true') {
         btn.click();
       }
       panel2.setAttribute('aria-hidden', 'false');
       btn2.setAttribute('aria-expanded', 'true');
-      btn2.classList.add('btn-dark');
-      btn2.classList.remove('btn-light');
+      btn2.classList.replace('btn-light', 'btn-dark');
     }
   };
 })();
@@ -338,8 +334,7 @@ if (window.location !== window.parent.location) {
 
   control.addEventListener('enterfullscreen', function() {
     const btn = control.element.getElementsByTagName('button')[0];
-    btn.classList.add(classActive);
-    btn.classList.remove(classInactive);
+    btn.classList.replace(classInactive, classActive);
     btn.title = titleActive;
 
     const exp = document.getElementById('export-to-image');
@@ -350,8 +345,7 @@ if (window.location !== window.parent.location) {
   })
   control.addEventListener('leavefullscreen', function() {
     const btn = control.element.getElementsByTagName('button')[0];
-    btn.classList.add(classInactive);
-    btn.classList.remove(classActive);
+    btn.classList.replace(classActive, classInactive);
     btn.title = titleInactive;
 
     const exp = document.getElementById('export-to-image');
@@ -442,12 +436,10 @@ if (window.location !== window.parent.location) {
   panel.addEventListener('show.bs.modal', function() {
     backdrop.classList.add('modal-backdrop', 'show');
     btn.setAttribute('aria-expanded', 'true');
-    btn.classList.add('btn-dark');
-    btn.classList.remove('btn-light');
+    btn.classList.replace('btn-light', 'btn-dark');
   });
   panel.addEventListener('hidden.bs.modal', function() {
-    btn.classList.add('btn-light');
-    btn.classList.remove('btn-dark');
+    btn.classList.replace('btn-dark', 'btn-light');
     btn.setAttribute('aria-expanded', 'false');
     backdrop.classList.remove('modal-backdrop', 'show');
   });