Hide sidebar stuff when not needed

macrovision.html

@@ -134,30 +134,34 @@
           </div>
         </div>
       </span>
-      <h3 class="options-header">Entity options</h3>
-      <div class="options-label">
-        Ordering
-      </div>
-      <div class="options-two-buttons" id="options-ordering">
-        <button id="options-order-back">Toward back</button>
-        <div id="options-order-display"></div>
-        <button id="options-order-forward">Toward front</button>
-      </div>
-      <div class="options-label">
-        Active view
-      </div>
-      <select class="options-selector" id="entity-view"></select>
-      <div class="options-label">
-        Sizes
+      <h3 class="options-header" id="entity-category-header">Entity options</h3>
+      <div class="options-category" id="entity-category">
+        <div class="options-label">
+          Ordering
+        </div>
+        <div class="options-two-buttons" id="options-ordering">
+          <button id="options-order-back">Toward back</button>
+          <div id="options-order-display"></div>
+          <button id="options-order-forward">Toward front</button>
+        </div>
+        <div class="options-label">
+          View
+        </div>
+        <select class="options-selector" id="entity-view"></select>
+        <div class="options-label">
+          Sizes
+        </div>
+        <div class="options-block" id="options-entity-defaults">
+        </div>
+        <span id="options-entity">
+        </span>
       </div>
-      <div class="options-block" id="options-entity-defaults">
+      <h3 class="options-header" id="view-category-header">View options</h3>
+      <div class="options-category" id="view-category">
+        <span id="options-view">
+        </span>
       </div>
-      <span id="options-entity">
-      </span>
-      <h3 class="options-header">View options</h3>
-      <span id="options-view">
-      </span>
-      <h3 class="options-header">Attribution</h3>
+      <h3 class="options-header" id="attribution-category-header" >Attribution</h3>
       <span id="options-attribution">
         <div class="options-label">
           Authors

macrovision.js

@@ -467,6 +467,9 @@ function updateWorldOptions(entity, view) {
 
 function configEntityOptions(entity, view) {
     const holder = document.querySelector("#options-entity");
+    
+    document.querySelector("#entity-category-header").style.display = "block";
+    document.querySelector("#entity-category").style.display = "block";
 
     holder.innerHTML = "";
 
@@ -559,16 +562,23 @@ function updateEntityOptions(entity, view) {
 }
 
 function clearEntityOptions() {
+    document.querySelector("#entity-category-header").style.display = "none";
+    document.querySelector("#entity-category").style.display = "none";
+    /*
     const holder = document.querySelector("#options-entity");
 
     holder.innerHTML = "";
 
     document.querySelector("#options-entity-defaults").innerHTML = "";
     document.querySelector("#options-ordering").style.display = "none";
+    document.querySelector("#options-ordering").style.display = "none";*/
 }
 
 function configViewOptions(entity, view) {
     const holder = document.querySelector("#options-view");
+    
+    document.querySelector("#view-category-header").style.display = "block";
+    document.querySelector("#view-category").style.display = "block";
 
     holder.innerHTML = "";
 
@@ -670,9 +680,8 @@ function getSortedEntities() {
 }
 
 function clearViewOptions() {
-    const holder = document.querySelector("#options-view");
-
-    holder.innerHTML = "";
+    document.querySelector("#view-category-header").style.display = "none";
+    document.querySelector("#view-category").style.display = "none";
 }
 
 // this is a crime against humanity, and also stolen from
@@ -757,10 +766,12 @@ function removeAllEntities() {
 }
 
 function clearAttribution() {
+    document.querySelector("#attribution-category-header").style.display = "none";
     document.querySelector("#options-attribution").style.display = "none";
 }
 
 function displayAttribution(file) {
+    document.querySelector("#attribution-category-header").style.display = "block";
     document.querySelector("#options-attribution").style.display = "inline";
     const authors = authorsOfFull(file);
     const owners = ownersOfFull(file);
@@ -1502,6 +1513,10 @@ document.addEventListener("DOMContentLoaded", () => {
     document.querySelector("#menu-load").addEventListener("click", e => {
         loadScene();
     });
+
+    clearEntityOptions();
+    clearViewOptions();
+    clearAttribution();
 });
 
 function prepareEntities() {