chore(js): Format fixes
parent
4973026adf
commit
cd087af85d
|
@ -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();
|
||||||
|
|
|
@ -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 });
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 };
|
||||||
|
|
|
@ -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';
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue