* wip
This commit is contained in:
parent
df5fae1981
commit
cc3d48ed0a
|
|
@ -28,13 +28,11 @@
|
|||
|
||||
context._.each(inputChannels, function (inputChannel) {
|
||||
if(inputChannel.assignment == ASSIGNMENT.UNASSIGNED) {
|
||||
var $unassigned = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
|
||||
$unassignedChannelsHolder.append($unassigned);
|
||||
$unassigned.draggable();
|
||||
|
||||
var $channel = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
|
||||
unassignChannel($channel)
|
||||
}
|
||||
else {
|
||||
var $assigned = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
|
||||
var $channel = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
|
||||
|
||||
// find the track this belongs in
|
||||
|
||||
|
|
@ -46,9 +44,29 @@
|
|||
context.JK.alertSupportedNeeded('Unable to find a track for channel with assignment ' + inputChannel.assignment);
|
||||
return false;
|
||||
}
|
||||
addChannelToTrack($assigned, $track);
|
||||
$assigned.draggable();
|
||||
addChannelToTrack($channel, $track.find('.track-target'));
|
||||
}
|
||||
|
||||
$channel.draggable({
|
||||
revert: true,
|
||||
start: function() {
|
||||
var $channel = $(this);
|
||||
var $track = $channel.closest('.track-target');
|
||||
var isUnassigned = $track.length == 0;
|
||||
if(isUnassigned) {
|
||||
$tracksHolder.find('.track-target').addClass('possible-target');
|
||||
}
|
||||
else {
|
||||
$tracksHolder.find('.track-target').addClass('possible-target');
|
||||
$unassignedChannelsHolder.addClass('possible-target');
|
||||
}
|
||||
},
|
||||
stop: function() {
|
||||
$tracksHolder.find('.track-target').removeClass('possible-target');
|
||||
$unassignedChannelsHolder.removeClass('possible-target')
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -58,11 +76,17 @@
|
|||
loadChannels();
|
||||
}
|
||||
|
||||
function removeChannelFromTrack() {
|
||||
function unassignChannel($channel) {
|
||||
var $originallyAssignedTrack = $channel.closest('.track-target');
|
||||
$unassignedChannelsHolder.append($channel);
|
||||
$originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
|
||||
|
||||
}
|
||||
function addChannelToTrack($channel, $track) {
|
||||
$track.find('.track-target').append($channel);
|
||||
var $originallyAssignedTrack = $channel.closest('.track-target');
|
||||
$track.append($channel);
|
||||
$track.attr('track-count', $track.find('.ftue-input').length);
|
||||
$originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
|
||||
}
|
||||
|
||||
function initializeUnassignedDroppable() {
|
||||
|
|
@ -72,7 +96,9 @@
|
|||
hoverClass: 'drag-hovering',
|
||||
drop: function( event, ui ) {
|
||||
console.log("event, ui", event, ui)
|
||||
|
||||
var $channel = ui.draggable;
|
||||
$channel.css('left', '0').css('top', '0');
|
||||
unassignChannel($channel);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -82,16 +108,15 @@
|
|||
for(i = 0; i < MAX_TRACKS; i++) {
|
||||
var $target = $(context._.template($templateTrackTarget.html(), {num: i }, { variable: 'data' }));
|
||||
$tracksHolder.append($target);
|
||||
$target.droppable(
|
||||
$target.find('.track-target').droppable(
|
||||
{
|
||||
activeClass: 'drag-in-progress',
|
||||
hoverClass: 'drag-hovering',
|
||||
drop: function( event, ui ) {
|
||||
console.log("event, ui", event, ui)
|
||||
|
||||
var $target = $(this);
|
||||
var $track = $(this);
|
||||
var $channel = ui.draggable;
|
||||
addChannelToTrack($channel, $target);
|
||||
$channel.css('left', '0').css('top', '0');
|
||||
addChannelToTrack($channel, $track);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -368,16 +368,22 @@
|
|||
width:25%;
|
||||
}
|
||||
|
||||
.unassigned-channels {
|
||||
min-height:240px;
|
||||
overflow-y:scroll;
|
||||
//padding-right:18px; // to keep draggables off of scrollbar. maybe necessary
|
||||
|
||||
.ftue-inputport {
|
||||
height: 37px;
|
||||
&.drag-in-progress {
|
||||
overflow-y:visible;
|
||||
overflow-x:visible;
|
||||
}
|
||||
|
||||
.num {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
line-height: 28px;
|
||||
width: 16px;
|
||||
&.possible-target {
|
||||
border: solid 1px white;
|
||||
|
||||
&.drag-hovering {
|
||||
border: solid 1px #ED3618;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -386,14 +392,31 @@
|
|||
}
|
||||
.track {
|
||||
|
||||
}
|
||||
.track-target {
|
||||
&.possible-target {
|
||||
border-color:white;
|
||||
}
|
||||
&.drag-hovering {
|
||||
border-color:#ED3618;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ftue-input {
|
||||
cursor: move;
|
||||
padding: 4px;
|
||||
border: solid 1px #999;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 15px;
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
text-align:left;
|
||||
direction:rtl;
|
||||
font-size:12px;
|
||||
|
||||
&.ui-draggable-dragging{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
.track-target {
|
||||
|
|
@ -402,13 +425,34 @@
|
|||
padding: 4px;
|
||||
border: solid 1px #999;
|
||||
margin-left: 15px;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 15px;
|
||||
height:20px;
|
||||
overflow:hidden;
|
||||
|
||||
&.drag-in-progress {
|
||||
overflow:visible;
|
||||
}
|
||||
|
||||
.ftue-input {
|
||||
padding:0;
|
||||
border:0;
|
||||
margin-bottom:0;
|
||||
&.ui-draggable-dragging {
|
||||
padding:4px;
|
||||
border: solid 1px #999;
|
||||
overflow:visible;
|
||||
}
|
||||
}
|
||||
|
||||
&[track-count="2"]:not(.drag-in-progress) {
|
||||
.ftue-input {
|
||||
width:50%;
|
||||
display:inline-block;
|
||||
}
|
||||
.ftue-input:nth-child(1)::before {
|
||||
content: ' , '
|
||||
}
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue