TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 14:43:08 +03:00
Code Issues Projects Releases Wiki Activity

Renamed custom trigger classname to portal

Browse Source 
no issue

Custom class is appended to trigger buttons based on popup state to allow UI changes based on different popup state. The class name is updated from using members terminology to new Portal terminology now.
This commit is contained in:
Rish 2020-11-25 12:18:06 +05:30
parent e36b9360e7
commit bf8d949a22
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/portal/README.md
View File

@ -32,7 +32,7 @@ By default, the script adds a default floating trigger button on the bottom righ
Its possible to add custom trigger button of your own by adding data attribute `data-portal` to any HTML tag on page, and also specify a specfic [page](https://github.com/TryGhost/Portal/blob/master/src/pages.js#L13-L22) to open from it by using it as `data-portal=signup`.
The script also adds custom class names to this element for open and close state of popup - `gh-members-popup-open` and `gh-members-popup-close`, allowing devs to update its UI based on popup state.
The script also adds custom class names to this element for open and close state of popup - `gh-portal-open` and `gh-portal-close`, allowing devs to update its UI based on popup state.
## Basic Setup

6
ghost/portal/src/App.js
View File

@ -77,7 +77,7 @@ export default class App extends React.Component {
}
};
const customTriggerSelector = '[data-portal]';
const popupCloseClass = 'gh-members-popup-close';
const popupCloseClass = 'gh-portal-close';
this.customTriggerButtons = document.querySelectorAll(customTriggerSelector) || [];
this.customTriggerButtons.forEach((customTriggerButton) => {
customTriggerButton.classList.add(popupCloseClass);
@ -89,8 +89,8 @@ export default class App extends React.Component {
/** Handle portal class set on custom trigger buttons */
handleCustomTriggerClassUpdate() {
const popupOpenClass = 'gh-members-popup-open';
const popupCloseClass = 'gh-members-popup-close';
const popupOpenClass = 'gh-portal-open';
const popupCloseClass = 'gh-portal-close';
this.customTriggerButtons.forEach((customButton) => {
const elAddClass = this.state.showPopup ? popupOpenClass : popupCloseClass;
const elRemoveClass = this.state.showPopup ? popupCloseClass : popupOpenClass;