refactor menu component to pass container node objects instead of decorating item object

This commit is contained in:
Sacha Greif 2015-08-24 11:05:13 +09:00
parent f087317400
commit c93b3ab6fa
3 changed files with 60 additions and 35 deletions

View file

@ -1,12 +1,14 @@
<!-- <!--
Menu Component menuComponent
menuName (String) menuName (String)
| The name of the menu | The name of the menu
menuItems (Array) menuItems (Array)
| An array containing the contents of the menu | An array containing the contents of the menu
_ _id (String) [optional] used in nested menus
_ parentId (String) [optional] used in nested menus
- route (String/Function) [optional] - route (String/Function) [optional]
- label (String/Function) [optional] - label (String/Function) [optional]
- description (String) [optional] - description (String) [optional]
@ -62,6 +64,21 @@ menuClass (String) [optional]
</div> </div>
</template> </template>
<!--
menuItem
allItems (Array)
| A reference pointing back to an array containing *all* menu items
level (Number)
| The current hierarchical depth level, starting with 0
item (Object)
| The current item to display
-->
<template name="menuItem"> <template name="menuItem">
<li class="menu-item {{itemClass}}"> <li class="menu-item {{itemClass}}">

View file

@ -14,26 +14,32 @@ var filterMenuItems = function (menuItems) {
}; };
Telescope.utils.getChildMenuItems = function (node) { Telescope.utils.getChildMenuItems = function (node) {
// don't try to find child menu items if current element doesn't have an id
if (node.item._id) {
var level = node.level; var level = node.level;
var childLevel = level + 1; var childLevel = level + 1;
var menuItems = node.allMenuItems; var menuItems = filterMenuItems(node.allItems);
menuItems = filterMenuItems(menuItems); menuItems = _.filter(menuItems, function (item) {
// return elements with the correct parentId
return item.parentId === node.item._id;
});
menuItems = _.filter(menuItems, function (item) { // build "node container" object
// return elements with the correct parentId menuItems = _.map(menuItems, function (item) {
return item.parentId === node._id; return {
}); allItems: node.allItems,
level: childLevel,
item: item
};
});
// decorate child item with their level and a reference to the root level return menuItems;
menuItems = _.map(menuItems, function (item) {
item.level = childLevel;
item.allMenuItems = node.allMenuItems
return item;
});
return menuItems; } else {
return [];
}
}; };
// Template.menuComponent.onCreated(function () { // Template.menuComponent.onCreated(function () {
@ -51,10 +57,13 @@ Template.menuComponent.helpers({
return typeof item.parentId === "undefined"; return typeof item.parentId === "undefined";
}); });
// build "node container" object
menuItems = _.map(menuItems, function (item) { menuItems = _.map(menuItems, function (item) {
item.level = 0; return {
item.allMenuItems = allMenuItems; allItems: allMenuItems,
return item; level: 0,
item: item
};
}); });
return menuItems; return menuItems;
@ -97,49 +106,47 @@ Template.menuComponent.events({
}); });
Template.menuItem.onCreated(function () { Template.menuItem.onCreated(function () {
var context = this.data;
// if menu item has a custom template specified, make that template inherit helpers from menuItem // if menu item has a custom template specified, make that template inherit helpers from menuItem
if (this.data.template) { if (context.item.template) {
Template[this.data.template].inheritsHelpersFrom("menuItem"); Template[context.item.template].inheritsHelpersFrom("menuItem");
} }
}); });
Template.menuItem.helpers({ Template.menuItem.helpers({
hasTemplate: function () { hasTemplate: function () {
return !!this.template; return !!this.item.template;
}, },
menuItemData: function () { menuItemData: function () {
// if a data property is defined, use it for data context. Else default to current item // if a data property is defined, use it for data context. Else default to current item
return this.data ? this.data : this; return this.item.data ? this.item.data : this.item;
}, },
itemClass: function () { itemClass: function () {
var itemClass = ""; var itemClass = "";
var currentPath = Router.current().location.get().path ; var currentPath = Router.current().location.get().path ;
if (this.adminOnly) { if (this.item.adminOnly) {
itemClass += " item-admin"; itemClass += " item-admin";
} }
if (this.route && (getRoute(this) === currentPath || getRoute(this) === Meteor.absoluteUrl() + currentPath.substr(1))) { if (this.item.route && (getRoute(this.item) === currentPath || getRoute(this.item) === Meteor.absoluteUrl() + currentPath.substr(1))) {
// substr(1) is to avoid having two "/" in the URL // substr(1) is to avoid having two "/" in the URL
itemClass += " item-active"; itemClass += " item-active";
} }
if (this.itemClass) { if (this.item.itemClass) {
itemClass += " "+this.itemClass; itemClass += " "+this.item.itemClass;
} }
return itemClass; return itemClass;
}, },
itemLabel: function () { itemLabel: function () {
// if label is a Function return its result, else return i18n'd version of label // if label is a Function return its result, else return i18n'd version of label
return typeof this.label === "function" ? this.label() : i18n.t(this.label); return typeof this.item.label === "function" ? this.item.label() : i18n.t(this.item.label);
}, },
itemRoute: function () { itemRoute: function () {
return getRoute(this); return getRoute(this.item);
}, },
childMenuItems: function () { childMenuItems: function () {
if (this._id) { // don't try to find child menu items if current element doesn't have an id return Telescope.utils.getChildMenuItems(this);
var childMenuItems = Telescope.utils.getChildMenuItems(this);
return childMenuItems;
}
} }
}); });

View file

@ -34,10 +34,11 @@ Posts.controllers.list = RouteController.extend({
}, },
getDescription: function () { getDescription: function () {
if (Router.current().route.getName() === 'posts_default') { // return site description on root path var currentRoute = Router.current().route.getName();
if (currentRoute === 'posts_default') { // return site description on root path
return Settings.get('description'); return Settings.get('description');
} else { } else {
return i18n.t(_.findWhere(Telescope.menuItems.get("viewsMenu"), {label: this.view}).description); return i18n.t(_.findWhere(Telescope.menuItems.get("viewsMenu"), {route: currentRoute}).description);
} }
} }