JS: Controls

JavaScript generators for width, scale, and card count management.

Width Management

Syncs the width slider value with localStorage and the card stack inner container’s max-width. Debounces server persistence.

# Test width management JS generation
ids = CardStackHtmlIds(prefix="cs0")
config = CardStackConfig(prefix="cs0")
urls = CardStackUrls(save_width="/cs/save_width")

js = _generate_width_mgmt_js(ids, config, urls)
assert "Width Management" in js
assert ids.card_stack_inner in js
assert ids.width_slider in js
assert "ns.updateWidth" in js
assert "ns.decreaseWidth" in js
assert "ns.increaseWidth" in js
assert "ns.applyWidth" in js
assert "ns.triggerAutoAdjust" in js
assert urls.save_width in js
print("Width management JS tests passed!")

Width management JS tests passed!

Scale Management

Syncs the scale slider value with localStorage and a CSS custom property (--card-stack-scale). Debounces server persistence.

# Test scale management JS generation
js = _generate_scale_mgmt_js(ids, config, urls)
assert "Scale Management" in js
assert ids.card_stack in js
assert ids.scale_slider in js
assert "ns.updateScale" in js
assert "ns.decreaseScale" in js
assert "ns.increaseScale" in js
assert "ns.applyScale" in js
assert "--card-stack-scale" in js
assert "ns.triggerAutoAdjust" in js
print("Scale management JS tests passed!")

Scale management JS tests passed!

Card Count Management

Manages the visible card count dropdown, localStorage persistence, and the auto/manual mode toggle. Fires HTMX viewport updates when the count changes.

# Test card count management JS generation
urls_full = CardStackUrls(update_viewport="/cs/update_viewport")
js = _generate_card_count_mgmt_js(ids, config, urls_full)
assert "Card Count Management" in js
assert ids.card_stack in js
assert ids.card_count_select in js
assert "ns.updateCardCount" in js
assert "ns._autoUpdateCount" in js
assert "ns.handleCountChange" in js
assert "ns.syncCountDropdown" in js  # Exposed for external callers
assert "_isAutoMode" in js
assert "_syncCountDropdown" in js
assert "_AUTO_KEY" in js
assert "swap: 'none'" in js
# Valid count options from config
assert "1, 3, 5, 7, 9" in js
# is_auto parameter passed in both functions
assert "is_auto: 'false'" in js  # Manual selection
assert "is_auto: 'true'" in js   # Auto-adjustment
print("Card count management JS tests passed!")

Card count management JS tests passed!