BrancheLinks

BranchLinks Stimulus Controller

Manages dynamic branch link collection with URL validation, link type categorization, and form integration. Provides a user-friendly interface for adding, removing, and organizing branch-related links with Bootstrap UI components.

Features:

  • Dynamic link addition with URL sanitization
  • Link type selection with Bootstrap Icons
  • Duplicate prevention and validation
  • Real-time form value synchronization
  • Bootstrap-styled UI components

Targets:

  • new: Input field for new link URLs
  • formValue: Hidden field containing JSON array of all links
  • displayList: Container for displaying added links
  • linkType: Element for link type selection with icon display

Usage:

Constructor

Source

Methods

add(event)

Add a new link to the collection Validates input, sanitizes URL, prevents duplicates, and updates display

Parameters:
NameTypeDescription
eventEvent

Click event from add button

Source

connect()

Connect controller to DOM Loads existing links from form value and recreates the display

Source

createListItem(item)

Create a visual list item for a link Generates Bootstrap input group with icon, URL display, and remove button

Parameters:
NameTypeDescription
itemObject

Link object with url and type properties

Source

initialize()

Initialize controller state Sets up empty items array for link management

Source

remove(event)

Remove a link from the collection Filters out the specified item and updates the display

Parameters:
NameTypeDescription
eventEvent

Click event from remove button

Source

setLinkType(event)

Set the link type for new link additions Updates the link type icon and stores the selected type

Parameters:
NameTypeDescription
eventEvent

Click event from link type selector

Source