mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-10-24 02:04:04 +08:00
History panel: refactor hda/collection views; pack scripts
This commit is contained in:
Carl Eberhard
@@ -1,7 +1,7 @@
|
||||
define([
|
||||
"mvc/dataset/hda-model",
|
||||
"mvc/dataset/hda-base"
|
||||
], function( hdaModel, hdaBase ){
|
||||
"mvc/history/history-content-base-view",
|
||||
"utils/localization"
|
||||
], function( historyContentBaseView, _l ){
|
||||
/* global Backbone, LoggableMixin */
|
||||
//==============================================================================
|
||||
/** @class Read only view for HistoryDatasetCollectionAssociation.
|
||||
@@ -12,10 +12,11 @@ define([
|
||||
* @borrows LoggableMixin#log as #log
|
||||
* @constructs
|
||||
*/
|
||||
var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
var DatasetCollectionBaseView = historyContentBaseView.HistoryContentBaseView.extend({
|
||||
className : "dataset hda history-panel-hda",
|
||||
id : function(){ return 'hdca-' + this.model.get( 'id' ); },
|
||||
|
||||
/** */
|
||||
initialize : function( attributes ){
|
||||
if( attributes.logger ){ this.logger = this.model.logger = attributes.logger; }
|
||||
this.log( this + '.initialize:', attributes );
|
||||
@@ -28,6 +29,7 @@ var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
this.expanded = attributes.expanded || false;
|
||||
},
|
||||
|
||||
/** */
|
||||
render : function( fade ){
|
||||
var $newRender = this._buildNewRender();
|
||||
|
||||
@@ -35,53 +37,47 @@ var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
return this;
|
||||
},
|
||||
|
||||
// main template for folder browsing
|
||||
templateSkeleton : function (){
|
||||
return [
|
||||
'<div class="dataset hda">',
|
||||
'<div class="dataset-warnings">',
|
||||
'<% if ( deleted ) { %>',
|
||||
'<div class="dataset-deleted-msg warningmessagesmall"><strong>',
|
||||
_l( 'This dataset has been deleted.' ),
|
||||
'</div>',
|
||||
'<% } %>',
|
||||
'<% if ( ! visible ) { %>',
|
||||
'<div class="dataset-hidden-msg warningmessagesmall"><strong>',
|
||||
_l( 'This dataset has been hidden.' ),
|
||||
'</div>',
|
||||
'<% } %>',
|
||||
'</div>',
|
||||
'<div class="dataset-selector"><span class="fa fa-2x fa-square-o"></span></div>',
|
||||
'<div class="dataset-primary-actions"></div>',
|
||||
'<div class="dataset-title-bar clear" tabindex="0">',
|
||||
'<span class="dataset-state-icon state-icon"></span>',
|
||||
'<div class="dataset-title">',
|
||||
'<span class="hda-hid"><%= hid %></span> ',
|
||||
'<span class="dataset-name"><%= name %></span>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="dataset-body"></div>',
|
||||
'</div>'
|
||||
].join( '' );
|
||||
},
|
||||
|
||||
templateBody : function() {
|
||||
return [
|
||||
'<div class="dataset-body">',
|
||||
'<div class="dataset-summary">',
|
||||
'A dataset collection.',
|
||||
'</div>'
|
||||
].join( '' );
|
||||
},
|
||||
|
||||
/** */
|
||||
_buildNewRender : function(){
|
||||
var $newRender = $( _.template(this.templateSkeleton(), this.model.toJSON() ) );
|
||||
var $newRender = $( DatasetCollectionBaseView.templates.skeleton( this.model.toJSON() ) );
|
||||
$newRender.find( '.dataset-primary-actions' ).append( this._render_titleButtons() );
|
||||
$newRender.children( '.dataset-body' ).replaceWith( this._render_body() );
|
||||
this._setUpBehaviors( $newRender );
|
||||
return $newRender;
|
||||
},
|
||||
|
||||
/** */
|
||||
_queueNewRender : function( $newRender, fade ) {
|
||||
fade = ( fade === undefined )?( true ):( fade );
|
||||
var view = this;
|
||||
|
||||
// fade the old render out (if desired)
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeOut( view.fxSpeed, next ); });
|
||||
}
|
||||
// empty the old render, update to any new HDA state, swap in the new render contents, handle multi-select
|
||||
$( view ).queue( function( next ){
|
||||
this.$el.empty()
|
||||
.attr( 'class', view.className ).addClass( 'state-' + view.model.get( 'state' ) )
|
||||
.append( $newRender.children() );
|
||||
if( this.selectable ){ this.showSelector( 0 ); }
|
||||
next();
|
||||
});
|
||||
// fade the new in
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeIn( view.fxSpeed, next ); });
|
||||
}
|
||||
// trigger an event to know we're ready
|
||||
$( view ).queue( function( next ){
|
||||
this.trigger( 'rendered', view );
|
||||
if( this.model.inReadyState() ){
|
||||
this.trigger( 'rendered:ready', view );
|
||||
}
|
||||
if( this.draggable ){ this.draggableOn(); }
|
||||
next();
|
||||
});
|
||||
},
|
||||
|
||||
// ................................................................................ titlebar buttons
|
||||
/** Render icon-button group for the common, most easily accessed actions.
|
||||
* @returns {jQuery} rendered DOM
|
||||
@@ -134,6 +130,31 @@ var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
'click .dataset-selector' : 'toggleSelect'
|
||||
},
|
||||
|
||||
/** Show or hide the body/details of history content.
|
||||
* note: if the model does not have detailed data, fetch that data before showing the body
|
||||
* @param {Event} event the event that triggered this (@link HDABaseView#events)
|
||||
* @param {Boolean} expanded if true, expand; if false, collapse
|
||||
* @fires body-expanded when a body has been expanded
|
||||
* @fires body-collapsed when a body has been collapsed
|
||||
*/
|
||||
toggleBodyVisibility : function( event, expand ){
|
||||
// bail (with propagation) if keydown and not space or enter
|
||||
var KEYCODE_SPACE = 32, KEYCODE_RETURN = 13;
|
||||
if( event && ( event.type === 'keydown' )
|
||||
&& !( event.keyCode === KEYCODE_SPACE || event.keyCode === KEYCODE_RETURN ) ){
|
||||
return true;
|
||||
}
|
||||
|
||||
var $body = this.$el.find( '.dataset-body' );
|
||||
expand = ( expand === undefined )?( !$body.is( ':visible' ) ):( expand );
|
||||
if( expand ){
|
||||
this.expandBody();
|
||||
} else {
|
||||
this.collapseBody();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/** Render and show the full, detailed body of this view including extra data and controls.
|
||||
* @fires body-expanded when a body has been expanded
|
||||
*/
|
||||
@@ -162,13 +183,12 @@ var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/** Render an 'ok' collection.
|
||||
* @param {jQuery} parent DOM to which to append this body
|
||||
*/
|
||||
_render_body_ok : function(){
|
||||
// most common state renderer and the most complicated
|
||||
var $body = $( _.template( this.templateBody(), this.model.toJSON() ) );
|
||||
var $body = $( DatasetCollectionBaseView.templates.body( this.model.toJSON() ) );
|
||||
|
||||
// return shortened form if del'd (no display apps or peek?)
|
||||
if( this.model.get( 'deleted' ) ){
|
||||
@@ -176,13 +196,133 @@ var DatasetCollectionBaseView = hdaBase.HistoryContentBaseView.extend({
|
||||
}
|
||||
|
||||
return $body;
|
||||
}
|
||||
},
|
||||
|
||||
// ......................................................................... selection
|
||||
/** display a (fa-icon) checkbox on the left of the hda that fires events when checked
|
||||
* Note: this also hides the primary actions
|
||||
*/
|
||||
showSelector : function(){
|
||||
// make sure selected state is represented properly
|
||||
if( this.selected ){
|
||||
this.select( null, true );
|
||||
}
|
||||
|
||||
this.selectable = true;
|
||||
this.trigger( 'selectable', true, this );
|
||||
|
||||
this.$( '.dataset-primary-actions' ).hide();
|
||||
this.$( '.dataset-selector' ).show();
|
||||
},
|
||||
|
||||
/** remove the selection checkbox */
|
||||
hideSelector : function(){
|
||||
// reverse the process from showSelect
|
||||
this.selectable = false;
|
||||
this.trigger( 'selectable', false, this );
|
||||
|
||||
this.$( '.dataset-selector' ).hide();
|
||||
this.$( '.dataset-primary-actions' ).show();
|
||||
},
|
||||
|
||||
toggleSelector : function(){
|
||||
if( !this.$el.find( '.dataset-selector' ).is( ':visible' ) ){
|
||||
this.showSelector();
|
||||
} else {
|
||||
this.hideSelector();
|
||||
}
|
||||
},
|
||||
|
||||
/** event handler for selection (also programmatic selection)
|
||||
*/
|
||||
select : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-square-o' ).addClass( 'fa-check-square-o' );
|
||||
if( !this.selected ){
|
||||
this.trigger( 'selected', this, event );
|
||||
this.selected = true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/** event handler for clearing selection (also programmatic deselection)
|
||||
*/
|
||||
deselect : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-check-square-o' ).addClass( 'fa-square-o' );
|
||||
if( this.selected ){
|
||||
this.trigger( 'de-selected', this, event );
|
||||
this.selected = false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
toggleSelect : function( event ){
|
||||
if( this.selected ){
|
||||
this.deselect( event );
|
||||
} else {
|
||||
this.select( event );
|
||||
}
|
||||
},
|
||||
|
||||
// ......................................................................... misc
|
||||
/** String representation */
|
||||
toString : function(){
|
||||
var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
|
||||
return 'HDCABaseView(' + modelString + ')';
|
||||
}
|
||||
});
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
DatasetCollectionBaseView : DatasetCollectionBaseView
|
||||
//------------------------------------------------------------------------------ TEMPLATES
|
||||
//TODO: possibly break these out into a sep. module
|
||||
var skeletonTemplate = _.template([
|
||||
'<div class="dataset hda">',
|
||||
'<div class="dataset-warnings">',
|
||||
'<% if ( collection.deleted ) { %>',
|
||||
'<div class="dataset-deleted-msg warningmessagesmall"><strong>',
|
||||
_l( 'This collection has been deleted.' ),
|
||||
'</div>',
|
||||
'<% } %>',
|
||||
'<% if ( !collection.visible ) { %>',
|
||||
'<div class="dataset-hidden-msg warningmessagesmall"><strong>',
|
||||
_l( 'This collection has been hidden.' ),
|
||||
'</div>',
|
||||
'<% } %>',
|
||||
'</div>',
|
||||
'<div class="dataset-selector"><span class="fa fa-2x fa-square-o"></span></div>',
|
||||
'<div class="dataset-primary-actions"></div>',
|
||||
'<div class="dataset-title-bar clear" tabindex="0">',
|
||||
'<span class="dataset-state-icon state-icon"></span>',
|
||||
'<div class="dataset-title">',
|
||||
'<span class="hda-hid"><%= collection.hid %></span> ',
|
||||
'<span class="dataset-name"><%= collection.name %></span>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="dataset-body"></div>',
|
||||
'</div>'
|
||||
].join( '' ));
|
||||
|
||||
var bodyTemplate = _.template([
|
||||
'<div class="dataset-body">',
|
||||
'<div class="dataset-summary">',
|
||||
_l( 'A dataset collection.' ),
|
||||
'</div>'
|
||||
].join( '' ));
|
||||
|
||||
DatasetCollectionBaseView.templates = {
|
||||
// we override here in order to pass the localizer (_L) into the template scope - since we use it as a fn within
|
||||
skeleton : function( collectionJSON ){
|
||||
return skeletonTemplate({ _l: _l, collection: collectionJSON });
|
||||
},
|
||||
body : function( collectionJSON ){
|
||||
return bodyTemplate({ _l: _l, collection: collectionJSON });
|
||||
}
|
||||
};
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
DatasetCollectionBaseView : DatasetCollectionBaseView
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
define([
|
||||
"mvc/dataset/hda-model",
|
||||
"mvc/collection/dataset-collection-base",
|
||||
], function( hdaModel, datasetCollectionBase ){
|
||||
"utils/localization"
|
||||
], function( hdaModel, datasetCollectionBase, _l ){
|
||||
//==============================================================================
|
||||
/** @class Editing view for HistoryDatasetCollectionAssociation.
|
||||
* @name DatasetCollectionEditView
|
||||
@@ -57,13 +58,18 @@ var DatasetCollectionEditView = datasetCollectionBase.DatasetCollectionBaseView.
|
||||
}
|
||||
deleteBtnData.faIcon = 'fa-times';
|
||||
return faIconButton( deleteBtnData );
|
||||
}
|
||||
},
|
||||
|
||||
// ......................................................................... misc
|
||||
/** string rep */
|
||||
toString : function(){
|
||||
var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
|
||||
return 'HDCAEditView(' + modelString + ')';
|
||||
}
|
||||
});
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
DatasetCollectionEditView : DatasetCollectionEditView
|
||||
};
|
||||
|
||||
return {
|
||||
DatasetCollectionEditView : DatasetCollectionEditView
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,152 +1,10 @@
|
||||
define([
|
||||
"mvc/dataset/hda-model",
|
||||
"mvc/base-mvc",
|
||||
"mvc/history/history-content-base-view",
|
||||
"mvc/data",
|
||||
"utils/localization"
|
||||
], function( hdaModel, baseMVC, dataset, _l ){
|
||||
], function( hdaModel, historyContentBaseView, dataset, _l ){
|
||||
/* global Backbone */
|
||||
|
||||
/** @class Read only view for history content views to extend.
|
||||
* @name HistoryContentBaseView
|
||||
*
|
||||
* @augments Backbone.View
|
||||
* @borrows LoggableMixin#logger as #logger
|
||||
* @borrows LoggableMixin#log as #log
|
||||
* @constructs
|
||||
*/
|
||||
var HistoryContentBaseView = Backbone.View.extend( baseMVC.LoggableMixin ).extend(
|
||||
/** @lends HistoryContentBaseView.prototype */{
|
||||
tagName : "div",
|
||||
fxSpeed : 'fast',
|
||||
|
||||
_queueNewRender : function( $newRender, fade ) {
|
||||
fade = ( fade === undefined )?( true ):( fade );
|
||||
var view = this;
|
||||
|
||||
// fade the old render out (if desired)
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeOut( view.fxSpeed, next ); });
|
||||
}
|
||||
// empty the old render, update to any new HDA state, swap in the new render contents, handle multi-select
|
||||
$( view ).queue( function( next ){
|
||||
this.$el.empty()
|
||||
.attr( 'class', view.className ).addClass( 'state-' + view.model.get( 'state' ) )
|
||||
.append( $newRender.children() );
|
||||
if( this.selectable ){ this.showSelector( 0 ); }
|
||||
next();
|
||||
});
|
||||
// fade the new in
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeIn( view.fxSpeed, next ); });
|
||||
}
|
||||
// trigger an event to know we're ready
|
||||
$( view ).queue( function( next ){
|
||||
this.trigger( 'rendered', view );
|
||||
if( this.model.inReadyState() ){
|
||||
this.trigger( 'rendered:ready', view );
|
||||
}
|
||||
if( this.draggable ){ this.draggableOn(); }
|
||||
next();
|
||||
});
|
||||
},
|
||||
|
||||
/** Show or hide the body/details of history content.
|
||||
* note: if the model does not have detailed data, fetch that data before showing the body
|
||||
* @param {Event} event the event that triggered this (@link HDABaseView#events)
|
||||
* @param {Boolean} expanded if true, expand; if false, collapse
|
||||
* @fires body-expanded when a body has been expanded
|
||||
* @fires body-collapsed when a body has been collapsed
|
||||
*/
|
||||
toggleBodyVisibility : function( event, expand ){
|
||||
// bail (with propagation) if keydown and not space or enter
|
||||
var KEYCODE_SPACE = 32, KEYCODE_RETURN = 13;
|
||||
if( event && ( event.type === 'keydown' )
|
||||
&& !( event.keyCode === KEYCODE_SPACE || event.keyCode === KEYCODE_RETURN ) ){
|
||||
return true;
|
||||
}
|
||||
|
||||
var $body = this.$el.find( '.dataset-body' );
|
||||
expand = ( expand === undefined )?( !$body.is( ':visible' ) ):( expand );
|
||||
if( expand ){
|
||||
this.expandBody();
|
||||
} else {
|
||||
this.collapseBody();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// ......................................................................... selection
|
||||
/** display a (fa-icon) checkbox on the left of the hda that fires events when checked
|
||||
* Note: this also hides the primary actions
|
||||
*/
|
||||
showSelector : function(){
|
||||
// make sure selected state is represented properly
|
||||
if( this.selected ){
|
||||
this.select( null, true );
|
||||
}
|
||||
|
||||
this.selectable = true;
|
||||
this.trigger( 'selectable', true, this );
|
||||
|
||||
this.$( '.dataset-primary-actions' ).hide();
|
||||
this.$( '.dataset-selector' ).show();
|
||||
},
|
||||
|
||||
/** remove the selection checkbox */
|
||||
hideSelector : function(){
|
||||
// reverse the process from showSelect
|
||||
this.selectable = false;
|
||||
this.trigger( 'selectable', false, this );
|
||||
|
||||
this.$( '.dataset-selector' ).hide();
|
||||
this.$( '.dataset-primary-actions' ).show();
|
||||
},
|
||||
|
||||
toggleSelector : function(){
|
||||
if( !this.$el.find( '.dataset-selector' ).is( ':visible' ) ){
|
||||
this.showSelector();
|
||||
} else {
|
||||
this.hideSelector();
|
||||
}
|
||||
},
|
||||
|
||||
/** event handler for selection (also programmatic selection)
|
||||
*/
|
||||
select : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-square-o' ).addClass( 'fa-check-square-o' );
|
||||
if( !this.selected ){
|
||||
this.trigger( 'selected', this, event );
|
||||
this.selected = true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/** event handler for clearing selection (also programmatic deselection)
|
||||
*/
|
||||
deselect : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-check-square-o' ).addClass( 'fa-square-o' );
|
||||
if( this.selected ){
|
||||
this.trigger( 'de-selected', this, event );
|
||||
this.selected = false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
toggleSelect : function( event ){
|
||||
if( this.selected ){
|
||||
this.deselect( event );
|
||||
} else {
|
||||
this.select( event );
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
//==============================================================================
|
||||
/** @class Read only view for HistoryDatasetAssociation.
|
||||
* @name HDABaseView
|
||||
@@ -156,16 +14,19 @@ var HistoryContentBaseView = Backbone.View.extend( baseMVC.LoggableMixin ).exten
|
||||
* @borrows LoggableMixin#log as #log
|
||||
* @constructs
|
||||
*/
|
||||
var HDABaseView = HistoryContentBaseView.extend(
|
||||
var HDABaseView = historyContentBaseView.HistoryContentBaseView.extend(
|
||||
/** @lends HDABaseView.prototype */{
|
||||
|
||||
///** logger used to record this.log messages, commonly set to console */
|
||||
//// comment this out to suppress log output
|
||||
//logger : console,
|
||||
|
||||
tagName : "div",
|
||||
className : "dataset hda history-panel-hda",
|
||||
id : function(){ return 'hda-' + this.model.get( 'id' ); },
|
||||
|
||||
fxSpeed : 'fast',
|
||||
|
||||
// ......................................................................... set up
|
||||
/** Set up the view, cache url templates, bind listeners
|
||||
* @param {Object} attributes
|
||||
@@ -253,6 +114,37 @@ var HDABaseView = HistoryContentBaseView.extend(
|
||||
return $newRender;
|
||||
},
|
||||
|
||||
_queueNewRender : function( $newRender, fade ) {
|
||||
fade = ( fade === undefined )?( true ):( fade );
|
||||
var view = this;
|
||||
|
||||
// fade the old render out (if desired)
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeOut( view.fxSpeed, next ); });
|
||||
}
|
||||
// empty the old render, update to any new HDA state, swap in the new render contents, handle multi-select
|
||||
$( view ).queue( function( next ){
|
||||
this.$el.empty()
|
||||
.attr( 'class', view.className ).addClass( 'state-' + view.model.get( 'state' ) )
|
||||
.append( $newRender.children() );
|
||||
if( this.selectable ){ this.showSelector( 0 ); }
|
||||
next();
|
||||
});
|
||||
// fade the new in
|
||||
if( fade ){
|
||||
$( view ).queue( function( next ){ this.$el.fadeIn( view.fxSpeed, next ); });
|
||||
}
|
||||
// trigger an event to know we're ready
|
||||
$( view ).queue( function( next ){
|
||||
this.trigger( 'rendered', view );
|
||||
if( this.model.inReadyState() ){
|
||||
this.trigger( 'rendered:ready', view );
|
||||
}
|
||||
if( this.draggable ){ this.draggableOn(); }
|
||||
next();
|
||||
});
|
||||
},
|
||||
|
||||
/** set up js behaviors, event handlers for elements within the given container
|
||||
* @param {jQuery} $container jq object that contains the elements to process (defaults to this.$el)
|
||||
*/
|
||||
@@ -316,11 +208,11 @@ var HDABaseView = HistoryContentBaseView.extend(
|
||||
if( Galaxy.frame && Galaxy.frame.active ){
|
||||
// Create frame with TabularChunkedView.
|
||||
Galaxy.frame.add({
|
||||
title : "Data Viewer: " + self.model.get('name'),
|
||||
title : "Data Viewer: " + self.model.get( 'name' ),
|
||||
type : "other",
|
||||
content : function(parent_elt) {
|
||||
var new_dataset = new dataset.TabularDataset({id: self.model.get('id')});
|
||||
$.when(new_dataset.fetch()).then(function() {
|
||||
content : function( parent_elt ){
|
||||
var new_dataset = new dataset.TabularDataset({ id: self.model.get( 'id' ) });
|
||||
$.when( new_dataset.fetch() ).then( function(){
|
||||
dataset.createTabularDatasetChunkedView({
|
||||
model: new_dataset,
|
||||
parent_elt: parent_elt,
|
||||
@@ -558,6 +450,31 @@ var HDABaseView = HistoryContentBaseView.extend(
|
||||
'click .dataset-selector' : 'toggleSelect'
|
||||
},
|
||||
|
||||
/** Show or hide the body/details of history content.
|
||||
* note: if the model does not have detailed data, fetch that data before showing the body
|
||||
* @param {Event} event the event that triggered this (@link HDABaseView#events)
|
||||
* @param {Boolean} expanded if true, expand; if false, collapse
|
||||
* @fires body-expanded when a body has been expanded
|
||||
* @fires body-collapsed when a body has been collapsed
|
||||
*/
|
||||
toggleBodyVisibility : function( event, expand ){
|
||||
// bail (with propagation) if keydown and not space or enter
|
||||
var KEYCODE_SPACE = 32, KEYCODE_RETURN = 13;
|
||||
if( event && ( event.type === 'keydown' )
|
||||
&& !( event.keyCode === KEYCODE_SPACE || event.keyCode === KEYCODE_RETURN ) ){
|
||||
return true;
|
||||
}
|
||||
|
||||
var $body = this.$el.find( '.dataset-body' );
|
||||
expand = ( expand === undefined )?( !$body.is( ':visible' ) ):( expand );
|
||||
if( expand ){
|
||||
this.expandBody();
|
||||
} else {
|
||||
this.collapseBody();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/** Render and show the full, detailed body of this view including extra data and controls.
|
||||
* @fires body-expanded when a body has been expanded
|
||||
*/
|
||||
@@ -599,6 +516,75 @@ var HDABaseView = HistoryContentBaseView.extend(
|
||||
});
|
||||
},
|
||||
|
||||
// ......................................................................... selection
|
||||
/** display a (fa-icon) checkbox on the left of the hda that fires events when checked
|
||||
* Note: this also hides the primary actions
|
||||
*/
|
||||
showSelector : function(){
|
||||
// make sure selected state is represented properly
|
||||
if( this.selected ){
|
||||
this.select( null, true );
|
||||
}
|
||||
|
||||
this.selectable = true;
|
||||
this.trigger( 'selectable', true, this );
|
||||
|
||||
this.$( '.dataset-primary-actions' ).hide();
|
||||
this.$( '.dataset-selector' ).show();
|
||||
},
|
||||
|
||||
/** remove the selection checkbox */
|
||||
hideSelector : function(){
|
||||
// reverse the process from showSelect
|
||||
this.selectable = false;
|
||||
this.trigger( 'selectable', false, this );
|
||||
|
||||
this.$( '.dataset-selector' ).hide();
|
||||
this.$( '.dataset-primary-actions' ).show();
|
||||
},
|
||||
|
||||
toggleSelector : function(){
|
||||
if( !this.$el.find( '.dataset-selector' ).is( ':visible' ) ){
|
||||
this.showSelector();
|
||||
} else {
|
||||
this.hideSelector();
|
||||
}
|
||||
},
|
||||
|
||||
/** event handler for selection (also programmatic selection)
|
||||
*/
|
||||
select : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-square-o' ).addClass( 'fa-check-square-o' );
|
||||
if( !this.selected ){
|
||||
this.trigger( 'selected', this, event );
|
||||
this.selected = true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/** event handler for clearing selection (also programmatic deselection)
|
||||
*/
|
||||
deselect : function( event ){
|
||||
// switch icon, set selected, and trigger event
|
||||
this.$el.find( '.dataset-selector span' )
|
||||
.removeClass( 'fa-check-square-o' ).addClass( 'fa-square-o' );
|
||||
if( this.selected ){
|
||||
this.trigger( 'de-selected', this, event );
|
||||
this.selected = false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
toggleSelect : function( event ){
|
||||
if( this.selected ){
|
||||
this.deselect( event );
|
||||
} else {
|
||||
this.select( event );
|
||||
}
|
||||
},
|
||||
|
||||
// ......................................................................... drag/drop
|
||||
draggableOn : function(){
|
||||
this.draggable = true;
|
||||
@@ -824,7 +810,7 @@ HDABaseView.templates = {
|
||||
};
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
HistoryContentBaseView : HistoryContentBaseView,
|
||||
HDABaseView : HDABaseView
|
||||
};});
|
||||
return {
|
||||
HDABaseView : HDABaseView
|
||||
};
|
||||
});
|
||||
|
||||
@@ -423,7 +423,7 @@ var HDAEditView = hdaBase.HDABaseView.extend(
|
||||
/** string rep */
|
||||
toString : function(){
|
||||
var modelString = ( this.model )?( this.model + '' ):( '(no model)' );
|
||||
return 'HDAView(' + modelString + ')';
|
||||
return 'HDAEditView(' + modelString + ')';
|
||||
}
|
||||
});
|
||||
|
||||
@@ -510,6 +510,7 @@ var HDAEditView = hdaBase.HDABaseView.extend(
|
||||
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
HDAEditView : HDAEditView
|
||||
};});
|
||||
return {
|
||||
HDAEditView : HDAEditView
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
define([
|
||||
"mvc/base-mvc",
|
||||
"utils/localization"
|
||||
], function( baseMVC, _l ){
|
||||
/* global Backbone */
|
||||
//==============================================================================
|
||||
/** @class Read only view for history content views to extend.
|
||||
* @name HistoryContentBaseView
|
||||
*
|
||||
* @augments Backbone.View
|
||||
* @borrows LoggableMixin#logger as #logger
|
||||
* @borrows LoggableMixin#log as #log
|
||||
* @constructs
|
||||
*/
|
||||
var HistoryContentBaseView = Backbone.View.extend( baseMVC.LoggableMixin ).extend(
|
||||
/** @lends HistoryContentBaseView.prototype */{
|
||||
});
|
||||
|
||||
//TODO: not sure base view class is warranted or even wise
|
||||
|
||||
|
||||
//==============================================================================
|
||||
return {
|
||||
HistoryContentBaseView : HistoryContentBaseView
|
||||
};
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
define(["mvc/dataset/hda-model","mvc/dataset/hda-base"],function(b,a){var c=a.HistoryContentBaseView.extend({className:"dataset hda history-panel-hda",id:function(){return"hdca-"+this.model.get("id")},initialize:function(d){if(d.logger){this.logger=this.model.logger=d.logger}this.log(this+".initialize:",d);this.selectable=d.selectable||false;this.selected=d.selected||false;this.expanded=d.expanded||false},render:function(e){var d=this._buildNewRender();this._queueNewRender(d,e);return this},templateSkeleton:function(){return['<div class="dataset hda">','<div class="dataset-warnings">',"<% if ( deleted ) { %>",'<div class="dataset-deleted-msg warningmessagesmall"><strong>',_l("This dataset has been deleted."),"</div>","<% } %>","<% if ( ! visible ) { %>",'<div class="dataset-hidden-msg warningmessagesmall"><strong>',_l("This dataset has been hidden."),"</div>","<% } %>","</div>",'<div class="dataset-selector"><span class="fa fa-2x fa-square-o"></span></div>','<div class="dataset-primary-actions"></div>','<div class="dataset-title-bar clear" tabindex="0">','<span class="dataset-state-icon state-icon"></span>','<div class="dataset-title">','<span class="hda-hid"><%= hid %></span> ','<span class="dataset-name"><%= name %></span>',"</div>","</div>",'<div class="dataset-body"></div>',"</div>"].join("")},templateBody:function(){return['<div class="dataset-body">','<div class="dataset-summary">',"A dataset collection.","</div>"].join("")},_buildNewRender:function(){var d=$(_.template(this.templateSkeleton(),this.model.toJSON()));d.find(".dataset-primary-actions").append(this._render_titleButtons());d.children(".dataset-body").replaceWith(this._render_body());this._setUpBehaviors(d);return d},_render_titleButtons:function(){return[]},_render_body:function(){var e=$('<div>Error: unknown state "'+this.model.get("state")+'".</div>'),d=this["_render_body_"+this.model.get("state")];if(_.isFunction(d)){e=d.call(this)}this._setUpBehaviors(e);if(this.expanded){e.show()}return e},_setUpBehaviors:function(d){d=d||this.$el;make_popup_menus(d);d.find("[title]").tooltip({placement:"bottom"})},events:{"click .dataset-title-bar":"toggleBodyVisibility","keydown .dataset-title-bar":"toggleBodyVisibility","click .dataset-selector":"toggleSelect"},expandBody:function(){var d=this;function e(){d.$el.children(".dataset-body").replaceWith(d._render_body());d.$el.children(".dataset-body").slideDown(d.fxSpeed,function(){d.expanded=true;d.trigger("body-expanded",d.model)})}e()},collapseBody:function(){var d=this;this.$el.children(".dataset-body").slideUp(d.fxSpeed,function(){d.expanded=false;d.trigger("body-collapsed",d.model.id)})},_render_body_ok:function(){var d=$(_.template(this.templateBody(),this.model.toJSON()));if(this.model.get("deleted")){return d}return d}});return{DatasetCollectionBaseView:c}});
|
||||
define(["mvc/history/history-content-base-view","utils/localization"],function(e,b){var c=e.HistoryContentBaseView.extend({className:"dataset hda history-panel-hda",id:function(){return"hdca-"+this.model.get("id")},initialize:function(f){if(f.logger){this.logger=this.model.logger=f.logger}this.log(this+".initialize:",f);this.selectable=f.selectable||false;this.selected=f.selected||false;this.expanded=f.expanded||false},render:function(g){var f=this._buildNewRender();this._queueNewRender(f,g);return this},_buildNewRender:function(){var f=$(c.templates.skeleton(this.model.toJSON()));f.find(".dataset-primary-actions").append(this._render_titleButtons());f.children(".dataset-body").replaceWith(this._render_body());this._setUpBehaviors(f);return f},_queueNewRender:function(g,h){h=(h===undefined)?(true):(h);var f=this;if(h){$(f).queue(function(i){this.$el.fadeOut(f.fxSpeed,i)})}$(f).queue(function(i){this.$el.empty().attr("class",f.className).addClass("state-"+f.model.get("state")).append(g.children());if(this.selectable){this.showSelector(0)}i()});if(h){$(f).queue(function(i){this.$el.fadeIn(f.fxSpeed,i)})}$(f).queue(function(i){this.trigger("rendered",f);if(this.model.inReadyState()){this.trigger("rendered:ready",f)}if(this.draggable){this.draggableOn()}i()})},_render_titleButtons:function(){return[]},_render_body:function(){var g=$('<div>Error: unknown state "'+this.model.get("state")+'".</div>'),f=this["_render_body_"+this.model.get("state")];if(_.isFunction(f)){g=f.call(this)}this._setUpBehaviors(g);if(this.expanded){g.show()}return g},_setUpBehaviors:function(f){f=f||this.$el;make_popup_menus(f);f.find("[title]").tooltip({placement:"bottom"})},events:{"click .dataset-title-bar":"toggleBodyVisibility","keydown .dataset-title-bar":"toggleBodyVisibility","click .dataset-selector":"toggleSelect"},toggleBodyVisibility:function(i,g){var f=32,h=13;if(i&&(i.type==="keydown")&&!(i.keyCode===f||i.keyCode===h)){return true}var j=this.$el.find(".dataset-body");g=(g===undefined)?(!j.is(":visible")):(g);if(g){this.expandBody()}else{this.collapseBody()}return false},expandBody:function(){var f=this;function g(){f.$el.children(".dataset-body").replaceWith(f._render_body());f.$el.children(".dataset-body").slideDown(f.fxSpeed,function(){f.expanded=true;f.trigger("body-expanded",f.model)})}g()},collapseBody:function(){var f=this;this.$el.children(".dataset-body").slideUp(f.fxSpeed,function(){f.expanded=false;f.trigger("body-collapsed",f.model.id)})},_render_body_ok:function(){var f=$(c.templates.body(this.model.toJSON()));if(this.model.get("deleted")){return f}return f},showSelector:function(){if(this.selected){this.select(null,true)}this.selectable=true;this.trigger("selectable",true,this);this.$(".dataset-primary-actions").hide();this.$(".dataset-selector").show()},hideSelector:function(){this.selectable=false;this.trigger("selectable",false,this);this.$(".dataset-selector").hide();this.$(".dataset-primary-actions").show()},toggleSelector:function(){if(!this.$el.find(".dataset-selector").is(":visible")){this.showSelector()}else{this.hideSelector()}},select:function(f){this.$el.find(".dataset-selector span").removeClass("fa-square-o").addClass("fa-check-square-o");if(!this.selected){this.trigger("selected",this,f);this.selected=true}return false},deselect:function(f){this.$el.find(".dataset-selector span").removeClass("fa-check-square-o").addClass("fa-square-o");if(this.selected){this.trigger("de-selected",this,f);this.selected=false}return false},toggleSelect:function(f){if(this.selected){this.deselect(f)}else{this.select(f)}},toString:function(){var f=(this.model)?(this.model+""):("(no model)");return"HDCABaseView("+f+")"}});var a=_.template(['<div class="dataset hda">','<div class="dataset-warnings">',"<% if ( collection.deleted ) { %>",'<div class="dataset-deleted-msg warningmessagesmall"><strong>',b("This collection has been deleted."),"</div>","<% } %>","<% if ( !collection.visible ) { %>",'<div class="dataset-hidden-msg warningmessagesmall"><strong>',b("This collection has been hidden."),"</div>","<% } %>","</div>",'<div class="dataset-selector"><span class="fa fa-2x fa-square-o"></span></div>','<div class="dataset-primary-actions"></div>','<div class="dataset-title-bar clear" tabindex="0">','<span class="dataset-state-icon state-icon"></span>','<div class="dataset-title">','<span class="hda-hid"><%= collection.hid %></span> ','<span class="dataset-name"><%= collection.name %></span>',"</div>","</div>",'<div class="dataset-body"></div>',"</div>"].join(""));var d=_.template(['<div class="dataset-body">','<div class="dataset-summary">',b("A dataset collection."),"</div>"].join(""));c.templates={skeleton:function(f){return a({_l:b,collection:f})},body:function(f){return d({_l:b,collection:f})}};return{DatasetCollectionBaseView:c}});
|
||||
@@ -1 +1 @@
|
||||
define(["mvc/dataset/hda-model","mvc/collection/dataset-collection-base",],function(b,c){var a=c.DatasetCollectionBaseView.extend({initialize:function(d){c.DatasetCollectionBaseView.prototype.initialize.call(this,d)},_render_titleButtons:function(){return c.DatasetCollectionBaseView.prototype._render_titleButtons.call(this).concat([this._render_deleteButton()])},_render_deleteButton:function(){if((this.model.get("state")===b.HistoryDatasetAssociation.STATES.NEW)||(this.model.get("state")===b.HistoryDatasetAssociation.STATES.NOT_VIEWABLE)||(!this.model.get("accessible"))){return null}var d=this,e={title:_l("Delete"),classes:"dataset-delete",onclick:function(){d.$el.find(".icon-btn.dataset-delete").trigger("mouseout");d.model["delete"]()}};if(this.model.get("deleted")){e={title:_l("Dataset collection is already deleted"),disabled:true}}e.faIcon="fa-times";return faIconButton(e)}});return{DatasetCollectionEditView:a}});
|
||||
define(["mvc/dataset/hda-model","mvc/collection/dataset-collection-base","utils/localization"],function(c,d,b){var a=d.DatasetCollectionBaseView.extend({initialize:function(e){d.DatasetCollectionBaseView.prototype.initialize.call(this,e)},_render_titleButtons:function(){return d.DatasetCollectionBaseView.prototype._render_titleButtons.call(this).concat([this._render_deleteButton()])},_render_deleteButton:function(){if((this.model.get("state")===c.HistoryDatasetAssociation.STATES.NEW)||(this.model.get("state")===c.HistoryDatasetAssociation.STATES.NOT_VIEWABLE)||(!this.model.get("accessible"))){return null}var e=this,f={title:b("Delete"),classes:"dataset-delete",onclick:function(){e.$el.find(".icon-btn.dataset-delete").trigger("mouseout");e.model["delete"]()}};if(this.model.get("deleted")){f={title:b("Dataset collection is already deleted"),disabled:true}}f.faIcon="fa-times";return faIconButton(f)},toString:function(){var e=(this.model)?(this.model+""):("(no model)");return"HDCAEditView("+e+")"}});return{DatasetCollectionEditView:a}});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
define(["mvc/base-mvc","utils/localization"],function(a,b){var c=Backbone.View.extend(a.LoggableMixin).extend({});return{HistoryContentBaseView:c}});
|
||||
@@ -1 +1 @@
|
||||
define(["mvc/history/history-content-base","mvc/dataset/hda-model","mvc/collection/hdca-model","mvc/base-mvc","utils/localization"],function(b,d,f,a,c){var g=Backbone.Collection.extend(a.LoggableMixin).extend({model:function(i,h){console.debug("HistoryContents.model:",i);if(i.history_content_type==="dataset"){return new d.HistoryDatasetAssociation(i,h)}else{if(i.history_content_type==="dataset_collection"){return new f.HistoryDatasetCollectionAssociation(i,h)}}throw new TypeError("Unknown history_content_type:"+i.history_content_type)},initialize:function(i,h){h=h||{};console.debug("new HistoryContents",i,h);this.historyId=h.historyId},urlRoot:galaxy_config.root+"api/histories",url:function(){return this.urlRoot+"/"+this.historyId+"/contents"},ids:function(){return this.map(function(h){return h.get("id")})},notReady:function(){return this.filter(function(h){return !h.inReadyState()})},running:function(){var h=[];this.each(function(i){if(!i.inReadyState()){h.push(i.get("id"))}});return h},getByHid:function(h){return _.first(this.filter(function(i){return i.get("hid")===h}))},getVisible:function(h,k,j){j=j||[];var i=new g(this.filter(function(l){return l.isVisible(h,k)}));_.each(j,function(l){if(!_.isFunction(l)){return}i=new g(i.filter(l))});return i},haveDetails:function(){return this.all(function(h){return h.hasDetails()})},fetchAllDetails:function(i){i=i||{};var h={details:"all"};i.data=(i.data)?(_.extend(i.data,h)):(h);return this.fetch(i)},ajaxQueue:function(k,j){var i=jQuery.Deferred(),h=this.length,m=[];if(!h){i.resolve([]);return i}var l=this.chain().reverse().map(function(o,n){return function(){var p=k.call(o,j);p.done(function(q){i.notify({curr:n,total:h,response:q,model:o})});p.always(function(q){m.push(q);if(l.length){l.shift()()}else{i.resolve(m)}})}}).value();l.shift()();return i},matches:function(h){return this.filter(function(i){return i.matches(h)})},set:function(j,h){var i=this;j=_.map(j,function(m){var l=m.attributes||m;var n=b.HistoryContent.typeIdStr(l.history_content_type,l.id);var o=i.get(n);if(!o){return m}var k=o.toJSON();_.extend(k,m);return k});Backbone.Collection.prototype.set.call(this,j,h)},promoteToHistoryDatasetCollection:function e(m,k,i){i=i||{};i.url=this.url();i.type="POST";var o=k;var l=[],h=null;if(k==="list"){this.chain().each(function(r){var p=r.attributes.name;var s=r.get("id");var q=r.attributes.history_content_type;if(q==="dataset"){if(o!=="list"){console.log("Invalid collection type")}l.push({name:p,src:"hda",id:s})}else{if(o==="list"){o="list:"+r.attributes.collection_type}else{if(o!=="list:"+r.attributes.collection_type){console.log("Invalid collection type")}}l.push({name:p,src:"hdca",id:s})}});h="New Dataset List"}else{if(k==="paired"){var j=this.ids();if(j.length!==2){}l.push({name:"forward",src:"hda",id:j[0]});l.push({name:"reverse",src:"hda",id:j[1]});h="New Dataset Pair"}}i.data={type:"dataset_collection",name:h,collection_type:o,element_identifiers:JSON.stringify(l)};var n=jQuery.ajax(i);n.done(function(r,p,q){m.refresh()});n.fail(function(r,p,q){if(r.responseJSON&&r.responseJSON.error){error=r.responseJSON.error}else{error=r.responseJSON}r.responseText=error});return n},toString:function(){return(["HistoryContents(",[this.parentId,this.length].join(),")"].join(""))}});return{HistoryContents:g}});
|
||||
define(["mvc/history/history-content-base","mvc/dataset/hda-model","mvc/collection/hdca-model","mvc/base-mvc","utils/localization"],function(b,d,f,a,c){var g=Backbone.Collection.extend(a.LoggableMixin).extend({model:function(i,h){if(i.history_content_type==="dataset"){return new d.HistoryDatasetAssociation(i,h)}else{if(i.history_content_type==="dataset_collection"){return new f.HistoryDatasetCollectionAssociation(i,h)}}throw new TypeError("Unknown history_content_type:"+i.history_content_type)},initialize:function(i,h){h=h||{};this.historyId=h.historyId},urlRoot:galaxy_config.root+"api/histories",url:function(){return this.urlRoot+"/"+this.historyId+"/contents"},ids:function(){return this.map(function(h){return h.get("id")})},notReady:function(){return this.filter(function(h){return !h.inReadyState()})},running:function(){var h=[];this.each(function(i){if(!i.inReadyState()){h.push(i.get("id"))}});return h},getByHid:function(h){return _.first(this.filter(function(i){return i.get("hid")===h}))},getVisible:function(h,k,j){j=j||[];var i=new g(this.filter(function(l){return l.isVisible(h,k)}));_.each(j,function(l){if(!_.isFunction(l)){return}i=new g(i.filter(l))});return i},haveDetails:function(){return this.all(function(h){return h.hasDetails()})},fetchAllDetails:function(i){i=i||{};var h={details:"all"};i.data=(i.data)?(_.extend(i.data,h)):(h);return this.fetch(i)},ajaxQueue:function(k,j){var i=jQuery.Deferred(),h=this.length,m=[];if(!h){i.resolve([]);return i}var l=this.chain().reverse().map(function(o,n){return function(){var p=k.call(o,j);p.done(function(q){i.notify({curr:n,total:h,response:q,model:o})});p.always(function(q){m.push(q);if(l.length){l.shift()()}else{i.resolve(m)}})}}).value();l.shift()();return i},matches:function(h){return this.filter(function(i){return i.matches(h)})},set:function(j,h){var i=this;j=_.map(j,function(m){var l=m.attributes||m;var n=b.HistoryContent.typeIdStr(l.history_content_type,l.id);var o=i.get(n);if(!o){return m}var k=o.toJSON();_.extend(k,m);return k});Backbone.Collection.prototype.set.call(this,j,h)},promoteToHistoryDatasetCollection:function e(m,k,i){i=i||{};i.url=this.url();i.type="POST";var o=k;var l=[],h=null;if(k==="list"){this.chain().each(function(r){var p=r.attributes.name;var s=r.get("id");var q=r.attributes.history_content_type;if(q==="dataset"){if(o!=="list"){console.log("Invalid collection type")}l.push({name:p,src:"hda",id:s})}else{if(o==="list"){o="list:"+r.attributes.collection_type}else{if(o!=="list:"+r.attributes.collection_type){console.log("Invalid collection type")}}l.push({name:p,src:"hdca",id:s})}});h="New Dataset List"}else{if(k==="paired"){var j=this.ids();if(j.length!==2){}l.push({name:"forward",src:"hda",id:j[0]});l.push({name:"reverse",src:"hda",id:j[1]});h="New Dataset Pair"}}i.data={type:"dataset_collection",name:h,collection_type:o,element_identifiers:JSON.stringify(l)};var n=jQuery.ajax(i);n.done(function(r,p,q){m.refresh()});n.fail(function(r,p,q){if(r.responseJSON&&r.responseJSON.error){error=r.responseJSON.error}else{error=r.responseJSON}r.responseText=error});return n},toString:function(){return(["HistoryContents(",[this.parentId,this.length].join(),")"].join(""))}});return{HistoryContents:g}});
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user