@ewc-lib/ewc-popover

Screenshot

This popover opens below, above, left or right of a HTML element, depending on location and available space.

API

Attributes

• positioningHint - can be one of: bottom, top, left, right. Tries to place at given position first and only find another position if that fails (i.e. not enough space available).
  • can be modified at runtime. takes effect after opening.

Props

• visibility - false/true

Methods

• toggleVisibility()

Details

Mandatory Children

ewc-popover must have 2 children:

• an HTML element to open/close the popover (slot="toggle")
  • the position of the popover is relative to this element
• the content of the popover (slot="content")
  • this element is expected to have "display:inline" style

The children have to exist at init time (i.e. in static html) and can't be added at runtime. However, the children can still be manipulated at runtime.

Shadow DOM

• The HTML of the ewc-popover element itself is in a shadow DOM
  • The children are incorporated via shadow DOMs' slot mechanism
  • This means, the children are in the light DOM

Events

Click and keyboard events regarding opening/closing are attached to the element in the slot named "toggle". The element itself does not need to handle them.

I.e. in case an ewc-icon-button is used to open/close an ewc-popover, the ewc-icon-button's "action" event can be ignored.

Dimensions

There are 3 different fixed widths, depending on available width (media queries). This is identical to the ECL.

In contrast to ECL, the dimensions of the ewc-popover can also be set explicitly via CSS like this:

<ewc-popover id="myPopover">
<style>#myPopover::part(contentContainer) {min-width: 808px; max-width: 808px;}</style>

Optional additional element for closing

An element within the content can be specified to close the popover. This is done by setting the attribute "data-ewc-popover-close" on it. Just existence is checked, value doesn't matter. Use case: a close button inside the popover.

Change log

• 1.0.3-alpha

  • a11y: add role="dialog"
  • [test-important] this line is just a test for VisHealth

• 1.0.2-alpha

  • add "Change log" to readme.md

• 1.0.1-alpha

  • (addendum to prev. vers.) remove accidental console output

• 1.0.0-alpha

  • replace dependency to ewc.css w/ dependency to ewc-common
  • put HTML into shadow DOM
  • add usage examples (working sourcecode)

• 0.2.5-alpha

  • add keyboard functionality (a11y)