@ewc-lib/ewc-popover

v0.2.5-alpha

Published

24 days ago

![Screenshot](./screen1.png) ![Screenshot](./screen2.png)

Downloads

143

0High
0Medium
0Low

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.
- can be modified at runtime. takes effect after opening.

Props

visibility - false/true

Methods

toggleVisibility

Mandatory Children

ewc-popover must have 2 children:

The first is an HTML element to open/close the popover.
The second is the content of the popover.

Note: The children have to exist at init time (i.e. in static html) and can't be added at runtime. However the children of the 2nd (the content-child) can be manipulated at runtime.

Note about events

Click and keyboard events regarding opening/closing are attached to the first element. The element itself does not need to handle them.

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

Dimensions

The width/height can be set explicitly via CSS - see 2nd popover below as an example.

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.

Usage with WebPack

package.json

"dependencies": {
  "@ewc-lib/ewc-popover": "^0.1.0-alpha"
}

example index.html

<body>

  <div style="text-align: right; max-width: 65ch; margin:20px;">
    <ewc-popover>
      <span style="border: 1px solid; padding: 2px;">Click me, I have a popover!</span>
      <div>
        <p>I am the popover content!</p>
        <button data-ewc-popover-close>close me!</button>
      </div>
    </ewc-popover>
  </div>

  <style>#pop .ewc-popover__scrollable {  min-width: 108px; max-width: 108px;}</style>
  <ewc-popover id="pop" style="position: absolute; bottom: 3rem; right:5rem;">
    <span style="border: 1px solid; padding: 2px;">I have a popover too!</span>
    <div>
      <p>I am top of the pops</p>
      <p>or to the left</p>
      <p>In any case, I'm small</p>
    </div>
  </ewc-popover>
</body>

index.js

import "@ewc-lib/ewc-popover"