jam-cloud/web/app/assets/javascripts/react-components/SessionTrackPan.js.jsx.coffee

54 lines
1.8 KiB
CoffeeScript

context = window
logger = context.JK.logger
@SessionTrackPan = React.createClass({
getInitialState: () ->
{
mixers: this.props.mixers,
behaviors: this.props.behaviors || {}
}
panChanged: (e, data) ->
$target = $(this)
groupId = $target.data('groupId')
mixers = [@state.mixers.mixer]
MixerActions.panChanged(data, mixers, groupId)
render: () ->
mixerId = this.state.mixers?.mixer?.id
`<div className="track-pan">
<div className="left-label">Left</div>
<div className="right-label">Right</div>
<div className="fader horizontal" data-control="fader" data-fader-id={mixerId} data-orientation="horizontal">
<div className="handle" data-control="fader-handle">
<div className="floater"></div>
<img src="/assets/content/slider_gain_horiz.png" width="11" height="28"/>
</div>
</div>
</div>`
componentDidMount: () ->
$root = jQuery(this.getDOMNode())
if !$root.is('.track-pan')
logger.error("unknown root node")
$fader = $root.attr('data-mixer-id', this.state.mixers.mixer.id).data('groupId', this.state.mixers.mixer.groupId).data('mixer', this.state.mixers.mixer).data('opposite-mixer', this.state.mixers.oppositeMixer)
if this.state.behaviors.mediaControlsDisabled
$fader.data('media-controls-disabled', true).data('media-track-opener', this.state.behaviors.mediaTrackOpener) # this we be applied later to the fader handle $element
$fader.data('showHelpAboutMediaMixers', this.state.behaviors.showHelpAboutMediaMixers)
context.JK.FaderHelpers.renderFader2($fader, {faderType: 'horizontal', snap:true}, context.JK.PanHelpers.convertPercentToPanForDisplay)
# Initialize gain position
MixerActions.initPan(this.state.mixers.mixer)
# watch for fader change events
$fader.on('fader_change', this.panChanged)
})