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>×</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>×</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