lib/carte/client/views/slideshow.cjsx in carte-server-1.0.1 vs lib/carte/client/views/slideshow.cjsx in carte-server-1.0.2

- old
+ new

@@ -1,43 +1,56 @@ # @cjsx React.DOM $ = require('jquery') -Backbone = require('backbone') React = require('react') CardCollection = require('../models/cards') config = require('../config') helpers = require('../helpers') classnames = require('classnames') markdownIt = require('markdown-it')(linkify: true) +DropdownButton = require('react-bootstrap').DropdownButton +MenuItem = require('react-bootstrap').MenuItem +ButtonGroup = require('react-bootstrap').ButtonGroup +Button = require('react-bootstrap').Button #window.onerror = (error, url, line) -> alert error -Portal = React.createClass +Flash = React.createClass componentDidMount: -> - console.log '[views/slideshow] Portal#componentDidMount' - @setState currCards: @props.cards + console.log '[views/flash] componentDidMount', @props $(document).on 'keydown', @onKeyDown - @props.cards.on 'sync', => - @setState currCard: @props.cards.at(0) - @loadNextCards() - @loadPrevCards() - @forceUpdate.bind(@, null) + @setState currCards: @props.cards + + if @props.cards.at(0) + @setState currCard: @props.cards.at(0), => + @loadNextCards() + @loadPrevCards() + @forceUpdate.bind(@, null) + else + @props.cards.on 'sync', => + @setState currCard: @props.cards.at(0), => + @loadNextCards() + @loadPrevCards() + @forceUpdate.bind(@, null) + componentWillUnmount: -> $(document).off 'keydown', @onKeyDown onKeyDown: (event)-> switch event.keyCode + when 27 then @props.router.navigate(@closeLink()) when 37 then @onClickPrev() when 39 then @onClickNext() getInitialState: -> currCard: null currCards: null nextCards: null prevCards: null - hideValue: 'none' hiding: true + showTools: false + menuOpen: false prevCard: -> _prevCard = @state.currCards.at(@currCardIndex() - 1) console.log '[views/slideshow] prevCard', _prevCard _prevCard @@ -98,11 +111,11 @@ @onClickNext() else @onClickPrev() onClickNext: -> - if @state.hideValue != 'none' && @state.hiding + if @props.cards.query.hide != 'none' && @state.hiding @setState hiding: false else @setState hiding: true if nextCard = @nextCard() @setState currCard: nextCard @@ -111,11 +124,11 @@ @setState currCards: @state.nextCards, prevCards: @state.currCards, ()=> @setState currCard: @state.currCards.at(0), ()=> @loadNextCards() onClickPrev: -> - if @state.hideValue != 'none' && @state.hiding + if @props.cards.query.hide != 'none' && @state.hiding @setState hiding: false else @setState hiding: true if prevCard = @prevCard() @setState currCard: prevCard @@ -126,78 +139,102 @@ @loadPrevCards() closeLink: -> params = $.extend {}, @props.cards.query delete params.mode + delete params.auto + delete params.hide '#/?' + $.param(params) onChangeHide: (event)-> @setState hideValue: event.target.value + onMouseOverTools: ()-> + @setState showTools: true + + onMouseLeaveTools: ()-> + @setState showTools: false + + onClick: -> + @setState showTools: !@state.showTools + + queryParam: (query)-> + query = $.extend {}, @props.cards.query, query + $.param(query) + render: -> - <div className="carte-slideshow" onTouchStart={@onTouchStart} onTouchEnd={@onTouchEnd}> + <div onClick={@onClick} onTouchStart={@onTouchStart} onTouchEnd={@onTouchEnd} style={overflow:'hidden'}> + <div style={position:'absolute',bottom:0,width:'100%',padding:'47px 0px 0px 0px'} onMouseOver={@onMouseOverTools} onMouseLeave={@onMouseLeaveTools}> + <span className={classnames("pull-right":true, 'carte-hidden': !@state.showTools)}> + <ButtonGroup> + <DropdownButton bsSize='large' bsStyle='default' title={'Auto: ' + @props.cards.query.auto} dropup pullRight className={classnames('open': @state.menuOpen)}> + <MenuItem href={'#/?' + @queryParam(auto: "off")} eventKey='1'>off</MenuItem> + <MenuItem href={'#/?' + @queryParam(auto: "fast")} eventKey='2'>fast</MenuItem> + <MenuItem href={'#/?' + @queryParam(auto: "normal")} eventKey='3'>normal</MenuItem> + <MenuItem href={'#/?' + @queryParam(auto: "slow")} eventKey='4'>slow</MenuItem> + </DropdownButton> + <DropdownButton bsSize='large' bsStyle='default' title={'Hide: ' + @props.cards.query.hide} dropup pullRight className={classnames('open': @state.menuOpen)}> + <MenuItem href={'#/?' + @queryParam(hide: "none")} eventKey='1'>none</MenuItem> + <MenuItem href={'#/?' + @queryParam(hide: "title")} eventKey='2'>title</MenuItem> + <MenuItem href={'#/?' + @queryParam(hide: "content")} eventKey='3'>content</MenuItem> + </DropdownButton> + <Button bsSize='large' href={@closeLink()}><strong>&times;</strong></Button> + </ButtonGroup> + </span> + </div> <div style={fontSize:'10vh',padding:'1vh 5vh',overflow:'hidden'}> <div> <strong> { if @state.currCard - if @state.hideValue == 'title' && @state.hiding == true + if @props.cards.query.hide == 'title' && @state.hiding == true '?????' else @state.currCard.get('title') else <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" /> } </strong> - <span className="pull-right tools" style={fontSize:'0.5em'}> - hide: - <select value={@state.hideValue} onChange={@onChangeHide}> - <option value="none">none</option> - <option value="title">title</option> - <option value="content">content</option> - </select> - <a href={@closeLink()}> - <strong>&times;</strong> - </a> - </span> </div> - <div style={paddingTop:'5vh'}> + <div style={paddingTop:'5vh',overflow:'hidden'}> { if @state.currCard - if @state.hideValue == 'content' && @state.hiding == true + if @props.cards.query.hide == 'content' && @state.hiding == true '???????' else <div dangerouslySetInnerHTML={__html: markdownIt.render @state.currCard.get('content')} /> else <i className="glyphicon glyphicon-refresh glyphicon-refresh-animate" /> } </div> </div> </div> -MyPortal = React.createFactory Portal +flash = React.createFactory Flash module.exports = React.createClass - displayName: 'Slideshow' + displayName: 'FlashWrapper' componentDidMount: -> console.log '[views/slideshow] componentDidMount' - @props.cards.on 'sync', @forceUpdate.bind(@, null) @node = document.createElement('div') @node.className = 'carte-slideshow' document.body.appendChild(@node) @renderSlideshow() componentWillReceiveProps: (nextProps)-> console.log '[views/slideshow] componentWillReceiveProps', nextProps - nextProps.cards.on 'sync', @forceUpdate.bind(@, null) + document.body.removeChild(@node) if @node + @node = document.createElement('div') + @node.className = 'carte-slideshow' + document.body.appendChild(@node) + React.render(flash(nextProps), @node) componentWillUnmount: -> console.log '[views/slideshow] componentWillUnmount' document.body.removeChild(@node) renderSlideshow: -> - React.render(MyPortal(@props), @node) + React.render(flash(@props), @node) render: -> - console.log '[views/slideshow] render', @props null