Merge pull request #184 from showwin/issue75

Add toast-top-center / issue#75

demo.html

@@ -86,6 +86,12 @@ <h1>toastr</h1>
                         <label class="radio">
                             <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width
                         </label>
+                        <label class="radio">
+                            <input type="radio" name="positions" value="toast-top-center" />Top Center
+                        </label>
+                        <label class="radio">
+                            <input type="radio" name="positions" value="toast-bottom-center" />Bottom Center
+                        </label>
                     </div>
                 </div>
             </div>

tests/unit/toastr-tests.js

@@ -11,7 +11,9 @@
         topRight: 'toast-top-right',
         bottomRight: 'toast-bottom-right',
         bottomLeft: 'toast-bottom-left',
-        topLeft: 'toast-top-left'
+        topLeft: 'toast-top-left',
+        topCenter: 'toast-top-center',
+        bottomCenter: 'toast-bottom-center'
     };
     var sampleMsg = 'I don\'t think they really exist';
     var sampleTitle = 'ROUS';
@@ -497,6 +499,32 @@
         $toast.remove();
         resetContainer();
     });
+    test('Container - position top-center', 1, function () {
+        //Arrange
+        resetContainer();
+        toastr.options.positionClass = positionClasses.topCenter;
+        //Act
+        var $toast = toastr.success(sampleMsg);
+        var $container = toastr.getContainer();
+        //Assert
+        ok($container.hasClass(positionClasses.topCenter), 'Has position top center');
+        //Teardown
+        $toast.remove();
+        resetContainer();
+    });
+    test('Container - position bottom-center', 1, function () {
+        //Arrange
+        resetContainer();
+        toastr.options.positionClass = positionClasses.bottomCenter;
+        //Act
+        var $toast = toastr.success(sampleMsg);
+        var $container = toastr.getContainer();
+        //Assert
+        ok($container.hasClass(positionClasses.bottomCenter), 'Has position bottom center');
+        //Teardown
+        $toast.remove();
+        resetContainer();
+    });
 
     function resetContainer() {
         var $container = toastr.getContainer();

toastr.css

@@ -56,6 +56,16 @@ button.toast-close-button {
   border: 0;
   -webkit-appearance: none;
 }
+.toast-top-center {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-bottom-center {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
 .toast-top-full-width {
   top: 0;
   right: 0;
@@ -131,6 +141,11 @@ button.toast-close-button {
 #toast-container > .toast-warning {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
 }
+#toast-container.toast-top-center > div,
+#toast-container.toast-bottom-center > div {
+  width: 300px;
+  margin: auto;
+}
 #toast-container.toast-top-full-width > div,
 #toast-container.toast-bottom-full-width > div {
   width: 96%;

toastr.less

@@ -87,6 +87,18 @@ button.toast-close-button {
 
 //#endregion
 
+.toast-top-center {
+	top: 0;
+	right: 0;
+	width: 100%;
+}
+
+.toast-bottom-center {
+	bottom: 0;
+	right: 0;
+	width: 100%;
+}
+
 .toast-top-full-width {
 	top: 0;
 	right: 0;
@@ -164,6 +176,12 @@ button.toast-close-button {
 	}
 
 	/*overrides*/
+	&.toast-top-center > div,
+	&.toast-bottom-center > div {
+		width: 300px;
+		margin: auto;
+	}
+
 	&.toast-top-full-width > div,
 	&.toast-bottom-full-width > div {
 		width: 96%;
@@ -229,4 +247,4 @@ button.toast-close-button {
 			width: 25em;
 		}
 	}
-}
+}