finished menu items

front-ui/app/actions/menuItemActions.js

@@ -0,0 +1,24 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var MenuItemConstants = require('../constants/menuItemConstants');
+
+// Define action methods
+var MenuItemActions = {
+  loadMenuItems: function() {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.LOAD_MENU_ITEMS,
+    })
+  },
+  setMenuItemHover: function(menuItem) {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.SET_MENU_ITEM_HOVER,
+      menuItem: menuItem
+    });
+  },
+  unsetMenuItemHover: function() {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.UNSET_MENU_ITEM_HOVER
+    });
+  }
+};
+
+module.exports = MenuItemActions;

front-ui/app/actions/navigationActions.js

@@ -91,6 +91,19 @@ var NavigationActions = {
       actionType: NavigationConstants.CHANGE_URL,
       url: '/pretraga?q=' + q
     });
+  },
+  goToMenuItem: function(menuItem) {
+    var url = '';
+    if (menuItem.get) {
+        url = menuItem.get('url');
+    } else {
+        url = menuItem.url;
+    }
+
+    AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: url
+    });
   }
 };
 

front-ui/app/components/rootApp.js

@@ -1,5 +1,5 @@
 var React = require('react'),
-    SectionsListComponent = require('./shared/sectionsListComponent'),
+    MenuItemListComponent = require('./shared/menuItemListComponent'),
     Router = require('react-router'),
     Link = Router.Link,
     RouteHandler = Router.RouteHandler,
@@ -57,7 +57,7 @@ var RootApp = React.createClass({
     </div>
     <div className='row'>
         <div className='col-md-8' id='header'>
-            <SectionsListComponent />
+            <MenuItemListComponent />
             </div>
 
         <div className="col-md-4">

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;

front-ui/app/constants/menuItemConstants.js

@@ -0,0 +1,8 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+  LOAD_MENU_ITEMS: null,
+  SET_MENU_ITEM_HOVER: null,
+  UNSET_MENU_ITEM_HOVER: null
+});

front-ui/app/models/menuItemCollection.js

@@ -4,7 +4,7 @@ var Backbone = require('backbone'),
 
 var MenuItemCollection = Backbone.Collection.extend({
     model: MenuItem,
-    url: Globals.ApiUrl + '/menu_item'
+    url: Globals.ApiUrl + '/menuitem'
 });
 
 module.exports = MenuItemCollection;

front-ui/app/stores/menuItemStore.js

@@ -0,0 +1,86 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var MenuItemCollection = require('../models/menuItemCollection');
+var MenuItem = require('../models/menuItem');
+var MenuItemConstants = require('../constants/menuItemConstants');
+var _ = require('underscore');
+
+var menuItemState = {
+  menuItems : [],
+  hoveredMenuItem : ''
+};
+
+
+var loadMenuItems = function() { 
+  var menuItems = new MenuItemCollection();
+  menuItems.fetch({success: function() {
+    menuItemState.menuItems = menuItems.models;
+    // change will be called automatically when
+    // action is run but we need to emit it again
+    // when the data arive 
+    // it's a bit "unfluxy" but convenient.
+    // "true philosophy" would be to run another "data arrived" action
+    MenuItemStore.emitChange(); 
+  }});
+};
+
+var setHovered  = function(id) {
+  menuItemState.hoveredMenuItem = id;
+}
+
+
+// Extend MenuItemStore with EventEmitter to add eventing capabilities
+var MenuItemStore = _.extend({}, EventEmitter.prototype, {
+
+  // Return Single Item With Details 
+  getState: function() {
+    return menuItemState;
+  },
+    // Emit Change event
+    emitChange: function() {
+      console.log("Emmiting MenuItemStore change!");
+      this.emit('change');
+    },
+
+    // Add change listener
+    addChangeListener: function(callback) {
+      this.on('change', callback);
+    },
+
+    // Remove change listener
+    removeChangeListener: function(callback) {
+      this.removeListener('change', callback);
+    }
+});
+
+
+// Register callback with AppDispatcher
+AppDispatcher.register(function(payload) {
+  var action = payload.action;
+  var text;
+
+  switch(action.actionType) {
+
+    // Respond to SELECT_ITEM action
+    case MenuItemConstants.LOAD_MENU_ITEMS:
+      loadMenuItems();
+      break;
+
+    case MenuItemConstants.SET_MENU_ITEM_HOVER:
+      setHovered(action.menuItem.get('id'));
+      break;
+
+    case MenuItemConstants.UNSET_MENU_ITEM_HOVER:
+      setHovered('');
+      break;
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  MenuItemStore.emitChange();
+  return true;
+
+});
+
+module.exports = MenuItemStore;