chore(js): Format fixes

chore-js-refactor-footer-scripts-modules
Jason Stirnaman 2025-06-09 14:42:38 -05:00
parent 4973026adf
commit cd087af85d
6 changed files with 121 additions and 93 deletions

View File

@ -6,62 +6,68 @@ export default function Diagram({ component }) {
if (!mermaidPromise) { if (!mermaidPromise) {
mermaidPromise = import('mermaid'); mermaidPromise = import('mermaid');
} }
mermaidPromise.then(({ default: mermaid }) => { mermaidPromise
// Configure mermaid with InfluxData theming .then(({ default: mermaid }) => {
mermaid.initialize({ // Configure mermaid with InfluxData theming
startOnLoad: false, // We'll manually call run() mermaid.initialize({
theme: document.body.classList.contains('dark-theme') ? 'dark' : 'default', startOnLoad: false, // We'll manually call run()
themeVariables: { theme: document.body.classList.contains('dark-theme')
fontFamily: 'Proxima Nova', ? 'dark'
fontSize: '16px', : 'default',
lineColor: '#22ADF6', themeVariables: {
primaryColor: '#22ADF6', fontFamily: 'Proxima Nova',
primaryTextColor: '#545454', fontSize: '16px',
secondaryColor: '#05CE78', lineColor: '#22ADF6',
tertiaryColor: '#f4f5f5', primaryColor: '#22ADF6',
}, primaryTextColor: '#545454',
securityLevel: 'loose', // Required for interactive diagrams secondaryColor: '#05CE78',
logLevel: 'error' 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 // Listen for theme changes to refresh diagrams
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.attributeName === 'class' && if (
document.body.classList.contains('dark-theme') !== window.isDarkTheme) { mutation.attributeName === 'class' &&
document.body.classList.contains('dark-theme') !== window.isDarkTheme
) {
window.isDarkTheme = document.body.classList.contains('dark-theme'); window.isDarkTheme = document.body.classList.contains('dark-theme');
// Reload this specific diagram with new theme // Reload this specific diagram with new theme
if (window.mermaidInstances?.has(component)) { if (window.mermaidInstances?.has(component)) {
const mermaid = window.mermaidInstances.get(component); const mermaid = window.mermaidInstances.get(component);
mermaid.initialize({ mermaid.initialize({
theme: window.isDarkTheme ? 'dark' : 'default' theme: window.isDarkTheme ? 'dark' : 'default',
}); });
mermaid.run({ nodes: [component] }); mermaid.run({ nodes: [component] });
} }
} }
}); });
}); });
// Watch for theme changes on body element // Watch for theme changes on body element
observer.observe(document.body, { attributes: true }); observer.observe(document.body, { attributes: true });
// Return cleanup function to be called when component is destroyed // Return cleanup function to be called when component is destroyed
return () => { return () => {
observer.disconnect(); observer.disconnect();

View File

@ -1,6 +1,6 @@
import SearchInteractions from '../utils/search-interactions'; import SearchInteractions from '../utils/search-interactions.js';
export default function SidebarSearch({ component }) { export default function SidebarSearch({ component }) {
const searchInput = component.querySelector('.sidebar--search-field'); const searchInput = component.querySelector('.sidebar--search-field');
SearchInteractions({ searchInput }); SearchInteractions({ searchInput });
} }

View File

@ -1,11 +1,13 @@
// Count tag elements // Count tag elements
function countTag(tag) { function countTag(tag) {
return $(".visible[data-tags*='" + tag + "']").length return $(".visible[data-tags*='" + tag + "']").length;
} }
function getFilterCounts($labels) { function getFilterCounts($labels) {
$labels.each(function() { $labels.each(function () {
var tagName = $('input', this).attr('name').replace(/[\W/]+/, "-"); var tagName = $('input', this)
.attr('name')
.replace(/[\W/]+/, '-');
var tagCount = countTag(tagName); var tagCount = countTag(tagName);
$(this).attr('data-count', '(' + tagCount + ')'); $(this).attr('data-count', '(' + tagCount + ')');
if (tagCount <= 0) { if (tagCount <= 0) {
@ -13,7 +15,7 @@ function getFilterCounts($labels) {
} else { } else {
$(this).fadeTo(400, 1.0); $(this).fadeTo(400, 1.0);
} }
}) });
} }
export default function ListFilters({ component }) { export default function ListFilters({ component }) {
@ -22,30 +24,41 @@ export default function ListFilters({ component }) {
getFilterCounts($labels); getFilterCounts($labels);
$inputs.click(function() { $inputs.click(function () {
// List of tags to hide // List of tags to hide
var tagArray = $(component).find("input:checkbox:checked").map(function(){ var tagArray = $(component)
return $(this).attr('name').replace(/[\W]+/, "-"); .find('input:checkbox:checked')
}).get(); .map(function () {
return $(this).attr('name').replace(/[\W]+/, '-');
})
.get();
// List of tags to restore // List of tags to restore
var restoreArray = $(component).find("input:checkbox:not(:checked)").map(function(){ var restoreArray = $(component)
return $(this).attr('name').replace(/[\W]+/, "-"); .find('input:checkbox:not(:checked)')
}).get(); .map(function () {
return $(this).attr('name').replace(/[\W]+/, '-');
})
.get();
// Actions for filter select // Actions for filter select
if ( $(this).is(':checked') ) { if ($(this).is(':checked')) {
$.each( tagArray, function( index, value ) { $.each(tagArray, function (index, value) {
$(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').fadeOut() $(".filter-item.visible:not([data-tags~='" + value + "'])")
}) .removeClass('visible')
.fadeOut();
});
} else { } else {
$.each( restoreArray, function( index, value ) { $.each(restoreArray, function (index, value) {
$(".filter-item:not(.visible)[data-tags~='" + value + "']").addClass('visible').fadeIn() $(".filter-item:not(.visible)[data-tags~='" + value + "']")
}) .addClass('visible')
$.each( tagArray, function( index, value ) { .fadeIn();
$(".filter-item.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide() });
}) $.each(tagArray, function (index, value) {
$(".filter-item.visible:not([data-tags~='" + value + "'])")
.removeClass('visible')
.hide();
});
} }
// Refresh filter count // Refresh filter count

View File

@ -62,20 +62,20 @@ const componentRegistry = {
'ask-ai-trigger': AskAITrigger, 'ask-ai-trigger': AskAITrigger,
'code-placeholder': CodePlaceholder, 'code-placeholder': CodePlaceholder,
'custom-time-trigger': CustomTimeTrigger, 'custom-time-trigger': CustomTimeTrigger,
'diagram': Diagram, diagram: Diagram,
'doc-search': DocSearch, 'doc-search': DocSearch,
'feature-callout': FeatureCallout, 'feature-callout': FeatureCallout,
'flux-group-keys-demo': FluxGroupKeysDemo, 'flux-group-keys-demo': FluxGroupKeysDemo,
'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger, 'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger,
'keybinding': KeyBinding, keybinding: KeyBinding,
'list-filters': ListFilters, 'list-filters': ListFilters,
'product-selector': ProductSelector, 'product-selector': ProductSelector,
'release-toc': ReleaseToc, 'release-toc': ReleaseToc,
'search-button': SearchButton, 'search-button': SearchButton,
'sidebar-search': SidebarSearch, 'sidebar-search': SidebarSearch,
'sidebar-toggle': SidebarToggle, 'sidebar-toggle': SidebarToggle,
'theme': Theme, theme: Theme,
'theme-switch': ThemeSwitch 'theme-switch': ThemeSwitch,
}; };
/** /**
@ -93,12 +93,12 @@ function initGlobals() {
window.influxdatadocs.pageContext = pageContext; window.influxdatadocs.pageContext = pageContext;
window.influxdatadocs.toggleModal = modals.toggleModal; window.influxdatadocs.toggleModal = modals.toggleModal;
window.influxdatadocs.componentRegistry = componentRegistry; window.influxdatadocs.componentRegistry = componentRegistry;
// Re-export jQuery to global namespace for legacy scripts // Re-export jQuery to global namespace for legacy scripts
if (typeof window.jQuery === 'undefined') { if (typeof window.jQuery === 'undefined') {
window.jQuery = window.$ = $; window.jQuery = window.$ = $;
} }
return window.influxdatadocs; return window.influxdatadocs;
} }
@ -108,32 +108,35 @@ function initGlobals() {
*/ */
function initComponents(globals) { function initComponents(globals) {
const components = document.querySelectorAll('[data-component]'); const components = document.querySelectorAll('[data-component]');
components.forEach((component) => { components.forEach((component) => {
const componentName = component.getAttribute('data-component'); const componentName = component.getAttribute('data-component');
const ComponentConstructor = componentRegistry[componentName]; const ComponentConstructor = componentRegistry[componentName];
if (ComponentConstructor) { if (ComponentConstructor) {
// Initialize the component and store its instance in the global namespace // Initialize the component and store its instance in the global namespace
try { try {
const instance = ComponentConstructor({ component }); const instance = ComponentConstructor({ component });
globals[componentName] = ComponentConstructor; globals[componentName] = ComponentConstructor;
// Optionally store component instances for future reference // Optionally store component instances for future reference
if (!globals.instances) { if (!globals.instances) {
globals.instances = {}; globals.instances = {};
} }
if (!globals.instances[componentName]) { if (!globals.instances[componentName]) {
globals.instances[componentName] = []; globals.instances[componentName] = [];
} }
globals.instances[componentName].push({ globals.instances[componentName].push({
element: component, element: component,
instance instance,
}); });
} catch (error) { } catch (error) {
console.error(`Error initializing component "${componentName}":`, error); console.error(
`Error initializing component "${componentName}":`,
error
);
} }
} else { } else {
console.warn(`Unknown component: "${componentName}"`); console.warn(`Unknown component: "${componentName}"`);
@ -163,10 +166,10 @@ function initModules() {
function init() { function init() {
// Initialize global namespace and expose core modules // Initialize global namespace and expose core modules
const globals = initGlobals(); const globals = initGlobals();
// Initialize non-component UI modules // Initialize non-component UI modules
initModules(); initModules();
// Initialize components from registry // Initialize components from registry
initComponents(globals); initComponents(globals);
} }
@ -175,4 +178,4 @@ function init() {
document.addEventListener('DOMContentLoaded', init); document.addEventListener('DOMContentLoaded', init);
// Export public API // Export public API
export { initGlobals, componentRegistry }; export { initGlobals, componentRegistry };

View File

@ -12,18 +12,24 @@ export function getPlatform() {
// Try to use modern User-Agent Client Hints API first (Chrome 89+, Edge 89+) // Try to use modern User-Agent Client Hints API first (Chrome 89+, Edge 89+)
if (navigator.userAgentData && navigator.userAgentData.platform) { if (navigator.userAgentData && navigator.userAgentData.platform) {
const platform = navigator.userAgentData.platform.toLowerCase(); const platform = navigator.userAgentData.platform.toLowerCase();
if (platform.includes('mac')) return 'osx'; if (platform.includes('mac')) return 'osx';
if (platform.includes('win')) return 'win'; if (platform.includes('win')) return 'win';
if (platform.includes('linux')) return 'linux'; if (platform.includes('linux')) return 'linux';
} }
// Fall back to userAgent string parsing // Fall back to userAgent string parsing
const userAgent = navigator.userAgent.toLowerCase(); 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('win')) return 'win';
if (userAgent.includes('linux') || userAgent.includes('android')) return 'linux'; if (userAgent.includes('linux') || userAgent.includes('android'))
return 'linux';
return 'other'; return 'other';
} }

View File

@ -1,21 +1,21 @@
export default function ProductSelector({ component }) { export default function ProductSelector({ component }) {
// Select the product dropdown and dropdown items // Select the product dropdown and dropdown items
const productDropdown = component.querySelector("#product-dropdown"); const productDropdown = component.querySelector('#product-dropdown');
const dropdownItems = component.querySelector("#dropdown-items"); const dropdownItems = component.querySelector('#dropdown-items');
// Expand the menu on click // Expand the menu on click
if (productDropdown) { if (productDropdown) {
productDropdown.addEventListener("click", function() { productDropdown.addEventListener('click', function () {
productDropdown.classList.toggle("open"); productDropdown.classList.toggle('open');
dropdownItems.classList.toggle("open"); dropdownItems.classList.toggle('open');
}); });
} }
// Close the dropdown by clicking anywhere else // 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 // Check if the click was outside of the '.product-list' container
if (!e.target.closest('.product-list')) { if (!e.target.closest('.product-list')) {
dropdownItems.classList.remove("open"); dropdownItems.classList.remove('open');
} }
}); });
} }