admin js modules

src/gulpfile.js

@@ -3,6 +3,7 @@
 const gulp = require('gulp');
 const webpack = require('webpack-stream');
 const uswds = require('@uswds/compile');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const ASSETS_DIR = './registrar/assets/';
 const JS_BUNDLE_DEST = ASSETS_DIR + 'js';
@@ -38,6 +39,14 @@ function createBundleTask(source, output) {
             .pipe(
                 webpack({
                     mode: 'production',
+                    optimization: {
+                        minimize: true,
+                        minimizer: [
+                            new TerserPlugin({
+                                extractComments: false, // Prevents generating .LICENSE.txt
+                            }),
+                        ],
+                    },
                     output: { filename: output },
                     module: {
                         rules: [

src/registrar/admin.py

@@ -1570,7 +1570,7 @@ class DomainInformationAdmin(ListHeaderAdmin, ImportExportModelAdmin):
         "is_policy_acknowledged",
     ]
 
-    # For each filter_horizontal, init in admin js extendFilterHorizontalWidgets
+    # For each filter_horizontal, init in admin js initFilterHorizontalWidget
     # to activate the edit/delete/view buttons
     filter_horizontal = ("other_contacts",)
 

src/registrar/assets/modules/combobox.js

@@ -1,4 +1,4 @@
-import { hideElement, showElement } from './helpers.js';
+import { hideElement, showElement } from '../modules-common/helpers.js';
 
 export function loadInitialValuesForComboBoxes() {
   var overrideDefaultClearButton = true;

src/registrar/assets/modules/formset-forms.js

@@ -202,7 +202,7 @@ function hideDeletedForms() {
 }
 
 /**
- * An IIFE that attaches a click handler for our dynamic formsets
+ * A function that attaches a click handler for our dynamic formsets
  *
  * Only does something on a few pages, but it should be fast enough to run
  * it everywhere.

src/registrar/assets/modules/helpers.js

@@ -1,69 +0,0 @@
-export function hideElement(element) {
-    element.classList.add('display-none');
-};
-  
-export function showElement(element) {
-    element.classList.remove('display-none');
-};
-
-/**
-   * Helper function that scrolls to an element
-   * @param {string} attributeName - The string "class" or "id"
-   * @param {string} attributeValue - The class or id name
-   */
-export function scrollToElement(attributeName, attributeValue) {
-    let targetEl = null;
-  
-    if (attributeName === 'class') {
-        targetEl = document.getElementsByClassName(attributeValue)[0];
-    } else if (attributeName === 'id') {
-        targetEl = document.getElementById(attributeValue);
-    } else {
-        console.error('Error: unknown attribute name provided.');
-        return; // Exit the function if an invalid attributeName is provided
-    }
-  
-    if (targetEl) {
-        const rect = targetEl.getBoundingClientRect();
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        window.scrollTo({
-            top: rect.top + scrollTop,
-            behavior: 'smooth' // Optional: for smooth scrolling
-        });
-    }
-}
-
-/**
- * Toggles expand_more / expand_more svgs in buttons or anchors
- * @param {Element} element - DOM element
- */
-export function toggleCaret(element) {
-    // Get a reference to the use element inside the button
-    const useElement = element.querySelector('use');
-    // Check if the span element text is 'Hide'
-    if (useElement.getAttribute('xlink:href') === '/public/img/sprite.svg#expand_more') {
-        // Update the xlink:href attribute to expand_more
-        useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_less');
-    } else {
-        // Update the xlink:href attribute to expand_less
-        useElement.setAttribute('xlink:href', '/public/img/sprite.svg#expand_more');
-    }
-}
-
-/**
-   * Slow down event handlers by limiting how frequently they fire.
-   *
-   * A wait period must occur with no activity (activity means "this
-   * debounce function being called") before the handler is invoked.
-   *
-   * @param {Function} handler - any JS function
-   * @param {number} cooldown - the wait period, in milliseconds
-   */
-export function debounce(handler, cooldown=600) {
-    let timeout;
-    return function(...args) {
-        const context = this;
-        clearTimeout(timeout);
-        timeout = setTimeout(() => handler.apply(context, args), cooldown);
-    }
-}

src/registrar/assets/modules/requesting-entity.js

@@ -1,6 +1,6 @@
-import { hideElement, showElement } from './helpers.js';
+import { hideElement, showElement } from '../modules-common/helpers.js';
 
-/** An IIFE that intializes the requesting entity page.
+/** A function that intializes the requesting entity page.
  * This page has a radio button that dynamically toggles some fields
  * Within that, the dropdown also toggles some additional form elements.
 */

src/registrar/assets/modules/table-base.js

@@ -1,4 +1,4 @@
-import { hideElement, showElement, toggleCaret } from './helpers.js';
+import { hideElement, showElement, toggleCaret } from '../modules-common/helpers.js';
 
 export class LoadTableBase {
   constructor(sectionSelector) {

src/registrar/assets/modules/table-domain-requests.js

@@ -1,4 +1,4 @@
-import { hideElement, showElement, scrollToElement } from './helpers.js';
+import { hideElement, showElement, scrollToElement } from '../modules-common/helpers.js';
 import { initializeModals, unloadModals } from './helpers-uswds.js';
 import { getCsrfToken } from './helpers-csrf-token.js';
 

src/registrar/assets/modules/table-domains.js

@@ -1,4 +1,4 @@
-import { scrollToElement } from './helpers.js';
+import { scrollToElement } from '../modules-common/helpers.js';
 import { initializeTooltips } from './helpers-uswds.js';
 
 import { LoadTableBase } from './table-base.js';

src/registrar/assets/modules/table-member-domains.js

@@ -1,4 +1,4 @@
-import { hideElement, showElement, scrollToElement, toggleCaret } from './helpers.js';
+import { hideElement, showElement, scrollToElement, toggleCaret } from '../modules-common/helpers.js';
 import { initializeTooltips, initializeModals, unloadModals } from './helpers-uswds.js';
 import { getCsrfToken } from './helpers-csrf-token.js';
 

src/registrar/assets/modules/table-members.js

@@ -1,4 +1,4 @@
-import { hideElement, showElement, scrollToElement } from './helpers.js';
+import { hideElement, showElement, scrollToElement } from '../modules-common/helpers.js';
 
 import { LoadTableBase } from './table-base.js';
 

src/registrar/assets/modules/user-profile.js

@@ -36,7 +36,7 @@ export function finishUserSetupListener() {
     // Hide the "full_name" field
     let inputField = getInputField(fieldName);
     if (inputField) {
-      inputFieldParentDiv = inputField.closest("div");
+      let inputFieldParentDiv = inputField.closest("div");
       if (inputFieldParentDiv) {
         inputFieldParentDiv.classList.add("display-none");
       }
@@ -63,9 +63,6 @@ export function finishUserSetupListener() {
   }
 
   function setupListener(){
-
-    
-
     document.querySelectorAll('[id$="__edit-button"]').forEach(function(button) {
       // Get the "{field_name}" and "edit-button"
       let fieldIdParts = button.id.split("__")
@@ -171,5 +168,4 @@ export function finishUserSetupListener() {
 
   // Show the input fields if an error exists
   showInputOnErrorFields();
-
 }