Component Notification

dist/public/css/media.css

@@ -97,6 +97,9 @@
     nav .nav-wrapper .brand-logo {
         font-size: 17px;
     }
+    #notification {
+        right: 10px;
+    }
 }
 
 @media (max-width: 380px) {

dist/public/css/style.css

@@ -45,6 +45,13 @@ hr {
 
 /* Custom Styles */
 
+#notification {
+    width: 300px;
+    position: fixed;
+    right: 30px;
+    z-index: 1;
+}
+
 .block-title {
     display: flex;
     align-items: center;

dist/views/index.pug

@@ -6,6 +6,7 @@ include ./assets/templates/header.pug
 main.main-section
   include ./assets/templates/modals/cart.pug
   include ./assets/templates/modals/pay.pug
+  #notification
   .container
     .row
       // Information Block

src/components/items.component.js

@@ -4,9 +4,10 @@ import { insertCount } from "../other/counter";
 import { renderItems } from "../templates/items.template";
 
 export class ItemsComponent extends Component {
-    constructor(id, {loader}) {
+    constructor(id, {loader}, {notification}) {
         super(id);
         this.loader = loader;
+        this.notification = notification;
         this.$el ? this.roster = this.$el.querySelector('#roster') : false;
         if (localStorage.getItem('cart')) {
             this.cart = JSON.parse(localStorage.getItem('cart'));
@@ -99,19 +100,21 @@ function renderObj(obj, context, target) {
             localStorage.setItem('cart', JSON.stringify(context.cart));
             target.classList.add('orange');
             target.querySelector('i').innerHTML = 'close';
-            insertCount('counter', context.cart)     
+            insertCount('counter', context.cart);
+            context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A');     
         } else {
             context.cart.splice(index, 1);
             localStorage.setItem('cart', JSON.stringify(context.cart)); 
             target.classList.remove('orange');
             target.querySelector('i').innerHTML = 'shopping_cart';
-            insertCount('counter', context.cart)      
+            insertCount('counter', context.cart);
         }
     } else {
       context.cart.push(obj);
       localStorage.setItem('cart', JSON.stringify(context.cart));
       target.classList.add('orange');
       target.querySelector('i').innerHTML = 'close';
-      insertCount('counter', context.cart)  
+      insertCount('counter', context.cart);
+      context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A');   
     }
 };

src/components/notification.component.js

@@ -0,0 +1,50 @@
+import { Component } from "../core/component";
+
+export class NotificationComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+
+    notificate(text, color) {
+        const card = document.createElement('div');
+        card.classList.add('card-panel');
+        card.style.backgroundColor = color;
+        card.innerHTML = `<span class="white-text">${text}</span>`;
+        this.$el.innerHTML += card.outerHTML;
+        this.removeNotificate();  
+    }
+
+    removeNotificate() {
+        // Полифилл для IE ^9
+        (function() {
+            var arr = [window.Element, window.CharacterData, window.DocumentType];
+            var args = [];
+          
+            arr.forEach(function (item) {
+              if (item) {
+                args.push(item.prototype);
+              }
+            });
+          
+            (function (arr) {
+              arr.forEach(function (item) {
+                if (item.hasOwnProperty('remove')) {
+                  return;
+                }
+                Object.defineProperty(item, 'remove', {
+                  configurable: true,
+                  enumerable: true,
+                  writable: true,
+                  value: function remove() {
+                    this.parentNode.removeChild(this);
+                  }
+                });
+              });
+            })(args);
+          })();
+
+        setTimeout(() => {
+            this.$el.querySelector('.card-panel').remove();
+        }, 2000)
+    }
+}

src/index.js

@@ -7,12 +7,14 @@ import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
 import { FilterComponent } from "./components/filter.component.js";
 import { CartModal } from "./modals/cart.modal.js";
 import { PayModal } from "./modals/pay.modal.js";
+import { NotificationComponent } from "./components/notification.component.js";
 
 
 const header = new HeaderComponent('header');
 const loader = new LoaderComponent('loader');
 const information = new InformationComponent('information');
-const items = new ItemsComponent('items', {loader});
+const notification = new NotificationComponent('notification');
+const items = new ItemsComponent('items', {loader}, {notification});
 const filter = new FilterComponent('filter', {items});
 const category = new CategoryComponent('category', {items}, {filter});
 const breadcumb = new BreadcrumbComponent('breadcrumb');