leaflet-theme-control 0.1.2 → 0.1.4

package/README.md

@@ -6,14 +6,15 @@ A Leaflet control for switching between visual themes using CSS filters. Perfect
 
 ## Features
 
-- 🌓 **Multiple themes**: Light, Dark, Grayscale, Custom
-- ♿ **Accessibility**: Adaptable themes for better visibility
-- 🎨 **CSS Filters**: No need for multiple tile sources
-- 💾 **Persistent**: Saves user preference in localStorage
-- 🔍 **System Detection**: Automatically detects OS dark mode preference
-- 🌍 **i18n Ready**: Customizable labels via callback function
-- 🪶 **Lightweight**: Zero dependencies (except Leaflet)
-- ⚡ **Performance**: Instant theme switching without reloading tiles
+- **Multiple themes**: Light, Dark, Grayscale, Custom
+- **Theme Editor**: Customize filters with live preview sliders (optional)
+- **Accessibility**: Adaptable themes for better visibility
+- **CSS Filters**: No need for multiple tile sources
+- **Persistent**: Saves user preference in localStorage
+- **System Detection**: Automatically detects OS dark mode preference
+- **i18n Ready**: Customizable labels with auto-update on language change
+- **Lightweight**: Zero dependencies (except Leaflet)
+- **Performance**: Instant theme switching without reloading tiles
 
 ## Installation
 
@@ -32,31 +33,13 @@ import "leaflet-theme-control/src/leaflet-theme-control.css";
 
 **Without bundler (plain HTML):**
 
-```html
-<link rel="stylesheet" href="node_modules/leaflet-theme-control/src/leaflet-theme-control.css" />
-
-<script type="importmap">
-  {
-    "imports": {
-      "leaflet-theme-control": "./node_modules/leaflet-theme-control/src/leaflet-theme-control.js"
-    }
-  }
-</script>
-
-<script type="module">
-  import { ThemeControl } from "leaflet-theme-control";
-  // Your code here
-</script>
-```
-
-**Or via CDN (coming soon):**
-
 ```html
 <link rel="stylesheet" href="https://unpkg.com/leaflet-theme-control/src/leaflet-theme-control.css" />
 
 <script type="importmap">
   {
     "imports": {
+      "leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js",
       "leaflet-theme-control": "https://unpkg.com/leaflet-theme-control/src/leaflet-theme-control.js"
     }
   }
@@ -64,23 +47,10 @@ import "leaflet-theme-control/src/leaflet-theme-control.css";
 
 <script type="module">
   import { ThemeControl } from "leaflet-theme-control";
+  // Your code here
 </script>
 ```
 
-### As local module (development)
-
-**HTML:**
-
-```html
-<link rel="stylesheet" href="./third-party/leaflet-theme-control/src/leaflet-theme-control.css" />
-```
-
-**JavaScript:**
-
-```javascript
-import { ThemeControl } from "./third-party/leaflet-theme-control/src/leaflet-theme-control.js";
-```
-
 ## Usage
 
 ### Basic Example
@@ -209,7 +179,7 @@ console.log(themeControl.getCurrentTheme()); // "dark"
 
 // Open editor from custom button
 myCustomButton.onclick = () => {
-  themeControl.editor.open();
+  themeControl.editor.openThemeSelector();
 };
 ```
 
@@ -237,17 +207,18 @@ See [examples/api.html](examples/api.html) for a complete example.
 
 ### Methods
 
-| Method               | Returns  | Description              |
-| -------------------- | -------- | ------------------------ |
-| `setTheme(themeKey)` | `void`   | Switch to specific theme |
-| `getCurrentTheme()`  | `String` | Get current theme key    |
-| `getThemes()`        | `Object` | Get all available themes |
+| Method                | Returns  | Description                                       |
+| --------------------- | -------- | ------------------------------------------------- |
+| `setTheme(themeKey)`  | `void`   | Switch to specific theme                          |
+| `getCurrentTheme()`   | `String` | Get current theme key                             |
+| `getThemes()`         | `Object` | Get all available themes                          |
+| `updateButtonLabel()` | `void`   | Update button label (auto-called on `html[lang]`) |
 
 ### Editor API (when `enableEditor: true`)
 
 | Method                             | Returns | Description                    |
 | ---------------------------------- | ------- | ------------------------------ |
-| `editor.open()`                    | `void`  | Open theme selector panel      |
+| `editor.openThemeSelector()`       | `void`  | Open theme selector panel      |
 | `editor.openThemeEditor(themeKey)` | `void`  | Open editor for specific theme |
 | `editor.close()`                   | `void`  | Close editor panel             |
 
@@ -258,14 +229,6 @@ See [examples/api.html](examples/api.html) for a complete example.
 - **Grayscale**: Black and white for printing or reduced distraction
 - **Custom**: Fully customizable theme with combined filters (editable via theme editor)
 
-## Browser Support
-
-Works in all modern browsers that support CSS filters:
-
-- Chrome/Edge 18+
-- Firefox 35+
-- Safari 9.1+
-
 ## License
 
 MIT License. See [LICENSE](LICENSE.md) for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-theme-control",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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",
@@ -25,11 +25,14 @@
     "leaflet",
     "dark-mode",
     "theme",
+    "theme-editor",
     "accessibility",
     "css-filter",
     "map",
     "grayscale",
-    "high-contrast"
+    "high-contrast",
+    "filter",
+    "leaflet-plugin"
   ],
   "author": "Kristjan ESPERANTO",
   "license": "MIT",

package/src/leaflet-theme-control.js

@@ -51,6 +51,16 @@ export class ThemeControl extends Control {
       })
     }
 
+    // Store original themes for reset functionality in editor
+    // This ensures reset uses user-provided values, not DEFAULT_THEMES
+    this.originalThemes = {}
+    for (const [key, theme] of Object.entries(this.options.themes)) {
+      this.originalThemes[key] = {
+        filter: theme.filter,
+        controlStyle: theme.controlStyle,
+      }
+    }
+
     this.root = document.documentElement
     this.savedTheme = localStorage.getItem(this.options.storageKey)
 

package/src/leaflet-theme-editor.js

@@ -593,16 +593,16 @@ export class ThemeEditor {
     delete this.customFilters[themeKey]
     this._saveCustomFilters()
 
-    // Restore default filter and controlStyle from DEFAULT_THEMES
+    // Restore original filter and controlStyle from user-provided themes
     // but KEEP user-defined properties like applyToSelectors
-    const defaultTheme = DEFAULT_THEMES[themeKey]
+    const originalTheme = this.themeControl.originalThemes[themeKey]
     const currentTheme = this.themeControl.options.themes[themeKey]
 
-    if (defaultTheme && currentTheme) {
+    if (originalTheme && currentTheme) {
       // Only reset the editable properties (filter, controlStyle)
       // Keep other properties like applyToSelectors, icon, label, className
-      currentTheme.filter = defaultTheme.filter
-      currentTheme.controlStyle = defaultTheme.controlStyle
+      currentTheme.filter = originalTheme.filter
+      currentTheme.controlStyle = originalTheme.controlStyle
     }
     else if (!currentTheme) {
       // Theme doesn't exist - this shouldn't happen
@@ -610,8 +610,8 @@ export class ThemeEditor {
       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`)
+      // For themes not in originalThemes, we can't reset
+      console.warn(`Theme "${themeKey}" has no original values, cannot reset filter values`)
     }
 
     // Reapply theme if it's currently active

package/types/index.d.ts

@@ -130,6 +130,28 @@ declare module "leaflet" {
     panelZIndex?: number;
   }
 
+  /**
+   * Theme editor for customizing theme filters.
+   * Only available when enableEditor is true.
+   */
+  class ThemeEditor {
+    /**
+     * Opens the theme selector panel.
+     */
+    openThemeSelector(): void;
+
+    /**
+     * Opens the theme editor for a specific theme.
+     * @param themeKey - The key of the theme to edit
+     */
+    openThemeEditor(themeKey: string): void;
+
+    /**
+     * Closes the editor panel.
+     */
+    close(): void;
+  }
+
   /**
    * Leaflet control for switching between visual themes.
    *
@@ -156,6 +178,11 @@ declare module "leaflet" {
   class ThemeControl extends Control {
     options: ThemeControlOptions;
 
+    /**
+     * Theme editor instance (only available when enableEditor is true).
+     */
+    editor?: ThemeEditor;
+
     /**
      * Creates a new ThemeControl instance.
      * @param options - Configuration options