leaflet-theme-control 0.0.1 → 0.0.3

package/README.md

@@ -219,19 +219,21 @@ See [examples/api.html](examples/api.html) for a complete example.
 
 ### Options
 
-| Option              | Type     | Default                | Description                                                         |
-| ------------------- | -------- | ---------------------- | ------------------------------------------------------------------- |
-| `position`          | String   | `"topright"`           | Position of the control                                             |
-| `themes`            | Object   | `DEFAULT_THEMES`       | Theme definitions                                                   |
-| `defaultTheme`      | String   | `"light"`              | Initial theme                                                       |
-| `storageKey`        | String   | `"leaflet-theme"`      | localStorage key                                                    |
-| `detectSystemTheme` | Boolean  | `true`                 | Detect OS dark mode                                                 |
-| `cssSelector`       | String   | `".leaflet-tile-pane"` | Elements to apply filter to                                         |
-| `addButton`         | Boolean  | `true`                 | Add UI button to map (set to `false` for programmatic control only) |
-| `enableEditor`      | Boolean  | `false`                | Enable theme editor UI with customization sliders                   |
-| `onChange`          | Function | `null`                 | Callback on theme change: `(themeKey, theme) => {}`                 |
-| `getLabel`          | Function | `null`                 | Function to get translated theme labels: `(themeKey) => string`     |
-| `getEditorLabels`   | Function | `null`                 | Function to get translated editor UI labels: `(key) => string`      |
+| Option              | Type     | Default                | Description                                                                                                |
+| ------------------- | -------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `position`          | String   | `"topright"`           | Position of the control                                                                                    |
+| `themes`            | Object   | `DEFAULT_THEMES`       | Theme definitions                                                                                          |
+| `defaultTheme`      | String   | `"light"`              | Initial theme                                                                                              |
+| `storageKey`        | String   | `"leaflet-theme"`      | localStorage key                                                                                           |
+| `detectSystemTheme` | Boolean  | `true`                 | Detect OS dark mode                                                                                        |
+| `cssSelector`       | String   | `".leaflet-tile-pane"` | Elements to apply filter to                                                                                |
+| `addButton`         | Boolean  | `true`                 | Add UI button to map (set to `false` for programmatic control only)                                        |
+| `enableEditor`      | Boolean  | `false`                | Enable theme editor UI with customization sliders                                                          |
+| `onChange`          | Function | `null`                 | Callback on theme change AND editor changes: `(themeKey, theme) => {}`                                     |
+| `getLabel`          | Function | `null`                 | Function to get translated theme labels: `(themeKey) => string` (optional if themes have `label` property) |
+| `getEditorLabels`   | Function | `null`                 | Function to get translated editor UI labels: `(key) => string`                                             |
+| `panelPosition`     | String   | `"topright"`           | Position of editor panel: `"topright"`, `"topleft"`, `"bottomright"`, `"bottomleft"`                       |
+| `panelZIndex`       | Number   | `1000`                 | Z-index for editor panel to avoid conflicts                                                                |
 
 ### Methods
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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.css

@@ -1,7 +1,7 @@
 /* CSS Custom Properties for easy theming */
 :root {
-  /* Primary colors */
-  --ltc-primary: #2196f3;
+  /* Primary colors - fallback to Leaflet defaults if available */
+  --ltc-primary: var(--leaflet-control-bg-color, #2196f3);
   --ltc-primary-dark: #1976d2;
   --ltc-primary-light: #64b5f6;
   --ltc-primary-bg: #e3f2fd;
@@ -9,15 +9,15 @@
   /* Success/Custom badge */
   --ltc-success: #4caf50;
 
-  /* Neutral colors - Light mode */
-  --ltc-bg: white;
-  --ltc-bg-hover: #f4f4f4;
+  /* Neutral colors - Light mode - with Leaflet fallbacks */
+  --ltc-bg: var(--leaflet-control-bg-color, white);
+  --ltc-bg-hover: var(--leaflet-control-hover-bg-color, #f4f4f4);
   --ltc-bg-secondary: #f5f5f5;
   --ltc-bg-tertiary: #e0e0e0;
-  --ltc-text: #333;
+  --ltc-text: var(--leaflet-control-text-color, #333);
   --ltc-text-secondary: #666;
   --ltc-text-tertiary: #aaa;
-  --ltc-border: #e0e0e0;
+  --ltc-border: var(--leaflet-control-border-color, #e0e0e0);
   --ltc-border-dark: #bbb;
 
   /* Component specific */
@@ -68,8 +68,6 @@
 
 .leaflet-theme-panel {
   position: absolute;
-  top: 60px;
-  right: 10px;
   width: 320px;
   max-width: calc(100vw - 20px);
   max-height: calc(100vh - 80px);
@@ -77,12 +75,46 @@
   background: var(--ltc-bg);
   border-radius: 8px;
   box-shadow: 0 4px 12px var(--ltc-shadow);
-  z-index: 1000;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   pointer-events: all;
   color: var(--ltc-text);
 }
 
+/* Position variants */
+.leaflet-theme-panel[data-position="topright"],
+.leaflet-theme-panel[data-position="topleft"] {
+  top: 60px;
+}
+
+.leaflet-theme-panel[data-position="bottomright"],
+.leaflet-theme-panel[data-position="bottomleft"] {
+  bottom: 20px;
+}
+
+.leaflet-theme-panel[data-position="topright"],
+.leaflet-theme-panel[data-position="bottomright"] {
+  right: 10px;
+}
+
+.leaflet-theme-panel[data-position="topleft"],
+.leaflet-theme-panel[data-position="bottomleft"] {
+  left: 10px;
+}
+
+/* Responsive positioning for small screens */
+/* Use higher specificity to override position classes without !important */
+@media (max-width: 480px) {
+  .leaflet-theme-panel.leaflet-theme-panel {
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    width: calc(100vw - 40px);
+    max-height: calc(100vh - 100px);
+  }
+}
+
 /* Panel Header */
 .theme-panel-header {
   display: flex;
@@ -388,18 +420,37 @@
 /* Touch-friendly larger hit area */
 @media (hover: none) and (pointer: coarse) {
   .theme-editor-slider input[type="range"] {
-    height: 32px;
+    height: 40px; /* Größere Touch-Area */
+  }
+
+  .theme-editor-slider input[type="range"]::-webkit-slider-runnable-track {
+    height: 10px; /* Größere Track */
   }
 
   .theme-editor-slider input[type="range"]::-webkit-slider-thumb {
-    width: 28px;
-    height: 28px;
-    margin-top: -10px;
+    width: 32px; /* Größerer Thumb */
+    height: 32px;
+    margin-top: -11px;
+  }
+
+  .theme-editor-slider input[type="range"]::-moz-range-track {
+    height: 10px;
   }
 
   .theme-editor-slider input[type="range"]::-moz-range-thumb {
-    width: 28px;
-    height: 28px;
+    width: 32px;
+    height: 32px;
+  }
+
+  /* Größere Buttons für Touch */
+  .theme-select-btn,
+  .theme-edit-btn {
+    min-height: 48px;
+  }
+
+  .control-style-btn {
+    min-height: 44px;
+    font-size: 14px;
   }
 }
 

package/src/leaflet-theme-control.js

@@ -25,14 +25,26 @@ export class ThemeControl extends Control {
       onChange: null,
       getLabel: null, // Function to get translated theme labels: (themeKey) => string
       getEditorLabels: null, // Function to get translated editor UI labels: (key) => string
+      panelPosition: 'topright', // Position of the editor panel: 'topright', 'topleft', 'bottomright', 'bottomleft'
+      panelZIndex: 1000, // Z-index for editor panel
     })
   }
 
   initialize(options) {
     Util.setOptions(this, options)
 
-    // Create a deep copy of DEFAULT_THEMES to avoid mutating the original
-    if (!this.options.themes) {
+    // Create deep copies of themes to avoid mutating DEFAULT_THEMES
+    // This is necessary because spread operator only does shallow copies
+    if (this.options.themes) {
+      // User provided custom themes - create deep copies of each theme
+      const themesCopy = {}
+      Object.keys(this.options.themes).forEach((key) => {
+        themesCopy[key] = { ...this.options.themes[key] }
+      })
+      this.options.themes = themesCopy
+    }
+    else {
+      // No themes provided - use copies of DEFAULT_THEMES
       this.options.themes = {}
       Object.keys(DEFAULT_THEMES).forEach((key) => {
         this.options.themes[key] = { ...DEFAULT_THEMES[key] }
@@ -204,6 +216,23 @@ export class ThemeControl extends Control {
       this.root.classList.add(theme.className)
     }
 
+    // Also apply theme class to control container if map exists
+    if (this.map) {
+      const controlContainer = this.map.getContainer().querySelector('.leaflet-control-container')
+      if (controlContainer) {
+        // Remove all theme classes from control container
+        Object.values(this.options.themes).forEach((t) => {
+          if (t.className) {
+            controlContainer.classList.remove(t.className)
+          }
+        })
+        // Add current theme class
+        if (theme.className) {
+          controlContainer.classList.add(theme.className)
+        }
+      }
+    }
+
     // Apply CSS filter to map tiles
     const mapElements = document.querySelectorAll(this.options.cssSelector)
     mapElements.forEach((el) => {

package/src/leaflet-theme-editor.js

@@ -106,6 +106,11 @@ export class ThemeEditor {
     panel.setAttribute('aria-modal', 'true')
     panel.setAttribute('aria-labelledby', 'theme-panel-title')
 
+    // Apply position and z-index from options
+    const position = this.themeControl.options.panelPosition || 'topright'
+    panel.setAttribute('data-position', position)
+    panel.style.zIndex = this.themeControl.options.panelZIndex || 1000
+
     // Prevent map interactions when using the panel
     DomEvent.disableClickPropagation(panel)
     DomEvent.disableScrollPropagation(panel)
@@ -201,6 +206,37 @@ export class ThemeEditor {
     document.removeEventListener('keydown', this._onKeyDown)
   }
 
+  _isThemeModified(themeKey) {
+    // Check if theme has custom filters saved
+    if (!this.customFilters[themeKey]) {
+      return false
+    }
+
+    // Get default theme from DEFAULT_THEMES
+    const defaultTheme = DEFAULT_THEMES[themeKey]
+    if (!defaultTheme) {
+      // Custom theme not in defaults - consider it modified
+      return true
+    }
+
+    // Parse default filter and compare with custom
+    const defaultValues = this._parseFilterString(defaultTheme.filter)
+    const customValues = this.customFilters[themeKey]
+
+    // Check if any filter value differs from default
+    const filterKeys = ['invert', 'hueRotate', 'saturate', 'brightness', 'contrast', 'sepia', 'grayscale']
+    const filtersModified = filterKeys.some((key) => {
+      const defaultVal = defaultValues[key]
+      const customVal = customValues[key] !== undefined ? customValues[key] : defaultVal
+      return Math.abs(customVal - defaultVal) > 0.01 // Use small epsilon for float comparison
+    })
+
+    // Check if control style differs
+    const controlStyleModified = customValues.controlStyle && customValues.controlStyle !== defaultTheme.controlStyle
+
+    return filtersModified || controlStyleModified
+  }
+
   cleanup() {
     // Close panel if open
     if (this.isOpen) {
@@ -273,7 +309,7 @@ export class ThemeEditor {
   }
 
   _createThemeRow(themeKey, theme, isActive) {
-    const hasCustom = !!this.customFilters[themeKey]
+    const hasCustom = this._isThemeModified(themeKey)
     const themeLabel = this.themeControl._getThemeLabel(themeKey)
 
     // Create select button with icon, label and badges
@@ -321,7 +357,7 @@ export class ThemeEditor {
 
     // Theme select buttons
     const selectBtns = this.panel.querySelectorAll('.theme-select-btn')
-    selectBtns.forEach((btn) => {
+    selectBtns.forEach((btn, index) => {
       DomEvent.on(btn, 'click', (e) => {
         const themeKey = e.currentTarget.dataset.theme
 
@@ -332,6 +368,20 @@ export class ThemeEditor {
         this.themeControl.setTheme(themeKey)
         this.close()
       })
+
+      // Keyboard navigation for theme buttons
+      DomEvent.on(btn, 'keydown', (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+          e.preventDefault()
+          const nextIndex = (index + 1) % selectBtns.length
+          selectBtns[nextIndex].focus()
+        }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+          e.preventDefault()
+          const prevIndex = (index - 1 + selectBtns.length) % selectBtns.length
+          selectBtns[prevIndex].focus()
+        }
+      })
     })
 
     // Theme edit buttons
@@ -352,14 +402,9 @@ export class ThemeEditor {
     // Get current filter values or defaults
     const filterValues = this.customFilters[themeKey] || this._parseFilterString(theme.filter)
 
-    // Get control style preference
-    let controlStyle = 'light'
-    if (this.customFilters[themeKey]?.controlStyle) {
-      controlStyle = this.customFilters[themeKey].controlStyle
-    }
-    else if (theme.controlStyle) {
-      controlStyle = theme.controlStyle
-    }
+    // Get control style preference - always start fresh from theme
+    // Don't check customFilters first, as it may have stale data
+    const controlStyle = theme.controlStyle || 'light'
 
     // Build panel structure
     const header = this._createPanelHeader(`${this._getLabel('customize')}: ${themeLabel}`, true)
@@ -532,6 +577,11 @@ export class ThemeEditor {
     if (this.themeControl.getCurrentTheme() === themeKey) {
       this.themeControl.setTheme(themeKey)
     }
+
+    // Fire onChange callback for editor changes
+    if (this.themeControl.options.onChange) {
+      this.themeControl.options.onChange(themeKey, this.themeControl.options.themes[themeKey])
+    }
   }
 
   _resetTheme(themeKey) {
@@ -539,18 +589,37 @@ export class ThemeEditor {
     delete this.customFilters[themeKey]
     this._saveCustomFilters()
 
-    // Restore default values from DEFAULT_THEMES
+    // Restore default filter and controlStyle from DEFAULT_THEMES
+    // but KEEP user-defined properties like applyToSelectors
     const defaultTheme = DEFAULT_THEMES[themeKey]
+    const currentTheme = this.themeControl.options.themes[themeKey]
 
-    if (defaultTheme) {
-      // Copy all properties from default theme
-      this.themeControl.options.themes[themeKey] = { ...defaultTheme }
+    if (defaultTheme && currentTheme) {
+      // Only reset the editable properties (filter, controlStyle)
+      // Keep other properties like applyToSelectors, icon, label, className
+      currentTheme.filter = defaultTheme.filter
+      currentTheme.controlStyle = defaultTheme.controlStyle
+    }
+    else if (!currentTheme) {
+      // Theme doesn't exist - this shouldn't happen
+      console.warn(`Theme "${themeKey}" not found`)
+      return
+    }
+    else {
+      // For custom themes not in DEFAULT_THEMES, we can't reset
+      console.warn(`Theme "${themeKey}" has no default in DEFAULT_THEMES, cannot reset filter values`)
     }
 
-    // Reapply theme (including controlStyle) BEFORE re-rendering editor
-    // This ensures the DOM attribute is set correctly first
+    // Reapply theme if it's currently active
+    // Use setTheme to ensure proper application
     if (this.themeControl.getCurrentTheme() === themeKey) {
-      this.themeControl._applyTheme(themeKey, false)
+      this.themeControl.setTheme(themeKey)
+    }
+    else {
+      // Fire onChange callback even if theme is not currently active
+      if (this.themeControl.options.onChange) {
+        this.themeControl.options.onChange(themeKey, this.themeControl.options.themes[themeKey])
+      }
     }
 
     // Re-render editor panel with default values