From 1e256f728d6c67d564986299f2ef34b86c3d568f Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Sat, 28 Mar 2015 13:59:04 +0100 Subject: [PATCH] finished menu items --- front-ui/app/actions/menuItemActions.js | 24 +++++ front-ui/app/actions/navigationActions.js | 13 +++ front-ui/app/components/rootApp.js | 4 +- .../shared/menuItemListComponent.js | 93 +++++++++++++++++++ front-ui/app/constants/menuItemConstants.js | 8 ++ front-ui/app/models/menuItemCollection.js | 2 +- front-ui/app/stores/menuItemStore.js | 86 +++++++++++++++++ 7 files changed, 227 insertions(+), 3 deletions(-) create mode 100644 front-ui/app/actions/menuItemActions.js create mode 100644 front-ui/app/components/shared/menuItemListComponent.js create mode 100644 front-ui/app/constants/menuItemConstants.js create mode 100644 front-ui/app/stores/menuItemStore.js diff --git a/front-ui/app/actions/menuItemActions.js b/front-ui/app/actions/menuItemActions.js new file mode 100644 index 0000000..d07768a --- /dev/null +++ b/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; diff --git a/front-ui/app/actions/navigationActions.js b/front-ui/app/actions/navigationActions.js index 17a7d4a..be3c001 100644 --- a/front-ui/app/actions/navigationActions.js +++ b/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 + }); } }; diff --git a/front-ui/app/components/rootApp.js b/front-ui/app/components/rootApp.js index ad2dde0..e215f8f 100644 --- a/front-ui/app/components/rootApp.js +++ b/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({
diff --git a/front-ui/app/components/shared/menuItemListComponent.js b/front-ui/app/components/shared/menuItemListComponent.js new file mode 100644 index 0000000..43d421b --- /dev/null +++ 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 ( +
+ +
+ ); + } +}); + +module.exports = MenuItemListComponent; diff --git a/front-ui/app/constants/menuItemConstants.js b/front-ui/app/constants/menuItemConstants.js new file mode 100644 index 0000000..72ac8bc --- /dev/null +++ b/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 +}); diff --git a/front-ui/app/models/menuItemCollection.js b/front-ui/app/models/menuItemCollection.js index 674eb36..bd66009 100644 --- a/front-ui/app/models/menuItemCollection.js +++ b/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; diff --git a/front-ui/app/stores/menuItemStore.js b/front-ui/app/stores/menuItemStore.js new file mode 100644 index 0000000..252bc00 --- /dev/null +++ b/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;