#72 Показ уведомлений на сайте

index.html

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

script.js

@@ -39,5 +39,13 @@
 
 /** @section INIT */
   $.ready(_ => ui.ready());
+  $.ready(function() {
+    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

@@ -40,6 +40,53 @@ class UI {
   static value(input) { // ?
     return $(input).value();
   }
+
+  static notify(header = '', ...text) {
+    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 hide() {
+      $('#notify').removeClass('active');
+    }
+
+    function init(index, string) {
+      this.add('p').text(string);
+    }
+  }
 }
 
 class Controller {

style.less

@@ -103,3 +103,4 @@ input.splash { display: none;
 #layer-editor-toggle:checked ~ #splash > label[for="layer-editor-toggle"] { display: block; }
 
 @import "style/control.less";
+@import "style/notify.less";

style/notify.less

@@ -0,0 +1,54 @@
+/** @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;