Support custom background and shadow (#27)

blueswen · Jan 24, 2024 · 1f08612 · 1f08612
1 parent bbe9949
commit 1f08612
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 25 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,3 +1,7 @@
+mkdocs-glightbox-0.3.7 (2023-01-24)
+
+    * Supported custom background and shadow (#27)
+
 mkdocs-glightbox-0.3.6 (2023-12-30)
 
     * Modified width default to auto prevent zooming large image bug (#21)

diff --git a/README.md b/README.md
@@ -51,21 +51,25 @@ GLightbox is a pure javascript lightbox library with mobile support.
              - custom-skip-class-name
            auto_caption: false
            caption_position: bottom
+           background: white
+           shadow: true
     ```
 
-    | Option           | Default | Description                                                                                          |
-    | ---------------- | ------- | ---------------------------------------------------------------------------------------------------- |
-    | touchNavigation  | true    | Enable or disable the touch navigation (swipe).                                                      |
-    | loop             | false   | Loop slides on end.                                                                                  |
-    | effect           | zoom    | Name of the effect on lightbox open. (zoom, fade, none)                                              |
-    | slide_effect     | slide   | Name of the effect on lightbox slide. (slide, zoom, fade, none)                                      |
-    | width            | auto    | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. |
-    | height           | auto    | Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto.         |
-    | zoomable         | true    | Enable or disable zoomable images.                                                                   |
-    | draggable        | true    | Enable or disable mouse drag to go prev and next slide.                                              |
-    | skip_classes     | [ ]     | Disable lightbox of those image with specific custom class name.                                     |
-    | auto_caption     | false   | Enable or disable using alt of image as caption title automatically.                                 |
-    | caption_position | bottom  | Default captions position. (bottom, top, left, right)                                                |
+    | Option | Default | Description |
+    |---|---|---|
+    | touchNavigation | true | Enable or disable the touch navigation (swipe). |
+    | loop | false | Loop slides on end. |
+    | effect | zoom | Name of the effect on lightbox open. (zoom, fade, none) |
+    | slide_effect | slide | Name of the effect on lightbox slide. (slide, zoom, fade, none) |
+    | width | auto | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. |
+    | height | auto | Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto. |
+    | zoomable | true | Enable or disable zoomable images. |
+    | draggable | true | Enable or disable mouse drag to go prev and next slide. |
+    | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. |
+    | auto_caption | false | Enable or disable using alt of image as caption title automatically. |
+    | caption_position | bottom | Default captions position. (bottom, top, left, right) |
+    | background | white | The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example `#74b9ff` or `Gainsboro` or `none` for nothing. |
+    | shadow | true | Enable or disable the shadow of lightbox image. Disable it when the background is `none` to prevent shadow around the transparent image. |
 
     Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
 

diff --git a/mkdocs_glightbox/plugin.py b/mkdocs_glightbox/plugin.py
@@ -32,6 +32,8 @@ class LightboxPlugin(BasePlugin):
             "caption_position",
             config_options.Choice(("bottom", "top", "left", "right"), default="bottom"),
         ),
+        ("background", config_options.Type(str, default="white")),
+        ("shadow", config_options.Type(bool, default=True)),
     )
 
     def on_config(self, config):
@@ -58,19 +60,24 @@ def on_post_page(self, output, page, config, **kwargs):
 
         # Modify the CSS patch
         css_patch = """
-        html.glightbox-open { overflow: initial; height: 100%; }
-        .gslide-title { margin-top: 0px; user-select: text; }
-        .gslide-desc { color: #666; user-select: text; }
-        .gslide-image img { background: white; }
-        """
+    html.glightbox-open { overflow: initial; height: 100%; }
+    .gslide-title { margin-top: 0px; user-select: text; }
+    .gslide-desc { color: #666; user-select: text; }"""
+        css_patch += f"""
+    .gslide-image img {{ background: {self.config['background']}; }}"""
+        if not self.config["shadow"]:
+            css_patch += """
+    .glightbox-clean .gslide-media {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }"""
         if config["theme"].name == "material":
             css_patch += """
-            .gscrollbar-fixer { padding-right: 15px; }
-            .gdesc-inner { font-size: 0.75rem; }
-            body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
-            body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
-            body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}
-            """
+    .gscrollbar-fixer { padding-right: 15px; }
+    .gdesc-inner { font-size: 0.75rem; }
+    body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
+    body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
+    body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}"""
         output = head_regex.sub(f"<head>\\1<style>{css_patch}</style></head>", output)
 
         # Modify the JS script

diff --git a/schema.json b/schema.json
@@ -92,6 +92,18 @@
                   "bottom", "top", "left", "right"
                 ],
                 "default": "bottom"
+              },
+              "background": {
+                "title": "Background CSS of lightbox image",
+                "markdownDescription": "https://blueswen.github.io/mkdocs-glightbox/#usage",
+                "type": "string",
+                "default": "white"
+              },
+              "shadow": {
+                "title": "Enable the shadow of lightbox image",
+                "markdownDescription": "https://blueswen.github.io/mkdocs-glightbox/#usage",
+                "type": "boolean",
+                "default": true
               }
             },
             "additionalProperties": false

diff --git a/setup.py b/setup.py
@@ -5,7 +5,7 @@
 
 setup(
     name="mkdocs-glightbox",
-    version="0.3.6",
+    version="0.3.7",
     author="Blueswen",
     author_email="[email protected]",
     url="https://blueswen.github.io/mkdocs-glightbox",

diff --git a/tests/fixtures/mkdocs-options.yml b/tests/fixtures/mkdocs-options.yml
@@ -13,3 +13,5 @@ plugins:
         draggable: false
         caption_position: right
         auto_caption: true
+        background: none
+        shadow: false
diff --git a/tests/test_builds.py b/tests/test_builds.py
@@ -337,6 +337,15 @@ def test_options(tmp_path):
     path = "../"
     validate_static(contents, path)
     validate_script(contents)
+    # validate override style
+    assert ".gslide-image img { background: none; }" in contents
+    assert (
+        """.glightbox-clean .gslide-media {
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }"""
+        in contents
+    )
     # validate slide options
     regex_obj = re.search(
         rf'<a class="glightbox".*?href="{re.escape(path)}img\.png"(.*?)><img.*?src="{re.escape(path)}img\.png".*?\/><\/a>',