Panel

TIP

The Panel-Container can be used for both Modals (horizontally and vertically centered window) and Dropdowns (relatively positioned to the trigger element) with or without a ** backdrop** (dark transparent layer) or a close button.

Configuration Options

Add these classes to .c-panel:

Option	Extra Class
Panel is a Dropdown	.-is-dropdown
Panel is a Modal	.-is-modal
Panel is small	.-is-small
Panel is medium	.-is-medium
Panel is large	.-is-large
Panel is extra large	.-is-extra-large
Panel is 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
Add Class "js-abort" to the close-btn	.-close-js-abort

Optional Data-Attributes

TIP

Add these attributes to any trigger element:

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

Settings and API

Default 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",
        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: "-close-backdrop",
        panelIsDropdown: "-is-dropdown",
        modalIsOpen: "-modal-open",
        themePlausi: "theme-plausi"
    },
    text: {
        panelClose: "Fenster schließen"
    },
    event: {
        open: "collapse:open",
        close: "collapse:close",
        toggle: "collapse:toggle"
    }
};

TIP

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

Examples

See Modals or Dropdowns.