MemberCardProfile

MemberCardProfile Stimulus Controller

Manages multi-card member profile displays with dynamic layout and content organization. Automatically loads member data via AJAX and creates additional cards when content overflow occurs, ensuring optimal readability and presentation.

Features:

  • Dynamic card creation with overflow management
  • AJAX-based member data loading
  • Plugin content organization and display
  • Membership status tracking and expiration handling
  • Background check status display
  • Responsive card layout with space calculation
  • Multi-section content organization

Values:

  • url: String - API endpoint for member data

Targets:

  • cardSet: Container for all profile cards
  • firstCard: Initial card element
  • name: Member name display element
  • scaName: SCA name display element
  • branchName: Branch name display element
  • membershipInfo: Membership information display
  • backgroundCheck: Background check status display
  • lastUpdate: Last update timestamp display
  • loading: Loading indicator element
  • memberDetails: Member details container

Usage:

Loading...

Constructor

new MemberCardProfile()

Source

Methods

appendToCard(element, minSpace)

Append element to card with overflow handling Creates new card if content would exceed available space

Parameters:
NameTypeDescription
elementHTMLElement

Element to append to card

minSpaceNumber | null

Minimum space percentage to maintain

Source

connect()

Connect controller to DOM Initiates card loading process

Source

initialize()

Initialize controller state Sets up card management variables

Source

loadCard()

Load member card data from API Fetches member information and organizes plugin content into cards

Source

optionsForFetch() → {Object}

Configure fetch options for AJAX requests Sets up headers for JSON API communication

Source
Returns:

Fetch options object

Type: 
Object

startCard()

Create and initialize new card Sets up new card structure and updates current card reference

Source

usedSpaceInCard() → {Number}

Calculate used space in current card Measures total height of all child elements

Source
Returns:

Total height of card content in pixels

Type: 
Number