Banner

Banner

Source:
Parameters:
Name Type Description
element HTMLElement

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

Selector for the banner content
bannerFooter String

Selector for the banner footer
bannerVPadding String

Optional additional padding
bannerPicture String

Selector for the banner picture
bannerVideo String

Selector for the banner video
bannerPlay String

Selector for the banner play button
bannerPause String

Selector for the banner pause button
maxIterations String

Used to limit the number of iterations when looking for css values
breakpoint String

Breakpoint from which the script starts operating
attachResizeListener Boolean

Whether to attach a listener on resize

Classes

Banner

Methods

checkViewport()

Description:

  • Check the current viewport width and act accordingly.

Source:

destroy()

Description:

  • Destroy component.

Source:

handleCtaClick(Event)

Description:

  • Triggers a custom event when clicking on the cta.

Source:
Parameters:
Name Type Description
Event e
Fires:
  • Banner#event:onCtaClick

handlePauseClick(Event)

Description:

  • Triggers a custom event when clicking on the pause button.

Source:
Parameters:
Name Type Description
Event e
Fires:

handlePlayClick(Event)

Description:

  • Triggers a custom event when clicking on the play button.

Source:
Parameters:
Name Type Description
Event e
Fires:
  • Banner#event:onPlayClick

handleResize()

Description:

  • Trigger events on resize Uses a debounce, for performance

Source:

init()

Description:

  • Initialise component.

Source:

on(eventName, callback) → {void}

Description:

  • Register a callback function for a specific event.

Source:
Example
// Registering a callback for the 'onCtaClick' event
banner.on('onCtaClick', (event) => {
  console.log('The cta was clicked', 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

resetBannerHeight()

Description:

  • Remove any override and get back the css

Source:

setBannerHeight()

Description:

  • Prepare to set the banner height

Source:

setHeight(aspect)

Description:

  • Sets or resets the banner height

Source:
Parameters:
Name Type Description
aspect string

ratio

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.

waitForAspectRatioToBeDefined()

Description:

  • Retrieve the value of the aspect ratio in the styles.

Source:

(static) autoInit(root) → {Banner}

Source:
Parameters:
Name Type Description
root HTMLElement

DOM element for component instantiation and scope
Returns:

An instance of Banner.

Type
Banner

Events

onPauseClick

Description:

  • An array of supported events for this component.

Source:
Type:
  • Array.<string>