reecem / h-bar Goto Github PK

Is your feature request related to a problem? Please describe.
The post notifications always hang around, and to be able to clear them one would need to add their own stuff to hide it.

Describe the solution you'd like
Be able to have the banner have a dismiss x or dismiss word on the end and then store the action in localStorage with a hash/ or timestamp that waits until a new post is available.

It would need to look at the localStorage before displaying the data, as it would still need to make a get request of the posts to be able to determine if the post notification has been displayed.

Describe alternatives you've considered
The alternative would be having a injectable component that adds the button with an onclick listener that the user then defines their own callback that handles storing the dismiss action and then also removes the banner.

Then they would also define another callback that the system would then check to see if the banner should be shown

Additional context
N/A

Hi,

Thanks for the project, trying it out gives an error:
Cannot read properties of undefined (reading 'linkWrapper')

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

<script src="https://cdn.jsdelivr.net/npm/@reecem/h-bar@latest/dist/hBar.min.js"></script>
<script>
    hBar.init({
        link: "The link url, can be force and no need to fetch from API",
        title: "The link title goes here",

        url: "https://api.github.com/repos/ReeceM/h-bar/releases",
        parser: (data) => {
            // getting the first release on the list of releases from github.
            const { name, html_url } = data[0]
            console.log("hbar parser html_url", html_url)

            return {
                title: `Lateset version available ${name}`,
                link: html_url
            }
        },

        secondaryLinks: [
            {
                title: "Docs",
                link: "http:://docs.example.com"
            },
            {
                title: "Support",
                link: "http://help.example.com"
            }
        ],
        options: {
            theme: "blue",
        }
    })

    hBar.fetchData()
</script>

Could you please also publish the 2.0 version? Maybe it's fixed there.

Now one cannot hide the badge unless setting it to a space.
It would be better to have no default value (set it to New only in examples), and let users set it, if they want.

Feature
To be able to set a custom parser as an end user to be used instead of the default one.

The way in which the current template of creating the notification is very limited and restricted. Especially the styling.

Describe the solution you'd like
It would be nice to be able to define a template in <template> tags and then have tags inside that are matched to the object returned or parsed.

It should then match the tags, and also account for any XSS, could use dompurify for this, not really rolling my own.

Describe alternatives you've considered
Haven’t done so.

Additional context
n/a

customStyles seems ignored in 2.0 ?
https://cdn.jsdelivr.net/npm/@reecem/h-bar@next/dist/hBar.js

Looks like this was lost:
this.styling = Object.assign(styling, options.customStyles);

Also, I think custom styles should be added after theme styles, so they take priority and overwrite theme:
classes: "".concat(_this2.styling.wrapper, " ").concat(themes[_this2.theme].wrapper),

Hi,

By default, the bar looks like this on a small screen:

When disabling hb--mr-2, it fixes the display to have a tiny padding on the right too

.hb--mr-2 {
    /* margin-right: -0.5rem; */
}

Maybe that class shouldn't be added?

When using this on another platform, the data might be already there from other sources (my situation). Rather than make another API call to url, I propose having another parameter, eg announcements, which would have the content as returned by the API, eg

announcements: [
{
"url": "https://api.github.com/repos/ReeceM/h-bar/releases/27306040",
"assets_url": "https://api.github.com/repos/ReeceM/h-bar/releases/27306040/assets",
"upload_url": "[https://uploads.github.com/repos/ReeceM/h-bar/releases/27306040/assets{?name,label}](https://uploads.github.com/repos/ReeceM/h-bar/releases/27306040/assets%7B?name,label})",
"html_url": "https://github.com/ReeceM/h-bar/releases/tag/2.0.0-rc1",
"id": 27306040,
"author": {
...

One could set either announcements or url in the init() call. If announcements is set, just skip fetching content from URL and proceed with next step, probably parser.

This extents the usability of this library to many other cases, rather than being forced to load content from an URL.

Originally posted by @mariusa in #28 (comment)

Please allow HTML in announcement title, eg
Latest <b>version</b> available ${name}

One can have announcements without any link.

Desired UX:
As a user visiting a site, I want to

• be able to close an announcement and never see that again (in that browsing session or never?)
• see multiple announcements if more are published, even though I closed others

To make this possible, I propose for h-bar

1. When close is clicked, save in sessionStorage or localStorage an md5 hash of that announcement as being closed
2. When initialized with multiple announcements, skip those already closed

This behavior could be enabled when passed a storage option, which developer can set to either sessionStorage or localStorage.

What do you think?

The original styling of the banner is nice, but was closely linked to the main hBar instance.

• move the default ordinal banner to split class
• include the default styling with this
• make it a separate import when using in web

Feature/Improvement

Currently only have a blue and gray theme set for the banner styling. It is customizable and could have more added.

Also make the custom theme styling variable in the init() function more practical.