Settings Modal

Modal-based card stack settings with card count slider (auto toggle), width slider, and optional scale slider.

Slider Sections

from fasthtml.common import to_xml

html = to_xml(_render_slider_with_labels(
    slider_id="test-slider", min_val=30, max_val=120, step_val=5,
    current_val=80, low_label="Narrow", high_label="Wide",
    oninput="doStuff(this.value)",
))
assert 'id="test-slider"' in html
assert 'min="30"' in html
assert 'max="120"' in html
assert 'value="80"' in html
assert 'Narrow' in html
assert 'Wide' in html
assert 'disabled' not in html

# Test disabled
html_disabled = to_xml(_render_slider_with_labels(
    slider_id="test-slider", min_val=1, max_val=9, step_val=2,
    current_val=5, low_label="1", high_label="9",
    oninput="x()", disabled=True,
))
assert 'disabled' in html_disabled
print("Slider with labels tests passed!")

Slider with labels tests passed!

Card Count Section

Card count uses an “Auto” toggle alongside a discrete range slider. When auto mode is on, the slider is disabled and the card stack auto-fits to the available viewport height.

from cjm_fasthtml_card_stack.core.config import CardStackConfig, _reset_prefix_counter
from cjm_fasthtml_card_stack.core.html_ids import CardStackHtmlIds

_reset_prefix_counter()
config = CardStackConfig(prefix="test")
ids = CardStackHtmlIds(prefix="test")

# Test auto mode (default)
section = _render_card_count_section(config, ids)
html = to_xml(section)
assert 'id="test-card-count-slider"' in html
assert 'id="test-card-count-auto-toggle"' in html
assert 'disabled="disabled"' in html  # slider disabled in auto mode
assert 'checked' in html  # toggle checked in auto mode
assert 'Auto' in html
assert 'Cards' in html
# Tick labels for default options (1, 3, 5, 7, 9)
for v in (1, 3, 5, 7, 9):
    assert f'>{v}<' in html
print("Card count section auto mode tests passed!")

# Test manual mode
section_manual = _render_card_count_section(config, ids, current_count=5, is_auto_mode=False)
html_manual = to_xml(section_manual)
assert 'disabled="disabled"' not in html_manual  # slider enabled
assert 'value="5"' in html_manual  # current count reflected
print("Card count section manual mode tests passed!")

Card count section auto mode tests passed!
Card count section manual mode tests passed!

Trigger Button

---

source

render_settings_trigger

def render_settings_trigger(
    modal_id:str, # ID of the settings modal dialog to open
    icon_size:int=4, # lucide icon size
)->functools.partial(<function ft_hx at 0x7f130d21f920>, 'button'): # ghost button with sliders-horizontal icon

Render a settings icon button that opens the card stack settings modal.

trigger = render_settings_trigger("test-settings-modal")
html = to_xml(trigger)
assert 'showModal' in html
assert 'test-settings-modal' in html
assert 'title="Card stack settings"' in html
assert 'svg' in html.lower()  # has icon
print("Trigger button tests passed!")

Full Modal Component

---

source

render_card_stack_settings_modal

def render_card_stack_settings_modal(
    config:CardStackConfig, # card stack configuration
    ids:CardStackHtmlIds, # HTML IDs for this instance
    current_count:int=1, # currently selected card count
    is_auto_mode:bool=True, # whether auto-adjust mode is active
    card_width:int=80, # current card width in rem
    show_scale:bool=False, # whether to include the scale slider
    card_scale:int=100, # current scale percentage (if show_scale=True)
    title:str='Display Settings', # modal title text
)->tuple: # (modal_dialog, trigger_button)

Render a modal-based card stack settings panel.

Returns two components: - modal_dialog: The Dialog element (place anywhere in page) - trigger_button: Small settings icon button (place in toolbar)

# Test full modal — default (auto mode, no scale)
_reset_prefix_counter()
config = CardStackConfig(prefix="test")
ids = CardStackHtmlIds(prefix="test")

modal_dialog, trigger = render_card_stack_settings_modal(config, ids)

modal_html = to_xml(modal_dialog)
trigger_html = to_xml(trigger)

# Modal structure
assert 'id="test-settings-modal"' in modal_html
assert 'modal-box' in modal_html
assert 'modal-backdrop' in modal_html
assert 'Display Settings' in modal_html
assert '\u2715' in modal_html  # close button

# Card count section present
assert 'Cards' in modal_html
assert 'Auto' in modal_html
assert 'test-card-count-slider' in modal_html
assert 'test-card-count-auto-toggle' in modal_html

# Width section present
assert 'Width' in modal_html
assert 'Narrow' in modal_html
assert 'Wide' in modal_html
assert 'test-width-slider' in modal_html

# Scale section NOT present by default
assert 'Scale' not in modal_html
assert 'Smaller' not in modal_html
assert 'test-scale-slider' not in modal_html

# Trigger
assert 'showModal' in trigger_html
assert 'test-settings-modal' in trigger_html

print("Full modal default tests passed!")

# Test with scale enabled
modal_with_scale, _ = render_card_stack_settings_modal(
    config, ids, show_scale=True, card_scale=150,
)
html_scale = to_xml(modal_with_scale)
assert 'Scale' in html_scale
assert 'Smaller' in html_scale
assert 'Larger' in html_scale
assert 'test-scale-slider' in html_scale
assert 'value="150"' in html_scale
print("Scale opt-in tests passed!")

# Test manual mode
modal_manual, _ = render_card_stack_settings_modal(
    config, ids, current_count=5, is_auto_mode=False, card_width=60,
)
html_manual = to_xml(modal_manual)
assert 'value="60"' in html_manual  # width value
assert 'value="5"' in html_manual  # card count value
print("Manual mode tests passed!")

# Test multi-instance uniqueness
config_a = CardStackConfig(prefix="seg")
config_b = CardStackConfig(prefix="align")
ids_a = CardStackHtmlIds(prefix="seg")
ids_b = CardStackHtmlIds(prefix="align")

modal_a, trigger_a = render_card_stack_settings_modal(config_a, ids_a)
modal_b, trigger_b = render_card_stack_settings_modal(config_b, ids_b)

html_a = to_xml(modal_a)
html_b = to_xml(modal_b)

assert 'seg-settings-modal' in html_a
assert 'align-settings-modal' in html_b
assert 'seg-card-count-slider' in html_a
assert 'align-card-count-slider' in html_b
assert 'seg-width-slider' in html_a
assert 'align-width-slider' in html_b

# Triggers point to correct modals
assert 'seg-settings-modal' in to_xml(trigger_a)
assert 'align-settings-modal' in to_xml(trigger_b)

print("Multi-instance uniqueness tests passed!")