materialize file structure

config/server.js

@@ -39,7 +39,7 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t
     require('./routes/admin')(server, db);
 
     // 404 Redirect
-    server.use((req, res) => res.status(404).render('404'));
+    server.use((req, res) => res.status(404).render('main/404'));
     server.listen(3000, () => console.log('Listen port 3000...'));          
 })
 

dist/public/js/config/admin.materialize.config.js

@@ -1,46 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    // Closest полифилл для ie11
-    (function() {
-        if (!Element.prototype.closest) {
-          Element.prototype.closest = function(css) {
-            var node = this;
-      
-            while (node) {
-              if (node.matches(css)) return node;
-              else node = node.parentElement;
-            }
-            return null;
-          };
-        }
-    })();
-    // Matches полифилл для ie11
-    (function() {
-        if (!Element.prototype.matches) {
-          Element.prototype.matches = Element.prototype.matchesSelector ||
-            Element.prototype.webkitMatchesSelector ||
-            Element.prototype.mozMatchesSelector ||
-            Element.prototype.msMatchesSelector;
-        }
-      })()
-    
-    M.Sidenav.init(document.querySelectorAll('.sidenav'));
-    M.Collapsible.init(document.querySelectorAll('.collapsible'));
-    M.Modal.init(document.querySelectorAll('.modal'));
-    M.updateTextFields();
-
-    // Окраска li по нажатию
-    if (document.querySelector('#currentPage')) {
-      const currentPage = document.querySelector('#currentPage').dataset.current;
-      const pages = Array.from(document.querySelectorAll('.collapsible li'));
-      pages.forEach(function (page) {
-          if (page.dataset.page) {
-              if (currentPage === page.dataset.page) {
-                  document.querySelector('#dashboard').classList.remove('active');
-                  page.classList.add('active');
-                  const collapse = M.Collapsible.getInstance(page.closest('.collapsible'));
-                  collapse.open();
-              }
-          }
-      });
-    }
-});

dist/public/js/config/main.materialize.config.js

@@ -1,4 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-    M.Sidenav.init(document.querySelectorAll('.sidenav'))
-    M.FormSelect.init(document.querySelectorAll('select'))
-});

dist/views/admin/assets/scripts.pug

@@ -1,6 +1,3 @@
-script(async defer src="https://buttons.github.io/buttons.js")                   
-// Maretialize JS
-script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')                
+script(async defer src="https://buttons.github.io/buttons.js")                                  
 //script(src='../js/admin.js')
-script(src="http://localhost:8080/admin.js")
-script(src='../js/config/admin.materialize.config.js')
+script(src="http://localhost:8080/admin.js")

dist/views/main/assets/scripts.pug

@@ -1,6 +1,3 @@
-// Maretialize JS
-script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
 // Script JS
 //script(src='../js/main.js')
-script(src='http://localhost:8080/main.js')
-script(src='../js/config/main.materialize.config.js')
+script(src='http://localhost:8080/main.js')

package-lock.json

@@ -4573,6 +4573,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "materialize-css": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
+      "integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --mode development",
-    "dev-server": "node ./config/server.js",
+    "server": "node ./config/server.js",
     "wp-server": "webpack-dev-server --mode development"
   },
   "repository": {
@@ -26,6 +26,7 @@
     "express": "^4.17.1",
     "express-flash": "0.0.2",
     "express-session": "^1.17.0",
+    "materialize-css": "^1.0.0",
     "method-override": "^3.0.0",
     "mongodb": "^3.3.4",
     "passport": "^0.4.0",

src/admin/config/materialize.config.js

@@ -0,0 +1,51 @@
+const M = require('materialize-css');
+export class MaterializeConfig {
+    constructor() {
+        document.addEventListener('DOMContentLoaded', function () {
+            // Closest полифилл для ie11
+            (function() {
+                if (!Element.prototype.closest) {
+                  Element.prototype.closest = function(css) {
+                    var node = this;
+              
+                    while (node) {
+                      if (node.matches(css)) return node;
+                      else node = node.parentElement;
+                    }
+                    return null;
+                  };
+                }
+            })();
+            // Matches полифилл для ie11
+            (function() {
+                if (!Element.prototype.matches) {
+                  Element.prototype.matches = Element.prototype.matchesSelector ||
+                    Element.prototype.webkitMatchesSelector ||
+                    Element.prototype.mozMatchesSelector ||
+                    Element.prototype.msMatchesSelector;
+                }
+              })()
+            
+            M.Sidenav.init(document.querySelectorAll('.sidenav'));
+            M.Collapsible.init(document.querySelectorAll('.collapsible'));
+            M.Modal.init(document.querySelectorAll('.modal'));
+            M.updateTextFields();
+        
+            // Окраска li по нажатию
+            if (document.querySelector('#currentPage')) {
+              const currentPage = document.querySelector('#currentPage').dataset.current;
+              const pages = Array.from(document.querySelectorAll('.collapsible li'));
+              pages.forEach(function (page) {
+                  if (page.dataset.page) {
+                      if (currentPage === page.dataset.page) {
+                          document.querySelector('#dashboard').classList.remove('active');
+                          page.classList.add('active');
+                          const collapse = M.Collapsible.getInstance(page.closest('.collapsible'));
+                          collapse.open();
+                      }
+                  }
+              });
+            }
+        });        
+    }
+}

src/admin/core/component.js

@@ -0,0 +1,20 @@
+export class Component {
+    constructor(id) {
+        this.$el = document.getElementById(id);
+        this.init();
+    }
+
+    init() {}
+
+    onShow() {}
+
+    onHide() {}
+
+    hide() {
+        this.$el ? this.$el.classList.add('hide') : false
+    }
+    
+    show() {
+        this.$el ? this.$el.classList.remove('hide') : false
+    }
+}

src/admin/core/modal.js

@@ -0,0 +1,33 @@
+export class Modal {
+    constructor(id, open, close) {
+        this.$el = document.getElementById(id);
+        this.open = document.getElementById(open);
+        this.close = document.getElementById(close);
+        this.init();
+    }
+
+    init() {
+        if (this.open != null) {
+            this.open.addEventListener('click', openHandler.bind(this));
+            this.close.addEventListener('click', closeHandler.bind(this));
+        }
+    }
+
+    show() {
+        this.$el.classList.remove('hide');
+        document.body.style.overflowY = 'hidden';
+    }
+
+    hide() {
+        this.$el.classList.add('hide');
+        document.body.style.overflowY = '';
+    }
+}
+
+function openHandler() {
+    this.show();
+}
+
+function closeHandler() {
+    this.hide();
+}

src/admin/index.js

@@ -1 +1,4 @@
+import { MaterializeConfig } from "./config/materialize.config.js";
+
+const materialize = new MaterializeConfig();
 console.log('Control-Panel v1.0.0');

src/main/config/materialize.config.js

@@ -0,0 +1,9 @@
+const M = require('materialize-css');
+export class MaterializeConfig {
+    constructor() {
+        document.addEventListener('DOMContentLoaded', function () {
+            M.Sidenav.init(document.querySelectorAll('.sidenav'))
+            M.FormSelect.init(document.querySelectorAll('select'))
+        });
+    }
+}

src/main/index.js

@@ -8,6 +8,7 @@ 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";
+import { MaterializeConfig } from "./config/materialize.config.js";
 
 
 const header = new HeaderComponent('header');
@@ -20,4 +21,5 @@ const category = new CategoryComponent('category', {items}, {filter});
 const breadcumb = new BreadcrumbComponent('breadcrumb');
 const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});
 const pay = new PayModal('pay', 'pay-js', 'payClose');
+const materialize = new MaterializeConfig();
 console.log('Main Page');