diff --git a/web/app/assets/javascripts/configureTracksHelper2.js b/web/app/assets/javascripts/configureTracksHelper2.js
index 7c4f07128..57111335b 100644
--- a/web/app/assets/javascripts/configureTracksHelper2.js
+++ b/web/app/assets/javascripts/configureTracksHelper2.js
@@ -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 = $('');
- $root.instrumentSelector().attr('data-num', i);
- $instrumentsHolder.append($root);
- }
- }
-
-
function initialize(_$parent) {
$parent = _$parent;
diff --git a/web/app/assets/javascripts/dialog/configureTrackDialog.js b/web/app/assets/javascripts/dialog/configureTrackDialog.js
index 20801cfa6..12558b064 100644
--- a/web/app/assets/javascripts/dialog/configureTrackDialog.js
+++ b/web/app/assets/javascripts/dialog/configureTrackDialog.js
@@ -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);
diff --git a/web/app/assets/javascripts/react-components.js b/web/app/assets/javascripts/react-components.js
index ff86ff8e6..a0d400953 100644
--- a/web/app/assets/javascripts/react-components.js
+++ b/web/app/assets/javascripts/react-components.js
@@ -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
diff --git a/web/app/assets/javascripts/react-components/ConfigureTracks.js.jsx.coffee b/web/app/assets/javascripts/react-components/ConfigureTracks.js.jsx.coffee
new file mode 100644
index 000000000..19de40dc0
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/ConfigureTracks.js.jsx.coffee
@@ -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: () ->
+
+ `
+
+
`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/actions/ConfigureTracksActions.js.coffee b/web/app/assets/javascripts/react-components/actions/ConfigureTracksActions.js.coffee
new file mode 100644
index 000000000..551f91773
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/actions/ConfigureTracksActions.js.coffee
@@ -0,0 +1,5 @@
+context = window
+
+@ConfigureTracksActions = Reflux.createActions({
+ reset: {}
+})
diff --git a/web/app/assets/javascripts/react-components/stores/ConfigureTracksStore.js.coffee b/web/app/assets/javascripts/react-components/stores/ConfigureTracksStore.js.coffee
new file mode 100644
index 000000000..0b52520a0
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/stores/ConfigureTracksStore.js.coffee
@@ -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()
+
+
+
+ }
+)
\ No newline at end of file
diff --git a/web/app/views/dialogs/_configure_tracks_dialog.html.haml b/web/app/views/dialogs/_configure_tracks_dialog.html.haml
index 5611533d1..cb65af8eb 100644
--- a/web/app/views/dialogs/_configure_tracks_dialog.html.haml
+++ b/web/app/views/dialogs/_configure_tracks_dialog.html.haml
@@ -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