MemberCardProfile

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)

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

Source:
Parameters:
Name Type Description
element HTMLElement

Element to append to card

minSpace Number | null

Minimum space percentage to maintain

connect()

Description:
  • Connect controller to DOM Initiates card loading process

Source:

initialize()

Description:
  • Initialize controller state Sets up card management variables

Source:

loadCard()

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

Source:

optionsForFetch() → {Object}

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

Source:
Returns:

Fetch options object

Type
Object

startCard()

Description:
  • Create and initialize new card Sets up new card structure and updates current card reference

Source:

usedSpaceInCard() → {Number}

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

Source:
Returns:

Total height of card content in pixels

Type
Number