94 lines
4.0 KiB
JavaScript
94 lines
4.0 KiB
JavaScript
var React = require('react'),
|
|
MenuItemCollection = require('../../models/menuItemCollection'),
|
|
MenuItem = require('../../models/menuItem'),
|
|
Backbone = require('backbone'),
|
|
NavigationStore = require('../../stores/navigationStore'),
|
|
MenuItemStore = require('../../stores/menuItemStore'),
|
|
MenuItemActions = require('../../actions/menuItemActions'),
|
|
NavigationActions = require('../../actions/navigationActions');
|
|
|
|
Backbone.$ = $;
|
|
|
|
var MenuItemListComponent = React.createClass({
|
|
|
|
_onChange: function () {
|
|
if (this.isMounted()) {
|
|
this.setState(MenuItemStore.getState());
|
|
}
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return MenuItemStore.getState();
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
MenuItemStore.addChangeListener(this._onChange);
|
|
MenuItemActions.loadMenuItems();
|
|
},
|
|
onMouseOver: function(menuItem) {
|
|
MenuItemActions.setMenuItemHover(menuItem);
|
|
},
|
|
onMouseOut: function() {
|
|
MenuItemActions.unsetMenuItemHover();
|
|
},
|
|
onMouseLeave: function() {
|
|
MenuItemActions.unsetMenuItemHover();
|
|
},
|
|
onMenuItemClick: function(menuItem) {
|
|
MenuItemActions.unsetMenuItemHover();
|
|
NavigationActions.goToMenuItem(menuItem);
|
|
event.preventDefault();
|
|
},
|
|
//onCategoryClick: function(category, section) {
|
|
//MenuItemActions.unsetSectionHover();
|
|
//NavigationActions.goToCategory(new Category(category), section);
|
|
//event.preventDefault();
|
|
//},
|
|
//onSubcategoryClick: function(subcategory) {
|
|
//// implement in navigation actions
|
|
//// and call
|
|
//// when ready
|
|
//return false;
|
|
//},
|
|
render: function() {
|
|
var self = this;
|
|
var style = {
|
|
position: 'relative'
|
|
};
|
|
var abStyle = {
|
|
position: 'absolute'
|
|
};
|
|
return (
|
|
<div>
|
|
<ul className='nav nav-pills'>
|
|
{this.state.menuItems.map(function(menuItem) {
|
|
|
|
return (
|
|
<li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}>
|
|
<a href="#" onClick={self.onMenuItemClick.bind(self, menuItem)} >
|
|
{ menuItem.get('title') }
|
|
|
|
</a>
|
|
<div style={abStyle} className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hide section-cat-list": "section-cat-list"} >
|
|
|
|
<ul >
|
|
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
|
|
return (
|
|
<li key={menuSubItem.id}>
|
|
<a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = MenuItemListComponent;
|