116 lines
5.2 KiB
JavaScript
116 lines
5.2 KiB
JavaScript
var React = require('react'),
|
|
SectionCollection = require('../../models/sectionCollection'),
|
|
Section = require('../../models/section'),
|
|
Backbone = require('backbone');
|
|
|
|
var Navigation = require('react-router').Navigation;
|
|
|
|
Backbone.$ = $;
|
|
|
|
var SectionsListComponent = React.createClass({
|
|
mixins : [Navigation],
|
|
getInitialState: function() {
|
|
return {
|
|
sections : [],
|
|
hoveredSection : ''
|
|
};
|
|
},
|
|
componentDidMount: function() {
|
|
var sections = new SectionCollection();
|
|
sections.fetch({success: function() {
|
|
console.log('Loaded sections:' , sections);
|
|
if(this.isMounted()) {
|
|
this.setState({
|
|
sections: sections.models
|
|
});
|
|
}
|
|
|
|
|
|
}.bind(this)});
|
|
},
|
|
onMouseOver: function(section) {
|
|
//console.log('mouse over!', section);
|
|
|
|
this.setState({
|
|
hoveredSection: section.get('id')
|
|
});
|
|
},
|
|
onMouseOut: function() {
|
|
this.setState({
|
|
hoveredSection : ''
|
|
});
|
|
},
|
|
onSectionClick: function(section) {
|
|
//alert('clicked on section:'+ section.get('name'));
|
|
this.transitionTo('/sekcija/'+ section.get('id') + '/' + section.get('name'));
|
|
this.setState({
|
|
hoveredSection : ''
|
|
});
|
|
|
|
return false;
|
|
},
|
|
onCategoryClick: function(category, section) {
|
|
|
|
this.transitionTo('/sekcija/' + section.get('name') +'/kategorija/'+ category.id + '/' + category.name);
|
|
this.setState({
|
|
hoveredSection: ''
|
|
});
|
|
console.log('category', category.id);
|
|
return false;
|
|
},
|
|
onSubcategoryClick: function(subcategory) {
|
|
|
|
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.bind(self)} >
|
|
{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;
|