client/views: extract empty view
...so that UsersController doesn't mess with DOM.
This commit is contained in:
parent
8e525b48a6
commit
5053598a13
|
@ -9,11 +9,13 @@ const views = require('../util/views.js');
|
||||||
const topNavController = require('../controllers/top_nav_controller.js');
|
const topNavController = require('../controllers/top_nav_controller.js');
|
||||||
const RegistrationView = require('../views/registration_view.js');
|
const RegistrationView = require('../views/registration_view.js');
|
||||||
const UserView = require('../views/user_view.js');
|
const UserView = require('../views/user_view.js');
|
||||||
|
const EmptyView = require('../views/empty_view.js');
|
||||||
|
|
||||||
class UsersController {
|
class UsersController {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.registrationView = new RegistrationView();
|
this.registrationView = new RegistrationView();
|
||||||
this.userView = new UserView();
|
this.userView = new UserView();
|
||||||
|
this.emptyView = new EmptyView();
|
||||||
}
|
}
|
||||||
|
|
||||||
registerRoutes() {
|
registerRoutes() {
|
||||||
|
@ -59,7 +61,7 @@ class UsersController {
|
||||||
this.user = response.user;
|
this.user = response.user;
|
||||||
next();
|
next();
|
||||||
}).catch(response => {
|
}).catch(response => {
|
||||||
views.emptyView(document.getElementById('content-holder'));
|
this.emptyView.render();
|
||||||
events.notify(events.Error, response.description);
|
events.notify(events.Error, response.description);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -84,12 +84,6 @@ function enableForm(form) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function emptyView(target) {
|
|
||||||
const ret = showView(target, htmlToDom('<div class="messages"></div>'));
|
|
||||||
listenToMessages(target);
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showView(target, source) {
|
function showView(target, source) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let observer = new MutationObserver(mutations => {
|
let observer = new MutationObserver(mutations => {
|
||||||
|
@ -116,7 +110,6 @@ module.exports = {
|
||||||
htmlToDom: htmlToDom,
|
htmlToDom: htmlToDom,
|
||||||
getTemplate: getTemplate,
|
getTemplate: getTemplate,
|
||||||
showView: showView,
|
showView: showView,
|
||||||
emptyView: emptyView,
|
|
||||||
enableForm: enableForm,
|
enableForm: enableForm,
|
||||||
disableForm: disableForm,
|
disableForm: disableForm,
|
||||||
listenToMessages: listenToMessages,
|
listenToMessages: listenToMessages,
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const views = require('../util/views.js');
|
||||||
|
|
||||||
|
class EmptyView {
|
||||||
|
constructor() {
|
||||||
|
this.template = views.htmlToDom('<div class="messages"></div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
render(ctx) {
|
||||||
|
const target = document.getElementById('content-holder');
|
||||||
|
const source = this.template;
|
||||||
|
views.listenToMessages(target);
|
||||||
|
views.showView(target, source);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = EmptyView;
|
|
@ -19,16 +19,13 @@ class HelpView {
|
||||||
const source = this.template();
|
const source = this.template();
|
||||||
|
|
||||||
ctx.section = ctx.section || 'about';
|
ctx.section = ctx.section || 'about';
|
||||||
if (!(ctx.section in this.sectionTemplates)) {
|
if (ctx.section in this.sectionTemplates) {
|
||||||
views.emptyView(target);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
views.showView(
|
views.showView(
|
||||||
source.querySelector('.content'),
|
source.querySelector('.content'),
|
||||||
this.sectionTemplates[ctx.section]({
|
this.sectionTemplates[ctx.section]({
|
||||||
name: config.name,
|
name: config.name,
|
||||||
}));
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
const allItemsSelector = '[data-name]';
|
const allItemsSelector = '[data-name]';
|
||||||
for (let item of source.querySelectorAll(allItemsSelector)) {
|
for (let item of source.querySelectorAll(allItemsSelector)) {
|
||||||
|
|
Loading…
Reference in New Issue