diff --git a/README.md b/README.md index 1b63bc1..064d8ae 100755 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ The `notify` function can either be passed a string or an object. When passing * `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 ``). * `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` and `right` are the only acceptable values. +* `position` - Optional. `center`, `left` 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. @@ -59,7 +59,7 @@ Call `config` to set the default configuration options for angular-notify. The * `startTop` - The Y pixel value where messages will be shown. * `verticalSpacing` - The number of pixels that should be reserved between messages vertically. * `templateUrl` - The default message template. -* `position` - The default position of each message. Currently only `center` and `right` are the supported values. +* `position` - The default position of each message. `center`, `left` and `right` are the supported values. * `container` - The default element that contains each notification. Defaults to `document.body`. ### notify.closeAll() diff --git a/angular-notify.css b/angular-notify.css index 66e56e8..ec993f9 100755 --- a/angular-notify.css +++ b/angular-notify.css @@ -1,6 +1,5 @@ .cg-notify-message { position:fixed; - left:50%; top:0px; z-index: 9999; max-width:400px; @@ -23,6 +22,18 @@ box-shadow: 0 6px 12px rgba(0,0,0,.175); } +.cg-notify-message-center { + left:50%; +} + +.cg-notify-message-left { + left:15px; +} + +.cg-notify-message-right { + right:15px; +} + .cg-notify-message a { font-weight:bold; color:inherit; diff --git a/angular-notify.html b/angular-notify.html index b8c320c..5a8bbd9 100755 --- a/angular-notify.html +++ b/angular-notify.html @@ -1,4 +1,8 @@ -
+
{{$message}} diff --git a/angular-notify.js b/angular-notify.js index ebe2588..7352abf 100755 --- a/angular-notify.js +++ b/angular-notify.js @@ -17,11 +17,11 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile',' } 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.$position = args.position ? args.position : position; scope.$message = args.message; scope.$classes = args.classes; scope.$messageTemplate = args.messageTemplate; @@ -57,9 +57,9 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile',' angular.element(args.container).append(templateElement); messageElements.push(templateElement); - if (args.position === 'center'){ + if (scope.$position === 'center'){ $timeout(function(){ - templateElement.css('margin-left','-' + (templateElement[0].offsetWidth /2) + 'px'); + scope.$centerMargin = '-' + (templateElement[0].offsetWidth /2) + 'px'; }); } diff --git a/demo/demo.js b/demo/demo.js index cbdc439..271d0b6 100755 --- a/demo/demo.js +++ b/demo/demo.js @@ -5,11 +5,15 @@ angular.module('app').controller('DemoCtrl',function($scope,notify){ $scope.msg = 'Hello! This is a sample message!'; $scope.template = ''; + $scope.positions = ['center', 'left', 'right']; + $scope.position = $scope.positions[0]; + $scope.demo = function(){ notify({ message: $scope.msg, classes: $scope.classes, - templateUrl: $scope.template + templateUrl: $scope.template, + position: $scope.position, }); }; @@ -26,7 +30,8 @@ angular.module('app').controller('DemoCtrl',function($scope,notify){ messageTemplate: messageTemplate, classes: $scope.classes, scope:$scope, - templateUrl: $scope.template + templateUrl: $scope.template, + position: $scope.position, }); }; diff --git a/demo/index.html b/demo/index.html index c363e64..ba69040 100755 --- a/demo/index.html +++ b/demo/index.html @@ -40,6 +40,13 @@

angular-notify

+
+ +
+ +
+
diff --git a/dist/angular-notify.css b/dist/angular-notify.css index 66e56e8..ec993f9 100644 --- a/dist/angular-notify.css +++ b/dist/angular-notify.css @@ -1,6 +1,5 @@ .cg-notify-message { position:fixed; - left:50%; top:0px; z-index: 9999; max-width:400px; @@ -23,6 +22,18 @@ box-shadow: 0 6px 12px rgba(0,0,0,.175); } +.cg-notify-message-center { + left:50%; +} + +.cg-notify-message-left { + left:15px; +} + +.cg-notify-message-right { + right:15px; +} + .cg-notify-message a { font-weight:bold; color:inherit; diff --git a/dist/angular-notify.js b/dist/angular-notify.js index 7675820..c4ab1a3 100644 --- a/dist/angular-notify.js +++ b/dist/angular-notify.js @@ -17,11 +17,11 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile',' } 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.$position = args.position ? args.position : position; scope.$message = args.message; scope.$classes = args.classes; scope.$messageTemplate = args.messageTemplate; @@ -57,9 +57,9 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile',' angular.element(args.container).append(templateElement); messageElements.push(templateElement); - if (args.position === 'center'){ + if (scope.$position === 'center'){ $timeout(function(){ - templateElement.css('margin-left','-' + (templateElement[0].offsetWidth /2) + 'px'); + scope.$centerMargin = '-' + (templateElement[0].offsetWidth /2) + 'px'; }); } @@ -145,7 +145,11 @@ angular.module('cgNotify').run(['$templateCache', function($templateCache) { 'use strict'; $templateCache.put('angular-notify.html', - "
\n" + + "
\n" + "\n" + "
\n" + " {{$message}}\n" + diff --git a/dist/angular-notify.min.css b/dist/angular-notify.min.css index 530c3c0..f6420d5 100644 --- a/dist/angular-notify.min.css +++ b/dist/angular-notify.min.css @@ -1 +1 @@ -.cg-notify-message{position:fixed;left:50%;top:0;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 .5s ease-out,opacity .2s ease-out;-moz-transition:top .5s ease-out,opacity .2s ease-out;-o-transition:top .5s ease-out,opacity .2s ease-out;transition:top .5s ease-out,opacity .2s ease-out;visibility:hidden;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.cg-notify-message a{font-weight:700;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;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2;position:absolute;top:0;right:3px;line-height:15px}.cg-notify-close:focus,.cg-notify-close:hover{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} \ No newline at end of file +.cg-notify-message{position:fixed;top:0;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 .5s ease-out,opacity .2s ease-out;-moz-transition:top .5s ease-out,opacity .2s ease-out;-o-transition:top .5s ease-out,opacity .2s ease-out;transition:top .5s ease-out,opacity .2s ease-out;visibility:hidden;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.cg-notify-message-center{left:50%}.cg-notify-message-left{left:15px}.cg-notify-message-right{right:15px}.cg-notify-message a{font-weight:700;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;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2;position:absolute;top:0;right:3px;line-height:15px}.cg-notify-close:focus,.cg-notify-close:hover{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} \ No newline at end of file diff --git a/dist/angular-notify.min.js b/dist/angular-notify.min.js index 5d950ba..5aa705b 100644 --- a/dist/angular-notify.min.js +++ b/dist/angular-notify.min.js @@ -1 +1 @@ -angular.module("cgNotify",[]).factory("notify",["$timeout","$http","$compile","$templateCache","$rootScope",function(a,b,c,d,e){var f=10,g=15,h=1e4,i="angular-notify.html",j="center",k=document.body,l=[],m=function(m){"object"!=typeof m&&(m={message:m}),m.templateUrl=m.templateUrl?m.templateUrl:i,m.position=m.position?m.position:j,m.container=m.container?m.container:k,m.classes=m.classes?m.classes:"";var n=m.scope?m.scope.$new():e.$new();n.$message=m.message,n.$classes=m.classes,n.$messageTemplate=m.messageTemplate,b.get(m.templateUrl,{cache:d}).success(function(b){var d=c(b)(n);if(d.bind("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",function(a){("opacity"===a.propertyName||0===a.currentTarget.style.opacity||a.originalEvent&&"opacity"===a.originalEvent.propertyName)&&(d.remove(),l.splice(l.indexOf(d),1),j())}),m.messageTemplate){for(var e,i=0;i=0;c--){var d=10,e=l[c],h=e[0].offsetHeight,i=b+h+d;e.attr("data-closing")?i+=20:b+=h+g,e.css("top",i+"px").css("margin-top","-"+(h+d)+"px").css("visibility","visible"),a++}};a(function(){j()}),h>0&&a(function(){n.$close()},h)}).error(function(a){throw new Error("Template specified for cgNotify ("+m.templateUrl+") could not be loaded. "+a)});var o={};return o.close=function(){n.$close&&n.$close()},Object.defineProperty(o,"message",{get:function(){return n.$message},set:function(a){n.$message=a}}),o};return m.config=function(a){f=angular.isUndefined(a.startTop)?f:a.startTop,g=angular.isUndefined(a.verticalSpacing)?g:a.verticalSpacing,h=angular.isUndefined(a.duration)?h:a.duration,i=a.templateUrl?a.templateUrl:i,j=angular.isUndefined(a.position)?j:a.position,k=a.container?a.container:k},m.closeAll=function(){for(var a=l.length-1;a>=0;a--){var b=l[a];b.css("opacity",0)}},m}]),angular.module("cgNotify").run(["$templateCache",function(a){"use strict";a.put("angular-notify.html",'
\n\n
\n {{$message}}\n
\n\n
\n \n
\n\n \n\n
')}]); \ No newline at end of file +angular.module("cgNotify",[]).factory("notify",["$timeout","$http","$compile","$templateCache","$rootScope",function(a,b,c,d,e){var f=10,g=15,h=1e4,i="angular-notify.html",j="center",k=document.body,l=[],m=function(m){"object"!=typeof m&&(m={message:m}),m.templateUrl=m.templateUrl?m.templateUrl:i,m.container=m.container?m.container:k,m.classes=m.classes?m.classes:"";var n=m.scope?m.scope.$new():e.$new();n.$position=m.position?m.position:j,n.$message=m.message,n.$classes=m.classes,n.$messageTemplate=m.messageTemplate,b.get(m.templateUrl,{cache:d}).success(function(b){var d=c(b)(n);if(d.bind("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd",function(a){("opacity"===a.propertyName||0===a.currentTarget.style.opacity||a.originalEvent&&"opacity"===a.originalEvent.propertyName)&&(d.remove(),l.splice(l.indexOf(d),1),j())}),m.messageTemplate){for(var e,i=0;i=0;c--){var d=10,e=l[c],h=e[0].offsetHeight,i=b+h+d;e.attr("data-closing")?i+=20:b+=h+g,e.css("top",i+"px").css("margin-top","-"+(h+d)+"px").css("visibility","visible"),a++}};a(function(){j()}),h>0&&a(function(){n.$close()},h)}).error(function(a){throw new Error("Template specified for cgNotify ("+m.templateUrl+") could not be loaded. "+a)});var o={};return o.close=function(){n.$close&&n.$close()},Object.defineProperty(o,"message",{get:function(){return n.$message},set:function(a){n.$message=a}}),o};return m.config=function(a){f=angular.isUndefined(a.startTop)?f:a.startTop,g=angular.isUndefined(a.verticalSpacing)?g:a.verticalSpacing,h=angular.isUndefined(a.duration)?h:a.duration,i=a.templateUrl?a.templateUrl:i,j=angular.isUndefined(a.position)?j:a.position,k=a.container?a.container:k},m.closeAll=function(){for(var a=l.length-1;a>=0;a--){var b=l[a];b.css("opacity",0)}},m}]),angular.module("cgNotify").run(["$templateCache",function(a){"use strict";a.put("angular-notify.html","
\n\n
\n {{$message}}\n
\n\n"+'
\n \n
\n\n \n\n
')}]); \ No newline at end of file