Refactor toggleQuickOrCustom function from export.js

MauricioFauth · MauricioFauth · commit f429eb2238b2 · 2022-08-16T13:51:41.000-03:00
Uses the d-none CSS class to hide the elements and removes the jQuery code.

This removes the flickering when the page loads since the elements are
already hidden.

Signed-off-by: Maurício Meneghini Fauth &lt;mauricio@fauth.dev&gt;
diff --git a/js/src/export.js b/js/src/export.js
@@ -698,25 +698,55 @@ window.AJAX.registerOnload('export.js', function () {
 /**
  * Toggles display of options when quick and custom export are selected
  */
-Export.toggleQuickOrCustom = function () {
-    if ($('input[name=\'quick_or_custom\']').length === 0 // custom_no_form option
-        || $('#radio_custom_export').prop('checked') // custom
-    ) {
-        $('#databases_and_tables').show();
-        $('#rows').show();
-        $('#output').show();
-        $('#format_specific_opts').show();
-        $('#output_quick_export').addClass('d-none');
-        var selectedPluginName = $('#plugins').find('option:selected').val();
-        $('#' + selectedPluginName + '_options').removeClass('d-none');
-    } else { // quick
-        $('#databases_and_tables').hide();
-        $('#rows').hide();
-        $('#output').hide();
-        $('#format_specific_opts').hide();
-        $('#output_quick_export').removeClass('d-none');
+function toggleQuickOrCustom () {
+    const isCustomNoFormOption = ! document.getElementById('quick_or_custom');
+    const radioCustomExportElement = document.getElementById('radio_custom_export');
+    const isCustomExport = isCustomNoFormOption
+        || radioCustomExportElement instanceof HTMLInputElement
+        && radioCustomExportElement.checked;
+
+    const databasesAndTablesElement = document.getElementById('databases_and_tables');
+    if (databasesAndTablesElement) {
+        databasesAndTablesElement.classList.toggle('d-none', ! isCustomExport);
+    }
+
+    const rowsElement = document.getElementById('rows');
+    if (rowsElement) {
+        rowsElement.classList.toggle('d-none', ! isCustomExport);
+    }
+
+    const outputElement = document.getElementById('output');
+    if (outputElement) {
+        outputElement.classList.toggle('d-none', ! isCustomExport);
+    }
+
+    const formatSpecificOptionsElement = document.getElementById('format_specific_opts');
+    if (formatSpecificOptionsElement) {
+        formatSpecificOptionsElement.classList.toggle('d-none', ! isCustomExport);
+    }
+
+    const outputQuickExportElement = document.getElementById('output_quick_export');
+    if (outputQuickExportElement) {
+        outputQuickExportElement.classList.toggle('d-none', isCustomExport);
     }
-};
+
+    if (! isCustomExport) {
+        return;
+    }
+
+    const selectedPluginElement = document.querySelector('#plugins > option[selected]');
+    const selectedPluginName = selectedPluginElement instanceof HTMLOptionElement ? selectedPluginElement.value : null;
+    if (selectedPluginName === null) {
+        return;
+    }
+
+    const pluginOptionsElement = document.getElementById(selectedPluginName + '_options');
+    if (! pluginOptionsElement) {
+        return;
+    }
+
+    pluginOptionsElement.classList.remove('d-none');
+}
 
 var timeOut;
 
@@ -835,13 +865,13 @@ Export.addAlias = function (type, name, field, value) {
 };
 
 window.AJAX.registerOnload('export.js', function () {
-    $('input[type=\'radio\'][name=\'quick_or_custom\']').on('change', Export.toggleQuickOrCustom);
-
+    $('input[type=\'radio\'][name=\'quick_or_custom\']').on('change', toggleQuickOrCustom);
     $('#format_specific_opts').find('div.format_specific_options')
         .addClass('d-none')
         .find('h3')
         .remove();
-    Export.toggleQuickOrCustom();
+    toggleQuickOrCustom();
+
     Export.toggleStructureDataOpts();
     Export.toggleSqlIncludeComments();
     Export.checkTableSelectAll();
diff --git a/templates/database/export/index.twig b/templates/database/export/index.twig
@@ -10,7 +10,7 @@
 
 {% block selection_options %}
   {% if export_type != 'raw' %}
-    <div class="card mb-3" id="databases_and_tables">
+    <div class="card mb-3 d-none" id="databases_and_tables">
       <div class="card-header">{% trans 'Tables:' %}</div>
       <div class="card-body" style="overflow-y: scroll; max-height: 20em;">
         <input type="hidden" name="structure_or_data_forced" value="{{ structure_or_data_forced }}">
diff --git a/templates/export.twig b/templates/export.twig
@@ -133,7 +133,7 @@
     {% block selection_options %}{% endblock %}
 
     {% if rows is not empty %}
-      <div class="card mb-3" id="rows">
+      <div class="card mb-3 d-none" id="rows">
         <div class="card-header">{% trans 'Rows:' %}</div>
         <div class="card-body">
           <div class="form-check">
@@ -328,7 +328,7 @@
       </div>
     </div>
 
-    <div class="card mb-3" id="output">
+    <div class="card mb-3 d-none" id="output">
       <div class="card-header">{% trans 'Output:' %}</div>
       <ul class="list-group list-group-flush">
         <li class="list-group-item">
@@ -478,7 +478,7 @@
       </ul>
     </div>
 
-    <div class="card mb-3" id="format_specific_opts">
+    <div class="card mb-3 d-none" id="format_specific_opts">
       <div class="card-header">{% trans 'Format-specific options:' %}</div>
       <div class="card-body">
         {{ options|raw }}
diff --git a/templates/server/export/index.twig b/templates/server/export/index.twig
@@ -3,7 +3,7 @@
 {% block title %}{% trans 'Exporting databases from the current server' %}{% endblock %}
 
 {% block selection_options %}
-  <div class="card mb-3" id="databases_and_tables">
+  <div class="card mb-3 d-none" id="databases_and_tables">
     <div class="card-header">{% trans 'Databases' %}</div>
     <div class="card-body">
       <div class="mb-3">
