opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-24 02:04:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: remove 'jquery.event.drag.js' from base_panels.mako; Paired collection creator: allow single/multiple pairs to be re-ordered by drag and drop

Browse Source
This commit is contained in:
Carl Eberhard
2014-08-28 12:19:16 -04:00
parent e24df033be
commit 17a6595b5c
5 changed files with 173 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/scripts/mvc/collection/paired-collection-creator.js
+154 -1
View File
@@ -27,11 +27,14 @@ var PairView = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
className : 'dataset paired',
initialize : function( attributes ){
//console.debug( 'PairView.initialize:', attributes );
this.pair = attributes.pair || {};
},
render : function(){
this.$el.attr( 'draggable', true )
this.$el
.attr( 'draggable', true )
.data( 'pair', this.pair )
.html( _.template([
'<span class="forward-dataset-name flex-column"><%= pair.forward.name %></span>',
'<span class="pair-name-column flex-column">',
@@ -40,7 +43,51 @@ var PairView = Backbone.View.extend( baseMVC.LoggableMixin ).extend({
'<span class="reverse-dataset-name flex-column"><%= pair.reverse.name %></span>'
].join(''), { pair: this.pair }))
.addClass( 'flex-column-container' );
//TODO: would be good to get the unpair-btn into this view - but haven't found a way with css
return this;
},
events : {
'dragstart' : '_dragstart',
'dragend' : '_dragend',
'dragover' : '_sendToParent',
'drop' : '_sendToParent'
},
/** dragging pairs for re-ordering */
_dragstart : function( ev ){
//console.debug( this, '_dragstartPair', ev );
ev.currentTarget.style.opacity = '0.4';
if( ev.originalEvent ){ ev = ev.originalEvent; }
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData( 'text/plain', JSON.stringify( this.pair ) );
//ev.dataTransfer.setDragImage( null, 0, 0 );
// the canvas can be used to create the image
//ev.dataTransfer.setDragImage( canvasCrossHairs(), 25, 25 );
//console.debug( 'ev.dataTransfer:', ev.dataTransfer );
this.$el.parent().trigger( 'pair.dragstart', [ this ] );
},
/** dragging pairs for re-ordering */
_dragend : function( ev ){
//console.debug( this, '_dragendPair', ev );
ev.currentTarget.style.opacity = '1.0';
this.$el.parent().trigger( 'pair.dragend', [ this ] );
},
/** manually bubble up an event to the parent/container */
_sendToParent : function( ev ){
this.$el.parent().trigger( ev );
},
/** string rep */
toString : function(){
return 'PairView(' + this.pair.name + ')';
}
});
@@ -106,6 +153,9 @@ var PairedCollectionCreator = Backbone.View.extend( baseMVC.LoggableMixin ).exte
/** is the paired panel shown? */
this.pairedPanelHidden = false;
/** DOM elements currently being dragged */
this.$dragging = null;
this._dataSetUp();
this._setUpBehaviors();
@@ -929,8 +979,17 @@ var PairedCollectionCreator = Backbone.View.extend( baseMVC.LoggableMixin ).exte
'mousedown .flexible-partition-drag' : '_startPartitionDrag',
// paired
'click .paired-columns .dataset.paired' : 'selectPair',
'click .paired-columns' : 'clearSelectedPaired',
'click .paired-columns .pair-name' : '_clickPairName',
'click .unpair-btn' : '_clickUnpair',
// paired - drop target
//'dragenter .paired-columns' : '_dragenterPairedColumns',
//'dragleave .paired-columns .column-datasets': '_dragleavePairedColumns',
'dragover .paired-columns .column-datasets' : '_dragoverPairedColumns',
'drop .paired-columns .column-datasets' : '_dropPairedColumns',
'pair.dragstart .paired-columns .column-datasets' : '_pairDragstart',
'pair.dragend .paired-columns .column-datasets' : '_pairDragend',
// footer
'change .remove-extensions' : function( ev ){ this.toggleExtensions(); },
@@ -1226,9 +1285,15 @@ var PairedCollectionCreator = Backbone.View.extend( baseMVC.LoggableMixin ).exte
// ........................................................................ paired
/** select a pair when clicked */
selectPair : function( ev ){
ev.stopPropagation();
$( ev.currentTarget ).toggleClass( 'selected' );
},
/** deselect all pairs */
clearSelectedPaired : function( ev ){
this.$( '.paired-columns .dataset.selected' ).removeClass( 'selected' );
},
/** rename a pair when the pair name is clicked */
_clickPairName : function( ev ){
ev.stopPropagation();
@@ -1255,6 +1320,94 @@ var PairedCollectionCreator = Backbone.View.extend( baseMVC.LoggableMixin ).exte
this._unpair( this.paired[ pairIndex ] );
},
// ........................................................................ paired - drag and drop re-ordering
//_dragenterPairedColumns : function( ev ){
// console.debug( '_dragenterPairedColumns:', ev );
//},
//_dragleavePairedColumns : function( ev ){
// //console.debug( '_dragleavePairedColumns:', ev );
//},
/** track the mouse drag over the paired list adding a placeholder to show where the drop would occur */
_dragoverPairedColumns : function( ev ){
//console.debug( '_dragoverPairedColumns:', ev );
ev.preventDefault();
var $list = this.$( '.paired-columns .column-datasets' ),
offset = $list.offset();
//console.debug( ev.originalEvent.clientX, ev.originalEvent.clientY );
var $nearest = this._getNearestPairedDatasetLi( ev.originalEvent.clientY );
//console.debug( ev.originalEvent.clientX - offset.left, ev.originalEvent.clientY - offset.top );
$( '.paired-drop-placeholder' ).remove();
var $placeholder = $( '<div class="paired-drop-placeholder"></div>')
if( !$nearest.size() ){
$list.append( $placeholder );
} else {
$nearest.before( $placeholder );
}
},
/** get the nearest *previous* paired dataset PairView based on the mouse's Y coordinate.
* If the y is at the end of the list, return an empty jQuery object.
*/
_getNearestPairedDatasetLi : function( y ){
var WIGGLE = 4,
lis = this.$( '.paired-columns .column-datasets li' ).toArray();
//TODO: better way?
for( var i=0; i<lis.length; i++ ){
var $li = $( lis[i] ),
top = $li.offset().top,
halfHeight = Math.floor( $li.outerHeight() / 2 ) + WIGGLE;
if( top + halfHeight > y && top - halfHeight < y ){
//console.debug( y, top + halfHeight, top - halfHeight )
return $li;
}
}
return $();
},
/** drop (dragged/selected PairViews) onto the list, re-ordering both the DOM and the internal array of pairs */
_dropPairedColumns : function( ev ){
// both required for firefox
ev.preventDefault();
ev.dataTransfer.dropEffect = 'move';
var $nearest = this._getNearestPairedDatasetLi( ev.originalEvent.clientY );
if( $nearest.size() ){
this.$dragging.insertBefore( $nearest );
} else {
// no nearest before - insert after last element (unpair button)
this.$dragging.insertAfter( this.$( '.paired-columns .unpair-btn' ).last() );
}
// resync the creator's list of paired based on the new DOM order
this._syncPairsToDom();
return false;
},
/** resync the creator's list of paired based on the DOM order of pairs */
_syncPairsToDom : function(){
var newPaired = [];
//TODO: ugh
this.$( '.paired-columns .dataset.paired' ).each( function(){
newPaired.push( $( this ).data( 'pair' ) );
});
//console.debug( newPaired );
this.paired = newPaired;
this._renderPaired();
},
/** drag communication with pair sub-views: dragstart */
_pairDragstart : function( ev, pair ){
//console.debug( '_pairDragstart', ev, pair )
// auto select the pair causing the event and move all selected
pair.$el.addClass( 'selected' );
var $selected = this.$( '.paired-columns .dataset.selected' );
this.$dragging = $selected;
},
/** drag communication with pair sub-views: dragend - remove the placeholder */
_pairDragend : function( ev, pair ){
//console.debug( '_pairDragend', ev, pair )
$( '.paired-drop-placeholder' ).remove();
this.$dragging = null;
},
// ........................................................................ footer
toggleExtensions : function( force ){
var creator = this;
static/scripts/packed/mvc/collection/paired-collection-creator.js
+1 -1
View File
File diff suppressed because one or more lines are too long
static/style/blue/base.css
+2
View File
@@ -1870,6 +1870,8 @@ pre.peek table,pre.peek th,pre.peek tr,pre.peek td{font-family:Monaco,Menlo,Cons
.collection-creator .flexible-partition .column-header .remove-extensions-link{display:none}
.collection-creator .paired-columns{height:0;border:1px solid lightgrey;border-width:1px 0 1px 0;margin-bottom:8px}.collection-creator .paired-columns .column-datasets{width:100%;overflow:auto}
.collection-creator .paired-columns .unpair-btn{float:right;margin-top:-32px;width:31px;height:32px;border-color:transparent;background:transparent;font-size:120%}.collection-creator .paired-columns .unpair-btn:hover{border-color:#BFBFBF;background:#DEDEDE}
.collection-creator .paired-columns .paired-drop-placeholder{width:60px;height:3px;margin:2px 0px 0px 14px;background:black}.collection-creator .paired-columns .paired-drop-placeholder:before{float:left;font-size:120%;margin:-9px 0 0 -8px;font-family:FontAwesome;content:'\f0da'}
.collection-creator .paired-columns .paired-drop-placeholder:last-child{margin-bottom:8px}
.collection-creator .paired-columns .empty-message{text-align:center}
.collection-creator .footer{padding-bottom:8px}.collection-creator .footer .attributes .remove-extensions-prompt{line-height:32px}.collection-creator .footer .attributes .remove-extensions-prompt .remove-extensions{display:inline-block;width:24px;height:24px}
.collection-creator .footer .attributes .collection-name-prompt{margin:5px 4px 0 0}
static/style/src/less/ui/paired-collection-creator.less
+16
View File
@@ -374,6 +374,22 @@
background: #DEDEDE;
}
}
.paired-drop-placeholder {
width : 60px;
height : 3px;
margin : 2px 0px 0px 14px;
background : black;
&:before {
float: left;
font-size: 120%;
margin: -9px 0px 0px -8px;
font-family: FontAwesome;
content: '\f0da';
}
&:last-child {
margin-bottom: 8px;
}
}
.empty-message {
text-align: center;
}
templates/base/base_panels.mako
-1
View File
@@ -106,7 +106,6 @@
## Scripts can be loaded later since they progressively add features to
## the panels, but do not change layout
${h.js(
'libs/jquery/jquery.event.drag',
'libs/jquery/jquery.event.hover',
'libs/jquery/jquery.form',
'libs/jquery/jquery.rating',