Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dev Widget Visibility #29

Open
ahuggins opened this issue Jan 26, 2022 · 4 comments
Open

Dev Widget Visibility #29

ahuggins opened this issue Jan 26, 2022 · 4 comments

Comments

@ahuggins
Copy link

Not necessarily an Announcekit-React specific question, but that is what I am using.

I have an issue where the Banner that is displayed when an Announcement is sent out, affects the way in which my site works. This is due to a bit of scroll jacking, but that is the design required by designers.

The issue, which is a hunch because I don't have an actual banner to work with, is that the css for the banner is adding some margin to the body. It is this extra space that is breaking how the design works.

So my question, is there a way to trigger the display of a banner (or any other widget) so that I can work on this bug without having to have Product team send out an Announcement and all the users see it?

I am hoping that Announcekit adds a class to the body something like <body class="announcekit-banner"> because then I can write a css style that removes the added margin from the bottom when that class is present and leave things alone when NOT present.

If Announcekit is adding margin directly to body, like:

body {
   margin-top: 2.5rem
}

Then that is going to be significantly more effort to deal with.

But without the ability to see an actual banner, then I am not sure I can actually definitively figure this out.

Thanks in advance!
@ahuggins
Copy link
Author

Ok, so in the console you can trigger it open with announcekit.boosters.bar.show() and it looks like there is a class added to body. But it also looks like that class is unique each time announcekit is loaded.

Is there anyway to add not have it be unique? Or to add an additional class that is constant?

The class I see is announcekit-booster-bar-{someRandomGeneratedId}-body

but since that someRandomGeneratedId is not consistent I can not target it.

Any idea here?

@ahuggins
Copy link
Author

Another update, sooo, it appears that I can get the id I need from announcekit.boosters.bar.cssid and then I can add some css to the html with the appropriate styling I need for the dynamic class name..... but this feels pretty hacky. But does work.

@ahuggins
Copy link
Author

ahuggins commented Jan 26, 2022 •
edited
Loading

After thinking things through a bit I think there are a couple things that could make this easier.

  1. Is there a way to pass a callback for when AnnounceKit is loaded/mounted? Since that may not happen when React is mounted and it takes some time for the announcekit global to become available (roughly 1 second from testing)

  2. Or need to add a way so that the <AnnounceKit> component can call a function if there is a booster being shown/closed. Like if could do:

<AnnounceKit
    boosters={{ 
        bar: {
            mounted: (bar) => // do stuff when booster bar mounted,
            onOpen: (bar) =>  // do stuff, 
            onClose: (bar) => // do close stuff,
            unmounted: () => // do stuff when booster bar unmounts
        },
        modal: {
            mounted: (modal) => // do stuff when booster modal mounted,
            onOpen: (modal) =>  // do stuff, 
            onClose: (modal) => // do close stuff,
            unmounted: () => // do stuff when booster modal unmounts

    }}
/>

@ahuggins
Copy link
Author

The reason I have the bar and modal passed to the callbacks is that in order to get the cssid the only place I see to access it is announcekit.boosters.bar.cssid and as a dev you might want to do something with that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ahuggins