42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
import { html, LitElement } from '@lion/core';
|
|
import { OverlayMixin } from '../src/OverlayMixin.js';
|
|
|
|
class DemoOverlaySystem extends OverlayMixin(LitElement) {
|
|
// eslint-disable-next-line class-methods-use-this
|
|
_defineOverlayConfig() {
|
|
return {
|
|
placementMode: 'global',
|
|
};
|
|
}
|
|
|
|
_setupOpenCloseListeners() {
|
|
super._setupOpenCloseListeners();
|
|
this.__toggle = () => {
|
|
this.opened = !this.opened;
|
|
};
|
|
|
|
if (this._overlayInvokerNode) {
|
|
this._overlayInvokerNode.addEventListener('click', this.__toggle);
|
|
}
|
|
}
|
|
|
|
_teardownOpenCloseListeners() {
|
|
super._teardownOpenCloseListeners();
|
|
|
|
if (this._overlayInvokerNode) {
|
|
this._overlayInvokerNode.removeEventListener('click', this.__toggle);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<slot name="invoker"></slot>
|
|
<slot name="_overlay-shadow-outlet"></slot>
|
|
<div id="overlay-content-node-wrapper">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<div>popup is ${this.opened ? 'opened' : 'closed'}</div>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('demo-overlay-system', DemoOverlaySystem);
|