218 lines
9.8 KiB
JavaScript
218 lines
9.8 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'),
|
|
CartStore = require('../../stores/cartStore.js');
|
|
MenuItemActions = require('../../actions/menuItemActions'),
|
|
NavigationActions = require('../../actions/navigationActions');
|
|
|
|
Backbone.$ = $;
|
|
|
|
var MenuItemListComponent = React.createClass({
|
|
|
|
_onChange: function () {
|
|
if (this.isMounted()) {
|
|
this.setState(MenuItemStore.getState());
|
|
}
|
|
},
|
|
|
|
getInitialState: function() {
|
|
var state = MenuItemStore.getState();
|
|
var cartState = CartStore.getWholeCartState();
|
|
state.cartCount = cartState;
|
|
return state;
|
|
},
|
|
|
|
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, e) {
|
|
MenuItemActions.unsetMenuItemHover();
|
|
NavigationActions.goToMenuItem(menuItem);
|
|
e.preventDefault();
|
|
},
|
|
_onCartClick: function(e) {
|
|
NavigationActions.goToCart();
|
|
e.preventDefault();
|
|
},
|
|
|
|
render: function() {
|
|
var self = this;
|
|
var style = {
|
|
position: 'relative'
|
|
};
|
|
var abStyle = {
|
|
position: 'absolute'
|
|
};
|
|
return (
|
|
<div className="navbar navbar-default navbar-static-top">
|
|
<div className="container">
|
|
<ul className='nav nav-pills'>
|
|
<div className="navbar-header">
|
|
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
</button>
|
|
<a className="navbar-brand hidden-lg hidden-md" href="#"><img style={{marginTop: '-4px'}} height={24} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></a>
|
|
<ul className="mynav hidden-lg hidden-md " style={{listStyle: 'none'}}>
|
|
<li><a href="#">0,00 KM</a></li>
|
|
<li onClick={this._onCartClick}><a style={{marginLeft: 10}} className="mybutton" href="#" onClick={this._onCartClick}>Završi narudžbu</a></li>
|
|
</ul>
|
|
</div>
|
|
<div className="navbar-collapse collapse">
|
|
<ul className="nav navbar-nav hidden-sm hidden-xs ">
|
|
{/*
|
|
<li id="myhome"><a href="home.html">Današnja ponuda</a></li>
|
|
<li className="mydropdown menu-large">
|
|
<a href="#" id="beba" className="dropdown-toggle "> Beba </a>
|
|
<ul className="dropdown-menu megamenu row">
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
|
|
<li><a href="kategorija.html">Majice</a></li>
|
|
<li><a href="kategorija.html">Pantalone</a></li>
|
|
<li><a href="kategorija.html">Trenerke</a></li>
|
|
<li><a href="kategorija.html">Dukserice</a></li>
|
|
<li><a href="kategorija.html">Skafanderi</a></li>
|
|
<li><a href="kategorija.html">Kape</a></li>
|
|
<li><a href="kategorija.html">Bodići</a></li>
|
|
<li><a href="kategorija.html">Pidžame</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
</ul>
|
|
</li>
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
|
|
<li><a href="kategorija.html">Tekstil</a></li>
|
|
<li><a href="kategorija.html">Namještaj</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
|
|
</ul>
|
|
</li>
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
|
|
<li><a href="kategorija.html">Sokovi</a></li>
|
|
<li><a href="kategorija.html">Adaptirana mlijeka</a></li>
|
|
<li><a href="kategorija.html">Kašice</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>*/}
|
|
|
|
{this.state.menuItems.map(function(menuItem) {
|
|
return <li className="mydropdown menu-large" onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)}>
|
|
<a href="#" className="dropdown-toggle " id={menuItem.get('title').toLowerCase()} onClick={self.onMenuItemClick.bind(self, menuItem)} >{menuItem.get('title')}</a>
|
|
<ul className={menuItem.get('id') !== self.state.hoveredMenuItem ? "dropdown-menu megamenu row hide": "dropdown-menu megamenu row"}>
|
|
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
|
|
return (
|
|
<li className="col-sm-3" key={menuSubItem.id}>
|
|
|
|
<ul>
|
|
<li className="dropdown-header"><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
|
|
{menuSubItem.menu_sub_sub_items.map(function(menuSubSubItem) {
|
|
return (<li><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubSubItem)}>{menuSubSubItem.title}</a></li>)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
})}
|
|
</ul>
|
|
<ul className="nav navbar-nav hidden-lg hidden-md ">
|
|
{/*
|
|
<li id="myhome"><a href="#">Današnja ponuda</a></li>
|
|
<li className="dropdown menu-large">
|
|
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Beba <b className="caret" /> </a>
|
|
<ul className="dropdown-menu megamenu row">
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>ODJEĆA!!!</p></a></li>
|
|
<li><a href="kategorija.html">Majice</a></li>
|
|
<li><a href="kategorija.html">Pantalone</a></li>
|
|
<li><a href="kategorija.html">Trenerke</a></li>
|
|
<li><a href="kategorija.html">Dukserice</a></li>
|
|
<li><a href="kategorija.html">Skafanderi</a></li>
|
|
<li><a href="kategorija.html">Kape</a></li>
|
|
<li><a href="kategorija.html">Bodići</a></li>
|
|
<li><a href="kategorija.html">Pidžame</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
</ul>
|
|
</li>
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>DJEČIJA SOBA</p></a></li>
|
|
<li><a href="kategorija.html">Tekstil</a></li>
|
|
<li><a href="kategorija.html">Namještaj</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>OPREMA ZA BEBE</p></a></li>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>CRTANI FILMOVI</p></a></li>
|
|
</ul>
|
|
</li>
|
|
<li className="col-sm-3">
|
|
<ul>
|
|
<li className="dropdown-header"><a href="kategorija.html"><p>HRANA I DODACI PREHRANI</p></a></li>
|
|
<li><a href="kategorija.html">Sokovi</a></li>
|
|
<li><a href="kategorija.html">Adaptirana mlijeka</a></li>
|
|
<li><a href="kategorija.html">Kašice</a></li>
|
|
<li><a href="kategorija.html">Ostalo</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="kategorija.html">Dijete</a></li>
|
|
<li><a href="kategorija.html">Mama</a></li>
|
|
<li><a href="kategorija.html">Made in BiH</a></li>
|
|
<li><a href="kategorija.html">Tržišna marka</a></li>
|
|
|
|
*/}
|
|
{this.state.menuItems.map(function(menuItem) {
|
|
return <li className="dropdown menu-large">
|
|
<a href="#" className="dropdown-toggle " data-toggle="dropdown" role="button" aria-expanded="false">
|
|
{menuItem.get('title')} <b className="caret" /> </a>
|
|
<ul className="dropdown-menu megamenu row">
|
|
|
|
{menuItem.get('menu_sub_items').map(function(menuSubItem) {
|
|
return (
|
|
<li className="col-sm-3" key={menuSubItem.id}>
|
|
|
|
<ul>
|
|
<li className="dropdown-header"><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubItem)}><p>{menuSubItem.title}</p></a></li>
|
|
{menuSubItem.menu_sub_sub_items.map(function(menuSubSubItem) {
|
|
return (<li><a href="#" onClick={self.onMenuItemClick.bind(self, menuSubSubItem)}>{menuSubSubItem.title}</a></li>)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</li>
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = MenuItemListComponent;
|