cgross / angular-notify Goto Github PK
View Code? Open in Web Editor NEWMinimalistic and extensible notification service for Angular.
Home Page: http://cgross.github.io/angular-notify/demo/
License: MIT License
Minimalistic and extensible notification service for Angular.
Home Page: http://cgross.github.io/angular-notify/demo/
License: MIT License
Hi there,
Thanks for this very useful Angular module.
Because I needed to modify notifications to be able to display them at the bottom of the page, I've forked and modified its code - maybe someone also will look for the same issue, so I've prepared working version available here:
https://github.com/bl4de/angular-notify/tree/master/at-the-bottom
Maybe I should create 'mixed' version with both options and send you some PR for reviewing? What do you think? Let me know in comment ;)
Regards,
R.
This is very very good plugin! Congratulations!
Maybe you can deliver this plugin in some js cdn site, like cdnjs.com or jsdelivr.com, for people make a fast test
Hi
It would be cool if the module would support configuring the duration for a message individually. At the moment one can only set the duration globally for any message. Adding duration
as an optional property to the objects
argument of notify()
, that, if set, overwrites the global duration, seems to be what is needed to enable this.
Thanks
I'm doing a big app for the company I work for and I'm using this module. The module works fine, the template part is good too and it's very customizable.
But when we come to the $close()
function we have a problem. When you do this:
templateElement.css({'opacity' : 0}).attr('data-closing','true');
You are basicaly keeping the element in the page instead of really hidding or removing him. This may cause some problems with other elements in the same page (it was in my case).
My solution? Change the line above, to this:
templateElement.css({'display' : 'none'}).attr('data-closing','true');
By using display: none
the element will disappear from the sight and don't will interfere the other elements around him.
Just FYI the problem I was having was with the close button in the top right position inside the message. When I had more than 10 messages displayed I was clicking in the button and the click area was changing, so if the user clicked in the close icon, the message didnt closed, only if he moved the mouse a little higher.
I wanted to place an $httpProvider.interceptors
to globally prompt about erroneous requests, but it seems cgNotify
does not contain a provider for this.
I'm mostly interested in using this as a barebones driver for my own message template, and I realized the positioning was getting really out of sync as multiple messages were shown.
It appears that there is a hardcoded spacing of 10px
that is causing me problems:
var shadowHeight = 10;
It would be convenient to have this assumption removed so that custom templates aren't confused by the subsequent bad math (increasingly 10px off the target positioning with each new message).
Hey! Thanks for the very nice Angular module. We are using it for a big project and ran into a bug this morning while testing on ios. On Chrome stable and Chrome dev on android the notifications work perfectly and scale to the sceen size nicely as seen in this screenshot.
But on ios 8.3 with safari mobile 8 the notifications are halfway off screen as seen in this screenshot:
I know its just a css issue most likely and am willing to help fix it. Just wanted to see what you had to say on it and if you can point me in the right direction.
Hey, cool package.
Using $provider will allow you to configure the service with default config instead of manually invoking it.
notify({
classes: 'alert-danger',
message: $scope.validator[x][0]
});
but thats notify still show blue color, how to make it works?
How to make close on click?
This occurs only after first page loads.
And another thing is, first time only two messages are showing.
After that working properly.
What will be the root cause of this issue?
Is there anyway you could publish this module on npm?
It would be very helpful for some case add a title for message. And I think for this is a very quick implementation of code.
Can I do pull request?
Whats missing for IE9 support Anything we can do?
In line 21
args.duration = args.duration ? args.duration : defaultDuration;
If duration is set to 0, args.duration equals defaultDuration and it violates the doc
duration - Optional. The duration (in milliseconds) of message. A duration of 0 will prevent messages from closing automatically.
I've noticed an intermittent issue where
The problem seems to be this code:
var templateElement = $compile(template)(scope);
templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function(e){
if (e.propertyName === 'opacity' || e.currentTarget.style.opacity === 0 ||
(e.originalEvent && e.originalEvent.propertyName === 'opacity')){
templateElement.remove();
transitionend
event isn't always sent by the browser - an instance may be when the transition is interrupted by another process. This means that the element may not get removed where the event isn't fired.
Hey there!
Thx for very nice plugin.
I was wondering - is there any way of changing animation speed or easing?
Default speed is very slow.
Is there any reason why Angular ~1.4
wouldn't work? Right now, this is the only dependency on my current project that forces me to use "resolutions"
on bower.json
.
Hi,
A "stop delay before hide" function on mouse over will be great!
notify should dispatch event on returned object on closed
, opened
and clicked
i am working on a project, i want to use some other class for notification, right now i have to pass it every where, i think we should have it in config.
This is pretty much needed for checking if notification exists and most importantly all the programmatic access - like close() method.
Not usable without this in production.
When I bower install angular-notify --save
I got the following message:
Unable to find a suitable version for angular, please choose one:
1) angular#~1.2 which resolved to 1.2.28 and is required by angular-notify#2.0.2
2) angular#1.3.10 which resolved to 1.3.10 and is required by angular-resource#1.3.10
3) angular#>= 1.0.8 which resolved to 1.3.10 and is required by angular-ui-router#0.2.13
4) angular#~1.3.9 which resolved to 1.3.10 and is required by console
5) angular#* which resolved to 1.3.10 and is required by angular-smart-table#1.4.8Prefix the choice with ! to persist it to boer.json
? Answer:: 2
bower angular-notify#~2.0.2 install angular-notify#2.0.2
I picked 1.3.10 and my notification does not seem to appear.
after grunt minification angular-notify returned exeption "undefined is not a function"
If ngDialog pop up is open then Notify alert always pops up behind ngDialog. Is there any way to fix it? Or it is a bug? Plz help. If Notify can't show messages on ngDialog then I need to look for some other plugin. Thank you!!!
How could i close notify popup with backdrop choice...
Hi,
if the class cg-notify-message-template
is not a direct child of cg-notify-message
element, notify can't find it.
it can be a problem when you use a custom template.
Moreover, use 2 differents elements (message and messageTemplate) is not very obvious and once again custom template are not clean.
I send my code as a suggestion for clean support for html (it's a coffescript with class style code)
Filter for trust HTML in $message
class TrustHTML
constructor: ($sce) ->
return (message) ->
return $sce.trustAsHtml(message)
@app.filter 'trustHTML', ['$sce', TrustHTML]
Config notify with custom template (use of ng-bind-html
with trustHTML
filter)
class ConfigNotify
constructor: (notify, $templateCache) ->
# Global config
notify.config
duration: 4000
startTop: 10
verticalSpacing: 10
maximumOpen: 3
# Custom templates
notifyDangerTpl = [
'<div class="cg-notify-message cg-notify-message-center alert-danger" ng-style="{\'margin-left\': $centerMargin}">'
'<table>'
'<tr>'
'<td class="cg-notify-icon"><i class="fa fa-warning"></i></td>'
'<td class="cg-notify-content" ng-bind-html="$message | trustHTML"></td>'
'<td class="cg-notify-button"><button type="button" class="cg-notify-custom-close" ng-click="$close()"><i class="fa fa-close"></i></button></td>'
'</td>'
'</table>'
'</div>'
].join('')
$templateCache.put('notify-danger.html', notifyDangerTpl)
@app.run ['notify', '$templateCache', ConfigNotify]
How to use ?
notify
templateUrl: 'notify-danger.html'
message: "A custom template with <b>trusted HTML</b>"
This line makes a 0
fall back to the global config.
angular-notify/angular-notify.js
Line 21 in 4d159b6
args.duration = args.duration ? args.duration : defaultDuration;
http://stackoverflow.com/questions/36295476/ionicmodal-disabling-click-events
Here is the text of the question repeated here:
Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
I have the css and js files included, I added the cgNotify to my app dependecies, As well as injected it into the controller Im using. ??
$ bower install angular-notify --save
bower angular#1.5.3 cached git://github.com/angular/bower-angular.git#1.5.3
bower angular#1.5.3 validate 1.5.3 against git://github.com/angular/bower-angular.git#1.5.3
bower ECONFLICT Unable to find suitable version for angular
I have installed V2.0.2 and default notifications are working good with center alignment but in latest release it's breaking i.e. V2.5.0.
margin-left
style is missing in latest version custom templates.
weirdly, the first time I use notify() to display a notification after the app loads, i'm seeing the {{$message}} instead of the rendered message, like if angular wasn't parsing the template html.
i'm not sure if it's a bug on cgNotify itself or a bad implementation on my code.
my code is as simple as this:
template html:
<article class="notification" ng-class="{'is-notice': notify.type == 'notice', 'is-success': notify.type == 'success', 'is-error': notify.type == 'error'}">
<h2 class="h-article" ng-if="notify.title">{{notify.title}}</h2>
{{$message}}
</article>
notify() call:
$scope.notify = {type: 'alert'};
notify({
message: 'acesso não permitido.',
template: 'views/common/notification.html',
position: 'center',
scope: $scope
});
do you guys have any clue on it?
thanks!
I tend to use only npm these days and not bother with bower. This is one of the few client side packages I can't install via npm. Publishing is a piece of cake, just run npm publish
.
I use notify as factory.
.factory('Notify', function ($rootScope, notify) {
function openNotify(notifyMessage, notifyClass) {
var positions = ['center', 'left', 'right'],
position = positions[2],
duration = 10000;
notifyClass = notifyClass || 'alert-info';
return notify({
message: notifyMessage,
classes: notifyClass,
templateUrl: 'components/notify/notify.html',
position: position,//not respect right, show left every time
duration: duration
});
}
// Public API here
return {
notifycation: {
show: function(callback) {
callback = callback || angular.noop;
return function() {
var args = Array.prototype.slice.call(arguments),
text = args.shift(),
customClass = args.shift(),
showNotify;
showNotify = openNotify(text, customClass);
//callback.apply(event, args);//for future
};
}
}
};
});
And i call from controller
$scope.showNotify = Notify.notifycation.show(function(args) {
console.log(args);//future callback
});
var _message = 'Hello World',
_class = 'alert-info';
$scope.showNotify(_message, _class);
Some time the notify is not working. I don't know what will be the reason. There is no error message or anything. The notify doesn't show anything.
If I am calling notify on click, for each click a notify is triggered. There should be an option to set closeAll as part of config, so that currently open notify get close before triggering a new one.
When notify is used in multiple controllers, its redundant to call notify.closeAll() many times.
Is possible configure position to bottom?
You should really consider to bump your angular dependency version or at least not to lock the minor using within your bower.json
I get an error (Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: notify
when I do something like this:
app.config( function(notify) {
})
How can I inject the notify service in the config?
Thanks for your nifty module here! - Say, is it possible to implement some additional callback on the close-button? I would like to set a variable to true/false, when the window is closed (e.g. to disable buttons as long as a notification is open...)
Thanks!
Hi, I really like the simplicity of this module and I tried implementing it today.
I thought the perfect case for these notifications would be global Ajax message handling, but the interceptors are dependencies of the $http module. Apparently the cgNotify module also uses $http as a dependency. As a consequence there is an angular cdep (circular dependency) error.
Any suggestions on how to use your module for global message handling?
Check console for cdep error:
http://plnkr.co/edit/Wlnl6wdOsC5pDVZRgZgs?p=preview
Same code working with notify dependency in comment for the interceptor:
http://plnkr.co/edit/S7v9Lcon7SGkGVjDZD8d?p=preview
Within angular-notify.css I see the error: Uncaught SyntaxError: Unexpected token .
I was running into problems because message templates did not have one root element only. Only today I found a sentence in the documentation mentioning this requirement. However, it could still be formulated more precisely. Maybe you could change it to something like:
messageTemplate
- Optional. A string containing any valid Angular HTML which will be shown instead of the regular message text. The string must contain one root element only like all valid Angular HTML templates. For instance, wrap everything in a <span>
.
If ngDialog pop up is open then Notify alert always pops up behind ngDialog. Is there any way to fix it? Or it is a bug? Plz help. If Notify can't show messages on ngDialog then I need to look for some other plugin. Thank you!!!
Hi,
I use this module in my application, and I started to write e2e tests with protractor.
There is no problem when writing tests for function using notification which stay on screen, but notification with duration attribute are not testable. This issue comes from the $timeout service to manage notification duration : protractor waits for $timeouts (and $http) before to run actions and expectation. So notification with duration can't be tested as they disappears before protractor tests them.
In documentation (https://github.com/angular/protractor/blob/master/docs/timeouts.md), protractor team precognise to replace $timeout services by $interval services to this kind of issue.
Can you try that to allow protractor testing of notifications with duration ?
Currently it sets the opacity to 0 for a hidden div which can still grab mouse events.
Should hide the div instead of just set opacity to 0.
Type long text that spans to multiple lines and you would see the notification is not centered anymore.
I ran into this recently. Currently, if the element containing .cg-notify-message-template is not a child of the root element in the template, cgNotify throws an error: "cgNotify could not find the .cg-notify-message-template element in..."
To work around it is pretty simple, and I wrote a code to do so.
Just replace lines 43-49 in angular-notify.js:
var messageTemplateElement;
for (var i = 0; i < templateElement.children().length; i ++){
if (angular.element(templateElement.children()[i]).hasClass('cg-notify-message-template')){
messageTemplateElement = angular.element(templateElement.children()[i]);
break;
}
}
with this:
var fnRecursiveLook = function (myElement) {
var children = myElement.children();
for (var i = 0; i < children.length; i++) {
var child = angular.element(children[i]);
if (child.hasClass('cg-notify-message-template')) {
return child;
}
if (child.children().length > 0) {
return fnRecursiveLook(child);
}
}
return undefined;
};
var messageTemplateElement = fnRecursiveLook(templateElement);
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.