From cd087af85d7ed1369843de10ccd5e11fb6be8487 Mon Sep 17 00:00:00 2001 From: Jason Stirnaman Date: Mon, 9 Jun 2025 14:42:38 -0500 Subject: [PATCH] chore(js): Format fixes --- assets/js/components/diagram.js | 84 ++++++++++++++------------ assets/js/components/sidebar-search.js | 4 +- assets/js/list-filters.js | 57 ++++++++++------- assets/js/main.js | 35 ++++++----- assets/js/utils/user-agent-platform.js | 20 +++--- assets/js/version-selector.js | 14 ++--- 6 files changed, 121 insertions(+), 93 deletions(-) diff --git a/assets/js/components/diagram.js b/assets/js/components/diagram.js index 4e6bd6f87..17f07dbe5 100644 --- a/assets/js/components/diagram.js +++ b/assets/js/components/diagram.js @@ -6,62 +6,68 @@ export default function Diagram({ component }) { if (!mermaidPromise) { mermaidPromise = import('mermaid'); } - mermaidPromise.then(({ default: mermaid }) => { - // Configure mermaid with InfluxData theming - mermaid.initialize({ - startOnLoad: false, // We'll manually call run() - theme: document.body.classList.contains('dark-theme') ? 'dark' : 'default', - themeVariables: { - fontFamily: 'Proxima Nova', - fontSize: '16px', - lineColor: '#22ADF6', - primaryColor: '#22ADF6', - primaryTextColor: '#545454', - secondaryColor: '#05CE78', - tertiaryColor: '#f4f5f5', - }, - securityLevel: 'loose', // Required for interactive diagrams - logLevel: 'error' + mermaidPromise + .then(({ default: mermaid }) => { + // Configure mermaid with InfluxData theming + mermaid.initialize({ + startOnLoad: false, // We'll manually call run() + theme: document.body.classList.contains('dark-theme') + ? 'dark' + : 'default', + themeVariables: { + fontFamily: 'Proxima Nova', + fontSize: '16px', + lineColor: '#22ADF6', + primaryColor: '#22ADF6', + primaryTextColor: '#545454', + secondaryColor: '#05CE78', + tertiaryColor: '#f4f5f5', + }, + securityLevel: 'loose', // Required for interactive diagrams + logLevel: 'error', + }); + + // Process the specific diagram component + try { + mermaid.run({ nodes: [component] }); + } catch (error) { + console.error('Mermaid diagram rendering error:', error); + } + + // Store reference to mermaid for theme switching + if (!window.mermaidInstances) { + window.mermaidInstances = new Map(); + } + window.mermaidInstances.set(component, mermaid); + }) + .catch((error) => { + console.error('Failed to load Mermaid library:', error); }); - - // Process the specific diagram component - try { - mermaid.run({ nodes: [component] }); - } catch (error) { - console.error('Mermaid diagram rendering error:', error); - } - - // Store reference to mermaid for theme switching - if (!window.mermaidInstances) { - window.mermaidInstances = new Map(); - } - window.mermaidInstances.set(component, mermaid); - }).catch(error => { - console.error('Failed to load Mermaid library:', error); - }); - + // Listen for theme changes to refresh diagrams const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { - if (mutation.attributeName === 'class' && - document.body.classList.contains('dark-theme') !== window.isDarkTheme) { + if ( + mutation.attributeName === 'class' && + document.body.classList.contains('dark-theme') !== window.isDarkTheme + ) { window.isDarkTheme = document.body.classList.contains('dark-theme'); - + // Reload this specific diagram with new theme if (window.mermaidInstances?.has(component)) { const mermaid = window.mermaidInstances.get(component); mermaid.initialize({ - theme: window.isDarkTheme ? 'dark' : 'default' + theme: window.isDarkTheme ? 'dark' : 'default', }); mermaid.run({ nodes: [component] }); } } }); }); - + // Watch for theme changes on body element observer.observe(document.body, { attributes: true }); - + // Return cleanup function to be called when component is destroyed return () => { observer.disconnect(); diff --git a/assets/js/components/sidebar-search.js b/assets/js/components/sidebar-search.js index 1e5023050..f3d09fbe4 100644 --- a/assets/js/components/sidebar-search.js +++ b/assets/js/components/sidebar-search.js @@ -1,6 +1,6 @@ -import SearchInteractions from '../utils/search-interactions'; +import SearchInteractions from '../utils/search-interactions.js'; export default function SidebarSearch({ component }) { const searchInput = component.querySelector('.sidebar--search-field'); SearchInteractions({ searchInput }); -} \ No newline at end of file +} diff --git a/assets/js/list-filters.js b/assets/js/list-filters.js index b541161ec..c71e145a2 100644 --- a/assets/js/list-filters.js +++ b/assets/js/list-filters.js @@ -1,11 +1,13 @@ // Count tag elements function countTag(tag) { - return $(".visible[data-tags*='" + tag + "']").length + return $(".visible[data-tags*='" + tag + "']").length; } function getFilterCounts($labels) { - $labels.each(function() { - var tagName = $('input', this).attr('name').replace(/[\W/]+/, "-"); + $labels.each(function () { + var tagName = $('input', this) + .attr('name') + .replace(/[\W/]+/, '-'); var tagCount = countTag(tagName); $(this).attr('data-count', '(' + tagCount + ')'); if (tagCount <= 0) { @@ -13,7 +15,7 @@ function getFilterCounts($labels) { } else { $(this).fadeTo(400, 1.0); } - }) + }); } export default function ListFilters({ component }) { @@ -22,30 +24,41 @@ export default function ListFilters({ component }) { getFilterCounts($labels); - $inputs.click(function() { - + $inputs.click(function () { // List of tags to hide - var tagArray = $(component).find("input:checkbox:checked").map(function(){ - return $(this).attr('name').replace(/[\W]+/, "-"); - }).get(); + var tagArray = $(component) + .find('input:checkbox:checked') + .map(function () { + return $(this).attr('name').replace(/[\W]+/, '-'); + }) + .get(); // List of tags to restore - var restoreArray = $(component).find("input:checkbox:not(:checked)").map(function(){ - return $(this).attr('name').replace(/[\W]+/, "-"); - }).get(); + var restoreArray = $(component) + .find('input:checkbox:not(:checked)') + .map(function () { + return $(this).attr('name').replace(/[\W]+/, '-'); + }) + .get(); // Actions for filter select - if ( $(this).is(':checked') ) { - $.each( tagArray, function( index, value ) { - $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').fadeOut() - }) + if ($(this).is(':checked')) { + $.each(tagArray, function (index, value) { + $(".filter-item.visible:not([data-tags~='" + value + "'])") + .removeClass('visible') + .fadeOut(); + }); } else { - $.each( restoreArray, function( index, value ) { - $(".filter-item:not(.visible)[data-tags~='" + value + "']").addClass('visible').fadeIn() - }) - $.each( tagArray, function( index, value ) { - $(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide() - }) + $.each(restoreArray, function (index, value) { + $(".filter-item:not(.visible)[data-tags~='" + value + "']") + .addClass('visible') + .fadeIn(); + }); + $.each(tagArray, function (index, value) { + $(".filter-item.visible:not([data-tags~='" + value + "'])") + .removeClass('visible') + .hide(); + }); } // Refresh filter count diff --git a/assets/js/main.js b/assets/js/main.js index 126189fff..b033cad8a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -62,20 +62,20 @@ const componentRegistry = { 'ask-ai-trigger': AskAITrigger, 'code-placeholder': CodePlaceholder, 'custom-time-trigger': CustomTimeTrigger, - 'diagram': Diagram, + diagram: Diagram, 'doc-search': DocSearch, 'feature-callout': FeatureCallout, 'flux-group-keys-demo': FluxGroupKeysDemo, 'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger, - 'keybinding': KeyBinding, + keybinding: KeyBinding, 'list-filters': ListFilters, 'product-selector': ProductSelector, 'release-toc': ReleaseToc, 'search-button': SearchButton, 'sidebar-search': SidebarSearch, 'sidebar-toggle': SidebarToggle, - 'theme': Theme, - 'theme-switch': ThemeSwitch + theme: Theme, + 'theme-switch': ThemeSwitch, }; /** @@ -93,12 +93,12 @@ function initGlobals() { window.influxdatadocs.pageContext = pageContext; window.influxdatadocs.toggleModal = modals.toggleModal; window.influxdatadocs.componentRegistry = componentRegistry; - + // Re-export jQuery to global namespace for legacy scripts if (typeof window.jQuery === 'undefined') { window.jQuery = window.$ = $; } - + return window.influxdatadocs; } @@ -108,32 +108,35 @@ function initGlobals() { */ function initComponents(globals) { const components = document.querySelectorAll('[data-component]'); - + components.forEach((component) => { const componentName = component.getAttribute('data-component'); const ComponentConstructor = componentRegistry[componentName]; - + if (ComponentConstructor) { // Initialize the component and store its instance in the global namespace try { const instance = ComponentConstructor({ component }); globals[componentName] = ComponentConstructor; - + // Optionally store component instances for future reference if (!globals.instances) { globals.instances = {}; } - + if (!globals.instances[componentName]) { globals.instances[componentName] = []; } - + globals.instances[componentName].push({ element: component, - instance + instance, }); } catch (error) { - console.error(`Error initializing component "${componentName}":`, error); + console.error( + `Error initializing component "${componentName}":`, + error + ); } } else { console.warn(`Unknown component: "${componentName}"`); @@ -163,10 +166,10 @@ function initModules() { function init() { // Initialize global namespace and expose core modules const globals = initGlobals(); - + // Initialize non-component UI modules initModules(); - + // Initialize components from registry initComponents(globals); } @@ -175,4 +178,4 @@ function init() { document.addEventListener('DOMContentLoaded', init); // Export public API -export { initGlobals, componentRegistry }; \ No newline at end of file +export { initGlobals, componentRegistry }; diff --git a/assets/js/utils/user-agent-platform.js b/assets/js/utils/user-agent-platform.js index ffb1407e0..803f1bdf9 100644 --- a/assets/js/utils/user-agent-platform.js +++ b/assets/js/utils/user-agent-platform.js @@ -12,18 +12,24 @@ export function getPlatform() { // Try to use modern User-Agent Client Hints API first (Chrome 89+, Edge 89+) if (navigator.userAgentData && navigator.userAgentData.platform) { const platform = navigator.userAgentData.platform.toLowerCase(); - + if (platform.includes('mac')) return 'osx'; if (platform.includes('win')) return 'win'; if (platform.includes('linux')) return 'linux'; } - + // Fall back to userAgent string parsing const userAgent = navigator.userAgent.toLowerCase(); - - if (userAgent.includes('mac') || userAgent.includes('iphone') || userAgent.includes('ipad')) return 'osx'; + + if ( + userAgent.includes('mac') || + userAgent.includes('iphone') || + userAgent.includes('ipad') + ) + return 'osx'; if (userAgent.includes('win')) return 'win'; - if (userAgent.includes('linux') || userAgent.includes('android')) return 'linux'; - + if (userAgent.includes('linux') || userAgent.includes('android')) + return 'linux'; + return 'other'; -} \ No newline at end of file +} diff --git a/assets/js/version-selector.js b/assets/js/version-selector.js index 253365a23..7d9161c87 100644 --- a/assets/js/version-selector.js +++ b/assets/js/version-selector.js @@ -1,21 +1,21 @@ export default function ProductSelector({ component }) { // Select the product dropdown and dropdown items - const productDropdown = component.querySelector("#product-dropdown"); - const dropdownItems = component.querySelector("#dropdown-items"); + const productDropdown = component.querySelector('#product-dropdown'); + const dropdownItems = component.querySelector('#dropdown-items'); // Expand the menu on click if (productDropdown) { - productDropdown.addEventListener("click", function() { - productDropdown.classList.toggle("open"); - dropdownItems.classList.toggle("open"); + productDropdown.addEventListener('click', function () { + productDropdown.classList.toggle('open'); + dropdownItems.classList.toggle('open'); }); } // Close the dropdown by clicking anywhere else - document.addEventListener("click", function(e) { + document.addEventListener('click', function (e) { // Check if the click was outside of the '.product-list' container if (!e.target.closest('.product-list')) { - dropdownItems.classList.remove("open"); + dropdownItems.classList.remove('open'); } }); }