hubspot / messenger Goto Github PK
View Code? Open in Web Editor NEWGrowl-style alerts and messages for your app. #hubspot-open-source
Home Page: http://github.hubspot.com/messenger/
License: MIT License
Growl-style alerts and messages for your app. #hubspot-open-source
Home Page: http://github.hubspot.com/messenger/
License: MIT License
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.
build/js/messenger-theme-flat.js
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
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
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.
There is a big question as to how the alerts should function on mobile. The options include:
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'?
Would be nice to be able to manage this in projects using Bower.
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
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
Has anybody tried to create a port of this for Angular.js?
Can i add animation to showing and hiding messages?
How is it possible?
Thanks you
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
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
I'd like remove the actual element when it's closed.
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")?
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
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.
How can I display a message, wait for X seconds and then fire a function?
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?
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.
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?
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?
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()
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 ... ?
For screen readers and internationalization purposes, would like to be able to set the text used for the close button.
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
i try a day to let't work. but i find no way to solve this。some body any tips?
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.
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
}
What is the meaning of the url parameter when calling .run? It says nowhere
What is the difference between .run and .post? It says nowhere
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
).
Is there a way to do something with the AJAX result when the call succeed?
Overlaps scrollbar, close button in the wrong place.
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.
It would be cool let people create their own builds of Messenger. The options right now could include:
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.
open 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.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.