4. ui.js

Jump to bottom

Aizat edited this page May 8, 2025 · 1 revision

js/ui.js

This module is dedicated to handling all aspects of the user interface (UI) for the Prettier configuration tool. It's responsible for dynamically rendering the UI elements, updating the display based on user interactions, and managing the overall look and feel of the application.

Key responsibilities of js/ui.js include:

Importing Dependencies: It imports the prettierOptions array from js/configData.js, which provides the data for all the configurable Prettier options.
DOM Element References: It obtains a reference to the DOM element where the configuration cards will be placed (configuratorGrid).
createConfigCard(option) Function: This function is responsible for creating and appending a single Prettier configuration card to the configuratorGrid. Each card corresponds to one Prettier option and allows the user to configure its value. The function dynamically generates the HTML for the input control (number input, checkbox, or select dropdown) based on the option's inputType. It also prepares the initial example content (input and output code snippets) based on the option's default value.
updateExampleDisplay(optionData, inputElement, cardElement) Function: This function updates the example display (input and output code blocks) within a configuration card whenever the corresponding option value is changed by the user. It determines the new example content based on the input type and the new value. If Prism.js is available, it re-highlights the updated code elements to ensure proper syntax highlighting.
renderConfigurator() Function: This function renders all the configuration cards based on the prettierOptions data. It first clears any existing cards from the configuratorGrid. Then, it iterates over the prettierOptions array and calls the createConfigCard() function for each option to create and append a new card to the grid. Finally, it instructs Prism.js to highlight all the code blocks on the page to ensure proper syntax highlighting.
toggleDarkMode() Function: This function toggles the dark mode theme on the <body> element of the page. It also saves the user's theme preference to localStorage so that it can be reapplied on subsequent visits.
applySavedTheme() Function: This function applies the user's saved dark mode preference from localStorage when the page loads. If the user has previously selected dark mode, this function will add the dark-mode class to the <body> element and update the state of the theme switch.
escapeHtml(unsafeText) Function: This function escapes HTML special characters in a string to prevent cross-site scripting (XSS) vulnerabilities and to ensure that the characters are rendered literally when displayed in HTML (e.g., inside <pre><code> tags).

In essence, js/ui.js is the module that directly manipulates the DOM to create the interactive UI for the Prettier configuration tool. It handles the rendering of the configuration options, updating the example displays, and managing the overall visual appearance of the application.