From bf8d949a22f1237058ccade6ddc1684a65642b14 Mon Sep 17 00:00:00 2001 From: Rish Date: Wed, 25 Nov 2020 12:18:06 +0530 Subject: [PATCH] Renamed custom trigger classname to portal 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. --- ghost/portal/README.md | 2 +- ghost/portal/src/App.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ghost/portal/README.md b/ghost/portal/README.md index 9e2b9297c2..236ca5b9f2 100644 --- a/ghost/portal/README.md +++ b/ghost/portal/README.md @@ -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 diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index 86482039db..bc620287d2 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -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;