From 1c50a75f423afc807adcf2142abc732a5bfa49d5 Mon Sep 17 00:00:00 2001
From: Vadim Costin <vadim.costin@yopeso.com>
Date: Wed, 1 Jul 2015 15:25:00 +0300
Subject: [PATCH] add stackable nodifications in LSG

---
 .../stylesheets/content/_notifications.lsg    | 56 +++++++++++++++++++
 .../stylesheets/content/_notifications.sass   |  7 +++
 2 files changed, 63 insertions(+)

diff --git a/app/assets/stylesheets/content/_notifications.lsg b/app/assets/stylesheets/content/_notifications.lsg
index 5aefdf30c3..2c10ae4622 100644
--- a/app/assets/stylesheets/content/_notifications.lsg
+++ b/app/assets/stylesheets/content/_notifications.lsg
@@ -46,3 +46,59 @@
   </div>
 </div>
 ```
+
+## Stackable
+
+
+```
+<div class="example" id="example-zx00x">
+  <div class="controls">
+    <button class="button stuck-message" id="test-notifier">click</button>
+  </div>
+  <div class="content" style="height: 200px;"></div>
+</div>
+
+<script type="text\template" id="warning-message-zx00x">
+  <div class="notification-box -warning -stack-top-center">
+    <a href="#" class="notification-box--close">&times;</a>
+    <div class="notification-box--content">
+      <p>This is a warning. You may ignore it, but bad things might happen. notificationNo {{number}}</p>
+    </div>
+  </div>
+</script>
+```
+
+```
+@javascript
+(function($){
+
+  var workArea = $('#example-zx00x');
+  var viewArea = workArea.find('.content');
+  var notificationMessageTemplate = {
+    notificationNumber: 0,
+    printNotification: function(){
+      this.notificationNumber++;
+      return $('#warning-message-zx00x').html()
+        .replace(/{{number}}/g, this.notificationNumber);
+    }
+  };
+
+  $('#test-notifier').on('click', function(e){
+    e.preventDefault();
+    viewArea.prepend(notificationMessageTemplate.printNotification());
+  });
+
+  $(document).on('click', '.notification-box--close', function(e){
+    e.preventDefault();
+    $(this).closest('.notification-box').animate({
+                'padding-top': 0,
+                'padding-bottom': 0,
+                'height': 0,
+                'opacity': 0
+            }, 300, function() {
+                $(this).remove();
+            });
+  });
+
+})(jQuery);
+```
diff --git a/app/assets/stylesheets/content/_notifications.sass b/app/assets/stylesheets/content/_notifications.sass
index 4c5409b192..4e07dae6a0 100644
--- a/app/assets/stylesheets/content/_notifications.sass
+++ b/app/assets/stylesheets/content/_notifications.sass
@@ -81,6 +81,13 @@ $nm-padding-default-box: rem-calc(10px)
   background-color: $nm-color-default-background
   color: $nm-font-color
 
+  &.-stack-top-center
+    margin-left: auto
+    margin-right: auto
+    left: 0
+    right: 0
+    z-index: 9999
+
   & .button
     margin: rem-calc(10px 10px 0 0)