Banner

Banner

Source:
Parameters:
NameTypeDescription
elementHTMLElement

DOM element for component instantiation and scope

optionsObject
Properties
NameTypeDescription
bannerContainerString

Selector for the banner content

bannerVPaddingString

Optional additional padding

bannerPictureString

Selector for the banner picture

bannerVideoString

Selector for the banner video

bannerPlayString

Selector for the banner play button

bannerPauseString

Selector for the banner pause button

maxIterationsString

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

breakpointString

Breakpoint from which the script starts operating

attachResizeListenerBoolean

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:
NameTypeDescription
Evente
Fires:
  • Banner#event:onCtaClick

handlePauseClick(Event)

Description:

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

Source:
Parameters:
NameTypeDescription
Evente
Fires:

handlePlayClick(Event)

Description:

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

Source:
Parameters:
NameTypeDescription
Evente
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:
NameTypeDescription
eventNamestring

The name of the event to listen for.

callbackfunction

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:
NameTypeDescription
aspectstring

ratio

trigger(eventName, eventData)

Description:

  • Trigger a component event.

Source:
Parameters:
NameTypeDescription
eventNamestring

The name of the event to trigger.

eventDataany

Data associated with the event.

waitForAspectRatioToBeDefined()

Description:

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

Source:

(static) autoInit(root) → {Banner}

Source:
Parameters:
NameTypeDescription
rootHTMLElement

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>