popover-windows

popover in multi window

Usage no npm install needed!

<script type="module">
  import popoverWindows from 'https://cdn.skypack.dev/popover-windows';
</script>

README

Popover

  • Using popover in multi window

API:

| Property | Type | Required | Description | Default | --- | --- | :-: | --- | -- | | identity | object | ✓ | Identity popover according window and name| empty | content | React element or underling html | ✓ | Content overlay popover| null | placement | string | | Position where popover was displayed. Includes: top, top-left, top-right, right, righ-top, right-bottom,... | bottom-right | affectWindow | string array | | List window (Every window has multi popover) was affected on page click or press keyboard events. If value = [] affect total window | Only window where popover defined | anchorEl | dom node | | Any element. Popover's position depend on this element| null | fixedPosition | object | | popover was fit on window. Includes 2 prop left and top. Ex: {left:'300px', top:'500px} | null | deltaPosition | object | | Diff position with anchor element position} | {left:0, top:'0'} | isArrow | boolean | | | false | style | object | | Allow override style popover root| null | className | string | | Allow append className to popover container| null | mountContainter | Dom Node | | Specific container render| Window global | windowContext | Object. {window: window, document: window.document} | | Specific context of window |

Example:

import Popover, {PopoverManager} from 'popover-windows';

- Where open popover, using method: PopoverManager.openPopover({windowId:'1',name:'your popover name', anchorEvent: event, onAfterOpen: () => console.log('do something after open popover)});
- Where close popover, using method: PopoverManager.closePopover({windowId:'1',name:'your popover name'});

onClick (event) {
    PopoverManager.openPopover({windowId:'1',name:'your popover name',anchorEvent: event});
}
<Popover
    identity={{windowId:'1',name:'your popover name'}}
    content={<YourComponent/>}
    placement={'bottom-left'} 
/>
  • Get popover:
const status = PopoverManager.isVisible({windowId:'1',name:'your popover name'});
  • Listent popover status:
PopoverManager.on('afterOpen', {windowId,popoverName}, () => {
    // Do something
});
PopoverManager.removeListener('afterOpen', {windowId,popoverName}, () => {
    // Do something
});

Supported Events : afterOpen, beforeClose