From b18e2588ba6b77aa88b0b8177fd59d1bdcdbc8a2 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 14 Dec 2019 13:08:39 +0300 Subject: [PATCH] materialize file structure --- config/server.js | 2 +- .../js/config/admin.materialize.config.js | 46 ----------------- .../js/config/main.materialize.config.js | 4 -- dist/views/admin/assets/scripts.pug | 7 +-- dist/views/main/assets/scripts.pug | 5 +- package-lock.json | 5 ++ package.json | 3 +- src/admin/config/materialize.config.js | 51 +++++++++++++++++++ src/admin/core/component.js | 20 ++++++++ src/admin/core/modal.js | 33 ++++++++++++ src/admin/index.js | 3 ++ src/main/config/materialize.config.js | 9 ++++ src/main/index.js | 2 + 13 files changed, 129 insertions(+), 61 deletions(-) delete mode 100644 dist/public/js/config/admin.materialize.config.js delete mode 100644 dist/public/js/config/main.materialize.config.js create mode 100644 src/admin/config/materialize.config.js create mode 100644 src/admin/core/component.js create mode 100644 src/admin/core/modal.js create mode 100644 src/main/config/materialize.config.js diff --git a/config/server.js b/config/server.js index e3d906a..7158e60 100644 --- a/config/server.js +++ b/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...')); }) diff --git a/dist/public/js/config/admin.materialize.config.js b/dist/public/js/config/admin.materialize.config.js deleted file mode 100644 index a994647..0000000 --- a/dist/public/js/config/admin.materialize.config.js +++ /dev/null @@ -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(); - } - } - }); - } -}); diff --git a/dist/public/js/config/main.materialize.config.js b/dist/public/js/config/main.materialize.config.js deleted file mode 100644 index c41fe7e..0000000 --- a/dist/public/js/config/main.materialize.config.js +++ /dev/null @@ -1,4 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - M.Sidenav.init(document.querySelectorAll('.sidenav')) - M.FormSelect.init(document.querySelectorAll('select')) -}); \ No newline at end of file diff --git a/dist/views/admin/assets/scripts.pug b/dist/views/admin/assets/scripts.pug index 8bba6f1..62f9b70 100644 --- a/dist/views/admin/assets/scripts.pug +++ b/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') \ No newline at end of file +script(src="http://localhost:8080/admin.js") \ No newline at end of file diff --git a/dist/views/main/assets/scripts.pug b/dist/views/main/assets/scripts.pug index 07a564b..b361378 100644 --- a/dist/views/main/assets/scripts.pug +++ b/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') \ No newline at end of file +script(src='http://localhost:8080/main.js') \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index de93a39..3c6d094 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4f46788..76edced 100644 --- a/package.json +++ b/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", diff --git a/src/admin/config/materialize.config.js b/src/admin/config/materialize.config.js new file mode 100644 index 0000000..f4ff5a2 --- /dev/null +++ b/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(); + } + } + }); + } + }); + } +} \ No newline at end of file diff --git a/src/admin/core/component.js b/src/admin/core/component.js new file mode 100644 index 0000000..f4cf53e --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/admin/core/modal.js b/src/admin/core/modal.js new file mode 100644 index 0000000..1c54ed1 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/src/admin/index.js b/src/admin/index.js index b6f7e57..fef763e 100644 --- a/src/admin/index.js +++ b/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'); \ No newline at end of file diff --git a/src/main/config/materialize.config.js b/src/main/config/materialize.config.js new file mode 100644 index 0000000..69f7526 --- /dev/null +++ b/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')) + }); + } +} \ No newline at end of file diff --git a/src/main/index.js b/src/main/index.js index 9c63177..066af1f 100644 --- a/src/main/index.js +++ b/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'); \ No newline at end of file