Управление сайтом
Новый HTML-тег <cb-m1-cms> в роли "Системы Управления Сайтом"<body>
<cb-view>
<cb-m1-cms></cb-m1-cms>
<div class="panel">..</div>
<main>..</main>
</cb-view>
</body>Кастомизация
Элемент не требует дополнительной настройки, хотя возможна небольшая кастомизация не затрагивающая работу компонента. Так же возможно добавление своих сервисов./public/components/cms/index.jsimport './utils.js'
import './services.js'
const setupCMS = async el => {
el.addEventListener('cmsscreen', (e) => {
// очистка DOM после переключения к управлению
cb.view.querySelector('main').innerHTML = ''
const {serviceUrl} = e.detail
if (serviceUrl === '/chat') {
// подключение чата
el.contentElement.innerHTML = '<cb-m1-cms-chat/>'
}
})
el.addEventListener('unauthorized', () => {
// Событие страницы неавторизованного пользователя.
const {cms} = cb.system.text
el.contentElement.innerHTML = cms.elementUnauthorized
})
el.addEventListener('accessnone', () => {
// Событие страницы сервиса, к которому у пользователя нет доступа.
const {cms} = cb.system.text
el.contentElement.innerHTML = cms.elementNoAccess
})
el.addEventListener('pages', (e) => {
const {nodes} = e.detail
// Хронологический порядок страниц в управлении. На примере страниц с датой и адресом, который начинается с /news/.
if(nodes[0].src.startsWith('/news/')) {
nodes.sort((a, b) => new Date(b.page.date) - new Date(a.page.date))
}
})
await cb.system.utils.setupCMS(el)
}
customElements.define(
'cb-m1-cms',
class extends HTMLElement {
async connectedCallback() {
await cb.setupOnce(this, setupCMS)
this.dispatchEvent(new CustomEvent('connect'))
}
disconnectedCallback() {
this.dispatchEvent(new CustomEvent('disconnect'))
}
}
Создание сервиса
Подобно регистрации чата, можно создать собственный сервис или отключить чат, закомментировав блок кода.
const {serviceUrl} = e.detail
if (serviceUrl === '/chat') {
el.contentElement.innerHTML = '<cb-m1-cms-chat/>'
}Бэкенд
Обычно регистрируется в init.jscb.system.on('CMSProvideServices', (services, req) => {
if (cb.UserManager.hasAccessToService(req, 'chat')) {
services.push({
name: {
ru: 'Чат',
en: 'Chat',
zh: '聊天',
},
link: '/chat',
color: '#583f8a',
icon: '<svg viewBox="0 0 24 24">...</svg>',
})
}
})name
Название значка (можно многоязычный объект или строку с названием)
color
Цвет кнопки сервиса
icon
SVG код иконки
link
Внутренний адрес страницы сервиса
Кнопки сервисов
Если вам потребуется стилизовать кнопки сервисов, это можно сделать в специальном событии создания кнопки сервиса. services.js{
const setup = async el => {
const styleSRC = '/components/cms/services'
const {setTitle, loadServices, createServicesElement} = await cb.system.utils.setupCmsServices(el, styleSRC)
setTitle()
await loadServices()
el.addEventListener('createCard', e => {
// событие создания кнопки сервиса
const {element, name, icon} = e.detail
element.className = 'cb-m1-cms-services-card'
element.firstElementChild.innerHTML = /*html*/ `
<span class="cb-m1-cms-services-card-icon">${icon}</span>
<span class="cb-m1-cms-services-card-title">${name}</span>
`
})
el.append(createServicesElement('cb-m1-cms-services-list'))
cb.updatePageY()
}
customElements.define(
'cb-m1-cms-services',
class extends HTMLElement {
async connectedCallback() {
await cb.setupOnce(this, setup)
}
}
)
}