Component Header

config/routes/routes.js

@@ -1,27 +1,37 @@
 const routes = {
     // Index
     indexRoute: function(req, res) {
-        res.render('index');
+        res.render('index', {
+            pageName: 'index'
+        });
     }, 
 
     // How-to-buy
     howToBuyRoute: function(req, res) {
-        res.render('how-to-buy');
+        res.render('how-to-buy', {
+            pageName: 'how-to-buy'
+        });
     },
 
     // Contacts
     contactsRoute: function(req, res) {
-        res.render('contacts');
+        res.render('contacts', {
+            pageName: 'contacts'
+        });
     },
 
     // Comments
     commentsRoute: function(req, res) {
-        res.render('comments');
+        res.render('comments', {
+            pageName: 'comments'
+        });
     },
     
     // My-orders
     myOrdersRoute: function(req, res) {
-        res.render('my-orders');
+        res.render('my-orders', {
+            pageName: 'my-orders'
+        });
     }
 }
 

dist/public/js/bundle.js

@@ -3553,14 +3553,39 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
 
 /***/ }),
 
+/***/ "./src/js/components/header.component.js":
+/*!***********************************************!*\
+  !*** ./src/js/components/header.component.js ***!
+  \***********************************************/
+/*! exports provided: HeaderComponent */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"HeaderComponent\", function() { return HeaderComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\nvar HeaderComponent =\n/*#__PURE__*/\nfunction (_Component) {\n  _inherits(HeaderComponent, _Component);\n\n  function HeaderComponent(id) {\n    _classCallCheck(this, HeaderComponent);\n\n    return _possibleConstructorReturn(this, _getPrototypeOf(HeaderComponent).call(this, id));\n  }\n\n  _createClass(HeaderComponent, [{\n    key: \"init\",\n    value: function init() {\n      var currentPage = this.$el.querySelector('#desktop-nav');\n      var pages = Array.from(this.$el.querySelectorAll('#page'));\n      pages.forEach(function (li) {\n        return li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false;\n      });\n    }\n  }]);\n\n  return HeaderComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/components/header.component.js?");
+
+/***/ }),
+
+/***/ "./src/js/core/component.js":
+/*!**********************************!*\
+  !*** ./src/js/core/component.js ***!
+  \**********************************/
+/*! exports provided: Component */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Component\", function() { return Component; });\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nvar Component =\n/*#__PURE__*/\nfunction () {\n  function Component(id) {\n    _classCallCheck(this, Component);\n\n    this.$el = document.getElementById(id);\n    this.init();\n  }\n\n  _createClass(Component, [{\n    key: \"init\",\n    value: function init() {}\n  }]);\n\n  return Component;\n}();\n\n//# sourceURL=webpack:///./src/js/core/component.js?");
+
+/***/ }),
+
 /***/ "./src/js/index.js":
 /*!*************************!*\
   !*** ./src/js/index.js ***!
   \*************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-eval("console.log('Js working');\n\n//# sourceURL=webpack:///./src/js/index.js?");
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component */ \"./src/js/components/header.component.js\");\n\nnew _components_header_component__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\n\n//# sourceURL=webpack:///./src/js/index.js?");
 
 /***/ }),
 

dist/views/assets/templates/header.pug

@@ -1,4 +1,5 @@
-header
+- var currentPage = pageName;
+header#header
   nav
     // Menu-Mobile Button 
     a.sidenav-trigger(href='#' data-target='slide-out')
@@ -7,40 +8,40 @@ header
       a.brand-logo.waves-effect.waves-light(href='/')
         i.material-icons shop_two
         span#header-title Digital Store
-      ul.right.hide-on-med-and-down
-        li.active
+      ul#desktop-nav.right.hide-on-med-and-down(data-current=currentPage)
+        li#page(data-page='index')
           a(href='/') Главная
-        li
+        li#page(data-page='how-to-buy')
           a(href='/how-to-buy') Как купить товар
-        li
+        li#page(data-page='contacts')
           a(href='/contacts') Контакты
-        li
+        li#page(data-page='comments')
           a(href='/comments') Отзывы
-        li
+        li#page(data-page='my-orders')
           a(href='/my-orders') Мои покупки
   // Menu-Mobile Content 
-  ul#slide-out.sidenav
+  ul#slide-out.sidenav.mobile-nav
     li
       a.subheader Навигация
     li
       .divider
-    li
+    li#page(data-page='index')
       a(href='/')
         i.material-icons home
         | Главная
-    li
+    li#page(data-page='how-to-buy')
       a(href='/how-to-buy')
         i.material-icons info
         | Как купить товар
-    li
+    li#page(data-page='contacts')
       a(href='/contacts')
         i.material-icons contact_support
         | Контакты
-    li
+    li#page(data-page='comments')
       a(href='/comments')
         i.material-icons comment
         | Отзывы
-    li
+    li#page(data-page='my-orders')
       a(href='/my-orders')
         i.material-icons shopping_cart
         | Мои покупки

src/js/components/header.component.js

@@ -0,0 +1,13 @@
+import { Component } from "../core/component";
+
+export class HeaderComponent extends Component {
+    constructor(id) {
+        super(id);
+    }
+
+    init() {
+        const currentPage = this.$el.querySelector('#desktop-nav');
+        const pages = Array.from(this.$el.querySelectorAll('#page'));
+        pages.forEach(li => li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false);
+    }
+}

src/js/core/component.js

@@ -0,0 +1,8 @@
+export class Component {
+    constructor(id) {
+        this.$el = document.getElementById(id);
+        this.init();
+    }
+
+    init() {}
+}

src/js/index.js

@@ -1 +1,3 @@
-console.log('Js working');
+import { HeaderComponent } from "./components/header.component";
+
+new HeaderComponent('header');