seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* wip

This commit is contained in:
Seth Call 2015-10-26 20:20:26 -05:00
parent d52f6b570a
commit b686020b49
7 changed files with 65 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
web/app/assets/javascripts/configureTracksHelper2.js
View File

@ -22,136 +22,7 @@
var $instrumentsHolder = null;
var isDragging = false;
function removeHoverer($hoverChannel) {
var $channel = $hoverChannel.data('original')
$channel.data('cloned', null);
$hoverChannel.remove();
}
function hoverIn($channel) {
if(isDragging) return;
var $container = $channel.closest('.target');
var inTarget = $container.length > 0;
if(!inTarget) {
$container = $channel.closest('.channels-holder')
}
var $inputs = $container.find('.ftue-input');
var index = $inputs.index($channel);
// $channel.css('padding', '0 5px');
if(inTarget) {
$channel.data('container', $container)
$channel.addClass('hovering');
$channel.css('color', 'white')
$channel.css('background-color', '#333');
$channel.css('border', '#333');
$channel.css('border-radius', '2px');
$channel.css('min-width', '49%');
$channel.css('width', 'auto');
$channel.css('position', 'absolute');
$container.css('overflow', 'visible');
}
else {
var $offsetParent = $channel.offsetParent();
var parentOffset = $offsetParent.offset();
var hoverChannel = $(context._.template($templateAssignablePort.html(), {id: 'bogus', name: $channel.text(), direction: 'bogus'}, { variable: 'data' }));
hoverChannel
.css('position', 'absolute')
.css('color', 'white')
.css('left', $channel.position().left)
.css('top', $channel.position().top)
.css('background-color', '#333')
.css('min-width', $channel.width())
.css('min-height', $channel.height())
.css('z-index', 10000)
.css('background-position', '4px 6px')
.css('padding-left', '14px')
.data('original', $channel);
$channel.data('cloned', hoverChannel);
hoverChannel
.hover(function(e) {
var hoverCheckTimeout = hoverChannel.data('hoverCheckTimeout');
if(hoverCheckTimeout) {
clearTimeout(hoverCheckTimeout);
hoverChannel.data('hoverCheckTimeout', null);
}
}, function() { removeHoverer($(this)); })
.mousedown(function(e) {
// because we have obscured the element the user wants to drag,
// we proxy a mousedown on the hover-element to the covered .ftue-input ($channel).
// this causes jquery.drag to get going even though the user clicked a different element
$channel.trigger(e)
})
hoverChannel.data('hoverCheckTimeout', setTimeout(function() {
// check if element has already been left
hoverChannel.data('hoverCheckTimeout', null);
removeHoverer(hoverChannel);
}, 500));
hoverChannel.prependTo($offsetParent);
}
$channel.css('z-index', 10000)
if(inTarget && $inputs.length == 2) {
if(index == 0) {
$channel.css('right', '50%')
}
else {
$channel.css('left', '51%')
}
}
}
function hoverOut($channel) {
var $cloned = $channel.data('cloned');
if($cloned) {
return; // let the cloned handle the rest of hover out logic when it's hovered-out
}
$channel
.removeClass('hovering')
.css('color', '')
.css('font-weight', '')
.css('position', '')
.css('width', '')
.css('background-color', '')
.css('padding', '')
.css('padding-left', '')
.css('background-position', '')
.css('border', '')
.css('border-radius', '')
.css('right', '')
.css('left', '')
.css('min-width', '')
.css('z-index', '')
.css('margin-left', '')
.css('max-width', 'auto');
//var $container = $channel.closest('.target');
var $container = $channel.data('container');
if($container) {
$container.css('overflow', '')
}
}
function fixClone($clone) {
$clone
.css('color', '')
.css('font-weight', '')
.css('width', 'auto')
.css('background-color', '')
.css('padding', '')
.css('border', '')
.css('border-radius', '')
.css('right', '')
.css('min-width', '')
}
// inputChannelFilter is an optional argument that is used by the Gear Wizard.
// basically, if an input channel isn't in there, it's not going to be displayed
@ -176,11 +47,6 @@
var $channel = $(context._.template($templateAssignablePort.html(), $.extend({}, inputChannel, {direction:'in'}), { variable: 'data' }));
$channel.hover(
function() { hoverIn ($(this)) },
function() { hoverOut($(this)) }
);
if(forceInputsToUnassign || inputChannel.assignment == ASSIGNMENT.UNASSIGNED) {
unassignInputChannel($channel);
}
@ -205,10 +71,7 @@
context._.each(outputChannels, function (outputChannel, index) {
var $channel = $(context._.template($templateAssignablePort.html(), $.extend({}, outputChannel, {direction:'out'}), { variable: 'data' }));
$channel.hover(
function() { hoverIn ($(this)) },
function() { hoverOut($(this)) }
);
if(outputChannel.assignment == ASSIGNMENT.UNASSIGNED) {
unassignOutputChannel($channel);
@ -223,29 +86,6 @@
}
addChannelToOutput($channel, $output.find('.output-target'));
}
$channel.draggable({
helper: 'clone',
start: function(e,ui) {
isDragging = true;
var $channel = $(this);
fixClone(ui.helper);
var $output = $channel.closest('.output-target');
var isUnassigned = $output.length == 0;
if(isUnassigned) {
$outputChannelHolder.find('.output-target').addClass('possible-target');
}
else {
$outputChannelHolder.find('.output-target').addClass('possible-target');
$unassignedOutputsHolder.addClass('possible-target');
}
},
stop: function() {
isDragging = false;
$outputChannelHolder.find('.output-target').removeClass('possible-target');
$unassignedOutputsHolder.removeClass('possible-target')
}
});
});
}
@ -439,93 +279,6 @@
$originallyAssignedTrack.attr('output-count', $originallyAssignedTrack.find('.ftue-input:not(.ui-draggable-dragging)').length)
}
function initializeUnassignedOutputDroppable() {
$unassignedOutputsHolder.droppable(
{
accept: '.ftue-input[data-direction="out"]',
activeClass: 'drag-in-progress',
hoverClass: 'drag-hovering',
drop: function( event, ui ) {
var $channel = ui.draggable;
//$channel.css('left', '0').css('top', '0');
unassignOutputChannel($channel);
}
});
}
function initializeUnassignedInputDroppable() {
$unassignedInputsHolder.droppable(
{
accept: '.ftue-input[data-direction="in"]',
activeClass: 'drag-in-progress',
hoverClass: 'drag-hovering',
drop: function( event, ui ) {
var $channel = ui.draggable;
//$channel.css('left', '0').css('top', '0');
unassignInputChannel($channel);
}
});
}
function initializeOutputDroppables() {
var i;
for(i = 0; i < MAX_OUTPUTS; i++) {
var $target = $(context._.template($templateOutputTarget.html(), {num: i }, { variable: 'data' }));
$outputChannelHolder.append($target);
$target.find('.output-target').droppable(
{
accept: '.ftue-input[data-direction="out"]',
activeClass: 'drag-in-progress',
hoverClass: 'drag-hovering',
drop: function( event, ui ) {
var $slot = $(this);
if($slot.attr('output-count') == 1) {
return false; // max of 1 output per slot
}
var $channel = ui.draggable;
//$channel.css('left', '0').css('top', '0');
addChannelToOutput($channel, $slot);
}
});
}
}
function initializeTrackDroppables() {
var i;
for(i = 0; i < MAX_TRACKS; i++) {
var $target = $(context._.template($templateTrackTarget.html(), {num: i }, { variable: 'data' }));
$tracksHolder.append($target);
$target.find('.track-target').droppable(
{
accept: '.ftue-input[data-direction="in"]',
activeClass: 'drag-in-progress',
hoverClass: 'drag-hovering',
drop: function( event, ui ) {
var $track = $(this);
if($track.attr('track-count') == 2) {
return false; // max of 2 inputs per track
}
var $channel = ui.draggable;
//$channel.css('left', '0').css('top', '0');
addChannelToTrack($channel, $track);
}
});
}
}
function initializeInstrumentDropdown() {
var i;
for(i = 0; i < MAX_TRACKS; i++) {
var $root = $('<div class="track-instrument"></div>');
$root.instrumentSelector().attr('data-num', i);
$instrumentsHolder.append($root);
}
}
function initialize(_$parent) {
$parent = _$parent;

4
web/app/assets/javascripts/dialog/configureTrackDialog.js
View File

@ -247,8 +247,8 @@
$btnAddNewGear = $dialog.find('.btn-add-new-audio-gear');
$btnUpdateTrackSettings = $dialog.find('.btn-update-settings');
configureTracksHelper = new context.JK.ConfigureTracksHelper(app);
configureTracksHelper.initialize($dialog);
//configureTracksHelper = new context.JK.ConfigureTracksHelper(app);
//configureTracksHelper.initialize($dialog);
voiceChatHelper = new context.JK.VoiceChatHelper(app);
voiceChatHelper.initialize($dialog, 'configure_track_dialog', true, {vuType: "vertical", lightCount: 10, lightWidth: 3, lightHeight: 17}, 191);

1
web/app/assets/javascripts/react-components.js vendored
View File

@ -3,6 +3,7 @@
//= require_directory ./react-components/helpers
//= require_directory ./react-components/actions
//= require ./react-components/stores/AppStore
//= require ./react-components/stores/ConfigureTracksStore
//= require ./react-components/stores/BrowserMediaStore
//= require ./react-components/stores/RecordingStore
//= require ./react-components/stores/VideoStore

18
web/app/assets/javascripts/react-components/ConfigureTracks.js.jsx.coffee Normal file
View File

@ -0,0 +1,18 @@
context = window
rest = context.JK.Rest()
ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
MIX_MODES = context.JK.MIX_MODES
@ConfigureTracks = React.createClass({
mixins: [Reflux.listenTo(@ConfigureTrackStore,"onConfigureTracksChanged")]
onConfigureTrackChanged: (state) ->
@setState({configureTracks: state)
render: () ->
`<div>
<select className="certified-audio-profile"></select>
</div>`
})

5
web/app/assets/javascripts/react-components/actions/ConfigureTracksActions.js.coffee Normal file
View File

@ -0,0 +1,5 @@
context = window
@ConfigureTracksActions = Reflux.createActions({
reset: {}
})

37
web/app/assets/javascripts/react-components/stores/ConfigureTracksStore.js.coffee Normal file
View File

@ -0,0 +1,37 @@
$ = jQuery
context = window
logger = context.JK.logger
@ConfigureTracksStore = Reflux.createStore(
{
listenables: @ConfigureTracksActions
musicPorts: {inputs:[], outputs:[]}
init: () ->
this.listenTo(context.AppStore, this.onAppInit);
onAppInit: (@app) ->
onReset: () ->
logger.debug("ConfigureTracksStore:reset")
@loadChannels()
onTrySave: () ->
logger.debug("ConfigureTracksStore:trySave")
changed: () ->
@state = {musicPorts: @musicPorts}
loadChannels: (forceInputsToUnassign, inputChannelFilter) ->
# inputChannelFilter is an optional argument that is used by the Gear Wizard.
# basically, if an input channel isn't in there, it's not going to be displayed
@musicPorts = context.jamClient.FTUEGetChannels()
@changed()
}
)

26
web/app/views/dialogs/_configure_tracks_dialog.html.haml
View File

@ -16,32 +16,8 @@
.tab.no-selection-range{'tab-id' => 'music-audio'}
.column
.certified-audio-profile-section
.sub-header Certified Audio Profile
%select.certified-audio-profile
.clearall
= react_component 'ConfigureTracks', {}
.unused-audio-inputs-section
.sub-header Unused Input Ports
.unassigned-input-channels.channels-holder
.unused-audio-outputs-section
.sub-header Unused Output Ports
.unassigned-output-channels.channels-holder
.column
.input-tracks-section
.sub-column
.sub-header Track Input Port(s)
.input-tracks.tracks
.sub-column
.sub-header Instrument
.instruments
.output-channels-section
.sub-header Audio Output Port
.output-channels
.clearall