WebHost: minor css changes to make Supported Games page usable without js (#2266)

* WebHost: minor css changes to make Supported Games page usable without js

* Update JS to use querySelectorAll, remove most id attributes from elements, use relative element selectors

* Hide content when clearing search bar

* Remove `console.log`, remove TODO

---------

Co-authored-by: Chris Wilson <chris@legendserver.info>

WebHostLib/static/assets/supportedGames.js

@@ -1,51 +1,32 @@
 window.addEventListener('load', () => {
-  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  // Add toggle listener to all elements with .collapse-toggle
-  Array.from(gameHeaders).forEach((header) => {
+  const toggleButtons = document.querySelectorAll('.collapse-toggle');
-    const gameName = header.getAttribute('data-game');
+  toggleButtons.forEach((e) => e.addEventListener('click', toggleCollapse));
-    header.addEventListener('click', () => {
-      const gameArrow = document.getElementById(`${gameName}-arrow`);
-      const gameInfo = document.getElementById(gameName);
-      if (gameInfo.classList.contains('collapsed')) {
-        gameArrow.innerText = '▼';
-        gameInfo.classList.remove('collapsed');
-      } else {
-        gameArrow.innerText = '▶';
-        gameInfo.classList.add('collapsed');
-      }
-    });
-  });
 
   // Handle game filter input
   const gameSearch = document.getElementById('game-search');
   gameSearch.value = '';
-
   gameSearch.addEventListener('input', (evt) => {
     if (!evt.target.value.trim()) {
       // If input is empty, display all collapsed games
-      return Array.from(gameHeaders).forEach((header) => {
+      return toggleButtons.forEach((header) => {
         header.style.display = null;
-        const gameName = header.getAttribute('data-game');
+        header.firstElementChild.innerText = '▶';
-        document.getElementById(`${gameName}-arrow`).innerText = '▶';
+        header.nextElementSibling.classList.add('collapsed');
-        document.getElementById(gameName).classList.add('collapsed');
       });
     }
 
     // Loop over all the games
-    Array.from(gameHeaders).forEach((header) => {
+    toggleButtons.forEach((header) => {
-      const gameName = header.getAttribute('data-game');
-      const gameArrow = document.getElementById(`${gameName}-arrow`);
-      const gameInfo = document.getElementById(gameName);
-
       // If the game name includes the search string, display the game. If not, hide it
-      if (gameName.toLowerCase().includes(evt.target.value.toLowerCase())) {
+      if (header.getAttribute('data-game').toLowerCase().includes(evt.target.value.toLowerCase())) {
         header.style.display = null;
-        gameArrow.innerText = '▼';
+        header.firstElementChild.innerText = '▼';
-        gameInfo.classList.remove('collapsed');
+        header.nextElementSibling.classList.remove('collapsed');
       } else {
-        console.log(header);
         header.style.display = 'none';
-        gameArrow.innerText = '▶';
+        header.firstElementChild.innerText = '▶';
-        gameInfo.classList.add('collapsed');
+        header.nextElementSibling.classList.add('collapsed');
       }
     });
   });
@@ -54,30 +35,30 @@ window.addEventListener('load', () => {
   document.getElementById('collapse-all').addEventListener('click', collapseAll);
 });
 
-const expandAll = () => {
+const toggleCollapse = (evt) => {
-  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  const gameArrow = evt.target.firstElementChild;
-  // Loop over all the games
+  const gameInfo = evt.target.nextElementSibling;
-    Array.from(gameHeaders).forEach((header) => {
+  if (gameInfo.classList.contains('collapsed')) {
-      const gameName = header.getAttribute('data-game');
+    gameArrow.innerText = '▼';
-      const gameArrow = document.getElementById(`${gameName}-arrow`);
+    gameInfo.classList.remove('collapsed');
-      const gameInfo = document.getElementById(gameName);
+  } else {
+    gameArrow.innerText = '▶';
+    gameInfo.classList.add('collapsed');
+  }
+};
 
-      if (header.style.display === 'none') { return; }
+const expandAll = () => {
-      gameArrow.innerText = '▼';
+  document.querySelectorAll('.collapse-toggle').forEach((header) => {
-      gameInfo.classList.remove('collapsed');
+    if (header.style.display === 'none') { return; }
-    });
+    header.firstElementChild.innerText = '▼';
+    header.nextElementSibling.classList.remove('collapsed');
+  });
 };
 
 const collapseAll = () => {
-  const gameHeaders = document.getElementsByClassName('collapse-toggle');
+  document.querySelectorAll('.collapse-toggle').forEach((header) => {
-  // Loop over all the games
+    if (header.style.display === 'none') { return; }
-    Array.from(gameHeaders).forEach((header) => {
+    header.firstElementChild.innerText = '▶';
-      const gameName = header.getAttribute('data-game');
+    header.nextElementSibling.classList.add('collapsed');
-      const gameArrow = document.getElementById(`${gameName}-arrow`);
+  });
-      const gameInfo = document.getElementById(gameName);
-
-      if (header.style.display === 'none') { return; }
-      gameArrow.innerText = '▶';
-      gameInfo.classList.add('collapsed');
-    });
 };

WebHostLib/static/styles/supportedGames.css

@@ -18,10 +18,16 @@
     margin-bottom: 2px;
 }
 
+#games .collapse-toggle{
+    cursor: pointer;
+}
+
 #games h2 .collapse-arrow{
     font-size: 20px;
+    display: inline-block; /* make vertical-align work */
+    padding-bottom: 9px;
     vertical-align: middle;
-    cursor: pointer;
+    padding-right: 8px;
 }
 
 #games p.collapsed{
@@ -42,12 +48,12 @@
     margin-bottom: 7px;
 }
 
-#games #page-controls{
+#games .page-controls{
     display: flex;
     flex-direction: row;
     margin-top: 0.25rem;
 }
 
-#games #page-controls button{
+#games .page-controls button{
     margin-left: 0.5rem;
 }

WebHostLib/templates/supportedGames.html

@@ -5,15 +5,35 @@
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/markdown.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/supportedGames.css") }}" />
     <script type="application/ecmascript" src="{{ url_for('static', filename="assets/supportedGames.js") }}"></script>
+    <noscript>
+    <style>
+        /* always un-collapse all and hide arrow and search bar */
+        .js-only{
+          display: none;
+        }
+
+        #games p.collapsed{
+          display: block;
+        }
+
+        #games h2 .collapse-arrow{
+          display: none;
+        }
+
+        #games .collapse-toggle{
+          cursor: unset;
+        }
+    </style>
+    </noscript>
 {% endblock %}
 
 {% block body %}
     {% include 'header/oceanHeader.html' %}
     <div id="games" class="markdown">
         <h1>Currently Supported Games</h1>
-        <div>
+        <div class="js-only">
             <label for="game-search">Search for your game below!</label><br />
-            <div id="page-controls">
+            <div class="page-controls">
                 <input id="game-search" placeholder="Search by title..." autofocus />
                 <button id="expand-all">Expand All</button>
                 <button id="collapse-all">Collapse All</button>
@@ -22,9 +42,9 @@
         {% for game_name in worlds | title_sorted %}
         {% set world = worlds[game_name] %}
         <h2 class="collapse-toggle" data-game="{{ game_name }}">
-            <span id="{{ game_name }}-arrow" class="collapse-arrow">▶</span>&nbsp;{{ game_name }}
+            <span class="collapse-arrow">▶</span>{{ game_name }}
         </h2>
-        <p id="{{ game_name }}" class="collapsed">
+        <p class="collapsed">
             {{ world.__doc__ | default("No description provided.", true) }}<br />
             <a href="{{ url_for("game_info", game=game_name, lang="en") }}">Game Page</a>
             {% if world.web.tutorials %}