Refactor fader controls: clicking
This commit is contained in:
Jonathon Wilson
parent
8751572596
commit
8e8cc779f9
|
|
@ -131,17 +131,19 @@
|
|||
|
||||
function _wireTopVolume() {
|
||||
var $volumeSlider = $('#volume');
|
||||
var mixerIds = [];
|
||||
$.each(mixers, function(index, mixer) {
|
||||
if (mixer.group_id === ChannelGroupIds.MasterGroup) {
|
||||
$volumeSlider.attr('master-id', mixer.id);
|
||||
mixerIds.push(mixer.id);
|
||||
var gainPercent = percentFromMixerValue(
|
||||
mixer.range_low, mixer.range_high, mixer.volume_left);
|
||||
$volumeSlider.find('.slider-volume').css('left', gainPercent + '%');
|
||||
}
|
||||
if (mixer.group_id === ChannelGroupIds.MonitorGroup) {
|
||||
$volumeSlider.attr('monitor-id', mixer.id);
|
||||
mixerIds.push(mixer.id);
|
||||
}
|
||||
});
|
||||
$volumeSlider.attr('mixer-id', mixerIds.join(','));
|
||||
}
|
||||
|
||||
function _addVoiceChat() {
|
||||
|
|
@ -599,56 +601,42 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
// TODO - refactor - all these clicks are the same.
|
||||
// Parameters and consolidate into one.
|
||||
// TODO - It would be nice to refactor this. Each one of
|
||||
// these happens three times in very similar ways.
|
||||
// Best to add markup decorators that can tell the function
|
||||
// whether to be horizontal/vertical, and allow mixer-id
|
||||
// to be a list.
|
||||
|
||||
function faderClick(evt) {
|
||||
logger.debug('faderClick:');
|
||||
logger.debug(evt);
|
||||
evt.stopPropagation();
|
||||
if ($draggingFaderHandle) {
|
||||
return;
|
||||
}
|
||||
var $fader = $(evt.currentTarget);
|
||||
var $handle = $fader.find('div[control="fader-handle"]');
|
||||
var faderPct = getVerticalFaderPercent(evt.clientY, $fader);
|
||||
var mixerId = $fader.closest('[mixer-id]').attr('mixer-id');
|
||||
fillTrackVolumeObject(mixerId);
|
||||
setMixerVolume(mixerId, faderPct);
|
||||
if (faderPct > 90) { faderPct = 90; } // Visual limit
|
||||
$handle.css('bottom', faderPct + '%');
|
||||
return false;
|
||||
}
|
||||
|
||||
function voiceChatClick(evt) {
|
||||
evt.stopPropagation();
|
||||
if ($draggingChatHandle) {
|
||||
return;
|
||||
// Switch based on fader orientation
|
||||
var orientation = $fader.attr('orientation');
|
||||
var getPercentFunction = getVerticalFaderPercent;
|
||||
var absolutePosition = evt.clientY;
|
||||
var handleCssAttribute = 'bottom';
|
||||
if (orientation && orientation == 'horizontal') {
|
||||
getPercentFunction = getHorizontalFaderPercent;
|
||||
absolutePosition = evt.clientX;
|
||||
handleCssAttribute = 'left';
|
||||
}
|
||||
var $fader = $(evt.currentTarget);
|
||||
var $handle = $fader.find('div[control="fader-handle"]');
|
||||
var faderPct = getHorizontalFaderPercent(evt.clientX, $fader);
|
||||
var mixerId = $fader.closest('[mixer-id]').attr('mixer-id');
|
||||
fillTrackVolumeObject(mixerId);
|
||||
setMixerVolume(mixerId, faderPct);
|
||||
if (faderPct > 90) { faderPct = 90; } // Visual limit
|
||||
$handle.css('left', faderPct + '%');
|
||||
return false;
|
||||
}
|
||||
|
||||
function volumeClick(evt) {
|
||||
evt.stopPropagation();
|
||||
if ($draggingVolumeHandle) {
|
||||
return;
|
||||
}
|
||||
var $volume = $(evt.currentTarget);
|
||||
var $handle = $volume.find('div.slider-volume');
|
||||
var faderPct = getHorizontalFaderPercent(evt.clientX, $volume);
|
||||
var masterId = $volume.attr('master-id');
|
||||
var monitorId = $volume.attr('monitor-id');
|
||||
fillTrackVolumeObject(masterId);
|
||||
setMixerVolume(masterId, faderPct);
|
||||
fillTrackVolumeObject(monitorId);
|
||||
setMixerVolume(monitorId, faderPct);
|
||||
var $handle = $fader.find('div[control="fader-handle"]');
|
||||
var faderPct = getPercentFunction(absolutePosition, $fader);
|
||||
// mixerIds can be a comma-separated list
|
||||
var mixerIds = $fader.closest('[mixer-id]').attr('mixer-id').split(',');
|
||||
$.each(mixerIds, function(i,v) {
|
||||
fillTrackVolumeObject(v);
|
||||
setMixerVolume(v, faderPct);
|
||||
});
|
||||
if (faderPct > 90) { faderPct = 90; } // Visual limit
|
||||
$handle.css('left', faderPct + '%');
|
||||
$handle.css(handleCssAttribute, faderPct + '%');
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -660,14 +648,14 @@
|
|||
$('#tracks').on('mousemove', tracksMouseMove);
|
||||
$('body').on('mouseup', tracksMouseUp);
|
||||
|
||||
$('#volume').on('click', volumeClick);
|
||||
$('#volume').on('click', 'div[control="fader"]', faderClick);
|
||||
$('#volume').on('mousedown', '.slider-volume', volumeHandleDown);
|
||||
$('body').on('mousemove', volumeMouseMove);
|
||||
$('body').on('mouseup', volumeMouseUp);
|
||||
|
||||
// Go ahead and wire up voice-chat events, although it won't be visible
|
||||
// (and can't fire events) unless the user has a voice chat mixer
|
||||
$('#voice-chat').on('click', 'div[control="fader"]', voiceChatClick);
|
||||
$('#voice-chat').on('click', 'div[control="fader"]', faderClick);
|
||||
$('#voice-chat').on('mousedown', 'div[control="fader-handle"]', chatHandleDown);
|
||||
$('#voice-chat').on('mousemove', chatMouseMove);
|
||||
$('body').on('mouseup', chatMouseUp);
|
||||
|
|
|
|||
|
|
@ -125,6 +125,11 @@ table.vu td {
|
|||
background-image: url('/assets/content/bkg_volume.png');
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
#volume div[control="fader"] {
|
||||
position:absolute;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.slider-volume {
|
||||
position:absolute;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,11 @@
|
|||
SHARE
|
||||
</a>
|
||||
<div class="master-volume-label">VOLUME</div>
|
||||
<div id="volume" master-id="" monitor-id="">
|
||||
<div class="slider-volume">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
<div id="volume" mixer-id="">
|
||||
<div control="fader" orientation="horizontal">
|
||||
<div class="slider-volume" style="left:0%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -55,7 +57,8 @@
|
|||
<div class="voicechat-label">CHAT</div>
|
||||
<!-- voice chat gain -->
|
||||
<div class="voicechat-gain">
|
||||
<div class="voicechat-gain-wrapper" control="fader">
|
||||
<div class="voicechat-gain-wrapper"
|
||||
control="fader" orientation="horizontal">
|
||||
<!-- voice chat gain slider -->
|
||||
<div class="voicechat-gain-slider" style="left:0%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_gain_horiz.png", {:width => 10, :height => 18} %>
|
||||
|
|
@ -142,16 +145,15 @@
|
|||
<div class="track-close op30">
|
||||
<%= image_tag "content/icon_closetrack.png", {:width => 12, :height => 12} %>
|
||||
</div>
|
||||
<!-- TODO - use user's avatar as curly param -->
|
||||
<div class="avatar-med">
|
||||
<img src="{avatar}"/>
|
||||
</div>
|
||||
<!-- TODO - use track instrument as curly param -->
|
||||
<div class="track-instrument">
|
||||
<img src="/assets/{instrumentIcon}" width="45" height="45"/>
|
||||
</div>
|
||||
<div class="track-gain" mixer-id="{mixerId}">
|
||||
<div class="track-gain-wrapper" control="fader">
|
||||
<div class="track-gain-wrapper"
|
||||
control="fader" orientation="vertical">
|
||||
<div class="track-gain-slider" style="bottom:{gainPercent}%;" control="fader-handle">
|
||||
<%= image_tag "content/slider_gain_vertical.png",
|
||||
{:width => 28, :height => 11} %>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
(function(context, $) {
|
||||
|
||||
describe("JamKazam Main Application", function() {
|
||||
describe("JamServer", function() {
|
||||
var jamserver;
|
||||
|
||||
beforeEach(function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue