HTML IDs

Centralized HTML ID constants for interaction pattern components

InteractionHtmlIds Class

This class provides centralized HTML ID constants for interaction pattern components. It extends AppHtmlIds from cjm-fasthtml-app-core to inherit base application IDs.

---

source

InteractionHtmlIds

def InteractionHtmlIds(
    args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

HTML ID constants for interaction pattern components.

Inherits from AppHtmlIds: - MAIN_CONTENT = “main-content” - ALERT_CONTAINER = “alert-container” - as_selector(id_str) - static method

Usage Examples

# Access base IDs
container_id = InteractionHtmlIds.STEP_FLOW_CONTAINER
print(f"Container ID: {container_id}")
print(f"Container selector: {InteractionHtmlIds.as_selector(container_id)}")

Container ID: step-flow-container
Container selector: #step-flow-container

# Generate step-specific IDs
step_id = "select-plugin"
content_id = InteractionHtmlIds.step_content(step_id)
indicator_id = InteractionHtmlIds.step_indicator(step_id)

print(f"Step content ID: {content_id}")
print(f"Step indicator ID: {indicator_id}")

# Generate tab-specific IDs
tab_id = "settings"
tab_radio_id = InteractionHtmlIds.tab_radio(tab_id)
tab_content_id = InteractionHtmlIds.tab_content(tab_id)

print(f"Tab radio ID: {tab_radio_id}")
print(f"Tab content ID: {tab_content_id}")

# Generate master-detail IDs
item_id = "file-123"
group_id = "media-files"
master_item_id = InteractionHtmlIds.master_item(item_id)
master_group_id = InteractionHtmlIds.master_group(group_id)
detail_id = InteractionHtmlIds.detail_content(item_id)

print(f"Master item ID: {master_item_id}")
print(f"Master group ID: {master_group_id}")
print(f"Detail content ID: {detail_id}")

# Generate modal dialog IDs
modal_id = "settings-modal"
dialog_id = InteractionHtmlIds.modal_dialog(modal_id)
dialog_content_id = InteractionHtmlIds.modal_dialog_content(modal_id)

print(f"Modal dialog ID: {dialog_id}")
print(f"Modal dialog content ID: {dialog_content_id}")
print(f"Modal dialog selector: {InteractionHtmlIds.as_selector(dialog_id)}")

# Generate SSE connection IDs
connection_id = "resources"
sse_status_id = InteractionHtmlIds.sse_status(connection_id)
sse_element_id = InteractionHtmlIds.sse_element(connection_id)

print(f"SSE status ID: {sse_status_id}")
print(f"SSE element ID: {sse_element_id}")
print(f"SSE status selector: {InteractionHtmlIds.as_selector(sse_status_id)}")

# Generate pagination IDs
pagination_id = "library"
pagination_container_id = InteractionHtmlIds.pagination_container(pagination_id)
pagination_content_id = InteractionHtmlIds.pagination_content(pagination_id)
pagination_nav_id = InteractionHtmlIds.pagination_nav(pagination_id)

print(f"Pagination container ID: {pagination_container_id}")
print(f"Pagination content ID: {pagination_content_id}")
print(f"Pagination nav ID: {pagination_nav_id}")
print(f"Pagination content selector: {InteractionHtmlIds.as_selector(pagination_content_id)}")

Step content ID: step-select-plugin-content
Step indicator ID: step-select-plugin-indicator
Tab radio ID: tab-settings-radio
Tab content ID: tab-settings-content
Master item ID: master-item-file-123
Master group ID: master-group-media-files
Detail content ID: detail-file-123-content
Modal dialog ID: modal-settings-modal
Modal dialog content ID: modal-settings-modal-content
Modal dialog selector: #modal-settings-modal
SSE status ID: sse-status-resources
SSE element ID: sse-element-resources
SSE status selector: #sse-status-resources
Pagination container ID: pagination-library-container
Pagination content ID: pagination-library-content
Pagination nav ID: pagination-library-nav
Pagination content selector: #pagination-library-content