From b17ea5b66f659d72d312ee4a06b2a872f0afdce1 Mon Sep 17 00:00:00 2001
From: Rita Ibragimova <xaota@users.noreply.github.com>
Date: Wed, 19 Jul 2017 01:34:37 +0500
Subject: [PATCH] =?UTF-8?q?#72=20=D0=A2=D0=B8=D0=BF=D1=8B=20=D0=B8=20?=
 =?UTF-8?q?=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D1=8F=20=D1=83?=
 =?UTF-8?q?=D0=B2=D0=B5=D0=B4=D0=BE=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html           |  2 +-
 script.js            |  7 ++++-
 script/ui.js         | 42 +++++++++++++++++++++++----
 style/notify.less    | 69 ++++++++++++++++++++++++++++++++++----------
 style/variables.less |  5 ++++
 5 files changed, 102 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index aea1c98..45a16fa 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index 5624843..d9ac6a9 100644
--- a/script.js
+++ b/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);
diff --git a/script/ui.js b/script/ui.js
index ab45bff..e890170 100644
--- a/script/ui.js
+++ b/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) {
diff --git a/style/notify.less b/style/notify.less
index 253de68..a62ea4a 100644
--- a/style/notify.less
+++ b/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);
+  }
diff --git a/style/variables.less b/style/variables.less
index d50f18f..948907e 100644
--- a/style/variables.less
+++ b/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;