Merge pull request #3886 from guerler/history_drag_drop_000

History drag-and-drop feature with iframe support for run workflow form

client/galaxy/scripts/mvc/history/history-view-edit.js

@@ -68,6 +68,10 @@ var HistoryViewEdit = _super.extend(
         // ---- set up instance vars
         /** editor for tags - sub-view */
         this.tagsEditor = null;
+
+        /** enable drag and drop - sub-view */
+        this.dragItems  = true;
+
         /** editor for annotations - sub-view */
         this.annotationEditor = null;
 

client/galaxy/scripts/mvc/ui/ui-select-content.js

@@ -34,7 +34,8 @@ var View = Backbone.View.extend({
         var self = this;
         this.model = options && options.model || new Backbone.Model({
             src_labels  : { 'hda' : 'dataset', 'hdca': 'dataset collection' },
-            pagelimit   : 100
+            pagelimit   : 100,
+            statustimer : 1000
         }).set( options );
         this.setElement( $( '<div/>' ).addClass( 'ui-select-content' ) );
         this.button_product = new Ui.RadioButton.View( {
@@ -54,6 +55,12 @@ var View = Backbone.View.extend({
                                                     .append( $( '<div/>' ).css( 'clear', 'both' ) )
         };
 
+        // add drag-drop event handlers
+        this.$el.on( 'dragenter', function( e ) { this.lastenter = e.target; self.$el.addClass( 'ui-dragover' ); } )
+                .on( 'dragover',  function( e ) { e.preventDefault(); } )
+                .on( 'dragleave', function( e ) { this.lastenter === e.target && self.$el.removeClass( 'ui-dragover' ); } )
+                .on( 'drop',      function( e ) { self._handleDrop( e ); } );
+
         // track current history elements
         this.history = {};
 
@@ -260,6 +267,48 @@ var View = Backbone.View.extend({
         }
     },
 
+    /** Handles drop events e.g. from history panel */
+    _handleDrop: function( ev ) {
+        try {
+            var data      = this.model.get( 'data' );
+            var current   = this.model.get( 'current' );
+            var config    = this.config[ current ];
+            var field     = this.fields[ current ];
+            var drop_data = JSON.parse( ev.originalEvent.dataTransfer.getData( 'text' ) )[ 0 ];
+            var new_id    = drop_data.id;
+            var new_src   = drop_data.history_content_type == 'dataset' ? 'hda' : 'hdca';
+            var new_value = { id: new_id, src: new_src };
+            if ( data && _.findWhere( data[ new_src ], new_value ) ) {
+                if ( config.src == new_src ) {
+                    var current_value = field.value();
+                    if ( current_value && config.multiple ) {
+                        if ( current_value.indexOf( new_id ) == -1 ) {
+                            current_value.push( new_id );
+                        }
+                    } else {
+                        current_value = new_id;
+                    }
+                    field.value( current_value );
+                } else {
+                    this.model.set( 'value', { values: [ new_value ] } );
+                    this.model.trigger( 'change:value' );
+                }
+                this._handleDropStatus( 'success' );
+            } else {
+                this._handleDropStatus( 'danger' );
+            }
+        } catch( e ) {
+            this._handleDropStatus( 'danger' );
+        }
+    },
+
+    /** Highlight drag result */
+    _handleDropStatus: function( status ) {
+        var self = this;
+        this.$el.removeClass( 'ui-dragover' ).addClass( 'ui-dragover-' + status );
+        setTimeout( function() { self.$el.removeClass( 'ui-dragover-' + status ) }, this.model.get( 'statustimer' ) );
+    },
+
     /** Assists in identifying the batch mode */
     _batch: function( result ) {
         result[ 'batch' ] = false;

client/galaxy/style/less/ui.less

@@ -900,6 +900,25 @@
     }
 }
 
+.ui-dragover {
+    border-radius: 3px;
+    border: 2px solid @table-border-color;
+    background: lighten(@table-border-color, 30%);
+    padding: 2px;
+}
+
+.ui-dragover-danger {
+    &:extend(.ui-dragover);
+    border: 2px solid @state-danger-bg;
+    background: lighten(@state-danger-bg, 10%) !important;
+}
+
+.ui-dragover-success {
+    &:extend(.ui-dragover);
+    border: 2px solid @state-success-bg;
+    background: lighten(@state-success-bg, 10%) !important;
+}
+
 // global select2 adjustments
 .select2-container .select2-choice,
 .select2-container .select2-choices {