Merge pull request #18 from snrlx/positioning

Improved positioning

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 `<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` 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()

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;

angular-notify.html

@@ -1,4 +1,8 @@
-<div class="cg-notify-message" ng-class="$classes">
+<div class="cg-notify-message" ng-class="[$classes, 
+$position === 'center' ? 'cg-notify-message-center' : '',
+$position === 'left' ? 'cg-notify-message-left' : '',
+$position === 'right' ? 'cg-notify-message-right' : '']"
+ng-style="{'margin-left': $centerMargin}">
 
     <div ng-show="!$messageTemplate">
         {{$message}}

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';
                     });
                 }
 

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,
         });       
 
     };

demo/index.html

@@ -40,6 +40,13 @@ <h2>angular-notify</h2>
                 <input type="text" class="form-control" id="msg" placeholder="Message" ng-model="msg">
               </div>
             </div>       
+            <div class="form-group">
+              <label for="position" class="col-sm-4 control-label">Position</label>
+              <div class="col-sm-8">
+                <select class="form-control" ng-model="position" ng-options="p for p in positions">
+                </select>
+              </div>
+            </div>  
             <div class="form-group">
               <label for="clz" class="col-sm-4 control-label">CSS Class</label>
               <div class="col-sm-8">

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;

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',
-    "<div class=\"cg-notify-message\" ng-class=\"$classes\">\n" +
+    "<div class=\"cg-notify-message\" ng-class=\"[$classes, \n" +
+    "$position === 'center' ? 'cg-notify-message-center' : '',\n" +
+    "$position === 'left' ? 'cg-notify-message-left' : '',\n" +
+    "$position === 'right' ? 'cg-notify-message-right' : '']\"\n" +
+    "ng-style=\"{'margin-left': $centerMargin}\">\n" +
     "\n" +
     "    <div ng-show=\"!$messageTemplate\">\n" +
     "        {{$message}}\n" +