diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx index 4aa38985ec..ba79908865 100644 --- a/core/src/components/col/col.tsx +++ b/core/src/components/col/col.tsx @@ -2,7 +2,8 @@ import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/c import { matchBreakpoint } from '../../utils/media'; -const SUPPORTS_VARS = !!(window.CSS && window.CSS.supports && window.CSS.supports('--a: 0')); +const win = window as any; +const SUPPORTS_VARS = !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0')); const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl']; @Component({ diff --git a/core/src/components/menu-controller/menu-controller.scss b/core/src/components/menu-controller/menu-controller.scss index 2b86549d83..81459596b0 100644 --- a/core/src/components/menu-controller/menu-controller.scss +++ b/core/src/components/menu-controller/menu-controller.scss @@ -1,6 +1,19 @@ @import "../menu/menu.ios.vars"; @import "../menu/menu.md.vars"; +.menu-content { + @include transform(translate3d(0, 0, 0)); +} + +.menu-content-open { + cursor: pointer; + touch-action: manipulation; + + // the containing element itself should be clickable but + // everything inside of it should not clickable when menu is open + pointer-events: none; +} + .ios .menu-content-reveal { box-shadow: $menu-ios-box-shadow-reveal; } diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index c57be8ed70..4c2e192419 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -66,19 +66,6 @@ ion-backdrop { z-index: -1; } -.menu-content { - @include transform(translate3d(0, 0, 0)); -} - -.menu-content-open { - cursor: pointer; - touch-action: manipulation; - - // the containing element itself should be clickable but - // everything inside of it should not clickable when menu is open - pointer-events: none; -} - @media (max-width: 340px) { .menu-inner { diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 5410ba44a0..60a406fbba 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -203,7 +203,7 @@ export class Menu implements ComponentInterface, MenuI { this.updateState(); } - @Listen('body:click', { enabled: false, capture: true }) + @Listen('click', { enabled: false, capture: true }) onBackdropClick(ev: any) { if (this.lastOnEnd < ev.timeStamp - 100) { const shouldClose = (ev.composedPath) @@ -412,7 +412,7 @@ export class Menu implements ComponentInterface, MenuI { } // add/remove backdrop click listeners - this.enableListener(this, 'body:click', isOpen); + this.enableListener(this, 'click', isOpen); if (isOpen) { // add css class diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html index 151e2b7011..3fc9629cbf 100644 --- a/core/src/components/menu/test/basic/index.html +++ b/core/src/components/menu/test/basic/index.html @@ -21,6 +21,7 @@ + @@ -32,7 +33,7 @@ Open end Menu - Close Menu + Open Modal Close Menu Close Menu Close Menu @@ -133,6 +134,40 @@ async function setEnabled() { (await menu.get('start')).swipeGesture = false; } + + async function createModal() { + // initialize controller + const modalController = document.querySelector('ion-modal-controller'); + await modalController.componentOnReady(); + + // create component to open + const element = document.createElement('div'); + element.innerHTML = ` + + + Super Modal + + + +

Content of doom

+
Here's some more content
+ Dismiss Modal + + `; + + // listen for close event + const button = element.querySelector('ion-button'); + button.addEventListener('click', () => { + modalController.dismiss(); + }); + + // present the modal + const modalElement = await modalController.create({ + component: element + }); + await modalElement.present(); + return modalElement; + }