react-navbar.cjsx

Backbone = require('backbone')
React = require('react')
_ = require('underscore')
{settings} = require('../../common.coffee')
radio = require('../../controllers/radio.coffee')


Brand = React.createClass

  render: ->
    <a href="#" className="navbar-brand">{settings.appName}</a>


CollapsedNavToggle = React.createClass

  render: ->
    <div className="navbar-toggle"
         data-toggle="collapse" data-target=".navbar-collapse">
      <span className="sr-only">
        Toggle Navigation
        {_.range(3).map (i) -> <span className="icon-bar" key={i} />}
      </span>
    </div>


ActionBar = React.createClass

  mixins: [
      React.BackboneMixin("actions")
  ]

  render: ->
    <ul className="nav navbar-nav">
      <li className="dropdown">
        <a className="dropdown-toggle" data-toggle="dropdown" href='#'>
          <span>Action</span>
          <b className="caret" />
        </a>
        <ul className="dropdown-menu" role="menu">
          {@props.actions.map ((action) =>
            <li key={action.id}>
              <a href='#' onClick={@handleActionClick.bind(this, action.id)}>
                {action.get('name')}
              </a>
            </li>
            ), this
          }
        </ul>
      </li>
    </ul>

  handleActionClick: (actionId, event) ->
    # launch command handler registered for selected action
    radio.commands.command actionId


FilterSelect = React.createClass

  mixins: [
      React.BackboneMixin("filter")
  ]

  onSelectChange: (event) ->
    @props.filter.setValue(event.target.value)

  render: ->
    <select ref="select" className="form-control"
            value={@props.filter.get('value')}
            onChange={@onSelectChange}>
      {_.map @props.filter.get('options'), (option) ->
        <option key={option.value} value={option.value}>
          {option.name}
        </option>
      }
    </select>


FilterBar = React.createClass

  render: ->
    <ul className="nav navbar-nav pull-right">
      <li><a href="#">{@props.filter.get('name')}</a></li>
      <li className="navbar-form"><FilterSelect filter={@props.filter} /></li>
    </ul>


AccountBar = React.createClass

  mixins: [
      React.BackboneMixin("account")
  ]

  render: ->
    <ul className="nav navbar-nav pull-right">
      <li>
        <a href="#">
          {@props.account.get('username')}
          <b className="caret" />
        </a>
      </li>
    </ul>

NavbarView = React.createClass

  render: ->
    <div className="navbar navbar-inverse navbar-fixed-top">
      <div className="container-fluid">
        <div className="navbar-header">
          <CollapsedNavToggle />
          <Brand />
        </div>
        <div className="collapse navbar-collapse">
          <ActionBar actions={@props.actions} />
          <AccountBar account={@props.account} />
          {@props.filters.map (filter) ->
            <FilterBar filter={filter} key={filter.id} />
          }
        </div>
      </div>
    </div>


module.exports = {
  NavbarView
}