#72 Типы и состояния уведомлений

index.html

@@ -120,7 +120,7 @@ <h3>Добавить тег</h3>
   </article>
 
 
-  <div id="notify" class="state active info">
+  <div id="notify" class="state info">
     <h5>Заголовок уведомления</h5>
     <div>
       <p>Текст уведомления из нескольких строк</p>

script.js

@@ -40,7 +40,12 @@
 /** @section INIT */
   $.ready(_ => ui.ready());
   $.ready(function() {
-    UI.notify('Тест','текст').info();
+    setTimeout(_ => {
+      UI.notify('Тест','текст').info()
+        .then(notify => notify.data('Ошибка!', 'текст ошибки').error())
+        .then(notify => notify.data('Процесс!', 'описание действия').process())
+        .then(notify => notify.data('Успех!', 'Ура-ура').success())
+    }, 1000);
   });
 
 })(window, document);

script/ui.js

@@ -42,15 +42,45 @@ class UI {
   }
 
   static notify(header = '', ...text) {
-    return {
-      info() {
-        show();
+    let types = 'info,error,success,process'.split(',');
+
+    let notify = {
+      data(header, ...text) {
+        $('#notify > h5').text(header);
+        $('#notify > div').clear().loop(init, text.length, text);
+        return this;
+      },
+      info(timeout = 5) {
+        return show(timeout);
+      },
+      error(timeout = 5) {
+        return show(timeout, 'error');
+      },
+      success(timeout = 3) {
+        return show(timeout, 'success');
+      },
+      process(timeout = 3) {
+        return show(timeout, 'process');
       }
+    };
+
+    return notify.data(header, ...text);
+
+    function show(timeout = 0, type = 'info') {
+      timeout *= 1e3;
+      $('#notify').addClass('active').removeClass(types).addClass(type);
+      return new Promise(function(resolve, reject) {
+        if (timeout) {
+          setTimeout(_ => {
+            hide();
+            resolve(notify);
+          }, timeout);
+        } else resolve(notify);
+      });
     }
 
-    function show() {
-      $('#notify > h5').text(header);
-      $('#notify > div').clear().loop(init, text.length, text);
+    function hide() {
+      $('#notify').removeClass('active');
     }
 
     function init(index, string) {

style/notify.less

@@ -1,15 +1,54 @@
-#notify {
-  .font(1em);
-  .color(@color-second, @color-black);
-  .edge(@color-accent);
-  .shadow(@shadow-offset, @shadow-offset, @shadow-blur, @color-shadow);
-  width: 320px;
-  min-height: 4em;
-  position: fixed;
-  left: 1em;
-  bottom: 1em;
-  padding: 1em;
-}
-#notify > h5 {
-  .font(1em, bold);
-}
+/** @section основное */
+  #notify {
+    .font(1em);
+    .animate(.3s);
+    color: @color-black;
+    position: fixed;
+    left: 0;
+    bottom: 1em;
+    height: 4em;
+    width: 0;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: none;
+    opacity: 0;
+    .edge;
+  }
+
+/** @section состояния */
+  #notify.active {
+    .shadow(@shadow-offset, @shadow-offset, @shadow-blur, @color-shadow);
+    width: 320px;
+    left: 1em;
+    padding: 1em;
+    min-height: 4em;
+    height: auto;
+    overflow: auto;
+    opacity: 1;
+  }
+
+/** @section типы уведомлений */
+  #notify.error {
+    background: @color-error;
+    .edge(darken(@color-error, 20%));
+  }
+
+  #notify.info {
+    background: @color-second;
+    .edge(@color-accent);
+  }
+
+  #notify.success {
+    background: @color-success;
+    .edge(darken(@color-success, 20%));
+  }
+
+  #notify.process {
+    background: @color-process;
+    .edge(darken(@color-process, 20%));
+  }
+
+/** @section оформление */
+  #notify > h5 {
+    .font(1em, bold);
+  }

style/variables.less

@@ -12,6 +12,11 @@
 @color-shadow: #ccc;
 @color-accent: #03A9F4;
 
+@color-error  : #F9D0C4;
+@color-info   : @color-second;
+@color-success: #C2E0C6;
+@color-process: #DEF2F0;
+
 @darkPrimaryColor:   #1976D2;
 @primaryColor:       #2196F3;
 @lightPrimaryColor:  #BBDEFB;