chore(js): Format fixes
parent
4973026adf
commit
cd087af85d
|
@ -6,52 +6,58 @@ 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] });
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
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');
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -130,10 +130,13 @@ function initComponents(globals) {
|
|||
|
||||
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}"`);
|
||||
|
|
|
@ -21,9 +21,15 @@ export function getPlatform() {
|
|||
// 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';
|
||||
}
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue