hubspot/messenger

Growl-style alerts and messages for your app. #hubspot-open-source

Messenger

Demo and Usage

Docs

• Show messages in your app.
• Wrap AJAX requests with progress, success and error messages, and add retry to your failed requests.
• Add actions (undo, cancel, etc.) to your messages.

messenger's Issues

parentLocations

Hello i have been wondering what is this for

Messenger({'parentLocations': ['.page', 'body']});
# Will try to insert the messenger into the el matching
# .page before inserting it into the page.

can you pls tell me if 'body' means the body tag? what is '.page'?

how can i show the circle animation when send data to server?

i try a day to let't work. but i find no way to solve this。some body any tips?

On Sucess Method

Is there a way to do something with the AJAX result when the call succeed?

First class promise support in do

Add $prefix in SASS to allow scoping of CSS

It would be useful if the SASS had a "prefix" option where I could specify the prefix for all the CSS classes.

More discussion the value of a $prefix could be found here: twbs/bootstrap#1287

bower install error

When I trie to bower install messenger I got the following error

There were errors, here's a summary of them:
- component/jquery not found

The full message

> bower install messenger
bower cloning git://github.com/HubSpot/messenger.git
bower cached git://github.com/HubSpot/messenger.git
bower fetching messenger
bower checking out messenger#1.3.3
bower copying /Users/kwang53/.bower/cache/messenger/a4b93e1e1311a3a018e4d2966e7d01f5
mismatch The version specified in the component.json of package messenger mismatches the tag (1.3.3 vs 1.3.2)
mismatch You should report this problem to the package author

bower error component/jquery not found

errorMessage cannot be overridden

msg = Messenger().run({
    successMessage: 'User added',
    progressMessage: 'Adding user...',
    errorMessage: 'Error adding user'
}, {
    url: '/add-user',
    type: 'POST',
    success: function (xhr) {
        return xhr.data.username + ' added';
    },
    error: function (xhr) {
        error_message = xhr.responseJSON.message;
        return msg.update({
            message: error_message, //' *THIS IS NEVER DISPLAYED!* 
            type: 'error',
            actions: {
                undo: {
                    label: 'upgrade',
                    action: function () {
                        alert('Account upgraded');
                    }
                }
            }
        });
    }
});

Expected result on error: error_message is displayed.
Actual result on error: errorMessage is always displayed instead of the error message returned from the server (error_message).

Animations

Can i add animation to showing and hiding messages?
How is it possible?
Thanks you

Messenger is detached from is parent every time a message changes

The equality check in Messenger._call doesn't work out, so every time a message is added the group is detached and added again.

This makes things like CSS animations on the spinner to start over again and such

After close

Im using Messenger with hideAfter: 5 ....the box is hidden after, but it still remains on top middle (where i set it to) over my other elements. Can I do an on unload function or on hide function?

I still see the

after it's been hidden. It's not visible but the UL block still exists and it is on top of other links on my page.

I'd like remove the actual element when it's closed.

handlers[type] run count increases on each timed retry

Hi There,

I'm not sure if this is an issue, but just something I noticed.

Inside .run() where the handlers[type] is returned, it appears that that function is being called 1 extra time for each time the message retries after waiting for its delay.

originalHandler = opts[type];
        return handlers[type] = function() {
          var data, defaultOpts, handlerResp, msgOpts, reason, resp, responseOpts, xhr, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;

          console.log("I'll appear more and more after each failed ajax 500...");

          resp = 1 <= arguments.length ? __slice.call(arguments, 0) : [];

Anywho, like I said, Im not sure if it's an issue. If the browser is left open, and left to retry over the space of an hour, I get hundreds of I'll appear more and more after each failed ajax 500 after EACH failed ajax request

Thanks

Offer JS toggle in documentation

HubSpot/executr#2

Slightly off on Ubuntu + Chrome

Overlaps scrollbar, close button in the wrong place.

Spinner use as progress bar

Hi,
I would like to know if there is a simple way to leverage spinner included in future message to display a progress completion message.

Thank you very much

Center notifications on screen.

We can move them left, right, top, bottom, but there's no way to center the notification. This makes sense if I'm using something with actions in the box.

how to use Messenger().run() with spinner

Messenger().run({
  errorMessage: 'Error destroying alien planet',
  successMessage: 'Alien planet destroyed!',
  progressMessage: 'Please Wait...'
},
{
  type:'POST',
  url:'/',
  data:{
  },
  success:function(data) {
    alert(data);
  }
});

is that right?
but this can not show spinner.
how to set Messenger.options

jQuery 2 Compatibility

extraClasses not working with backbone.js

That is my config:

Messenger().hookBackboneAjax({
    errorMessage: 'Error syncing with the server',
    theme: null,
    showCloseButton: true,
    hideOnNavigate: true,
    extraClasses: 'messenger-fixed messenger-on-left messenger-on-bottom',
    retry: false
});

still I have none of the classes applied to the message.

Docs are missing some stuff

1. What is the meaning of the url parameter when calling .run? It says nowhere

2. What is the difference between .run and .post? It says nowhere

Conflict between Bootstrap 3 close button and Messenger close button styles

Close button doesn't render correctly with bootstrap 3 included

Incompatible with BootStrap 3.0.2

Hi when I use messenger 1.4 with BootStrap 3.0.2, the messenger is not showed in the right format, it looks like it conflicts with bootstrap 3.0.2 alert.

I am trying to dig and isolate the root cause but so far no luck.

Add a way to decide that a success is actually an error, or vice versa.

Customizable Builds

It would be cool let people create their own builds of Messenger. The options right now could include:

• Include/exclude the Backbone/Underscore shims
• Minify yes/no
• Convert to js yes/no
• Bundle in specific themes (with the default configuration to enable that theme already included?)
• Use cdnjs version or locally hosted (meaning we'd have to generate a bunch of permutations for cdnjs).

This may require some modification to the grunt build process to generate all the partial files to be joined (@BennyC).

I'd really like to do it all client-side if possible (FileWriter API?), maybe with a Node fallback? This may warrant it's own OS project.

Register with Bower?

Would be nice to be able to manage this in projects using Bower.

Add docs for ignoredErrorCodes

Example of specifying messenger element

The docs include an example with the line

messenger = new ActionMessenger $('div#message-container')

but ActionMessenger is scoped within the messenger.js file, and besides, the argument would have to be el: $('div#message-container').

I believe the simplest fix is to change the line in the docs to

messenger = $('div#message-container').messenger()

Make a PR in cdnjs to add messenger

https://github.com/cdnjs/cdnjs

TypeError: Object [object Object] has no method 'messenger'

Trying to have multiple messenger containers on a single page (one standard, attached to body, the other contained in a wrapper div). However, I'm having some issues getting it to work as outlined in the Docs.

When I try to set an instance such as:

$('.messenger-wrapper').messenger(); 

I get the error

TypeError: Object [object Object] has no method 'messenger'

Not quite sure what I'm doing wrong. I'm loading jQuery first, then messenger and then the js file that contains my initialization. There are a few other libraries being called in between those files, but not getting any conflict errors.

I don't see the .messenger method anywhere in the jQuery object either (Chrome Developer tools).

Thanks in advance, it works wonderfully with once instance, but getting that second one is proving to be a bit tougher.

Air theme not included in component.json?

build/js/messenger-theme-flat.js

Simple Requirement

How can I display a message, wait for X seconds and then fire a function?

Getting JQuery is not defined when calling messenger.js

sorry im pretty new at this , can someone explain to me how to use the plugin. im getting the error JQuery is not defined. as per cheking on the .js file i thinks there is a variable there named jquery. i don't know though how to solved this. must i declare the variable on my JSP? if so, what should be the value? or should i initialize it somewhere.

i've been trying to read the documentation but i can't seem to find the answer.

thank you so much in advance for helping.

Weird Display Problem

I have a weird problem.

When the message is printed first time. It appears without proper styles.
Subsequent messages look nice.

Any idea what could possibly be the reason? Anybody?

(i18n/a11y) can't specify text of close button

For screen readers and internationalization purposes, would like to be able to set the text used for the close button.

Mobile

There is a big question as to how the alerts should function on mobile. The options include:

• Do nothing, trust the zoomability
• Switch to alert() when on mobile (optionally)
• Create custom mobile styles (exactly how they should look it TBD)

[Proposal] Allow further config default options

When I try and set the default option for hiding the message, it seems to have no effect.

I'd like to be able to do something like this:

Messenger.options = {
    hideAfter: 2,
    showCloseButton: true
}

showCloseButton is broken on the iPad

Possible to always show close button?

Hello.

Love Messenger. I've got it set up with the option to use a close button but it seems as though I have to call it with that option every time. Is there any way to set that globally so that it always has it?

Thank you,
Matt

Bootstrap CSS dependency?

Hey

Thanks for your work on this, looks like a nice library!

I just included the following files in my project,

build/js/messenger.js
build/css/messenger.css
build/css/messenger-theme-block.css

And then ran this code,

Messenger.options = {
    extraClasses: "messenger-fixed messenger-on-bottom",
    theme: "block"
}
Messenger().post("foo");

But the message is appearing mostly unstyled, i.e. no background colours, borders etc. Having checked your demo site it seems like these colours are coming from the Bootstrap CSS? Is that right? But you say that Bootstrap isn't a hard dependency ... ?

Angularjs anybody?

Has anybody tried to create a port of this for Angular.js?

How to use hookBackboneAjax?

Hello,

I'm currently using this messenger, and the hookBackboneAjax seems like it might save a lot of duplicate code (so I don't have to add a Messenger.post() in so many places).

The documentation on this seems a bit bare though. How exactly am I supposed to use this? I see to use "Messenger().hookBackboneAjax()", but where do I put that, and am I supposed to do something else with Backbone to get the messages showing up? Or do I need to add some kind of options to hookBackboneAjax()?

If you have an example of how to use it, that would be very helpful.

Thanks!

Is there any way to do not hide the alert?

I saw that the default timeout is 10 sec.

Is there any configuration/settings that prevents the alert from being hided, unless the users explicitly clicks on close("X")?

Accessability

I can guess that there are some html attributes we should add, but beyond that I don't know much about what we can do.

Better build process than build.sh

Grunt maybe?

http://gruntjs.com/
http://weblog.bocoup.com/introducing-grunt/
http://net.tutsplus.com/tutorials/javascript-ajax/meeting-grunt-the-build-tool-for-javascript/

Add more traditional API documentation

Add examples of how to use id/singleton/messageInstance

valaki

open messenger

Testing & Linting

Thinking about integrating headless testing into the Grunt process, also some Linting. Obviously didn't want to go straight ahead with this, as I wanted to see if you have any linting rules already in place at HubSpot that you'd want to follow?!

Any other things you'd like?! Was thinking once we get automated linting/testing in place, could possibly look into using Travis for builds to ensure quality of a build/tag?

JS associated with themes (mixins)

Currently themes do not have the ability to alter the html. This has lead to the spinner code being included in the main js, rather than being associated with the themes which need it. A plugin system which allows the html being generated to be extended would be good.

It will also make it possible to include the spinners on non-error states.

AMD Compatible?

Awesome library - I'm trying to place this library in my web application but having some trouble getting it working with require.js.

Tried to write a loader for the library and returning window.Messenger but it didn't seem to work.

define(['/js/libs/messenger/messenger.js'], function() {

return window.Messenger;

});

Has anyone got this working as an AMD?

Remove Backbone Dependency

The biggest use of Backbone right now is to do the mechanics of event binding, we should be able to extract that bit from the Backbone source.