StoryCard

StoryCard

new StoryCard(element, options)

Source:
Parameters:
Name Type Description
element HTMLElement

DOM element for component instantiation and scope
options Object
Properties
Name Type Description
viewportSelector String

Selector for carousel viewport
containerSelector String

Selector for carousel container
slideSelector String

Selector for carousel slides
prevSelector String

Selector for prev button
nextSelector String

Selector for next button
playSelector String

Selector for play button
pauseSelector String

Selector for pause button
currentSelector String

Selector for current slide number
totalSelector String

Selector for total slides
gridItemSelector String

Selector for grid items
gridButtonSelector String

Selector for grid buttons
gridDetailsSelector String

Selector for grid details
gridPrevSelector String

Selector for grid previous button
gridNextSelector String

Selector for grid next button
gridPlaySelector String

Selector for grid play button
gridPauseSelector String

Selector for grid pause button
desktopBreakpointCssVar String

CSS variable for the desktop breakpoint
minHeightDesktopCssVar String

CSS variable for the minimum desktop height
gridAutoplayDelay Number

Autoplay delay for grid items
pagerClass String

Selector for the pager container
dotsClass String

Selector for the dots container
dotClass String

Selector for a dot button
activeDotClass String

Class applied to the active dot
attachClickListener Boolean

Whether to attach click listeners
attachResizeListener Boolean

Whether to attach resize listeners

Classes

StoryCard

Members

goToNextGridItem

Description:

  • Move the grid accordion to the next item.

Source:

Move the grid accordion to the next item.

goToPreviousGridItem

Description:

  • Move the grid accordion to the previous item.

Source:

Move the grid accordion to the previous item.

handleGridPauseClick

Description:

  • Handle the click on the pause button.

Source:

Handle the click on the pause button.

handleGridPlayClick

Description:

  • Handle the click on the pause button.

Source:

Handle the click on the pause button.

handleProgressEnd

Description:

  • Move the grid accordion to the next item when the css animation ends.

Source:

Move the grid accordion to the next item when the css animation ends.

(static) supportedEvents :Array.<string>

Description:

  • An array of supported events for this component.

Source:

An array of supported events for this component.

Type:
  • Array.<string>

Methods

applyGridDetailsHeight()

Description:

  • Set every grid details panel to the height of the tallest one.

Source:

attachListeners()

Description:

  • Attach event listeners.

Source:

destroy()

Description:

  • Destroy the component.

Source:

init()

Description:

  • Initialise the component.

Source:

initCarousel()

Description:

  • Initialize Embla carousel.

Source:

initGridAccordion()

Description:

  • Initialize desktop grid accordion.

Source:

on(eventName, callback) → {void}

Description:

  • Register a callback function for a specific event.

Source:
Example
// Registering a callback for the 'onSelection' event
storyCard.on('onSelection', (event) => {
  console.log('Selection event occurred!', event);
});
Parameters:
Name Type Description
eventName string

The name of the event to listen for.
callback function

The callback function to be invoked when the event occurs.
Returns:
Type
void

onWindowResize()

Description:

  • Handle window resize.

Source:

pauseGridAutoplay()

Description:

  • Pause the grid auto-play.

Source:

playGridAutoplay()

Description:

  • Start the grid auto-play.

Source:

resetGridDetailsHeight()

Description:

  • Reset every grid details panel height and properties previously set.

Source:

scheduleGridDetailsHeight()

Description:

  • Schedule grid details height calculation after layout settles.

Source:

setGridDetailsHeight()

Description:

  • Based on the checks decides whether to apply or reset the grid details height.

Source:

setGridItem(index)

Description:

  • Set the expanded grid item.

Source:
Parameters:
Name Type Description
index Number

Index of the item to toggle
Fires:

toggleGridAutoplay(shouldPlay)

Description:

  • Toggle the grid auto-play state.

Source:
Parameters:
Name Type Description
shouldPlay Boolean

Whether auto-play should start

trigger(eventName, eventData)

Description:

  • Trigger a component event.

Source:
Parameters:
Name Type Description
eventName string

The name of the event to trigger.
eventData any

Data associated with the event.

(static) autoInit(root) → {StoryCard}

Source:
Parameters:
Name Type Description
root HTMLElement

DOM element for component instantiation and scope
Returns:

An instance of StoryCard.

Type
StoryCard

Events

onSelection

Source:
Properties:
Name Type Attributes Description
index number
button HTMLElement
details HTMLElement <nullable>
Type:
  • Object