121 lines
4.1 KiB
JavaScript
121 lines
4.1 KiB
JavaScript
import Mmenu from '../../core/oncanvas/mmenu.oncanvas';
|
|
import options from './_options';
|
|
import configs from './_configs';
|
|
import { extendShorthandOptions } from './_options';
|
|
import * as DOM from '../../_modules/dom';
|
|
import * as media from '../../_modules/matchmedia';
|
|
// Add the options and configs.
|
|
Mmenu.options.navbars = options;
|
|
Mmenu.configs.navbars = configs;
|
|
// Add the classnames.
|
|
Mmenu.configs.classNames.navbars = {
|
|
panelPrev: 'Prev',
|
|
panelTitle: 'Title'
|
|
};
|
|
import breadcrumbs from './_navbar.breadcrumbs';
|
|
import close from './_navbar.close';
|
|
import prev from './_navbar.prev';
|
|
import searchfield from './_navbar.searchfield';
|
|
import title from './_navbar.title';
|
|
Navbars.navbarContents = {
|
|
breadcrumbs: breadcrumbs,
|
|
close: close,
|
|
prev: prev,
|
|
searchfield: searchfield,
|
|
title: title
|
|
};
|
|
import tabs from './_navbar.tabs';
|
|
Navbars.navbarTypes = {
|
|
tabs: tabs
|
|
};
|
|
export default function Navbars() {
|
|
var _this = this;
|
|
var navs = this.opts.navbars;
|
|
if (typeof navs == 'undefined') {
|
|
return;
|
|
}
|
|
if (!(navs instanceof Array)) {
|
|
navs = [navs];
|
|
}
|
|
var navbars = {};
|
|
if (!navs.length) {
|
|
return;
|
|
}
|
|
navs.forEach(function (options) {
|
|
options = extendShorthandOptions(options);
|
|
if (!options.use) {
|
|
return false;
|
|
}
|
|
// Create the navbar element.
|
|
var navbar = DOM.create('div.mm-navbar');
|
|
// Get the position for the navbar.
|
|
var position = options.position;
|
|
// Restrict the position to either "bottom" or "top" (default).
|
|
if (position !== 'bottom') {
|
|
position = 'top';
|
|
}
|
|
// Create the wrapper for the navbar position.
|
|
if (!navbars[position]) {
|
|
navbars[position] = DOM.create('div.mm-navbars_' + position);
|
|
}
|
|
navbars[position].append(navbar);
|
|
// Add content to the navbar.
|
|
for (var c = 0, l = options.content.length; c < l; c++) {
|
|
var ctnt = options.content[c];
|
|
// The content is a string.
|
|
if (typeof ctnt == 'string') {
|
|
var func = Navbars.navbarContents[ctnt];
|
|
// The content refers to one of the navbar-presets ("prev", "title", etc).
|
|
if (typeof func == 'function') {
|
|
// Call the preset function.
|
|
func.call(_this, navbar);
|
|
// The content is just HTML.
|
|
}
|
|
else {
|
|
// Add the HTML.
|
|
// Wrap the HTML in a single node
|
|
var node = DOM.create('span');
|
|
node.innerHTML = ctnt;
|
|
// If there was only a single node, use that.
|
|
var children = DOM.children(node);
|
|
if (children.length == 1) {
|
|
node = children[0];
|
|
}
|
|
navbar.append(node);
|
|
}
|
|
// The content is not a string, it must be an element.
|
|
}
|
|
else {
|
|
navbar.append(ctnt);
|
|
}
|
|
}
|
|
// The type option is set.
|
|
if (typeof options.type == 'string') {
|
|
// The function refers to one of the navbar-presets ("tabs").
|
|
var func = Navbars.navbarTypes[options.type];
|
|
if (typeof func == 'function') {
|
|
// Call the preset function.
|
|
func.call(_this, navbar);
|
|
}
|
|
}
|
|
// En-/disable the navbar.
|
|
var enable = function () {
|
|
navbar.classList.remove('mm-hidden');
|
|
Mmenu.sr_aria(navbar, 'hidden', false);
|
|
};
|
|
var disable = function () {
|
|
navbar.classList.add('mm-hidden');
|
|
Mmenu.sr_aria(navbar, 'hidden', true);
|
|
};
|
|
if (typeof options.use != 'boolean') {
|
|
media.add(options.use, enable, disable);
|
|
}
|
|
});
|
|
// Add to menu.
|
|
this.bind('initMenu:after', function () {
|
|
for (var position in navbars) {
|
|
_this.node.menu[position == 'bottom' ? 'append' : 'prepend'](navbars[position]);
|
|
}
|
|
});
|
|
}
|