101 lines
5.0 KiB
JavaScript
101 lines
5.0 KiB
JavaScript
var React = require('react'),
|
|
SectionCollection = require('../../models/sectionCollection'),
|
|
Section = require('../../models/section'),
|
|
Backbone = require('backbone'),
|
|
NavigationStore = require('../../stores/navigationStore'),
|
|
SectionStore = require('../../stores/sectionStore'),
|
|
SectionActions = require('../../actions/sectionActions'),
|
|
NavigationActions = require('../../actions/navigationActions');
|
|
|
|
Backbone.$ = $;
|
|
|
|
var SectionsListComponent = React.createClass({
|
|
|
|
_onChange: function () {
|
|
if (this.isMounted()) {
|
|
this.setState(SectionStore.getState());
|
|
}
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return SectionStore.getState();
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
SectionStore.addChangeListener(this._onChange);
|
|
SectionActions.loadSections();
|
|
},
|
|
onMouseOver: function(section) {
|
|
SectionActions.setSectionHover(section);
|
|
|
|
},
|
|
onMouseOut: function() {
|
|
SectionActions.unsetSectionHover();
|
|
},
|
|
onSectionClick: function(section) {
|
|
NavigationActions.goToSection(section);
|
|
return false;
|
|
},
|
|
onCategoryClick: function(category, section) {
|
|
NavigationActions.goToCategory(category, section);
|
|
return false;
|
|
},
|
|
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.sections.map(function(section) {
|
|
|
|
return (
|
|
<li key={section.get('id')} role='presentation' style={style}>
|
|
<a href="#" onClick={self.onSectionClick.bind(self, section)} onMouseOver={self.onMouseOver.bind(self, section)}>
|
|
{ section.get('name') }
|
|
</a>
|
|
<div style={abStyle} className={section.get('id') !== self.state.hoveredSection ? "hide section-cat-list": "section-cat-list"} >
|
|
|
|
<ul onMouseLeave={self.onMouseOut} >
|
|
{section.get('categories').map(function(category) {
|
|
return (
|
|
<li key={category.id}>
|
|
<span onClick={self.onCategoryClick.bind(self, category, section)}>{category.name}</span>
|
|
<ul>
|
|
{category.sub_categories.map(function(subCategory) {
|
|
|
|
return (
|
|
<li key={subCategory.id}>
|
|
|
|
{subCategory.name}</li>
|
|
|
|
)
|
|
})}
|
|
|
|
</ul>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = SectionsListComponent;
|