108 lines
2.8 KiB
JavaScript
108 lines
2.8 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
|
|
import { css } from '@lion/core';
|
|
import { overlays, ModalDialogController } from '../index.js';
|
|
|
|
const modalDialogDemoStyle = css`
|
|
.demo-overlay {
|
|
background-color: white;
|
|
width: 200px;
|
|
border: 1px solid lightgrey;
|
|
}
|
|
`;
|
|
|
|
storiesOf('Global Overlay System|Modal Dialog', module)
|
|
.add('Default', () => {
|
|
const nestedDialogCtrl = overlays.add(
|
|
new ModalDialogController({
|
|
contentTemplate: () => html`
|
|
<div class="demo-overlay">
|
|
<p>Nested modal dialog</p>
|
|
<button @click="${() => nestedDialogCtrl.hide()}">Close</button>
|
|
</div>
|
|
`,
|
|
}),
|
|
);
|
|
|
|
const dialogCtrl = overlays.add(
|
|
new ModalDialogController({
|
|
contentTemplate: () => html`
|
|
<div class="demo-overlay">
|
|
<p>Modal dialog</p>
|
|
<button @click="${() => dialogCtrl.hide()}">Close</button>
|
|
<button
|
|
@click="${event => nestedDialogCtrl.show(event.target)}"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
>
|
|
Open nested dialog
|
|
</button>
|
|
</div>
|
|
`,
|
|
}),
|
|
);
|
|
|
|
return html`
|
|
<style>
|
|
${modalDialogDemoStyle}
|
|
</style>
|
|
<a href="#">Anchor 1</a>
|
|
<button
|
|
@click="${event => dialogCtrl.show(event.target)}"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
>
|
|
Open dialog
|
|
</button>
|
|
<a href="#">Anchor 2</a>
|
|
${Array(50).fill(
|
|
html`
|
|
<p>Lorem ipsum</p>
|
|
`,
|
|
)}
|
|
`;
|
|
})
|
|
.add('Option "isBlocking"', () => {
|
|
const blockingDialogCtrl = overlays.add(
|
|
new ModalDialogController({
|
|
isBlocking: true,
|
|
contentTemplate: () => html`
|
|
<div class="demo-overlay demo-overlay--2">
|
|
<p>Hides other dialogs</p>
|
|
<button @click="${() => blockingDialogCtrl.hide()}">Close</button>
|
|
</div>
|
|
`,
|
|
}),
|
|
);
|
|
|
|
const normalDialogCtrl = overlays.add(
|
|
new ModalDialogController({
|
|
contentTemplate: () => html`
|
|
<div class="demo-overlay">
|
|
<p>Normal dialog</p>
|
|
<button
|
|
@click="${event => blockingDialogCtrl.show(event.target)}"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
>
|
|
Open blocking dialog
|
|
</button>
|
|
<button @click="${() => normalDialogCtrl.hide()}">Close</button>
|
|
</div>
|
|
`,
|
|
}),
|
|
);
|
|
|
|
return html`
|
|
<style>
|
|
${modalDialogDemoStyle}
|
|
</style>
|
|
<button
|
|
@click="${event => normalDialogCtrl.show(event.target)}"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
>
|
|
Open dialog
|
|
</button>
|
|
`;
|
|
});
|