import { Meta } from '@storybook/blocks';

<Meta title="Docs/Advanced Usage" />

# Advanced Usage

## Initially active hotspot

It's possible to make a hotspot instantly appear as selected by adding the `active` property to the hotspot object.
This is useful when you want to come back to the same state after clicking one of the links attached to a hotspot.

```json
{
  "type": "hotspot",
  "active": true
}
```

There are two events that you can listen to in order to handle the state: `EventType.HOTSPOT_FOCUS` and `EventType.HOTSPOT_BLUR`:

```javascript
let activeHotspotIndex = -1;

const hotspotEventHandler = (event) => {
  if (event.type === EventType.HOTSPOT_FOCUS) {
    activeHotspotIndex = event.detail.index;
  } else if (event.type === EventType.HOTSPOT_BLUR) {
    activeHotspotIndex = -1;
  }
};

document.removeEventListener(EventType.HOTSPOT_FOCUS, hotspotEventHandler);
document.removeEventListener(EventType.HOTSPOT_BLUR, hotspotEventHandler);
```

When we have an active hotspot index we can restoring it by mutating the JSON data and setting the `active` property to `true` before passing it to the JSONArticle component.

```typescript
let activeHotspotIndex = 2;

const data = {
  type: 'article',
  children: [
    {
      type: 'segment',
      children: [
        {
          type: 'title',
          children: 'Title',
        },
        {
          type: 'hotspot',
        },
        {
          type: 'hotspot',
        },
        {
          type: 'hotspot',
        },
      ],
    },
  ],
};

let updatedData = setActiveHospot(data, activeHotspotIndex);

function setActiveHospot(data: JSONValue, activeHotspotIndex: number): any {
  const updateAttribute = (items: any) => {
    if (Array.isArray(items)) {
      items.forEach((item: any, index: number) => {
        if (item.type === 'hotspot') {
          items[index] = {
            ...(index === activeHotspotIndex
              ? { ...item, active: true }
              : item),
          };
        }
        if (item.children) {
          updateAttribute(item.children);
        }
      });
    } else if (typeof items === 'object') {
      for (const key in items) {
        updateAttribute(items[key]);
      }
    }
  };

  const newData = JSON.parse(JSON.stringify(data)); // Create a deep copy of the data
  updateAttribute(newData);
  return newData;
}
```

## Supported component types

* `article`
* `slot`
* `description`
* `segment`
* `subSegment`
* `title`
* `fragment`
* `paragraph`
* `text`
* `menuBox`
* `menuPath`
* `menuRoot`
* `menuEntry`
* `unorderedList`
* `orderedList`
* `listIntro`
* `preCondition`
* `listItem`
* `video`
* `important`
* `note`
* `warning`
* `tip`
* `admonitionBlock`
* `preProcedure`
* `postProcedure`
* `procedure`
* `step`
* `action`
* `result`
* `symbol`
* `image`
* `imageParagraph`
* `media`
* `imageParagraph`
* `figure`
* `caption`
* `legendRoot`
* `legendEntry`
* `legendDescription`
* `disclaimer`
* `option`
* `footnote`
* `table`
* `tgroup`
* `colspec`
* `thead`
* `tfoot`
* `tbody`
* `row`
* `entry`
* `url`
* `email`
* `xref`
* `time`
* `legalDate`
* `definitionList`
* `definitionListItem`
* `definitionTerm`
* `definitionDescription`
* `definitionListHead`
* `definitionListHeadTerm`
* `definitionListHeadDescription`
* `legendPosition`
* `youtube`

```
```