Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Added handling for custom trigger button in theme

Browse source 
refs https://github.com/TryGhost/membersjs/issues/8

This allows theme developers to use a custom trigger button in their theme instead of default UI created by script by marking the custom button with data attribute - `data-members-trigger-button` .

In case of a custom trigger button, CRA doesn't render the default trigger button and attaches click event handling to the custom button to control the popup UI. Script also adds new custom class `popup-open` and `popup-close` based on popup state to allow theme developers to handle button UI based on popup state.
This commit is contained in:
Rish 2020-04-09 13:54:49 +05:30
parent 4310a18150
commit 0615d54505
1 changed files with 37 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,12 +10,34 @@ export default class ParentContainer extends React.Component {
constructor(props) {
super(props);
console.log("Initialized script with data", props.data);
// Setup Members API with blog/admin URLs
const {blogUrl, adminUrl} = props.data.site;
this.MembersAPI = setupMembersApi({blogUrl, adminUrl});
// Setup custom trigger button handling
this.customTriggerButton = document.querySelector('[data-members-trigger-button]')
this.setupCustomTriggerButton(this.customTriggerButton);
this.state = {
showPopup: false
};
console.log("Initialized script with data", props.data);
const {blogUrl, adminUrl} = props.data.site;
this.MembersAPI = setupMembersApi({blogUrl, adminUrl});
}
setupCustomTriggerButton(customTriggerButton) {
if (customTriggerButton) {
const clickHandler = (event) => {
event.preventDefault();
const elAddClass = this.state.showPopup ? 'popup-close' : 'popup-open';
const elRemoveClass = this.state.showPopup ? 'popup-open' : 'popup-close';
customTriggerButton.classList.add(elAddClass);
customTriggerButton.classList.remove(elRemoveClass);
this.onTriggerToggle();
}
customTriggerButton.classList.add('popup-close');
customTriggerButton.addEventListener('click', clickHandler);
}
}
onSignout() {
@ -48,14 +70,18 @@ export default class ParentContainer extends React.Component {
}
renderTriggerComponent() {
return (
<TriggerComponent
name={this.props.name}
onToggle= {(e) => this.onTriggerToggle()}
isPopupOpen={this.state.showPopup}
data={this.props.data}
/>
)
if (!this.customTriggerButton) {
return (
<TriggerComponent
name={this.props.name}
onToggle= {(e) => this.onTriggerToggle()}
isPopupOpen={this.state.showPopup}
data={this.props.data}
/>
)
}
return null;
}
render() {