Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Allowed multiple custom trigger buttons with start page

Browse source 
closes https://github.com/TryGhost/members.js/issues/45

- Allows multiple trigger buttons on the page with data attribute `data-members-trigger-button`
- Allows passing page value to custom trigger button to show the popup on specified page, like signup
- Removes event handlers on unmount
This commit is contained in:
Rish 2020-06-10 22:23:48 +05:30
parent 472af65f12
commit 9f6450b2fc
1 changed files with 33 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
ghost/portal/src/components/ParentContainer.js
View file

@ -21,21 +21,31 @@ export default class ParentContainer extends React.Component {
};
}
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps, prevState) {
if (prevState.showPopup !== this.state.showPopup) {
this.handleCustomTriggerClassUpdate();
}
}
componentWillUnmount() {
this.customTriggerButtons.forEach((customTriggerButton) => {
customTriggerButton.addEventListener('click', this.clickHandler);
});
}
handleCustomTriggerClassUpdate() {
const popupOpenClass = 'gh-members-popup-open';
const popupCloseClass = 'gh-members-popup-close';
if (this.customTriggerButton) {
this.customTriggerButtons.forEach((customButton) => {
const elAddClass = this.state.showPopup ? popupOpenClass : popupCloseClass;
const elRemoveClass = this.state.showPopup ? popupCloseClass : popupOpenClass;
this.customTriggerButton.classList.add(elAddClass);
this.customTriggerButton.classList.remove(elRemoveClass);
}
customButton.classList.add(elAddClass);
customButton.classList.remove(elRemoveClass);
});
}
getStripeUrlParam() {
@ -43,10 +53,6 @@ export default class ParentContainer extends React.Component {
return url.searchParams.get('stripe');
}
componentDidMount() {
this.fetchData();
}
getDefaultPage({member = this.state.member, stripeParam} = {}) {
// Loads default page and popup state for local UI testing
if (process.env.NODE_ENV === 'development') {
@ -96,18 +102,21 @@ export default class ParentContainer extends React.Component {
}
setupCustomTriggerButton() {
// Handler for custom buttons
this.clickHandler = (event) => {
const target = event.currentTarget;
const page = target && target.dataset.membersTriggerButton;
event.preventDefault();
this.onAction('openPopup', {page});
};
const customTriggerSelector = '[data-members-trigger-button]';
const popupCloseClass = 'gh-members-popup-close';
this.customTriggerButton = document.querySelector(customTriggerSelector);
if (this.customTriggerButton) {
const clickHandler = (event) => {
event.preventDefault();
this.onAction('togglePopup');
};
this.customTriggerButton.classList.add(popupCloseClass);
this.customTriggerButton.addEventListener('click', clickHandler);
}
this.customTriggerButtons = document.querySelectorAll(customTriggerSelector) || [];
this.customTriggerButtons.forEach((customTriggerButton) => {
customTriggerButton.classList.add(popupCloseClass);
customTriggerButton.addEventListener('click', this.clickHandler);
});
}
getActionData(action) {
@ -133,6 +142,11 @@ export default class ParentContainer extends React.Component {
this.setState({
showPopup: !this.state.showPopup
});
} else if (action === 'openPopup') {
this.setState({
showPopup: true,
page: data.page
});
} else if (action === 'back') {
if (this.state.lastPage) {
this.setState({
@ -226,7 +240,7 @@ export default class ParentContainer extends React.Component {
}
renderTriggerButton() {
if (!this.customTriggerButton) {
if (!this.customTriggerButtons || this.customTriggerButtons.length === 0) {
return (
<TriggerButton
isPopupOpen={this.state.showPopup}