# @cjsx React.DOM React = require('react') Edit = require('./edit') ModalTrigger = require('react-bootstrap/lib/ModalTrigger') Glyphicon = require('react-bootstrap/lib/Glyphicon') markdownIt = require('markdown-it')(linkify: true) helpers = require('../helpers') classnames = require('classnames')
module.exports = React.createClass
displayName: 'Card' componentDidMount: -> @props.card.on 'change', @forceUpdate.bind(@, null) getInitialState: ()-> showTools: false editing: false updating: false title: @props.card.get('title') content: @props.card.get('content') onMouseOver: ()-> @setState showTools: true onMouseLeave: ()-> @setState showTools: false showTools: ()-> helpers.isMobile() || @state.showTools render: -> context = @props.card.query.context <div className={ classnames( 'list-group', 'col-sm-4': context != 'none', 'col-xs-12': context != 'none', 'col-sm-12': context == 'none' ) } onMouseOver={@onMouseOver} onMouseLeave={@onMouseLeave} > <div className={classnames('list-group-item', 'carte-card-height': context != 'none')}> <div className="carte-card-header"> { if @props.card.get('focused') || @props.card.query.context == 'none' <Glyphicon glyph='star' /> } <strong> {@props.card.get('title')} </strong> { if @props.card.modelName == 'Card' <span className={classnames('pull-right': true, 'tools': true, 'carte-hidden': !@showTools())}> <ModalTrigger modal={<Edit card={@props.card} />}> <a href="javascript:void(0)"> <Glyphicon glyph='edit' /> </a> </ModalTrigger> <a href={'#/' + encodeURIComponent(@props.card.get('title'))}> <Glyphicon glyph='link' /> </a> </span> else <span className={classnames('pull-right': true)}> <i className="fa fa-clock-o" /> {@props.card.get('version')} </span> } </div> <div className="carte-card-content"> { if @props.card.fetching <Glyphicon glyph='refresh' className='glyphicon-refresh-animate' /> else <div dangerouslySetInnerHTML={__html: helpers.parseCardLink markdownIt.render @props.card.get('content') || ''} /> } </div> <div className={classnames('carte-hidden': !@showTools())}> { if @props.card.get("tags") @props.card.get("tags").map (tag)-> <span className="pull-right tools"> <a href={"#/?tags=" + tag}> <Glyphicon glyph='tag' /> {tag} </a> </span> } </div> </div> </div>