Banner Navigator plugin

Use the banner navigator plugin to navigate between banners, manage banner state, and respond to navigation events. The navigator instance is bound to the Vue instance as $navigator. To access the banner navigation methods, use the this.$navigator context in a Vue file of your banner project.

The banner navigator plugin exposes its methods using this context:

this.$navigator

Usage

You can use the banner navigator plugin to navigate between banners, retrieve information about the current banner, register callbacks for navigation events, and get templated components. Use the banner navigator plugin with the this.$navigator context in a Vue file: for example, a banner index.vue file or the App.vue file in your banner project.

Methods

The banner navigator plugin provides the following methods to help you navigate between banners, access banner data, and monitor navigation events:

goTo

The goTo method navigates to a specific banner by its ID.

this.$navigator.goTo(bannerId)

Parameters of goTo

The goTo method has the following parameters.

Parameter	Type	Default	Description
bannerId	String	NA	Required parameter. The ID of the banner to navigate to. For example, goTo('skyscraper').

goToNext

The goToNext method navigates to the next banner in the list.

this.$navigator.goToNext()

goToPrev

The goToPrev method navigates to the previous banner in the list.

this.$navigator.goToPrev()

getCurrentBanner

The getCurrentBanner method returns information about the currently active banner.

this.$navigator.getCurrentBanner()

Return value

The method returns a BannerItem object with the following structure:

Field	Type	Description
id	String	The unique identifier of the banner.
name	String	The user-friendly name of the banner.
size	Object	The banner size information.
size.width	Number	The banner width in pixels.
size.height	Number	The banner height in pixels.
size.dpr	Number	The device pixel ratio for the banner.

const currentBanner = this.$navigator.getCurrentBanner();
console.log(`Current banner: ${currentBanner.name}`);
console.log(`Size: ${currentBanner.size.width}x${currentBanner.size.height}`);

getTemplatedComponents

The getTemplatedComponents method returns an array of banner components that use templates.

this.$navigator.getTemplatedComponents()

Return value

The method returns an array of BannerComponent objects. Each component object contains information about templated components used in the banners.

Example usage

const components = this.$navigator.getTemplatedComponents();
console.log('Templated components:', components);

Navigation hooks

The banner navigator plugin provides hooks that allow you to register callbacks for navigation lifecycle events.

onenter

The onenter hook registers a callback function that is invoked when a banner is entered.

this.$navigator.onenter(handler, options)

Parameters of onenter

Parameter	Type	Default	Description
handler	Function	NA	Required parameter. A callback function to be executed when a banner is entered.
options	Object	{}	Optional parameter. Additional options for the hook.

Example usage

this.$navigator.onenter(() => {
  console.log('Banner entered:', this.$navigator.getCurrentBanner().id);
});

onleave

The onleave hook registers a callback function that is invoked when a banner is left.

this.$navigator.onleave(handler, options)

Parameters of onleave

Parameter	Type	Default	Description
handler	Function	NA	Required parameter. A callback function to be executed when a banner is left.
options	Object	{}	Optional parameter. Additional options for the hook.

Example usage

this.$navigator.onleave(() => {
  console.log('Banner left:', this.$navigator.getCurrentBanner().id);
});

onbeforeenter

The onbeforeenter hook registers a callback function that is invoked before a banner is entered.

this.$navigator.onbeforeenter(handler, options)

Parameters of onbeforeenter

Parameter	Type	Default	Description
handler	Function	NA	Required parameter. A callback function to be executed before a banner is entered.
options	Object	{}	Optional parameter. Additional options for the hook.

Example usage

this.$navigator.onbeforeenter(() => {
  console.log('About to enter banner:', this.$navigator.getCurrentBanner().id);
});

onbeforeleave

The onbeforeleave hook registers a callback function that is invoked before a banner is left.

this.$navigator.onbeforeleave(handler, options)

Parameters of onbeforeleave

Parameter	Type	Default	Description
handler	Function	NA	Required parameter. A callback function to be executed before a banner is left.
options	Object	{}	Optional parameter. Additional options for the hook.

Example usage

this.$navigator.onbeforeleave(() => {
  console.log('About to leave banner:', this.$navigator.getCurrentBanner().id);
});

Complete example

Here's a complete example showing how to use the banner navigator plugin:

export default {
  mounted() {
    // Register navigation hooks
    this.$navigator.onbeforeenter(() => {
      console.log('Before entering banner');
    });

    this.$navigator.onenter(() => {
      const current = this.$navigator.getCurrentBanner();
      console.log(`Entered banner: ${current.name}`);
      console.log(`Size: ${current.size.width}x${current.size.height}`);
    });

    this.$navigator.onbeforeleave(() => {
      console.log('Before leaving banner');
    });

    this.$navigator.onleave(() => {
      console.log('Left banner');
    });
  },

  methods: {
    navigateNext() {
      this.$navigator.goToNext();
    },

    navigatePrev() {
      this.$navigator.goToPrev();
    },

    navigateTo(bannerId) {
      this.$navigator.goTo(bannerId);
    }
  }
}