leaflet-theme-control 0.0.4 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "A Leaflet control for switching between visual themes (light, dark, grayscale, custom, etc.) using CSS filters",
   "main": "src/leaflet-theme-control.js",
   "module": "src/leaflet-theme-control.js",

package/src/leaflet-theme-control.js

@@ -57,6 +57,9 @@ export class ThemeControl extends Control {
     // AbortController for automatic event cleanup
     this._abortController = new AbortController()
 
+    // Setup MutationObserver to watch for language changes on html[lang]
+    this._setupLanguageObserver()
+
     // Setup media query listener for system theme changes
     if (this.options.detectSystemTheme) {
       const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
@@ -143,6 +146,12 @@ export class ThemeControl extends Control {
     // Abort all event listeners
     this._abortController.abort()
 
+    // Disconnect language observer
+    if (this._langObserver) {
+      this._langObserver.disconnect()
+      this._langObserver = null
+    }
+
     // Cleanup editor
     if (this.editor) {
       this.editor.cleanup()
@@ -152,17 +161,54 @@ export class ThemeControl extends Control {
     this.map = null
   }
 
+  _setupLanguageObserver() {
+    // Watch for changes to html[lang] attribute
+    this._langObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {
+          // Language changed, update button label
+          this.updateButtonLabel()
+          break
+        }
+      }
+    })
+
+    // Observe the html element for lang attribute changes
+    this._langObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['lang'],
+    })
+  }
+
   _updateButton(button, themeKey) {
     if (!button) return // No button if addButton: false
 
     const theme = this.options.themes[themeKey]
     const label = this._getThemeLabel(themeKey)
 
-    button.setAttribute('aria-label', 'Theme: ' + label)
-    button.title = 'Theme: ' + label
+    // Get translated button prefix or use default
+    let buttonPrefix = 'Theme'
+    if (this.options.getEditorLabels) {
+      const translated = this.options.getEditorLabels('themeButton')
+      if (translated && translated !== 'themeButton') {
+        buttonPrefix = translated
+      }
+    }
+
+    const fullLabel = `${buttonPrefix}: ${label}`
+    button.setAttribute('aria-label', fullLabel)
+    button.title = fullLabel
     button.textContent = theme.icon || '🎨'
   }
 
+  /**
+   * Update button label (useful for language changes)
+   * Call this method after changing language to update the button's aria-label and title
+   */
+  updateButtonLabel() {
+    this._updateButton(this.button, this.currentTheme)
+  }
+
   _getThemeLabel(themeKey) {
     // Use custom label function if provided
     if (this.options.getLabel) {

package/src/leaflet-theme-editor.js

@@ -152,6 +152,7 @@ export class ThemeEditor {
       contrast: 'Contrast',
       sepia: 'Sepia',
       grayscaleFilter: 'Grayscale',
+      themeButton: 'Theme',
     }
 
     return labels[key] || key