Add comments to JavaScript and some restructuring

app/templates/_scripts.html.j2

@@ -119,76 +119,29 @@
 <script>
   // TODO: Implement an app.run method and use this for all of the following
   const app = new App.App();
+  app.init();
+
+  // Check if the current user is authenticated
   {%- if current_user.is_authenticated %}
+  // TODO: Set this as a property of the app object
   const currentUserId = {{ current_user.hashid|tojson }};
 
-  // Initialize components for current user
+  // Subscribe to the current user's data events
   app.subscribeUser(currentUserId)
     .catch((error) => {throw JSON.stringify(error);});
+
+  // Get the current user's data
   app.getUser(currentUserId, true, true)
     .catch((error) => {throw JSON.stringify(error);});
+
+  // Check if the current user hasn't accepted the terms of use yet
+  {%- if not current_user.terms_of_use_accepted %}
+  M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
+  {%- endif %}
   {%- endif %}
-
-  // Disable all option elements with no value
-  for (let optionElement of document.querySelectorAll('option[value=""]')) {
-    optionElement.disabled = true;
-  }
-  for (let optgroupElement of document.querySelectorAll('optgroup[label=""]')) {
-    for (let c of optgroupElement.children) {
-      optgroupElement.parentElement.insertAdjacentElement('afterbegin', c);
-    }
-    optgroupElement.remove();
-    
-  }
-  // Set the data-length attribute on textareas/inputs with the maxlength attribute
-  for (let inputElement of document.querySelectorAll('textarea[maxlength], input[maxlength]')) {
-    inputElement.dataset.length = inputElement.getAttribute('maxlength');
-  }
-
-  // Initialize components
-  M.AutoInit();
-  M.CharacterCounter.init(document.querySelectorAll('input[data-length], textarea[data-length]'));
-  M.Dropdown.init(
-    document.querySelectorAll('#nav-more-dropdown-trigger'),
-    {alignment: 'right', constrainWidth: false, coverTrigger: false}
-  );
-  ResourceDisplays.autoInit();
-  ResourceLists.autoInit();
-  Forms.autoInit();
 
   // Display flashed messages
   for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
     app.flash(message, message);
   }
-
-  // Initialize manual modal
-  let manualModalTableOfContentsElement = document.querySelector('#manual-modal-table-of-contents');
-  let manualModalTableOfContents = M.Tabs.init(manualModalTableOfContentsElement);
-  let manualModalElement = document.querySelector('#manual-modal');
-  let manualModal = M.Modal.init(
-    manualModalElement,
-    {
-      onOpenStart: (manualModalElement, modalTriggerElement) => {
-        if ('manualModalChapter' in modalTriggerElement.dataset) {
-          manualModalTableOfContents.select(modalTriggerElement.dataset.manualModalChapter);
-        }
-      }
-    }
-  );
-
-  // Initialize terms of use modal
-  const termsOfUseModal = document.getElementById('terms-of-use-modal');
-  M.Modal.init(
-    termsOfUseModal, 
-    {
-      dismissible: false, 
-      onCloseEnd: () => {
-        requests.users.entity.acceptTermsOfUse();
-      }
-    }
-  );
-  {% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
-      termsOfUseModal.M_Modal.open();
-  {% endif %}
-
 </script>

app/templates/main/_manual_modal.html.j2

@@ -1,7 +1,7 @@
 <div id="manual-modal" class="modal no-autoinit">
   <div class="modal-content">
     <h2>Manual</h2>
-    <ul class="tabs no-autoinit" id="manual-modal-table-of-contents">
+    <ul class="tabs" id="manual-modal-toc">
       <li class="tab"><a href="#manual-modal-introduction">Introduction</a></li>
       <li class="tab"><a href="#manual-modal-registration-and-log-in">Registration and Log in</a></li>
       <li class="tab"><a href="#manual-modal-dashboard">Dashboard</a></li>