# @cjsx React.DOM $ = require('jquery') Backbone = require('backbone') React = require('react') classnames = require('classnames') Cards = require('./cards') Card = require('./card') CardCollection = require('../models/cards') Pagination = require('./pagination') helpers = require('../helpers') config = require('../config') Glyphicon = require('react-bootstrap/lib/Glyphicon')
module.exports = React.createClass
displayName: 'List' componentDidMount: -> console.log '[views/list] component did mount' @props.cards.on 'sync', @forceUpdate.bind(@, null) componentWillReceiveProps: (nextProps)-> console.log '[views/list] component will receive props' nextProps.cards.on 'sync', @forceUpdate.bind(@, null) atozParam: ()-> @queryParam {sort: 'title', order: 'asc', page: 1}, [] latestParam: ()-> @queryParam {sort: 'updated_at', order: 'desc', page: 1}, [] randomParam: ()-> @queryParam {order: 'random'}, ['sort', 'page'] tagParam: (tag)-> @queryParam {tag: tag}, [] queryParam: (param, deleteKeys)-> query = $.extend {}, @props.cards.query, param for key in deleteKeys delete query[key] $.param(query) render: -> <div className="container carte-list"> {if !@props.card && @props.cards.collectionName == 'Cards' <div className="row"> <div className="col-sm-4"> <ul className="nav nav-pills"> { for menuItem in config.menu_items switch menuItem when 'atoz' <li key='atoz'> <a onClick={helpers.reload} href={"#/?" + @atozParam()}> <span className={classnames('carte-strong': @props.cards.query.sort == 'title' and @props.cards.query.order != 'random')}>A to Z</span> </a> </li> when 'latest' <li key='latest'> <a onClick={helpers.reload} href={"#/?" + @latestParam()}> <span className={classnames('carte-strong': @props.cards.query.sort == 'updated_at' and @props.cards.query.order != 'random')}>Latest</span> </a> </li> when 'random' <li key='random'> <a onClick={helpers.reload} href={"#/?" + @randomParam()}> <span className={classnames('carte-strong': @props.cards.query.order == 'random')}>Random</span> </a> </li> } <li> <a href={"#/tags"}> <Glyphicon glyph='tag' /> </a> </li> <li> <a href={config.root_path + config.api_path + "/cards.xml?" + @queryParam({}, [])}> <i className="fa fa-rss" /> </a> </li> <li> <a href={"#/?" + @queryParam({'mode': 'flash'}, [])}> <i className="fa fa-arrows-alt" /> </a> </li> </ul> </div> <div className="col-sm-4"> <ul className="nav nav-pills nav-justified"> <li> <a href="javascript:void(0)" className="center-block text-center"> <span className="badge"> { if @props.cards.pagination @props.cards.pagination.total_entries else <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' /> } </span> </a> </li> </ul> </div> <div className="col-sm-4"> { if @props.cards.query.order == 'random' <ul className="nav nav-pills pull-right"> <li> { if @props.cards.pagination <a onClick={helpers.reload} href={"#/?" + @randomParam()}> <Glyphicon glyph='refresh' /> </a> else <a href="javascript:void(0)"> <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' /> </a> } </li> </ul> else <Pagination cards={@props.cards} /> } </div> </div> else if @props.card title = @props.card.get('title') else title = @props.router.title <div className="row"> <div className="col-sm-12"> <ul className="nav nav-pills"> <li> <a href={"#/" + encodeURIComponent(title) + '?context=title'}> <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'title')}>A to Z</span> </a> </li> <li> <a href={"#/" + encodeURIComponent(title) + '?context=updated_at'}> <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'updated_at')}>Latest</span> </a> </li> <li> <a href={"#/" + encodeURIComponent(title) + '?context=none'}> <span className={classnames('carte-strong': @props.card && @props.card.query.context == 'none')}>Detail</span> </a> </li> <li> <a href={"#/" + encodeURIComponent(title) + '/history'}> <span className={classnames('carte-strong': @props.cards.collectionName == 'CardHistories')}>History</span> </a> </li> </ul> </div> </div> } { if @props.card && @props.card.query.context == 'none' <div className='row'> <Card key={@props.card.get("title")} card={@props.card} /> </div> else <Cards cards={@props.cards} card={@props.card} /> } { if !@props.card && helpers.isMobile() <div className="row"> <div className="col-sm-12"> <Pagination cards={@props.cards} /> </div> </div> } </div>