mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Handled closing popup with Esc key
refs https://github.com/TryGhost/members.js/issues/95 - Hitting Esc key closes the Portal popup as long is its not inside any `<input>` field for entering data
This commit is contained in:
parent
cd85e839ef
commit
2dee51ee80
2 changed files with 23 additions and 1 deletions
|
@ -254,6 +254,7 @@ const GlobalStyles = `
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-portal-popup-container {
|
.gh-portal-popup-container {
|
||||||
|
outline: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
|
@ -41,6 +41,27 @@ const StylesWrapper = ({member}) => {
|
||||||
class PopupContent extends React.Component {
|
class PopupContent extends React.Component {
|
||||||
static contextType = AppContext;
|
static contextType = AppContext;
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
// Handle Esc to close popup
|
||||||
|
if (this.node) {
|
||||||
|
this.node.focus();
|
||||||
|
this.keyUphandler = (event) => {
|
||||||
|
const eventTargetTag = (event.target && event.target.tagName);
|
||||||
|
if (event.key === 'Escape' && eventTargetTag !== 'INPUT') {
|
||||||
|
this.context.onAction('closePopup');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.node.removeEventListener('keyup', this.keyUphandler);
|
||||||
|
this.node.addEventListener('keyup', this.keyUphandler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.node) {
|
||||||
|
this.node.removeEventListener('keyup', this.keyUphandler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
renderActivePage() {
|
renderActivePage() {
|
||||||
const {page} = this.context;
|
const {page} = this.context;
|
||||||
getActivePage({page});
|
getActivePage({page});
|
||||||
|
@ -67,7 +88,7 @@ class PopupContent extends React.Component {
|
||||||
...Styles.page[page]
|
...Styles.page[page]
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle}>
|
<div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
|
||||||
{this.renderPopupClose()}
|
{this.renderPopupClose()}
|
||||||
{this.renderActivePage()}
|
{this.renderActivePage()}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Reference in a new issue