import app from '../../admin/app';
import ExtensionLinkButton from './ExtensionLinkButton';
import Component from '../../common/Component';
import LinkButton from '../../common/components/LinkButton';
import SelectDropdown from '../../common/components/SelectDropdown';
import getCategorizedExtensions from '../utils/getCategorizedExtensions';
import ItemList from '../../common/utils/ItemList';
import Stream from '../../common/utils/Stream';
export default class AdminNav extends Component {
oninit(vnode) {
super.oninit(vnode);
this.query = Stream('');
}
view() {
return (
{this.items().toArray().concat(this.extensionItems().toArray())}
);
}
oncreate(vnode) {
super.oncreate(vnode);
this.scrollToActive();
}
onupdate(vnode) {
super.onupdate(vnode);
this.scrollToActive();
}
scrollToActive() {
const children = $('.Dropdown-menu').children('.active');
const nav = $('#admin-navigation');
const time = app.previous.type ? 250 : 0;
if (
children.length > 0 &&
(children[0].offsetTop > nav.scrollTop() + nav.outerHeight() || children[0].offsetTop + children[0].offsetHeight < nav.scrollTop())
) {
nav.animate(
{
scrollTop: children[0].offsetTop - nav.height() / 2,
},
time
);
}
}
/**
* Build an item list of main links to show in the admin navigation.
*
* @return {ItemList}
*/
items() {
const items = new ItemList();
items.add('category-core', {app.translator.trans('core.admin.nav.categories.core')}
);
items.add(
'dashboard',
{app.translator.trans('core.admin.nav.dashboard_button')}
);
items.add(
'basics',
{app.translator.trans('core.admin.nav.basics_button')}
);
items.add(
'mail',
{app.translator.trans('core.admin.nav.email_button')}
);
items.add(
'permissions',
{app.translator.trans('core.admin.nav.permissions_button')}
);
items.add(
'appearance',
{app.translator.trans('core.admin.nav.appearance_button')}
);
items.add(
'userList',
{app.translator.trans('core.admin.nav.userlist_button')}
);
items.add(
'search',
);
return items;
}
extensionItems() {
const items = new ItemList();
const categorizedExtensions = getCategorizedExtensions();
const categories = app.extensionCategories;
Object.keys(categorizedExtensions).map((category) => {
if (!this.query()) {
items.add(
`category-${category}`,
{app.translator.trans(`core.admin.nav.categories.${category}`)}
,
categories[category]
);
}
categorizedExtensions[category].map((extension) => {
const query = this.query().toUpperCase();
const title = extension.extra['flarum-extension'].title || '';
const description = extension.description || '';
if (!query || title.toUpperCase().includes(query) || description.toUpperCase().includes(query)) {
items.add(
`extension-${extension.id}`,
{title}
,
categories[category]
);
}
});
});
return items;
}
}