Skip to content

Instantly share code, notes, and snippets.

@Guria
Created May 19, 2015 14:37
Show Gist options
  • Save Guria/37189bb85d4da6c9e4cb to your computer and use it in GitHub Desktop.
Save Guria/37189bb85d4da6c9e4cb to your computer and use it in GitHub Desktop.
bemhtml an block `menu`
block('kg-menu')(
content()(function(){
return [
this.ctx.button || { elem: 'button' },
{ elem: 'menu', content: this.ctx.content }
];
}),
elem('menu').def()(function(){
var self = apply('self');
return applyCtx({
block: 'aperture',
mix: apply('self'),
content: {
block: 'menu',
mods: {
disabled: true,
fix: 'scroll'
},
mix: this.extend(
apply('self'),
{ elem: 'items'}),
content: this.ctx.content
}
});
})
);
match(function() {
return this.ctx.mix && (this.ctx.mix.block === 'kg-menu');
})(
block('menu-item').tag()('li'),
block('menu').elem('group').tag()('ul'),
block('menu').tag()('nav')
);
block('kg-menu')(
def()(function(){
return applyCtx({
block: 'kg-menu',
js: true,
content: applyCtx([
{
block: this.block,
elem: 'group',
elemMods: { type: 'main', lvl: 0 },
content: this.ctx.items
},
{
block: this.block,
elem: 'group',
elemMods: { type: 'system', lvl: 0 },
content: this.ctx.systemItems
}
])
});
}),
elem('group').def()(function(){
var lvl = this.ctx.elemMods.lvl;
if (this.ctx.content)
// transform content to flat array
var content = [].concat.apply([], this.ctx.content.map(function(item, i){
// item could be just a string
if (this.isSimple(item))
item = { title: item };
item = this.extend(item, {
block: 'kg-menu',
elem: 'item',
// use title as value if not set
value: item.value || item.title,
// item can have own mods defined
// add 'lvl' elemMod
elemMods: this.extend(item.elemMods, { lvl: lvl })
});
// default icon for items 'main' group
if (this.ctx.elemMods && this.ctx.elemMods.type === 'main' &&
(!(item.glyph || item.iconUrl || item.iconCls)))
item.glyph = 'blank';
if (item.content && item.content.length) {
// set mod to link item with group of subitems
item.elemMods = this.extend(item.elemMods, {
sub: true,
id: i
});
var group = {
block: 'kg-menu',
elem: 'group',
elemMods: {
id: i,
lvl: lvl*1 + 1
},
content: item.content
};
delete item.content;
item = [item, group];
}
return item;
}, this));
return applyCtx({
block: 'menu',
elem: 'group',
mix: apply('self'),
content: content
});
}),
elem('item').def()(function(){
var item = {
block: 'menu-item',
mods: {
disabled: true,
type: this.ctx.url? 'link' : null
},
// mix: this.ctx.url? null : apply('self'),
mix: apply('self'),
attrs: this.ctx.attrs,
val: this.ctx.value,
content: this.ctx.title
};
// TODO: rewrite with applyNext
if (this.ctx.iconUrl || this.ctx.iconCls || this.ctx.glyph)
item.content = [
{
block: 'icon',
url: this.ctx.iconUrl || null,
cls: this.ctx.iconCls || null,
content: this.ctx.glyph || null
},
{
tag: 'span',
content: item.content
}
];
if (this.ctx.url)
item.content = {
block: 'link',
// mix: apply('self'),
url: this.ctx.url,
content: item.content
};
return item;
})
);
({
block: 'kg-menu',
items: [],
systemItems: []
})
{
"block": "kg-menu",
"js": true,
"content": [
{
"block": "menu",
"elem": "group",
"mix": {
"block": "kg-menu",
"elem": "group",
"mods": {},
"elemMods": {
"type": "main",
"lvl": 0
}
},
"content": [
{
"block": "menu-item",
"mods": {
"disabled": true,
"type": null
},
"mix": {
"block": "kg-menu",
"elem": "item",
"mods": {},
"elemMods": {
"lvl": 0,
"sub": true,
"id": 0
}
},
"val": "Первое",
"content": [
{
"block": "icon",
"url": null,
"cls": null,
"content": "blank",
"mods": {}
},
{
"tag": "span",
"content": "Первое"
}
]
},
{
"block": "menu",
"elem": "group",
"mix": {
"block": "kg-menu",
"elem": "group",
"mods": {},
"elemMods": {
"id": 0,
"lvl": 1
}
},
"content": [
{
"block": "menu-item",
"mods": {
"disabled": true,
"type": null
},
"mix": {
"block": "kg-menu",
"elem": "item",
"mods": {},
"elemMods": {
"lvl": 1
}
},
"val": "Раз — ромашка",
"content": "Раз — ромашка"
},
{
"block": "menu-item",
"mods": {
"disabled": true,
"type": null
},
"mix": {
"block": "kg-menu",
"elem": "item",
"mods": {},
"elemMods": {
"lvl": 1
}
},
"val": "Два — ромашка",
"content": "Два — ромашка"
}
],
"mods": {}
},
{
"block": "menu-item",
"mods": {
"disabled": true,
"type": "link"
},
"mix": {
"block": "kg-menu",
"elem": "item",
"mods": {},
"elemMods": {
"lvl": 0
}
},
"val": "Десертик",
"content": {
"block": "link",
"url": "#/1",
"content": [
{
"block": "icon",
"url": null,
"cls": "fa fa-birthday-cake",
"content": null,
"mods": {}
},
{
"tag": "span",
"content": "Десертик"
}
],
"mods": {}
}
}
],
"mods": {}
},
{
"block": "menu",
"elem": "group",
"mix": {
"block": "kg-menu",
"elem": "group",
"mods": {},
"elemMods": {
"type": "system",
"lvl": 0
}
},
"content": [
{
"block": "menu-item",
"mods": {
"disabled": true,
"type": null
},
"mix": {
"block": "kg-menu",
"elem": "item",
"mods": {},
"elemMods": {
"lvl": 0
}
},
"val": "Настройки",
"content": [
{
"block": "icon",
"url": null,
"cls": null,
"content": "cog",
"mods": {}
},
{
"tag": "span",
"content": "Настройки"
}
]
}
],
"mods": {}
}]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment