Panel

INFO

The Panel-Container can be used for both Modals and Dropdowns with or without a backdrop (dark transparent layer) or a close button.

• A Modal is a dialog box or popup window that is displayed on top of the current page. It is used to display information or to get input from the user. A Modal is always displayed on top of the current page, and the user needs to interact with it before they can go back to the page.

• A Dropdown is a list of items that appears when the user clicks on a button or text selection. It is used to display a list of items in a dropdown menu that the user can select from.

Configuration Options

Add these classes to .c-panel:

Option	Extra Class
Panel is a Dropdown	.-is-dropdown
Panel is a Modal	.-is-modal
Panel size is "small"	.-is-small
Panel size is "medium"	.-is-medium
Panel size is "large"	.-is-large
Panel size is "extra large"	.-is-extra-large
Panel has maximum width	.-is-fullwidth
Panel has a Backdrop-Layer	.-has-backdrop
Panel has a X-Close-Button:	.-has-close-btn
Panel closes on backdrop-click	.-close-backdrop
Panel has an arrow on the right top (example)	.-arrow-up-right
Adds a close-btn to the Panel	.-close-js-abort

Examples

See Modals or Dropdowns.

Optional Data-Attributes

TIP

Add these attributes to any trigger element:

• Close the currently opened Panel: [data-dismiss='modal']

Settings and API

Show Methods

Initialize Panel JS

Panel.init(settings: object)

Opens a specific panel and closes any open dropdown panels

Panel.open(panel: Node, trigger: Node);
Triggers event panel:open

Closes any open panel and updates trigger-element

Panel.close(panel: Node, trigger: Node);
Triggers event panel:closes

Registers events on trigger and toggles the panel

Panel.togglePanel(panel: Node, trigger: Node);
Triggers event panel:toggle

Show Settings

const settings = {
  selector: {
      panel:             '.c-panel',
      panelInner:        '.c-panel__inner',
      panelIsVisible:    '.c-panel.-is-visible',
      panelCloseTrigger: "[data-dismiss='modal']",
      panelBackdrop:     '.c-panel__backdrop',
      panelCloseBtn:     '.c-panel__inner__close',
      openDropdowns:     '.c-panel.-is-visible.-is-dropdown',
      selectList:        '.c-list__item',
      themePlausi:       '.theme-plausi',
  },
  class: {
      triggerIsActive:      '-is-active',
      panelIsVisible:       '-is-visible',
      panelCloseBtn:        'c-panel__inner__close',
      panelHasCloseBtn:     '-has-close-btn',
      closeBtnAbort:        '-close-js-abort',
      jsAbort:              'js-abort',
      panelHasBackdrop:     '-has-backdrop',
      panelBackdrop:        'c-panel__backdrop',
      panelCloseByBackdrop: true, // close panel on backdrop click by default true
      panelIsDropdown:      '-is-dropdown',
      modalIsOpen:          '-modal-open',
      themePlausi:          'theme-plausi',
  },
  text: {
      panelClose: 'Fenster schließen',
  },
  event: {
      open:   'panel:open',
      close:  'panel:close',
      toggle: 'panel:toggle',
  }
};

Listen to Custom Events

// Select the panel (.c-panel)
const elem = document.querySelector('#panel-1');

// Listen for the event
elem.addEventListener(
  "panel:open",
  (e) => {
    // e.target matches elem
  },
  false,
);