68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// Connects to data-controller="lucide"
|
|
export default class extends Controller {
|
|
static targets = ["icon"]
|
|
|
|
connect() {
|
|
this.initializeIcons()
|
|
|
|
// Listen for Turbo navigation events to reinitialize icons
|
|
document.addEventListener('turbo:render', this.handleTurboRender.bind(this))
|
|
document.addEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
|
|
}
|
|
|
|
disconnect() {
|
|
// Clean up event listeners
|
|
document.removeEventListener('turbo:render', this.handleTurboRender.bind(this))
|
|
document.removeEventListener('turbo:frame-render', this.handleTurboFrameRender.bind(this))
|
|
}
|
|
|
|
// Initialize all Lucide icons in the controller scope
|
|
initializeIcons() {
|
|
if (typeof lucide !== 'undefined') {
|
|
// Initialize icons within this controller's element
|
|
lucide.createIcons({
|
|
element: this.element
|
|
})
|
|
} else {
|
|
console.warn('Lucide not loaded yet, retrying...')
|
|
// Retry after a short delay if Lucide hasn't loaded yet
|
|
setTimeout(() => this.initializeIcons(), 100)
|
|
}
|
|
}
|
|
|
|
// Method to reinitialize icons after dynamic content changes
|
|
reinitialize() {
|
|
this.initializeIcons()
|
|
}
|
|
|
|
// Method to create a specific icon programmatically
|
|
createIcon(iconName, element = null) {
|
|
if (typeof lucide !== 'undefined') {
|
|
const targetElement = element || this.element
|
|
lucide.createIcons({
|
|
element: targetElement,
|
|
icons: {
|
|
[iconName]: lucide[iconName]
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Handle Turbo page renders
|
|
handleTurboRender() {
|
|
// Small delay to ensure DOM is fully updated
|
|
setTimeout(() => this.initializeIcons(), 10)
|
|
}
|
|
|
|
// Handle Turbo frame renders
|
|
handleTurboFrameRender(event) {
|
|
// Initialize icons within the specific frame that was rendered
|
|
if (event.detail && event.detail.newFrame) {
|
|
lucide.createIcons({
|
|
element: event.detail.newFrame
|
|
})
|
|
}
|
|
}
|
|
} |