finished menu items

2015-03-28 13:59:04 +01:00
parent b90b4035aa
commit 1e256f728d
7 changed files with 227 additions and 3 deletions
--- a/front-ui/app/components/shared/menuItemListComponent.js
+++ b/front-ui/app/components/shared/menuItemListComponent.js
@@ -0,0 +1,93 @@
+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;