Initial commit

This commit is contained in:
Senad Uka
2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions

View File

@@ -0,0 +1,49 @@
{
"name": "angular-ui-notification",
"version": "0.3.5",
"homepage": "https://github.com/alexcrack/angular-ui-notification",
"repository": {
"type": "git",
"url": "git://github.com/jermorin/angular-ui-notification"
},
"authors": [
"Alexey Avramchik"
],
"description": "Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating",
"main": [
"dist/angular-ui-notification.css",
"dist/angular-ui-notification.js"
],
"keywords": [
"angular",
"notification",
"notify",
"bootstrap"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"demo",
"build"
],
"dependencies": {
"angular": "^1.5.x"
},
"devDependencies": {
"bootstrap": "^3.3.x"
},
"_release": "0.3.5",
"_resolution": {
"type": "version",
"tag": "v0.3.5",
"commit": "fc92bd7e620a5dc4e616fed4aca5ad9bb6382fbd"
},
"_source": "https://github.com/alexcrack/angular-ui-notification.git",
"_target": "^0.3.5",
"_originalSource": "angular-ui-notification",
"_direct": true
}

View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2014 Alexey Avramchik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,186 @@
angular-ui-notification
=======================
[![Dependency Status](https://david-dm.org/alexcrack/angular-ui-notification.png)](https://david-dm.org/alexcrack/angular-ui-notification)
[![devDependency Status](https://david-dm.org/alexcrack/angular-ui-notification/dev-status.png)](https://david-dm.org/alexcrack/angular-ui-notification#info=devDependencies)
[![Build Status](https://travis-ci.org/alexcrack/angular-ui-notification.svg?branch=master)](https://travis-ci.org/alexcrack/angular-ui-notification)
[![Dependency Status](https://www.versioneye.com/user/projects/54f96af44f3108e7800000e4/badge.svg?style=flat)](https://www.versioneye.com/user/projects/54f96af44f3108e7800000e4)
[![Code Climate](https://codeclimate.com/github/alexcrack/angular-ui-notification/badges/gpa.svg)](https://codeclimate.com/github/alexcrack/angular-ui-notification)
Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations
## Features
* No dependencies except of angular.js.
* CSS3 Animations.
* Small size.
* 5 message types.
* Use HTML in your messages.
* Configure options globally py the provider
* Use custom options by the message
* Use custom template
## Install
To install the package using bower and save as a dependency use...
```bash
bower install angular-ui-notification --save
```
To install via NPM:
```bash
npm install angular-ui-notification --save
```
## Usage
[Heres a plunker demo](http://plnkr.co/edit/h08qQF2qlVE3arERpdfi?p=preview)
In your html/template add
```html
...
<link rel="stylesheet" href="angular-ui-notification.min.css">
...
<script src="angular-ui-notification.min.js"></script>
...
```
In your application, declare dependency injection like so..
```javascript
angular.module('notificationTest', ['ui-notification']);
...
```
You can configure module by the provider
```javascript
angular.module('notificationTest', ['ui-notification'])
.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'left',
positionY: 'bottom'
});
});
...
```
And when you need to show notifications, inject service and call it!
```javascript
angular.module('notificationTest').controller('notificationController', function($scope, Notification) {
Notification.primary('Primary notification');
// or simply..
Notification('Primary notification');
// Other Options
// Success
Notification.success('Success notification');
// Message with custom type
Notification({message: 'Warning notification'}, 'warning');
// With Title
Notification({message: 'Primary notification', title: 'Primary notification'});
// Message with custom delay
Notification.error({message: 'Error notification 1s', delay: 1000});
// Embed HTML within your message.....
Notification.success({message: 'Success notification<br>Some other <b>content</b><br><a href="https://github.com/alexcrack/angular-ui-notification">This is a link</a><br><img src="https://angularjs.org/img/AngularJS-small.png">', title: 'Html content'});
// Change position notification
Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});
// Replace message
Notification.error({message: 'Error notification 1s', replaceMessage: true});
}
```
## Service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
## Options
Options can be passed to configuration provider globally or used in the current message.
The options list:
| Option | Possible values | Default value | Description |
| ----------------- | ------------------------- | ------------------------------ | ------------------------------------------------------------------------ |
| delay | Any integer value | 5000 | The time in ms the message is showing before start fading out |
| startTop | Any integer value | 10 | Vertical padding between messages and vertical border of the browser |
| startRight | Any integer value | 10 | Horizontal padding between messages and horizontal border of the browser |
| verticalSpacing | Any integer value | 10 | Vertical spacing between messages |
| horizontalSpacing | Any integer value | 10 | Horizontal spacing between messages |
| positionX | "right", "left", "center" | "right" | Horizontal position of the message |
| positionY | "top", "bottom" | "top" | Vertical position of the message |
| replaceMessage | true, false | false | If true every next appearing message replace old messages |
| templateUrl | Any string | "angular-ui-notification.html" | Custom template filename (URL) |
| onClose | Any function | undefined | Callback to execute when a notification element is closed. Callback receives the element as its argument. |
| closeOnClick | true, false | true | If true, messages are closed on click |
| maxCount | Any integer | 0 | Show only [maxCount] last messages. Old messages will be killed. 0 - do not kill |
Also you can pass the "scope" option. This is an angular scope option Notification scope will be inherited from. This option can be passed only in the methods. The default value is $rootScope
## Methods
#### Notification service methods
| Method name | Description |
|----------------------------------------|-------------------------------------------------|
| Notification(), Notification.primary() | Show the message with bootstrap's primary class |
| Notification.info() | Show the message with bootstrap's info class |
| Notification.success() | Show the message with bootstrap's success class |
| Notification.warning() | Show the message with bootstrap's warn class |
| Notification.error() | Show the message with bootstrap's danger class |
| Notification.clearAll() | Remove all shown messages |
#### Notification service options
| Option | Possible values | Default value | Description |
| -------------- | ------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ |
| title | *String* | `""` | Title to appear at the top of the notification |
| message | *String* | `""` | Message to appear in the notification |
| templateUrl | *String* | `"angular-ui-notification.html"` | URL of template to be used for notification |
| delay | *Int* (?) | `5000` or configured global delay | Number of ms before notification fades out. If not an integer, notification will persist until killed. |
| type | "primary", "info", "success", "warning", "error" | `"primary"` | Bootstrap flavoring |
| positionY | "top", "bottom" | `"top"` | |
| positionX | "right", "left", "center" | `"right" | |
| replaceMessage | *Boolean* | `false` | If true this message will replace old(er) message(s) |
| closeOnClick | true, false | true | If true, the message is closed on click |
#### Returning value
Every "show" method returns a promise that resolves a notification scope with these methods:
| Method name | Description |
|--------------------------------|------------------------------------------------------------------------------------------------------------------|
| notificationScope.kill(isHard) | Remove the specific message<br>isHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message|
## Custom Templates
Custom template can be provided.
```html
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
</div>
```
Default existing scope values is "title" - the title of the message and "message".
Also any custom scope's properties can be used.

View File

@@ -0,0 +1,39 @@
{
"name": "angular-ui-notification",
"version": "0.3.5",
"homepage": "https://github.com/alexcrack/angular-ui-notification",
"repository": {
"type": "git",
"url": "git://github.com/jermorin/angular-ui-notification"
},
"authors": [
"Alexey Avramchik"
],
"description": "Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating",
"main": [
"dist/angular-ui-notification.css",
"dist/angular-ui-notification.js"
],
"keywords": [
"angular",
"notification",
"notify",
"bootstrap"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"demo",
"build"
],
"dependencies": {
"angular": "^1.5.x"
},
"devDependencies": {
"bootstrap": "^3.3.x"
}
}

View File

@@ -0,0 +1,85 @@
/**
* angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
* @author Alex_Crack
* @version v0.3.5
* @link https://github.com/alexcrack/angular-ui-notification
* @license MIT
*/
.ui-notification
{
position: fixed;
z-index: 9999;
width: 300px;
-webkit-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
color: #fff;
border-radius: 0;
background: #337ab7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
.ui-notification.clickable
{
cursor: pointer;
}
.ui-notification.clickable:hover
{
opacity: .7;
}
.ui-notification.killed
{
-webkit-transition: opacity ease 1s;
-o-transition: opacity ease 1s;
transition: opacity ease 1s;
opacity: 0;
}
.ui-notification > h3
{
font-size: 14px;
font-weight: bold;
display: block;
margin: 10px 10px 0 10px;
padding: 0 0 5px 0;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.ui-notification a
{
color: #fff;
}
.ui-notification a:hover
{
text-decoration: underline;
}
.ui-notification > .message
{
margin: 10px 10px 10px 10px;
}
.ui-notification.warning
{
color: #fff;
background: #f0ad4e;
}
.ui-notification.error
{
color: #fff;
background: #d9534f;
}
.ui-notification.success
{
color: #fff;
background: #5cb85c;
}
.ui-notification.info
{
color: #fff;
background: #5bc0de;
}

View File

@@ -0,0 +1,242 @@
/**
* angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
* @author Alex_Crack
* @version v0.3.5
* @link https://github.com/alexcrack/angular-ui-notification
* @license MIT
*/
angular.module('ui-notification',[]);
angular.module('ui-notification').provider('Notification', function() {
this.options = {
delay: 5000,
startTop: 10,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 10,
positionX: 'right',
positionY: 'top',
replaceMessage: false,
templateUrl: 'angular-ui-notification.html',
onClose: undefined,
closeOnClick: true,
maxCount: 0, // 0 - Infinite
container: 'body'
};
this.setOptions = function(options) {
if (!angular.isObject(options)) throw new Error("Options should be an object!");
this.options = angular.extend({}, this.options, options);
};
this.$get = ["$timeout", "$http", "$compile", "$templateCache", "$rootScope", "$injector", "$sce", "$q", "$window", function($timeout, $http, $compile, $templateCache, $rootScope, $injector, $sce, $q, $window) {
var options = this.options;
var startTop = options.startTop;
var startRight = options.startRight;
var verticalSpacing = options.verticalSpacing;
var horizontalSpacing = options.horizontalSpacing;
var delay = options.delay;
var messageElements = [];
var isResizeBound = false;
var notify = function(args, t){
var deferred = $q.defer();
if (typeof args !== 'object' || args === null) {
args = {message:args};
}
args.scope = args.scope ? args.scope : $rootScope;
args.template = args.templateUrl ? args.templateUrl : options.templateUrl;
args.delay = !angular.isUndefined(args.delay) ? args.delay : delay;
args.type = t || args.type || options.type || '';
args.positionY = args.positionY ? args.positionY : options.positionY;
args.positionX = args.positionX ? args.positionX : options.positionX;
args.replaceMessage = args.replaceMessage ? args.replaceMessage : options.replaceMessage;
args.onClose = args.onClose ? args.onClose : options.onClose;
args.closeOnClick = (args.closeOnClick !== null && args.closeOnClick !== undefined) ? args.closeOnClick : options.closeOnClick;
args.container = args.container ? args.container : options.container;
var template=$templateCache.get(args.template);
if(template){
processNotificationTemplate(template);
}else{
// load it via $http only if it isn't default template and template isn't exist in template cache
// cache:true means cache it for later access.
$http.get(args.template,{cache: true})
.then(processNotificationTemplate)
.catch(function(data){
throw new Error('Template ('+args.template+') could not be loaded. ' + data);
});
}
function processNotificationTemplate(template) {
var scope = args.scope.$new();
scope.message = $sce.trustAsHtml(args.message);
scope.title = $sce.trustAsHtml(args.title);
scope.t = args.type.substr(0,1);
scope.delay = args.delay;
scope.onClose = args.onClose;
var reposite = function() {
var j = 0;
var k = 0;
var lastTop = startTop;
var lastRight = startRight;
var lastPosition = [];
for(var i = messageElements.length - 1; i >= 0; i --) {
var element = messageElements[i];
if (args.replaceMessage && i < messageElements.length - 1) {
element.addClass('killed');
continue;
}
var elHeight = parseInt(element[0].offsetHeight);
var elWidth = parseInt(element[0].offsetWidth);
var position = lastPosition[element._positionY+element._positionX];
if ((top + elHeight) > window.innerHeight) {
position = startTop;
k ++;
j = 0;
}
var top = (lastTop = position ? (j === 0 ? position : position + verticalSpacing) : startTop);
var right = lastRight + (k * (horizontalSpacing + elWidth));
element.css(element._positionY, top + 'px');
if (element._positionX == 'center') {
element.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
} else {
element.css(element._positionX, right + 'px');
}
lastPosition[element._positionY+element._positionX] = top + elHeight;
if (options.maxCount > 0 && messageElements.length > options.maxCount && i === 0) {
element.scope().kill(true);
}
j ++;
}
};
var templateElement = $compile(template)(scope);
templateElement._positionY = args.positionY;
templateElement._positionX = args.positionX;
templateElement.addClass(args.type);
var closeEvent = function(e) {
e = e.originalEvent || e;
if (e.type === 'click' || (e.propertyName === 'opacity' && e.elapsedTime >= 1)){
if (scope.onClose) {
scope.$apply(scope.onClose(templateElement));
}
templateElement.remove();
messageElements.splice(messageElements.indexOf(templateElement), 1);
scope.$destroy();
reposite();
}
};
if (args.closeOnClick) {
templateElement.addClass('clickable');
templateElement.bind('click', closeEvent);
}
templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', closeEvent);
if (angular.isNumber(args.delay)) {
$timeout(function() {
templateElement.addClass('killed');
}, args.delay);
}
setCssTransitions('none');
angular.element(document.querySelector(args.container)).append(templateElement);
var offset = -(parseInt(templateElement[0].offsetHeight) + 50);
templateElement.css(templateElement._positionY, offset + "px");
messageElements.push(templateElement);
if(args.positionX == 'center'){
var elWidth = parseInt(templateElement[0].offsetWidth);
templateElement.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
}
$timeout(function(){
setCssTransitions('');
});
function setCssTransitions(value){
['-webkit-transition', '-o-transition', 'transition'].forEach(function(prefix){
templateElement.css(prefix, value);
});
}
scope._templateElement = templateElement;
scope.kill = function(isHard) {
if (isHard) {
if (scope.onClose) {
scope.$apply(scope.onClose(scope._templateElement));
}
messageElements.splice(messageElements.indexOf(scope._templateElement), 1);
scope._templateElement.remove();
scope.$destroy();
$timeout(reposite);
} else {
scope._templateElement.addClass('killed');
}
};
$timeout(reposite);
if (!isResizeBound) {
angular.element($window).bind('resize', function(e) {
$timeout(reposite);
});
isResizeBound = true;
}
deferred.resolve(scope);
}
return deferred.promise;
};
notify.primary = function(args) {
return this(args, 'primary');
};
notify.error = function(args) {
return this(args, 'error');
};
notify.success = function(args) {
return this(args, 'success');
};
notify.info = function(args) {
return this(args, 'info');
};
notify.warning = function(args) {
return this(args, 'warning');
};
notify.clearAll = function() {
angular.forEach(messageElements, function(element) {
element.addClass('killed');
});
};
return notify;
}];
});
angular.module("ui-notification").run(["$templateCache", function($templateCache) {$templateCache.put("angular-ui-notification.html","<div class=\"ui-notification\"><h3 ng-show=\"title\" ng-bind-html=\"title\"></h3><div class=\"message\" ng-bind-html=\"message\"></div></div>");}]);

View File

@@ -0,0 +1,8 @@
/**
* angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
* @author Alex_Crack
* @version v0.3.5
* @link https://github.com/alexcrack/angular-ui-notification
* @license MIT
*/
.ui-notification{position:fixed;z-index:9999;width:300px;-webkit-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;color:#fff;border-radius:0;background:#337ab7;box-shadow:5px 5px 10px rgba(0,0,0,.3)}.ui-notification.clickable{cursor:pointer}.ui-notification.clickable:hover{opacity:.7}.ui-notification.killed{-webkit-transition:opacity ease 1s;-o-transition:opacity ease 1s;transition:opacity ease 1s;opacity:0}.ui-notification>h3{font-size:14px;font-weight:700;display:block;margin:10px 10px 0;padding:0 0 5px;text-align:left;border-bottom:1px solid rgba(255,255,255,.3)}.ui-notification a{color:#fff}.ui-notification a:hover{text-decoration:underline}.ui-notification>.message{margin:10px}.ui-notification.warning{color:#fff;background:#f0ad4e}.ui-notification.error{color:#fff;background:#d9534f}.ui-notification.success{color:#fff;background:#5cb85c}.ui-notification.info{color:#fff;background:#5bc0de}

View File

@@ -0,0 +1,8 @@
/**
* angular-ui-notification - Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating
* @author Alex_Crack
* @version v0.3.5
* @link https://github.com/alexcrack/angular-ui-notification
* @license MIT
*/
angular.module("ui-notification",[]),angular.module("ui-notification").provider("Notification",function(){this.options={delay:5e3,startTop:52,startRight:10,verticalSpacing:10,horizontalSpacing:10,positionX:"right",positionY:"top",replaceMessage:!1,templateUrl:"angular-ui-notification.html",onClose:void 0,closeOnClick:!0,maxCount:5,container:"body"},this.setOptions=function(e){if(!angular.isObject(e))throw new Error("Options should be an object!");this.options=angular.extend({},this.options,e)},this.$get=["$timeout","$http","$compile","$templateCache","$rootScope","$injector","$sce","$q","$window",function(e,t,n,i,o,s,a,l,r){var c=this.options,p=c.startTop,d=c.startRight,u=c.verticalSpacing,f=c.horizontalSpacing,m=c.delay,g=[],h=!1,C=function(s,C){function y(t){function i(e){["-webkit-transition","-o-transition","transition"].forEach(function(t){m.css(t,e)})}var o=s.scope.$new();o.message=a.trustAsHtml(s.message),o.title=a.trustAsHtml(s.title),o.t=s.type.substr(0,1),o.delay=s.delay,o.onClose=s.onClose;var l=function(){for(var e=0,t=0,n=p,i=d,o=[],a=g.length-1;a>=0;a--){var l=g[a];if(s.replaceMessage&&a<g.length-1)l.addClass("killed");else{var r=parseInt(l[0].offsetHeight),m=parseInt(l[0].offsetWidth),h=o[l._positionY+l._positionX];C+r>window.innerHeight&&(h=p,t++,e=0);var C=n=h?0===e?h:h+u:p,y=i+t*(f+m);l.css(l._positionY,C+"px"),"center"==l._positionX?l.css("left",parseInt(window.innerWidth/2-m/2)+"px"):l.css(l._positionX,y+"px"),o[l._positionY+l._positionX]=C+r,c.maxCount>0&&g.length>c.maxCount&&0===a&&l.scope().kill(!0),e++}}},m=n(t)(o);m._positionY=s.positionY,m._positionX=s.positionX,m.addClass(s.type);var C=function(e){e=e.originalEvent||e,("click"===e.type||"opacity"===e.propertyName&&e.elapsedTime>=1)&&(o.onClose&&o.$apply(o.onClose(m)),m.remove(),g.splice(g.indexOf(m),1),o.$destroy(),l())};s.closeOnClick&&(m.addClass("clickable"),m.bind("click",C)),m.bind("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",C),angular.isNumber(s.delay)&&e(function(){m.addClass("killed")},s.delay),i("none"),angular.element(document.querySelector(s.container)).append(m);var y=-(parseInt(m[0].offsetHeight)+50);if(m.css(m._positionY,y+"px"),g.push(m),"center"==s.positionX){var k=parseInt(m[0].offsetWidth);m.css("left",parseInt(window.innerWidth/2-k/2)+"px")}e(function(){i("")}),o._templateElement=m,o.kill=function(t){t?(o.onClose&&o.$apply(o.onClose(o._templateElement)),g.splice(g.indexOf(o._templateElement),1),o._templateElement.remove(),o.$destroy(),e(l)):o._templateElement.addClass("killed")},e(l),h||(angular.element(r).bind("resize",function(t){e(l)}),h=!0),v.resolve(o)}var v=l.defer();"object"!=typeof s&&(s={message:s}),s.scope=s.scope?s.scope:o,s.template=s.templateUrl?s.templateUrl:c.templateUrl,s.delay=angular.isUndefined(s.delay)?m:s.delay,s.type=C||s.type||c.type||"",s.positionY=s.positionY?s.positionY:c.positionY,s.positionX=s.positionX?s.positionX:c.positionX,s.replaceMessage=s.replaceMessage?s.replaceMessage:c.replaceMessage,s.onClose=s.onClose?s.onClose:c.onClose,s.closeOnClick=null!==s.closeOnClick&&void 0!==s.closeOnClick?s.closeOnClick:c.closeOnClick,s.container=s.container?s.container:c.container;var k=i.get(s.template);return k?y(k):t.get(s.template,{cache:!0}).then(y)["catch"](function(e){throw new Error("Template ("+s.template+") could not be loaded. "+e)}),v.promise};return C.primary=function(e){return this(e,"primary")},C.error=function(e){return this(e,"error")},C.success=function(e){return this(e,"success")},C.info=function(e){return this(e,"info")},C.warning=function(e){return this(e,"warning")},C.clearAll=function(){angular.forEach(g,function(e){e.addClass("killed")})},C}]}),angular.module("ui-notification").run(["$templateCache",function(e){e.put("angular-ui-notification.html",'<div class="ui-notification"><h3 ng-show="title" ng-bind-html="title"></h3><div class="message" ng-bind-html="message"></div></div>')}]);

View File

@@ -0,0 +1,101 @@
var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var csscomb = require('gulp-csscomb');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var rename = require('gulp-rename');
var header = require('gulp-header');
var templateCache = require('gulp-angular-templatecache');
var minifyHtml = require("gulp-minify-html");
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');
var order = require("gulp-order");
var protractor = require("gulp-protractor").protractor;
var pkg = require('./package.json');
var banner = ['/**',
' * <%= pkg.name %> - <%= pkg.description %>',
' * @author <%= pkg.author %>',
' * @version v<%= pkg.version %>',
' * @link <%= pkg.homepage %>',
' * @license <%= pkg.license %>',
' */',
''].join('\n');
// ==== Styles
gulp.task('styles', function() {
gulp.src('src/build.less')
.pipe(less({
strictMath: true
}))
.pipe(csscomb())
.pipe(header(banner, { pkg : pkg }))
.pipe(rename({
basename: 'angular-ui-notification'
}))
.pipe(gulp.dest('dist'))
.pipe(minifyCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(header(banner, { pkg : pkg }))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('demo'));
});
// ====== Templates
gulp.task('templates', function() {
gulp.src(['*.html'], {cwd: 'src'})
.pipe(minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe(templateCache({
module: 'ui-notification'
}))
.pipe(rename('angular-ui-notification.templates.js'))
.pipe(gulp.dest("build"));
});
gulp.task('service', function() {
gulp.src(['src/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(jshint.reporter('fail'))
.pipe(ngAnnotate())
.pipe(addsrc('build/*.js'))
.pipe(order([
'src/*.js',
'build/angular-ui-notification.templates.js'
]))
.pipe(concat('angular-ui-notification.js'))
.pipe(header(banner, { pkg : pkg }))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(header(banner, { pkg : pkg }))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('demo'));
});
// ======
gulp.task('e2eTest', function() {
gulp.src(['./test/**/*_spec.js'])
.pipe(protractor({
configFile: "protractor_conf.js"
}))
.on('error', function(e) {throw e});
});
gulp.task('tests', ['e2eTest']);
gulp.task('build', ['templates', 'service', 'styles']);
gulp.task('deploy', ['build', 'tests']);
gulp.task('default', ['deploy'], function() {});

View File

@@ -0,0 +1,5 @@
/**
* Created by alex_crack on 20.11.15.
*/
require('./dist/angular-ui-notification.js');
module.exports = 'ui-notification';

View File

@@ -0,0 +1,45 @@
{
"name": "angular-ui-notification",
"version": "0.3.5",
"description": "Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animating",
"main": "index.js",
"scripts": {
"update-chromedriver": "./node_modules/protractor/bin/webdriver-manager update",
"test": "gulp tests"
},
"repository": {
"type": "git",
"url": "https://github.com/alexcrack/angular-ui-notification.git"
},
"keywords": [
"angular",
"notification",
"notify",
"bootstrap"
],
"author": "Alex_Crack",
"license": "MIT",
"bugs": {
"url": "https://github.com/alexcrack/angular-ui-notification/issues"
},
"homepage": "https://github.com/alexcrack/angular-ui-notification",
"devDependencies": {
"chromedriver": "^2.14.1",
"gulp": "^3.8.11",
"gulp-add-src": "^0.2.0",
"gulp-angular-templatecache": "^1.5.0",
"gulp-concat": "^2.5.2",
"gulp-csscomb": "^3.0.3",
"gulp-header": "^1.2.2",
"gulp-jshint": "^1.9.2",
"gulp-less": "^3.0.1",
"gulp-minify-css": "^0.5.1",
"gulp-minify-html": "^1.0.0",
"gulp-ng-annotate": "^0.5.2",
"gulp-order": "^1.1.1",
"gulp-protractor": "0.0.12",
"gulp-rename": "^1.2.0",
"gulp-uglify": "^1.1.0",
"protractor": "^1.8.0"
}
}

View File

@@ -0,0 +1,24 @@
// An example configuration file.
exports.config = {
allScriptsTimeout: 99999,
// Do not start a Selenium Standalone sever - only run this using chrome.
//directConnect: true,
//chromeDriver: './node_modules/protractor/selenium/chromedriver',
seleniumArgs: ['-browserTimeout=60'],
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'firefox'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['test/e2e/**/*.spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
}
};

View File

@@ -0,0 +1,4 @@
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
</div>

View File

@@ -0,0 +1,233 @@
angular.module('ui-notification',[]);
angular.module('ui-notification').provider('Notification', function() {
this.options = {
delay: 5000,
startTop: 10,
startRight: 10,
verticalSpacing: 10,
horizontalSpacing: 10,
positionX: 'right',
positionY: 'top',
replaceMessage: false,
templateUrl: 'angular-ui-notification.html',
onClose: undefined,
closeOnClick: true,
maxCount: 0, // 0 - Infinite
container: 'body'
};
this.setOptions = function(options) {
if (!angular.isObject(options)) throw new Error("Options should be an object!");
this.options = angular.extend({}, this.options, options);
};
this.$get = function($timeout, $http, $compile, $templateCache, $rootScope, $injector, $sce, $q, $window) {
var options = this.options;
var startTop = options.startTop;
var startRight = options.startRight;
var verticalSpacing = options.verticalSpacing;
var horizontalSpacing = options.horizontalSpacing;
var delay = options.delay;
var messageElements = [];
var isResizeBound = false;
var notify = function(args, t){
var deferred = $q.defer();
if (typeof args !== 'object' || args === null) {
args = {message:args};
}
args.scope = args.scope ? args.scope : $rootScope;
args.template = args.templateUrl ? args.templateUrl : options.templateUrl;
args.delay = !angular.isUndefined(args.delay) ? args.delay : delay;
args.type = t || args.type || options.type || '';
args.positionY = args.positionY ? args.positionY : options.positionY;
args.positionX = args.positionX ? args.positionX : options.positionX;
args.replaceMessage = args.replaceMessage ? args.replaceMessage : options.replaceMessage;
args.onClose = args.onClose ? args.onClose : options.onClose;
args.closeOnClick = (args.closeOnClick !== null && args.closeOnClick !== undefined) ? args.closeOnClick : options.closeOnClick;
args.container = args.container ? args.container : options.container;
var template=$templateCache.get(args.template);
if(template){
processNotificationTemplate(template);
}else{
// load it via $http only if it isn't default template and template isn't exist in template cache
// cache:true means cache it for later access.
$http.get(args.template,{cache: true})
.then(processNotificationTemplate)
.catch(function(data){
throw new Error('Template ('+args.template+') could not be loaded. ' + data);
});
}
function processNotificationTemplate(template) {
var scope = args.scope.$new();
scope.message = $sce.trustAsHtml(args.message);
scope.title = $sce.trustAsHtml(args.title);
scope.t = args.type.substr(0,1);
scope.delay = args.delay;
scope.onClose = args.onClose;
var reposite = function() {
var j = 0;
var k = 0;
var lastTop = startTop;
var lastRight = startRight;
var lastPosition = [];
for(var i = messageElements.length - 1; i >= 0; i --) {
var element = messageElements[i];
if (args.replaceMessage && i < messageElements.length - 1) {
element.addClass('killed');
continue;
}
var elHeight = parseInt(element[0].offsetHeight);
var elWidth = parseInt(element[0].offsetWidth);
var position = lastPosition[element._positionY+element._positionX];
if ((top + elHeight) > window.innerHeight) {
position = startTop;
k ++;
j = 0;
}
var top = (lastTop = position ? (j === 0 ? position : position + verticalSpacing) : startTop);
var right = lastRight + (k * (horizontalSpacing + elWidth));
element.css(element._positionY, top + 'px');
if (element._positionX == 'center') {
element.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
} else {
element.css(element._positionX, right + 'px');
}
lastPosition[element._positionY+element._positionX] = top + elHeight;
if (options.maxCount > 0 && messageElements.length > options.maxCount && i === 0) {
element.scope().kill(true);
}
j ++;
}
};
var templateElement = $compile(template)(scope);
templateElement._positionY = args.positionY;
templateElement._positionX = args.positionX;
templateElement.addClass(args.type);
var closeEvent = function(e) {
e = e.originalEvent || e;
if (e.type === 'click' || (e.propertyName === 'opacity' && e.elapsedTime >= 1)){
if (scope.onClose) {
scope.$apply(scope.onClose(templateElement));
}
templateElement.remove();
messageElements.splice(messageElements.indexOf(templateElement), 1);
scope.$destroy();
reposite();
}
};
if (args.closeOnClick) {
templateElement.addClass('clickable');
templateElement.bind('click', closeEvent);
}
templateElement.bind('webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd', closeEvent);
if (angular.isNumber(args.delay)) {
$timeout(function() {
templateElement.addClass('killed');
}, args.delay);
}
setCssTransitions('none');
angular.element(document.querySelector(args.container)).append(templateElement);
var offset = -(parseInt(templateElement[0].offsetHeight) + 50);
templateElement.css(templateElement._positionY, offset + "px");
messageElements.push(templateElement);
if(args.positionX == 'center'){
var elWidth = parseInt(templateElement[0].offsetWidth);
templateElement.css('left', parseInt(window.innerWidth / 2 - elWidth / 2) + 'px');
}
$timeout(function(){
setCssTransitions('');
});
function setCssTransitions(value){
['-webkit-transition', '-o-transition', 'transition'].forEach(function(prefix){
templateElement.css(prefix, value);
});
}
scope._templateElement = templateElement;
scope.kill = function(isHard) {
if (isHard) {
if (scope.onClose) {
scope.$apply(scope.onClose(scope._templateElement));
}
messageElements.splice(messageElements.indexOf(scope._templateElement), 1);
scope._templateElement.remove();
scope.$destroy();
$timeout(reposite);
} else {
scope._templateElement.addClass('killed');
}
};
$timeout(reposite);
if (!isResizeBound) {
angular.element($window).bind('resize', function(e) {
$timeout(reposite);
});
isResizeBound = true;
}
deferred.resolve(scope);
}
return deferred.promise;
};
notify.primary = function(args) {
return this(args, 'primary');
};
notify.error = function(args) {
return this(args, 'error');
};
notify.success = function(args) {
return this(args, 'success');
};
notify.info = function(args) {
return this(args, 'info');
};
notify.warning = function(args) {
return this(args, 'warning');
};
notify.clearAll = function() {
angular.forEach(messageElements, function(element) {
element.addClass('killed');
});
};
return notify;
};
});

View File

@@ -0,0 +1,57 @@
@ui-notification-border-radius: 0px;
.ui-notification {
border-radius: @ui-notification-border-radius;
position: fixed;
z-index: 9999;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
width: 300px;
color: @btn-primary-color;
background: @brand-primary;
.transition(all ease 0.5s);
&.clickable {
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
&.killed {
opacity: 0;
.transition(opacity ease 1s);
}
& > h3 {
display: block;
margin: 10px 10px 0 10px;
padding: 0 0 5px 0;
text-align: left;
font-size: @font-size-base;
font-weight: bold;
border-bottom: 1px solid fadeout(@btn-primary-color, 70%);
}
& a {
color: @btn-primary-color;
&:hover {
text-decoration: underline;
}
}
& > .message {
margin: 10px 10px 10px 10px;
}
&.warning {
color: @btn-warning-color;
background: @brand-warning;
}
&.error {
color: @btn-danger-color;
background: @brand-danger;
}
&.success {
color: @btn-success-color;
background: @brand-success;
}
&.info {
color: @btn-info-color;
background: @brand-info;
}
}

View File

@@ -0,0 +1,3 @@
@import "../bower_components/bootstrap/less/variables.less";
@import "../bower_components/bootstrap/less/mixins.less";
@import "angular-ui-notification.less";