Skip to content

Commit

Permalink
v2
Browse files Browse the repository at this point in the history
  • Loading branch information
cgross committed Sep 6, 2014
1 parent 4832a35 commit ac2800f
Show file tree
Hide file tree
Showing 15 changed files with 474 additions and 200 deletions.
22 changes: 17 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function myController($scope,notify){ // <-- Inject notify

notify('Your notification message'); // <-- Call notify with your message

notify({ message:'My message', template:'my_template.html'} );
notify({ message:'My message', templateUrl:'my_template.html'} );

}
```
Expand All @@ -42,9 +42,11 @@ function myController($scope,notify){ // <-- Inject notify
The `notify` function can either be passed a string or an object. When passing an object, the object parameters can be:

* `message` - Required. The message to show.
* `template` - Optional. A custom template for the UI of the message.
* `templateUrl` - Optional. A custom template for the UI of the message.
* `classes` - Optional. A list of custom CSS classes to apply to the message element.
* `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 like all valid Angular HTML templates (so wrap everything in a `<span>`).
* `scope` - Optional. A valid Angular scope object. The scope of the template will be created by calling `$new()` on this scope.
* `position` - Optional. Currently `center` is the only acceptable value. This will calculate and apply the correct negative `margin-left` offset needed to center a fixed positioned div.
* `position` - Optional. Currently `center` and `right` are the only acceptable values.
* `container` - Optional. Element that contains each notification. Defaults to `document.body`.

This function will return an object with a `close()` method and a `message` property.
Expand All @@ -56,7 +58,7 @@ Call `config` to set the default configuration options for angular-notify. The
* `duration` - The default duration (in milliseconds) of each message.
* `startTop` - The Y pixel value where messages will be shown.
* `verticalSpacing` - The number of pixels that should be reserved between messages vertically.
* `template` - The default message template.
* `templateUrl` - The default message template.
* `position` - The default position of each message. Currently only `center` and `right` are the supported values.
* `container` - The default element that contains each notification. Defaults to `document.body`.

Expand All @@ -68,10 +70,20 @@ Closes all currently open notifications.

Angular-notify comes with a very simplistic default notification template. You are encouraged to create your own template and style it appropriate to your application. Templates can also contain more advanced features like buttons or links. The message templates are full Angular partials that have a scope (and a controller if you use `ng-controller="YourCtrl"`).

The scope for the partial will either be descended from `$rootScope` or the scope specified in your `notify({...})` options. Regardless, the template scope will be augmented with a special `$close()` function that you may use to close the notification.
The scope for the partial will either be descended from `$rootScope` or the scope specified in the `notify({...})` options. The template scope will be augmented with a `$message` property, a `$classes` property, and a special `$close()` function that you may use to close the notification.

The `messageTemplate` property is also included on the scope as `$messageTemplate`. To ensure your custom template works with hte `messageTemplate` option, your template should hide the normal text if `$messageTemplate` contains a value, and should have an element with the `cg-notify-message-template` class. The element with the `cg-notify-message-template` class will have the compiled template appended to it automatically.


## Release History
* v2.0.0 - 09/06/2014
* Default template redesigned with a Bootstrap look and feel. Default template now also includes a close button.
* Default message location is now the top center.
* Default message duration is now 10 seconds.
* The `template` option was renamed to `templateUrl`.
* New `messageTemplate` option added.
* New `classes` option added.
* Fixed an issue causing a message with multiple lines of text to be placed into the visible area too soon.
* v1.1.0 - 5/18/2014 - Added return value allowing for closing and updating of message.
* v1.0.0 - 4/16/2014 - Significant refactoring.
* JQuery is no longer a required dependency.
Expand Down
80 changes: 67 additions & 13 deletions angular-notify.css
Original file line number Diff line number Diff line change
@@ -1,15 +1,69 @@
.cg-notify-message {
position:fixed;
right:10px;
top:-50px;
z-index: 9999;

font-size:22px;
font-weight: bold;
text-shadow:1px 1px 3px rgba(255,255,255,1),-1px -1px 3px rgba(255,255,255,1),0px 0px 7px white;

-webkit-transition: top 0.5s ease-out,opacity 0.5s ease-out;
-moz-transition: top 0.5s ease-out,opacity 0.5s ease-out;
-o-transition: top 0.5s ease-out,opacity 0.5s ease-out;
transition: top 0.5s ease-out,opacity 0.5s ease-out;
position:fixed;
left:50%;
top:0px;
z-index: 9999;
max-width:400px;
text-align: center;

background-color: #d9edf7;
color: #31708f;
padding: 15px;
border: 1px solid #bce8f1;
border-radius: 4px;

-webkit-transition: top 0.5s ease-out,opacity 0.5s ease-out;
-moz-transition: top 0.5s ease-out,opacity 0.5s ease-out;
-o-transition: top 0.5s ease-out,opacity 0.5s ease-out;
transition: top 0.5s ease-out,opacity 0.5s ease-out;

visibility:hidden;
}

.cg-notify-message a {
font-weight:bold;
color:inherit;
}

.cg-notify-message a:hover {
color:inherit;
}

.cg-notify-close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
font-size: 21px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;

position: absolute;
top: 0px;
right: 3px;
line-height: 15px;
}

.cg-notify-close:hover, .cg-notify-close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}

.cg-notify-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
17 changes: 15 additions & 2 deletions angular-notify.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<div class="cg-notify-message">
{{$message}}
<div class="cg-notify-message" ng-class="$classes">

<div ng-show="!$messageTemplate">
{{$message}}
</div>

<div ng-show="$messageTemplate" class="cg-notify-message-template">

</div>

<button type="button" class="cg-notify-close" ng-click="$close()">
<span aria-hidden="true">&times;</span>
<span class="cg-notify-sr-only">Close</span>
</button>

</div>
39 changes: 29 additions & 10 deletions angular-notify.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','

var startTop = 10;
var verticalSpacing = 5;
var duration = 4000;
var defaultTemplate = 'angular-notify.html';
var position = 'right';
var duration = 10000;
var defaultTemplateUrl = 'angular-notify.html';
var position = 'center';
var container = document.body;

var messageElements = [];
Expand All @@ -16,14 +16,17 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
args = {message:args};
}

args.template = args.template ? args.template : defaultTemplate;
args.templateUrl = args.templateUrl ? args.templateUrl : defaultTemplateUrl;
args.position = args.position ? args.position : position;
args.container = args.container ? args.container : container;
args.classes = args.classes ? args.classes : '';

var scope = args.scope ? args.scope.$new() : $rootScope.$new();
scope.$message = args.message;
scope.$classes = args.classes;
scope.$messageTemplate = args.messageTemplate;

$http.get(args.template,{cache: $templateCache}).success(function(template){
$http.get(args.templateUrl,{cache: $templateCache}).success(function(template){

var templateElement = $compile(template)(scope);
templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', function(e){
Expand All @@ -36,6 +39,21 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
}
});

if (args.messageTemplate){
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;
}
}
if (messageTemplateElement){
messageTemplateElement.append($compile(args.messageTemplate)(scope));
} else {
throw new Error('cgNotify could not find the .cg-notify-message-template element in '+args.templateUrl+'.');
}
}

angular.element(args.container).append(templateElement);
messageElements.push(templateElement);

Expand All @@ -54,9 +72,10 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
var currentY = startTop;
for(var i = messageElements.length - 1; i >= 0; i --){
var element = messageElements[i];
var top = currentY;
currentY += messageElements[i][0].offsetHeight + verticalSpacing;
element.css('top',top + 'px');
var height = element[0].offsetHeight;
var top = currentY + height;
currentY += height + verticalSpacing;
element.css('top',top + 'px').css('margin-top','-' + height + 'px').css('visibility','visible');
j ++;
}
};
Expand All @@ -72,7 +91,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
}

}).error(function(data){
throw new Error('Template specified for cgNotify ('+args.template+') could not be loaded. ' + data);
throw new Error('Template specified for cgNotify ('+args.templateUrl+') could not be loaded. ' + data);
});

var retVal = {};
Expand Down Expand Up @@ -100,7 +119,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
startTop = !angular.isUndefined(args.top) ? args.top : startTop;
verticalSpacing = !angular.isUndefined(args.verticalSpacing) ? args.verticalSpacing : verticalSpacing;
duration = !angular.isUndefined(args.duration) ? args.duration : duration;
defaultTemplate = args.template ? args.template : defaultTemplate;
defaultTemplateUrl = args.templateUrl ? args.templateUrl : defaultTemplateUrl;
position = !angular.isUndefined(args.position) ? args.position : position;
container = args.container ? args.container : container;
};
Expand Down
6 changes: 3 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
"dist/angular-notify.js",
"dist/angular-notify.css"
],
"version": "1.1.0",
"version": "2.0.0",
"homepage": "https://github.com/cgross/angular-notify",
"authors": [
"Chris Gross <[email protected]>"
],
"description": "A minimalistic notification service for Angular apps.",
"description": "A minimalistic notification service for Angular.",
"keywords": [
"angular",
"notify",
Expand All @@ -31,6 +31,6 @@
"demo"
],
"dependencies": {
"angular": "~1.2.16"
"angular": "~1.2"
}
}
32 changes: 0 additions & 32 deletions demo/another-template.html

This file was deleted.

50 changes: 25 additions & 25 deletions demo/demo.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@

angular.module('app', ['cgNotify']);

angular.module('app').controller('DemoCtrl',function($scope,notify){

$scope.msg1 = $scope.msg2 = $scope.msg3 = "Sample Message";

$scope.demo1 = function(){
notify($scope.msg1);
};

$scope.demo2 = function(){
notify({
message:$scope.msg2,
template:'gmail-template.html',
position:'center'
});
};
$scope.msg = 'Hello! This is a sample message!';
$scope.template = '';

$scope.demo3 = function(){
$scope.buttons = [
{ name:'Hello', callback: function(){ alert('Hello'); }},
{ name:'Bonjour', callback: function(){ alert('Bonjour'); }},
{ name:'Hola', callback: function(){ alert('Hola'); }}
];
$scope.demo = function(){
notify({
message:$scope.msg3,
template:'another-template.html',
position:'center',
scope:$scope
});
message: $scope.msg,
classes: $scope.classes,
templateUrl: $scope.template
});
};

$scope.closeAll = function(){
notify.closeAll();
};

$scope.demoMessageTemplate = function(){

var messageTemplate = '<span>This is an example using a dynamically rendered Angular template for the message text. '+
'I can have <a href="" ng-click="clickedLink()">hyperlinks</a> with ng-click or any valid Angular enhanced html.</span>';

notify({
messageTemplate: messageTemplate,
classes: $scope.classes,
scope:$scope,
templateUrl: $scope.template
});

};

$scope.clickedLink = function(){
notify('You clicked a link!');
};

});
Loading

0 comments on commit ac2800f

Please sign in to comment.