Cbox Notifications [v1.0.1]

[elli]

Cbox Notifications v1.0.1

Live Preview

A plugin that hides a Cbox behind a dialog, and shows a notification when a new message has been posted.

To test that the notification is working correctly: duplicate your browser tab, open the dialog from one tab, and send a message. You should see the notification appear over the trigger button in the other tab.


Installation

1. Download the cbox-notifications.pbp file and save it somewhere easily accessible, such as your Desktop or Downloads folder
2. Go to your forum's Admin Panel
3. Click on Plugins > Manage
4. Click the "Import Plugin" button
5. Click the "Choose Plugin File" button
6. Navigate to and select the cbox-notifications.pbp file
7. Once the plugin has been imported, click the "Finished" button near the bottom right of the modal dialog window

Note

Requires a unique Cbox URL. Navigate to cbox.ws, log in to your Cbox account, and under the "Publish" page, find the URL within the iframe "src" attribute.


Changelog

SPOILER: Click to show

v1.0.1
- Changed _buildButton to only append a CSS positioning class if the user hasn't placed the trigger button manually
- Updated CSS positioning classes to work with the above
- Updated try...catch argument from e to err since parent already uses e
- Simplified function that appends notification

.pbp file

GitHub

[elli]

Updated to v1.0.1. See Changelog in OP or on GitHub for details.

[Retread]

elli , first of all, thanks for making this editable. While I don't yet have the knowledge to understand much of what you're doing in the components, I learn a bit here and there just by examining these things.

You can observe a lot by watching.
-- Yogi Berra

I don't use the shoutbox or a chatbox on my home forum, because they tend to clutter. This seems like a good way to have the benefits without the clutter.

The trigger button is stationary in the viewport even when the page is scrolled, that's a good thing. The popup is glued to the page so it moves as the page is scrolled. Imo, that's not such a good thing.

Until the popup is dismissed, all other links on the page are inoperative. Alone, that's not too much of a problem. But if the popup is triggered, then the user scrolls up or down the page such that the popup is off the screen, they must scroll back so the x is visible. Only then can they navigate away.

If the popup was stationary in the viewport, this would not be a problem. And/or the trigger could be made to toggle the popup in an on/off fashion rather than on-only.

[elli]

Aug 9, 2019 12:36:39 GMT -8 Retread said:

The trigger button is stationary in the viewport even when the page is scrolled, that's a good thing. The popup is glued to the page so it moves as the page is scrolled. Imo, that's not such a good thing.

Until the popup is dismissed, all other links on the page are inoperative. Alone, that's not too much of a problem. But if the popup is triggered, then the user scrolls up or down the page such that the popup is off the screen, they must scroll back so the x is visible. Only then can they navigate away.

If the popup was stationary in the viewport, this would not be a problem. And/or the trigger could be made to toggle the popup in an on/off fashion rather than on-only.

The positioning of the dialog is default ProBoards behavior (try triggering any of the others, like "Add Attachment"). The difference is that I've enabled the modal option, which creates a darkened overlay behind the dialog that prevents users from interacting with the rest of the page. This is a personal preference for important dialogs because it keeps that content in focus. I've considered making this an optional setting, but since this plugin is unique in that it creates a notification when a new message has been posted, the user should just close the dialog when they're done reading. Instead, I'll probably disable scrolling on the page to keep the dialog in view as long as it's open.

[Chris]

You could also make the dialog fixed by adding the following to the CSS component of the plugin (overrides the default position:absolute; for this particular dialog)

.ui-dialog[aria-labelledby="ui-dialog-title-js-cbox-notifications-dialog"] {
   position: fixed;
}

[elli]

Chris Yeah, I'll change positioning if I disable scrolling. I haven't come to a conclusion yet. Either make the plugin less opinionated and turn off the modal, or go all the way.

Dialogs are... not great. And not just these jQuery UI/ProBoards dialogs — I mean the concept itself. They're ugly on small screens, they're very difficult to make accessible to screen readers, and if they aren't handled correctly, they're bad UX. In my day job (UI dev), we spent months building a good, accessible dialog component. And even now, we have specific restrictions on how it should be used (confirmations only). Basically, if I PR'd this plugin at work, it would be wholly rejected. But these are forums and the plugin was for fun and practice so ¯\_(ツ)_/¯

What do you guys think? More opinionated with scrolling disabled and fixed position? Or less opinionated with no modal?

[Retread]

Aug 10, 2019 9:23:08 GMT -8 elli said:

What do you guys think?

I think the most important part is not being able to swim away from the hole in the ice. Fixed position and/or disabling scrolling will get you there. modal, true or false seems a matter of preference.

One thing I noticed when I went to responsive design mode on my browser and selecting a narrow screen (iPhone) and Desktop mode, is the right side of the dialog is completely off the screen. Adding max-width:90%; to the CSS addition Chris suggested took care of that.


I reckon it would be more intuitive if you used modal:true; and disabled scrolling.

[CrazyBoy]

How i can make an account, you made that nesecessary to make the plugin enable
elli

[elli]

CrazyBoy You need a Cbox account: www.cbox.ws/

[CrazyBoy]

Thank You.
I'll tell you if i got some troubles. 

[CrazyBoy]

elli,what i may add ?
www5.cbox.ws/box/?boxid=917039&boxtag=otaOmX
Or
my.cbox.ws/Eminchat1

[elli]

CrazyBoy Instructions are in the original post, as well as in the plugin setup.

Jul 31, 2019 14:26:13 GMT -8 elli said:

Requires a unique Cbox URL. Navigate to cbox.ws, log in to your Cbox account, and under the "Publish" page, find the URL within the iframe "src" attribute.

[CrazyBoy]

elli when i use the second URL it does work as well, but with the first which is like the example it'll show an error
family-house.proboards.com/

[CrazyBoy]

elli,it worked, i wrote the boxtag wrong
I wrote t
The true is r

[PF]

Hi elli,

Is there a way to make the button inaccessible to guests or after members log out of the forum?