Lightbox updates

AnswerDotAI · Feb 18, 2025 · c4bf285 · c4bf285
1 parent 7cca2af
commit c4bf285
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 853 deletions.
diff --git a/docs/api_reference/api_reference.py b/docs/api_reference/api_reference.py
@@ -506,17 +506,20 @@ def ex_radio():
         Radio(name="radio-group", id="radio1"), 
         LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
 
-def ex_Select():
+def ex_insertable_select1():
     fruit_opts = ['apple', 'orange', 'banana', 'mango']
-    refresh_btn = DivRAligned(
-               Button('Refresh', hx_get=True, hx_select_oob="#fruit",
-                      hx_swap="none", cls=ButtonT.default))
-    return Grid(Select(
-                Optgroup(label="Fruit")(
+
+    return Grid(
+        Select(Option('Apple', value='apple'),
+               Option('Orange', value='orange'),
+               Option('Banana', value='banana'),
+               Option('Mango', value='mango'),
+               id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."),
+
+        Select(Optgroup(label="Fruit")(
                     *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))),
                 id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...",
-                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"),
-            refresh_btn, cls='gap-2 mx-auto w-1/2')
+                cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"))
 
 def ex_select(): 
     return Div(
@@ -583,11 +586,41 @@ def ex_upload():
     fn2code_string(ex_select),
     H3("Example: Insertable Select"),
     Caption("In a production app, the user-inserted option would be saved server-side (db, session etc.)"),
-    fn2code_string(ex_Select),
+    fn2code_string(ex_insertable_select1),
     Legend,
     Fieldset,
     title="Forms")
 
+
+# Lightbox
+
+def ex_lightbox1():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='This is my super cool caption'),
+    )
+def ex_lightbox2():
+    return LightboxContainer(
+        LightboxItem(Button("Open"), href='https://picsum.photos/id/100/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 1'),
+        LightboxItem(href='https://picsum.photos/id/101/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 2'),
+        LightboxItem(href='https://picsum.photos/id/102/1280/720.webp', data_alt='A placeholder image to demonstrate the lightbox', data_caption='Image 3'),
+    )
+
+def ex_lightbox3():
+    return LightboxContainer(
+        LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
+        LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
+        LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
+        LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'))
+
+docs_lightbox = create_doc_section(
+    H1("Lightbox API Reference"),
+    fn2code_string(ex_lightbox1),
+    fn2code_string(ex_lightbox2),
+    fn2code_string(ex_lightbox3),
+    LightboxContainer,
+    LightboxItem,
+    title="Lightbox")
+
 # Modals
 
 def ex_modal():
@@ -719,7 +752,6 @@ def ex_h_stacked_div():
     DivHStacked,
     fn2code_string(ex_h_stacked_div),
     FlexT,
-
     title="Layout")
 
 # Dividers
@@ -840,14 +872,6 @@ def ex_tabs2():
     NavHeaderLi,
     NavDividerLi,
     NavParentLi,
-    # NavBarCenter,
-    # NavBarRSide,
-    # NavBarLSide,
-    # NavBarContainer,
-    # NavBarNav,
-    # NavBarSubtitle,
-    # NavBarNavContainer,
-    # NavBarParentIcon,
     DropDownNavContainer,
     title="Navigation")
 
@@ -1004,7 +1028,7 @@ def ex_markdown3():
 def ex_applyclasses():
     return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
 
-docs_markdown_HTMLstyling = create_doc_section(
+docs_markdown = create_doc_section(
     H1("Markdown + automated HTML styling API Reference"),
     fn2code_string(ex_markdown),
     render_md("You can overwrite the default styling for markdown rendering with your own css classes with  `class_map"),
@@ -1016,6 +1040,12 @@ def ex_applyclasses():
     fn2code_string(ex_applyclasses),
     title="Markdown + HTML Frankification")
 
+
+docs_html = create_doc_section(
+    H1("HTML Styling API Reference"),
+    fn2code_string(ex_applyclasses),
+    title="HTML Styling")
+
 def ex_loading1():
     return Loading()
 

diff --git a/monsterui/_modidx.py b/monsterui/_modidx.py
@@ -134,10 +134,8 @@
                                                                                        'monsterui/franken.py'),
                                    'monsterui.franken.LabelTextArea': ('franken.html#labeltextarea', 'monsterui/franken.py'),
                                    'monsterui.franken.Legend': ('franken.html#legend', 'monsterui/franken.py'),
-                                   'monsterui.franken.Lightbox': ('franken.html#lightbox', 'monsterui/franken.py'),
-                                   'monsterui.franken.LightboxT': ('franken.html#lightboxt', 'monsterui/franken.py'),
-                                   'monsterui.franken.LightboxT._generate_next_value_': ( 'franken.html#lightboxt._generate_next_value_',
-                                                                                          'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxContainer': ('franken.html#lightboxcontainer', 'monsterui/franken.py'),
+                                   'monsterui.franken.LightboxItem': ('franken.html#lightboxitem', 'monsterui/franken.py'),
                                    'monsterui.franken.ListT': ('franken.html#listt', 'monsterui/franken.py'),
                                    'monsterui.franken.Mark': ('franken.html#mark', 'monsterui/franken.py'),
                                    'monsterui.franken.Meter': ('franken.html#meter', 'monsterui/franken.py'),
@@ -149,7 +147,6 @@
                                    'monsterui.franken.ModalFooter': ('franken.html#modalfooter', 'monsterui/franken.py'),
                                    'monsterui.franken.ModalHeader': ('franken.html#modalheader', 'monsterui/franken.py'),
                                    'monsterui.franken.ModalTitle': ('franken.html#modaltitle', 'monsterui/franken.py'),
-                                   'monsterui.franken.MultiLightbox': ('franken.html#multilightbox', 'monsterui/franken.py'),
                                    'monsterui.franken.NavBar': ('franken.html#navbar', 'monsterui/franken.py'),
                                    'monsterui.franken.NavCloseLi': ('franken.html#navcloseli', 'monsterui/franken.py'),
                                    'monsterui.franken.NavContainer': ('franken.html#navcontainer', 'monsterui/franken.py'),

diff --git a/monsterui/core.py b/monsterui/core.py
@@ -82,7 +82,6 @@ def _headers_theme(color, mode='auto', radii=ThemeRadii.sm, shadows=ThemeShadows
 
 # %% ../nbs/01_core.ipynb
 HEADER_URLS = {
-
         'franken_css': "https://unpkg.com/[email protected]/dist/css/core.min.css",
         'franken_js_core': "https://unpkg.com/[email protected]/dist/js/core.iife.js",
         'franken_icons': "https://unpkg.com/[email protected]/dist/js/icon.iife.js",

diff --git a/monsterui/franken.py b/monsterui/franken.py
@@ -16,8 +16,7 @@
            'NavSubtitle', 'NavCloseLi', 'ScrollspyT', 'NavBar', 'SliderContainer', 'SliderItems', 'SliderNav', 'Slider',
            'DropDownNavContainer', 'TabContainer', 'CardT', 'CardTitle', 'CardHeader', 'CardBody', 'CardFooter',
            'CardContainer', 'Card', 'TableT', 'Table', 'Td', 'Th', 'Tbody', 'TableFromLists', 'TableFromDicts',
-           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker', 'LightboxT', 'Lightbox',
-           'MultiLightbox']
+           'apply_classes', 'render_md', 'get_franken_renderer', 'ThemePicker', 'LightboxContainer', 'LightboxItem']
 
 # %% ../nbs/02_franken.ipynb
 import fasthtml.common as fh
@@ -1524,78 +1523,20 @@ def _optgrp(key, lbl, opts): return fh.Optgroup(data_key=key, label=lbl)(*opts)
     return Div(Uk_theme_switcher(fh.Select(*groups, hidden=True),  id="theme-switcher"), cls=stringify(cls))
 
 # %% ../nbs/02_franken.ipynb
-class LightboxT(VEnum):
-    'Lightbox styles and animations'
-    def _generate_next_value_(name, start, count, last_values): return str2ukcls('lightbox', name)
-
-    # Animations
-    slide = auto()
-    fade = auto()
-    scale = auto()
-
-    # Navigation
-    no_nav = 'slidenav: false; nav: false'
-    thumbnav = 'slidenav: false; nav: thumbnav'
-    dotnav = 'slidenav: false; nav: dotnav'
-
-# %% ../nbs/02_franken.ipynb
-def Lightbox(
-    link:str|FT='Open Lightbox', # Content for the lightbox trigger
-    href:str='#', # URL of the lightbox content
-    caption:str|FT='Image Caption', # Caption shown in lightbox 
-    alt:str='Lightbox Image', # Alt text for images
-    in_multi:bool=False, # Whether this is part of a MultiLightbox
-    use_img_link:bool=False, # Use thumbnail image as trigger
-    link_cls:str|tuple=(), # Additional classes for trigger
-    thumb_width:int=400, # Thumbnail width if use_img_link=True
-    thumb_height:int=400, # Thumbnail height if use_img_link=True
-    iframe:bool=False, # Whether content should be loaded in iframe
-    **kwargs # Additional args for container
-)->FT: # Lightbox component
-    "Creates a lightbox component for displaying media content"
-    link_kw = dict(
-        data_caption=to_xml(caption) if caption else None,
-        data_alt=alt,
-        href=href,
-        cls=('uk-inline' if use_img_link else '', stringify(link_cls)),
-        data_type='iframe' if iframe else None
-    )
-
-    if isinstance(link, str): link = Button(link, cls=ButtonT.default)
-    if use_img_link: link = fh.Img(src=href, alt=alt, width=thumb_width, height=thumb_height)
-
-    inner = A(link, **link_kw)
-    if in_multi: return inner
-    return Div(inner, data_uk_lightbox=True, **kwargs)
-
-# %% ../nbs/02_franken.ipynb
-def MultiLightbox(
-    *c:FT, # Child lightbox components
-    urls:list=[], # List of URLs to create lightboxes from
-    animation:str=LightboxT.slide, # Animation type
-    nav:str='', # Navigation type (thumbnav/dotnav)
-    counter:bool=False, # Show image counter
-    cls:str='grid mt-4 grid-cols-3 gap-4', # Container classes
-    **kwargs # Additional args for container
-)->FT: # Multi-image lightbox gallery
-    "Creates a lightbox gallery for displaying multiple images with navigation"
-    nav_str = f"slidenav: false;nav:{nav}" if nav else ''
-    container = Div(
-        data_uk_lightbox=f'animation:{animation};{nav_str}',
-        counter=counter,
-        cls=stringify(cls),
-        **kwargs
-    )
-
-    if urls:
-        items = [
-            Div(Lightbox(
-                in_multi=True,
-                link=fh.Img(src=url, alt=""),
-                caption=f"Photo {i+1}",
-                href=url,
-                link_cls='uk-inline'
-            )) for i,url in enumerate(urls)
-        ]
-        return container(*items)
-    return container(*c)
+def LightboxContainer(*lightboxitem, # `LightBoxItem`s that will be inside lightbox
+                      data_uk_lightbox='counter: true', # See https://franken-ui.dev/docs/2.0/lightbox for advanced options
+                      **kwargs # Additional options for outer container
+                     )->FT: # Lightbox
+    "Lightbox container that will hold `LightboxItems`"
+    return fh.Div(*lightboxitem, data_uk_lightbox=data_uk_lightbox, **kwargs)
+
+# %% ../nbs/02_franken.ipynb
+def LightboxItem(*c, # Component that when clicked will open the lightbox (often a button)
+                 href, # Href to image, youtube video, vimeo, google maps, etc.
+                 data_alt=None, # Alt text for the lightbox item/image
+                 data_caption=None, # Caption for the item that shows below it
+                 cls='', # Class for the A tag (often nothing or `uk-btn`)
+                 **kwargs # Additional args for the `A` tag
+                )->FT: # A(... href, data_alt, cls., ...)
+    "Anchor tag with appropriate structure to go inside a `LightBoxContainer`"
+    return fh.A(*c, href=href, data_alt=data_alt, cls=stringify(cls), **kwargs)