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.

<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 |

<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.

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.

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

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()

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

Flowchart

For more detailed information you can refer to the flowchart