@@ -214,12 +225,65 @@
modal.remove();
}
- async function presentCardModal() {
- const presentingEl = document.querySelectorAll('.ion-page')[1];
- const modal = createModal('card', {
- presentingElement: presentingEl,
+ async function presentHalfSheetModal(options) {
+ let items = '';
+
+ for (var i = 0; i < 3; i++) {
+ items += `
Item ${i}`;
+ }
+
+ // create component to open
+ const element = document.createElement('div');
+ element.innerHTML = `
+
+
+ Super Modal
+
+ Dismiss Modal
+
+
+
+
+
+ ${items}
+
+
+
+
+ Action
+
+
+ `;
+
+ let extraOptions = {
+ initialBreakpoint: 0.25,
+ breakpoints: [0, 0.25, 0.5, 0.75, 1],
+ };
+
+ if (options) {
+ extraOptions = {
+ ...extraOptions,
+ ...options,
+ };
+ }
+
+ // present the modal
+ const modalElement = Object.assign(document.createElement('ion-modal'), {
+ component: element,
+ ...extraOptions,
});
- await modal.present();
+
+ // listen for close event
+ const button = element.querySelector('ion-button');
+ button.addEventListener('click', () => {
+ modalElement.dismiss();
+ });
+ document.body.appendChild(modalElement);
+
+ await modalElement.present();
+
+ await modalElement.onDidDismiss();
+ modalElement.remove();
}