Adapters

bk-state-adapter

Allows to inject window state into the payload of arbitrary events. Window state could be set, for instance, through a push-state method.

<bk-state-adapter></bk-state-adapter>

bk-state-adapter property configMap and the window state are merged based on their keys, generating label-payload pairs that are emitted as events. The label is extracted from configMap, while the payload from the window state.

Example

Given the following configuration of bk-state-adapter:

{
  ...
  "tag": "bk-state-adapter",
  "properties": {
    ...
    "configMap": {
      "key_1": "loading-data",
      "key_2": "add-new"
    }
  }
}

and assuming the page state to be:

{
  "key_1": {
    "loading": true
  },
  "key_2": {
    "foo": "bar"
  }
}

bk-state-adapter emits a loading-data event such as:

{
  "label": "loading-data",
  "payload": {
    "loading": true
  }
}

and an add-new event such as:

{
  "label": "add-new",
  "payload": {
    "foo": "bar"
  }
}

Properties & Attributes

property	attribute	type	default	description
configMap	-	{[name: string]: string}	{}	map to configure the adapter casting object properties to events labels
debounce	debounce	number	500	delay for initial event emission
initKey	init-key	string	"__BK_INIT"	key for events to emit once upon connection

Listens to

This component listens to no event.

Emits

event	description
configurable-label	generic event based on its configMap property

Bootstrap

None

bk-url-parameters

Allows to emit events upon connecting, based on the value of the URL.

<bk-url-parameters></bk-url-parameters>

bk-url-parameters attempts current URL matching against the given mask in property urlMask. If it fails, it will redirect according to the provided property redirectUrl. Otherwise it will attempt to emit the matched content as payload of an event using its property eventLabel as label of the event, which defaults to change-query.

Example

Assuming the component to be configured as:

{
  ...
  "tag": "bk-url-parameters",
  "properties": {
    "urlMask": "/order-details/:_id"
  }
}

and assuming the URL to be /order-details/test-id, then bk-url-parameters emits the following change-query event upon connection to the DOM:

{
  "label": "change-query",
  "payload": {
    "_id": "test-id"
  }
}

Use different masks for pathname and search

By default, the same mask is applied to both pathname and search fields of window.location. However, different ones can be specified:

{
  ...
  "tag": "bk-url-parameters",
  "properties": {
    "urlMask": {
      "pathname": "/order-details/:_id",
      "search": "\\?pageNumber=:pNumber"
    }
  }
}

Assuming the URL to be /order-details/first-id?pageNumber=25, then bk-url-parameters emits the following event:

{
  "label": "change-query",
  "payload": {
    "_id": "first-id",
    "pNumber": "25"
  }
}

Ignoring wildcards

Wildcards ((.*)) can be used in urlMask; these match any string and is included in the payload of the emitted event with numeric keys.

For instance, the following is a valid configurations:

{
  ...
  "tag": "bk-url-parameters",
  "properties": {
    "urlMask": "/order-details/(.*)/:_id"
  }
}

Assuming the URL to be /order-details/first-id/second-id, then bk-url-parameters emits the following change-query event:

{
  "label": "change-query",
  "payload": {
    "0": "first-id",
    "_id": "second-id"
  }
}

If property excludeWildcards is true, matches coming from wildcards are excluded from the payload of the event. The same example with the following configuration:

{
  ...
  "tag": "bk-url-parameters",
  "properties": {
    "urlMask": "/order-details/(.*)/:_id",
    "excludeWildcards": true
  }
}

yields the following event:

{
  "label": "change-query",
  "payload": {
    "_id": "second-id"
  }
}

Properties & Attributes

property	attribute	type	default	description
waitTime	wait-time	number	500	wait time before initialization event, in milliseconds
urlMask	url-mask	UrlMask	-	url mask to apply to the current path to extract dynamic parameters
eventLabel	event-label	string	'change-query'	label of the event that will be dispatched as result
redirectUrl	redirect-url	string	-	optional parameter that contains the url to redirect when urlMask does not completely match
excludeWildcards	exclude-wildcards	boolean	false	whether or not matches from wildcards ((.*)) should be excluded from event payload

Listens to

This component listens to no event.

Emits

event	description
configurable-label	generic event based on its properties

Bootstrap

None