npm package: @studyportals/content-switcher
Description: The content switcher is responsible for displaying multiple large modules inside a switchable container. It will generate a menu based on the content so you can easily switch between the content.
Author: Samurai Pizza Cats
Latest version: 1.1.6

# Content-Switcher
The content switcher is responsible for displaying multiple large modules inside a switchable container. It will generate a menu based on the content so you can easily switch between the content.

## How to use Content-Switcher
In order for content switcher to work you need to have a wrapper element which contains your content. Inside this container there should be a container element with the classname: "SwitchableContent". Inside the "SwitchableContent" element you will place you individual pieces of content with the classname: "SwitchableGroup".

On the wrapperElement you pass a data-id attribute, this id will be broadcasted allong the content change event.

```html
<div class="WrapperElement" data-id="id_of_content_switcher">
  <div class="SwitchableContent">
    <div class="SwitchableGroup">
      content 1
    </div>
    <div class="SwitchableGroup">
      content 2
    </div>
    <div class="SwitchableGroup">
      content 3
    </div>
  </div>
</div>

```

### Generate content switcher
Before generating the content switcher you need to add some data attributes to the module elements

| data attribute  |   usages                                                                      |
|-----------------|-------------------------------------------------------------------------------|
| data-id         | used as a identifier during broadcast and targeting of the module             |
| data-label      | max 2 words (no numbers). Used as text inside the buttons to switch the content            |


```html
<div class="WrapperElement" data-id="id_of_content_switcher">
  <div class="SwitchableContent">
    <div class="SwitchableGroup" data-id="content_1" data-label="content one">
      content 1
    </div>
    <div class="SwitchableGroup"  data-id="content_2" data-label="content two">
      content 2
    </div>
    <div class="SwitchableGroup"  data-id="content_3" data-label="content three">
      content 3
    </div>
  </div>
</div>
```
To generate the content switcher you create an instance of the ContentSwitcher class with the refference to the wrapper element.
After this you call the init() function.

```javascript
const wrapperElement = document.querySelector('.WrapperElement');
const contentSwitcher = new ContentSwitcher(wrapperElement);
contentSwitcher.init();
```

This will generate the content switcher and hides all the modules apart from the first module. If you want to show a different module on init you can pass in a second argument in the constructor to show the corresponding module.

```javascript
const contentSwitcher = new ContentSwitcher(wrapperElement, 'content_2');
```


### Events

The content switcher will dispatch an event everytime the content is switched. the event will pass the id of the switched content & the id of the content switcher

```javascript
document.addEventListener('contentChanged', (event) => {

  const activatedGroupId = event.detail.to;
  const deactivatedGroupId = event.detail.from;
  const id = event.detail.id;
});
```

You can change the active module by calling setActiveModule()
```javascript

const contentSwitcher = new ContentSwitcher(wrapperElement);
contentSwitcher.setActiveModule('content_2');
```

### Flowchart

For more detailed information you can refer to the [flowchart](flow-chart/flow-chart.png)