Skip to main content

rtk-dialog-manager

A component which handles all dialog elements in a component such as:

  • rtk-settings
  • rtk-leave-meeting
  • rtk-permissions-message
  • rtk-image-viewer
  • rtk-breakout-rooms-manager

This components depends on the values from states object.

<rtk-button onclick="showSettings()">Show Settings</rtk-button>
<rtk-button onclick="showLeaveConfirmation()">Show Settings</rtk-button>

<rtk-dialog-manager id="rtk-el"></rtk-dialog-manager>

<script>
  const dialog = document.getElementById('rtk-el');
  dialog.meeting = meeting;
  let states = {};

  function updateStates() {
    dialog.states = states;
  }

  function stateUpdate(s) {
    states = { ...states, ...s };
    updateStates();
  }

  function showSettings() {
    stateUpdate({ activeSettings: true });
  }

  function showLeaveConfirmation() {
    stateUpdate({ activeLeaveConfirmation: true });
  }

  dialog.addEventListener('rtkStateUpdate', (e) => {
    stateUpdate(e.detail);
  });

  updateStates();
</script>

Props​

config

UI Config

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()