Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
assets/js/components/diagram.js
View File

@ -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();

4
assets/js/components/sidebar-search.js
View File

@ -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 });
}
}

57
assets/js/list-filters.js
View File

@ -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

35
assets/js/main.js
View File

@ -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 };
export { initGlobals, componentRegistry };

20
assets/js/utils/user-agent-platform.js
View File

@ -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';
}
}

14
assets/js/version-selector.js
View File

@ -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');
}
});
}