1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/b0c8da2b3c1e/ Changeset: b0c8da2b3c1e User: carlfeberhard Date: 2014-09-08 22:49:30 Summary: History panel: make search input shown by default, remove toggle; List panel: make collection-panel and history-panel inherit from list-panel, move list-panel and base-mvc.list-item to mvc/list; general history and collection panel refactoring Affected #: 48 files diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/base-mvc.js --- a/static/scripts/mvc/base-mvc.js +++ b/static/scripts/mvc/base-mvc.js @@ -42,6 +42,7 @@ if( this.logger ){ var log = this.logger.log; if( typeof this.logger.log === 'object' ){ +//TODO:! there has to be a way to get the lineno/file into this log = Function.prototype.bind.call( this.logger.log, this.logger ); } return log.apply( this.logger, arguments ); @@ -149,6 +150,23 @@ //============================================================================== +/** Function that allows mixing of hashs into bbone MVC while showing the mixins first + * (before the more local class overrides/hash). + * Basically, a simple reversal of param order on _.defaults() - to show mixins in top of definition. + * @example: + * var NewModel = Something.extend( mixin( MyMixinA, MyMixinB, { ... myVars : ... }) ); + * + * NOTE: this does not combine any hashes (like events, etc.) and you're expected to handle that + */ +function mixin( mixinHash1, /* mixinHash2, etc: ... variadic */ propsHash ){ + var args = Array.prototype.slice.call( arguments, 0 ), + lastArg = args.pop(); + args.unshift( lastArg ); + return _.defaults.apply( _, args ); +} + + +//============================================================================== /** A mixin for models that allow T/F/Matching to their attributes - useful when * searching or filtering collections of models. * @example: @@ -329,205 +347,6 @@ //============================================================================== -/** Function that allows mixing of hashs into bbone MVC while showing the mixins first - * (before the more local class overrides/hash). - * Basically, a simple reversal of param order on _.defaults() - to show mixins in top of definition. - * @example: - * var NewModel = Something.extend( mixin( MyMixinA, MyMixinB, { ... myVars : ... }) ); - * - * NOTE: this does not combine any hashes (like events, etc.) and you're expected to handle that - */ -function mixin( mixinHash1, /* mixinHash2, etc: ... variadic */ propsHash ){ - var args = Array.prototype.slice.call( arguments, 0 ), - lastArg = args.pop(); - args.unshift( lastArg ); - return _.defaults.apply( _, args ); -} - -//============================================================================== -/** Return an underscore template fn from an array of strings. - * @param {String[]} template the template strings to compile into the underscore template fn - * @param {String} jsonNamespace an optional namespace for the json data passed in (defaults to 'model') - * @returns {Function} the (wrapped) underscore template fn - * The function accepts: - * - * The template strings can access: - * the json/model hash using model ("<%- model.myAttr %>) using the jsonNamespace above - * _l: the localizer function - * view (if passed): ostensibly, the view using the template (handy for view instance vars) - * Because they're namespaced, undefined attributes will not throw an error. - * - * @example: - * templateBler : BASE_MVC.wrapTemplate([ - * '<div class="myclass <%- mynamespace.modelClass %>">', - * '<span><% print( _l( mynamespace.message ) ); %>:<%= view.status %></span>' - * '</div>' - * ], 'mynamespace' ) - * - * Meant to be called in a View's definition in order to compile only once. - * - */ -function wrapTemplate( template, jsonNamespace ){ - jsonNamespace = jsonNamespace || 'model'; - var templateFn = _.template( template.join( '' ) ); - return function( json, view ){ - var templateVars = { view : view || {}, _l : _l }; - templateVars[ jsonNamespace ] = json || {}; - return templateFn( templateVars ); - }; -} - -//============================================================================== -/** A view which, when first rendered, shows only summary data/attributes, but - * can be expanded to show further details (and optionally fetch those - * details from the server). - */ -var ExpandableView = Backbone.View.extend( LoggableMixin ).extend({ -//TODO: Although the reasoning behind them is different, this shares a lot with HiddenUntilActivated above: combine them - //PRECONDITION: model must have method hasDetails - //PRECONDITION: subclasses must have templates.el and templates.details - - initialize : function( attributes ){ - /** are the details of this view expanded/shown or not? */ - this.expanded = attributes.expanded || false; - //this.log( '\t expanded:', this.expanded ); - this.fxSpeed = attributes.fxSpeed || this.fxSpeed; - }, - - // ........................................................................ render main - /** jq fx speed */ - fxSpeed : 'fast', - - /** Render this content, set up ui. - * @param {Number or String} speed the speed of the render - */ - render : function( speed ){ - var $newRender = this._buildNewRender(); - this._setUpBehaviors( $newRender ); - this._queueNewRender( $newRender, speed ); - return this; - }, - - /** Build a temp div containing the new children for the view's $el. - * If the view is already expanded, build the details as well. - */ - _buildNewRender : function(){ - // create a new render using a skeleton template, render title buttons, render body, and set up events, etc. - var $newRender = $( this.templates.el( this.model.toJSON(), this ) ); - if( this.expanded ){ - this.$details( $newRender ).replaceWith( this._renderDetails().show() ); - } - return $newRender; - }, - - /** Fade out the old el, swap in the new contents, then fade in. - * @param {Number or String} speed jq speed to use for rendering effects - * @fires rendered when rendered - */ - _queueNewRender : function( $newRender, speed ) { - speed = ( speed === undefined )?( this.fxSpeed ):( speed ); - var view = this; - - $( view ).queue( 'fx', [ - function( next ){ this.$el.fadeOut( speed, next ); }, - function( next ){ - view._swapNewRender( $newRender ); - next(); - }, - function( next ){ this.$el.fadeIn( speed, next ); }, - function( next ){ - this.trigger( 'rendered', view ); - next(); - } - ]); - }, - - /** empty out the current el, move the $newRender's children in */ - _swapNewRender : function( $newRender ){ - return this.$el.empty().attr( 'class', this.className ).append( $newRender.children() ); - }, - - /** 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) - */ - _setUpBehaviors : function( $where ){ - $where = $where || this.$el; - // set up canned behavior on children (bootstrap, popupmenus, editable_text, etc.) - //make_popup_menus( $where ); - $where.find( '[title]' ).tooltip({ placement : 'bottom' }); - }, - - // ......................................................................... details - /** shortcut to details DOM (as jQ) */ - $details : function( $where ){ - $where = $where || this.$el; - return $where.find( '.details' ); - }, - - /** build the DOM for the details and set up behaviors on it */ - _renderDetails : function(){ - var $newDetails = $( this.templates.details( this.model.toJSON(), this ) ); - this._setUpBehaviors( $newDetails ); - return $newDetails; - }, - - // ......................................................................... expansion/details - /** Show or hide the details - * @param {Boolean} expand if true, expand; if false, collapse - */ - toggleExpanded : function( expand ){ - expand = ( expand === undefined )?( !this.expanded ):( expand ); - if( expand ){ - this.expand(); - } else { - this.collapse(); - } - return this; - }, - - /** Render and show the full, detailed body of this view including extra data and controls. - * note: if the model does not have detailed data, fetch that data before showing the body - * @fires expanded when a body has been expanded - */ - expand : function(){ - var view = this; - return view._fetchModelDetails() - .always(function(){ - var $newDetails = view._renderDetails(); - view.$details().replaceWith( $newDetails ); - // needs to be set after the above or the slide will not show - view.expanded = true; - $newDetails.slideDown( view.fxSpeed, function(){ - view.trigger( 'expanded', view ); - }); - }); - }, - - /** Check for model details and, if none, fetch them. - * @returns {jQuery.promise} the model.fetch.xhr if details are being fetched, an empty promise if not - */ - _fetchModelDetails : function(){ - if( !this.model.hasDetails() ){ - return this.model.fetch(); - } - return jQuery.when(); - }, - - /** Hide the body/details of an HDA. - * @fires collapsed when a body has been collapsed - */ - collapse : function(){ - var view = this; - view.expanded = false; - this.$details().slideUp( view.fxSpeed, function(){ - view.trigger( 'collapsed', view ); - }); - } - -}); - - -//============================================================================== /** Mixin for views that can be dragged and dropped * Allows for the drag behavior to be turned on/off, setting/removing jQuery event * handlers each time. @@ -711,186 +530,48 @@ //============================================================================== -/** A view that is displayed in some larger list/grid/collection. - * Inherits from Expandable, Selectable, Draggable. - * The DOM contains warnings, a title bar, and a series of primary action controls. - * Primary actions are meant to be easily accessible item functions (such as delete) - * that are rendered in the title bar. +/** Return an underscore template fn from an array of strings. + * @param {String[]} template the template strings to compile into the underscore template fn + * @param {String} jsonNamespace an optional namespace for the json data passed in (defaults to 'model') + * @returns {Function} the (wrapped) underscore template fn + * The function accepts: * - * Details are rendered when the user clicks the title bar or presses enter/space when - * the title bar is in focus. + * The template strings can access: + * the json/model hash using model ("<%- model.myAttr %>) using the jsonNamespace above + * _l: the localizer function + * view (if passed): ostensibly, the view using the template (handy for view instance vars) + * Because they're namespaced, undefined attributes will not throw an error. * - * Designed as a base class for history panel contents - but usable elsewhere (I hope). + * @example: + * templateBler : BASE_MVC.wrapTemplate([ + * '<div class="myclass <%- mynamespace.modelClass %>">', + * '<span><% print( _l( mynamespace.message ) ); %>:<%= view.status %></span>' + * '</div>' + * ], 'mynamespace' ) + * + * Meant to be called in a View's definition in order to compile only once. + * */ -var ListItemView = ExpandableView.extend( mixin( SelectableViewMixin, DraggableViewMixin, { - -//TODO: that's a little contradictory - tagName : 'div', - className : 'list-item', - - /** Set up the base class and all mixins */ - initialize : function( attributes ){ - ExpandableView.prototype.initialize.call( this, attributes ); - SelectableViewMixin.initialize.call( this, attributes ); - DraggableViewMixin.initialize.call( this, attributes ); - }, - - // ........................................................................ rendering - /** In this override, call methods to build warnings, titlebar and primary actions */ - _buildNewRender : function(){ - var $newRender = ExpandableView.prototype._buildNewRender.call( this ); - $newRender.find( '.warnings' ).replaceWith( this._renderWarnings() ); - $newRender.find( '.title-bar' ).replaceWith( this._renderTitleBar() ); - $newRender.find( '.primary-actions' ).append( this._renderPrimaryActions() ); - $newRender.find( '.subtitle' ).replaceWith( this._renderSubtitle() ); - return $newRender; - }, - - /** In this override, render the selector controls and set up dragging before the swap */ - _swapNewRender : function( $newRender ){ - ExpandableView.prototype._swapNewRender.call( this, $newRender ); - if( this.selectable ){ this.showSelector( 0 ); } - if( this.draggable ){ this.draggableOn(); } - return this.$el; - }, - - /** Render any warnings the item may need to show (e.g. "I'm deleted") */ - _renderWarnings : function(){ - var view = this, - $warnings = $( '<div class="warnings"></div>' ), - json = view.model.toJSON(); -//TODO:! unordered (map) - _.each( view.templates.warnings, function( templateFn ){ - $warnings.append( $( templateFn( json, view ) ) ); - }); - return $warnings; - }, - - /** Render the title bar (the main/exposed SUMMARY dom element) */ - _renderTitleBar : function(){ - return $( this.templates.titleBar( this.model.toJSON(), this ) ); - }, - - /** Return an array of jQ objects containing common/easily-accessible item controls */ - _renderPrimaryActions : function(){ - // override this - return []; - }, - - /** Render the title bar (the main/exposed SUMMARY dom element) */ - _renderSubtitle : function(){ - return $( this.templates.subtitle( this.model.toJSON(), this ) ); - }, - - // ......................................................................... events - /** event map */ - events : { - // expand the body when the title is clicked or when in focus and space or enter is pressed - 'click .title-bar' : '_clickTitleBar', - 'keydown .title-bar' : '_keyDownTitleBar', - - // dragging - don't work, originalEvent === null - //'dragstart .dataset-title-bar' : 'dragStartHandler', - //'dragend .dataset-title-bar' : 'dragEndHandler' - - 'click .selector' : 'toggleSelect' - }, - - /** expand when the title bar is clicked */ - _clickTitleBar : function( event ){ - event.stopPropagation(); - this.toggleExpanded(); - }, - - /** expand when the title bar is in focus and enter or space is pressed */ - _keyDownTitleBar : function( event ){ - // 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 ) ){ - this.toggleExpanded(); - event.stopPropagation(); - return false; - } - return true; - }, - - // ......................................................................... misc - /** String representation */ - toString : function(){ - var modelString = ( this.model )?( this.model + '' ):( '(no model)' ); - return 'ListItemView(' + modelString + ')'; - } -})); - -// ............................................................................ TEMPLATES -/** underscore templates */ -ListItemView.prototype.templates = (function(){ -//TODO: move to require text! plugin - - var elTemplato = wrapTemplate([ - '<div class="list-element">', - // errors, messages, etc. - '<div class="warnings"></div>', - - // multi-select checkbox - '<div class="selector">', - '<span class="fa fa-2x fa-square-o"></span>', - '</div>', - // space for title bar buttons - gen. floated to the right - '<div class="primary-actions"></div>', - '<div class="title-bar"></div>', - - // expandable area for more details - '<div class="details"></div>', - '</div>' - ]); - - var warnings = {}; - - var titleBarTemplate = wrapTemplate([ - // adding a tabindex here allows focusing the title bar and the use of keydown to expand the dataset display - '<div class="title-bar clear" tabindex="0">', -//TODO: prob. belongs in dataset-list-item - '<span class="state-icon"></span>', - '<div class="title">', - '<span class="name"><%- element.name %></span>', - '</div>', - '<div class="subtitle"></div>', - '</div>' - ], 'element' ); - - var subtitleTemplate = wrapTemplate([ - // override this - '<div class="subtitle"></div>' - ]); - - var detailsTemplate = wrapTemplate([ - // override this - '<div class="details"></div>' - ]); - - return { - el : elTemplato, - warnings : warnings, - titleBar : titleBarTemplate, - subtitle : subtitleTemplate, - details : detailsTemplate +function wrapTemplate( template, jsonNamespace ){ + jsonNamespace = jsonNamespace || 'model'; + var templateFn = _.template( template.join( '' ) ); + return function( json, view ){ + var templateVars = { view : view || {}, _l : _l }; + templateVars[ jsonNamespace ] = json || {}; + return templateFn( templateVars ); }; -}()); +} //============================================================================== return { LoggableMixin : LoggableMixin, SessionStorageModel : SessionStorageModel, + mixin : mixin, SearchableModelMixin : SearchableModelMixin, HiddenUntilActivatedViewMixin : HiddenUntilActivatedViewMixin, - mixin : mixin, - wrapTemplate : wrapTemplate, - ExpandableView : ExpandableView, DraggableViewMixin : DraggableViewMixin, SelectableViewMixin : SelectableViewMixin, - ListItemView : ListItemView + wrapTemplate : wrapTemplate }; }); diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/collection/collection-li.js --- a/static/scripts/mvc/collection/collection-li.js +++ b/static/scripts/mvc/collection/collection-li.js @@ -1,11 +1,12 @@ define([ + "mvc/list/list-item", "mvc/dataset/dataset-li", "mvc/base-mvc", "utils/localization" -], function( DATASET_LI, BASE_MVC, _l ){ +], function( LIST_ITEM, DATASET_LI, BASE_MVC, _l ){ /* global Backbone, LoggableMixin */ //============================================================================== -var ListItemView = BASE_MVC.ListItemView; +var ListItemView = LIST_ITEM.ListItemView; /** @class Read only view for DatasetCollection. */ var DCListItemView = ListItemView.extend( diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/collection/collection-model.js --- a/static/scripts/mvc/collection/collection-model.js +++ b/static/scripts/mvc/collection/collection-model.js @@ -270,6 +270,11 @@ return this.save( { deleted: false }, options ); }, + /** Is this collection deleted or purged? */ + isDeletedOrPurged : function(){ + return ( this.get( 'deleted' ) || this.get( 'purged' ) ); + }, + // ........................................................................ searchable /** searchable attributes for collections */ searchAttributes : [ diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/collection/collection-panel.js --- a/static/scripts/mvc/collection/collection-panel.js +++ b/static/scripts/mvc/collection/collection-panel.js @@ -1,9 +1,10 @@ define([ + "mvc/list/list-panel", "mvc/collection/collection-model", "mvc/collection/collection-li", "mvc/base-mvc", "utils/localization" -], function( DC_MODEL, DC_LI, BASE_MVC, _l ){ +], function( LIST_PANEL, DC_MODEL, DC_LI, BASE_MVC, _l ){ /* ============================================================================= TODO: @@ -11,224 +12,81 @@ // ============================================================================= /** @class non-editable, read-only View/Controller for a dataset collection. */ -var CollectionPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend( +var _super = LIST_PANEL.ModelListPanel; +var CollectionPanel = _super.extend( /** @lends CollectionPanel.prototype */{ //MODEL is either a DatasetCollection (or subclass) or a DatasetCollectionElement (list of pairs) /** logger used to record this.log messages, commonly set to console */ - //logger : console, + logger : console, - tagName : 'div', - className : 'dataset-collection-panel', - - /** (in ms) that jquery effects will use */ - fxSpeed : 'fast', + className : _super.prototype.className + ' dataset-collection-panel', /** sub view class used for datasets */ DatasetDCEViewClass : DC_LI.DatasetDCEListItemView, /** sub view class used for nested collections */ NestedDCDCEViewClass : DC_LI.NestedDCDCEListItemView, + /** key of attribute in model to assign to this.collection */ + modelCollectionKey : 'elements', // ......................................................................... SET UP /** Set up the view, set up storage, bind listeners to HistoryContents events * @param {Object} attributes optional settings for the panel */ initialize : function( attributes ){ - attributes = attributes || {}; - // set the logger if requested - if( attributes.logger ){ - this.logger = attributes.logger; - } - this.log( this + '.initialize:', attributes ); - + _super.prototype.initialize.call( this, attributes ); this.linkTarget = attributes.linkTarget || '_blank'; this.hasUser = attributes.hasUser; this.panelStack = []; this.parentName = attributes.parentName; - //window.collectionPanel = this; - }, - - /** create any event listeners for the panel - * @fires: rendered:initial on the first render - * @fires: empty-history when switching to a history with no HDAs or creating a new history - */ - _setUpListeners : function(){ - // debugging - //if( this.logger ){ - this.on( 'all', function( event ){ - this.log( this + '', arguments ); - }, this ); - //} - return this; - }, - - // ------------------------------------------------------------------------ history/hda event listening - /** listening for history and HDA events */ - _setUpModelEventHandlers : function(){ - return this; - }, - - // ------------------------------------------------------------------------ panel rendering - /** Render panel - * @fires: rendered when the panel is attached and fully visible - * @see Backbone.View#render - */ - render : function( speed, callback ){ - this.log( 'render:', speed, callback ); - // send a speed of 0 to have no fade in/out performed - speed = ( speed === undefined )?( this.fxSpeed ):( speed ); - //this.debug( this + '.render, fxSpeed:', speed ); - var panel = this, - $newRender; - - // handle the possibility of no model (can occur if fetching the model returns an error) - if( !this.model ){ - return this; - } - $newRender = this.renderModel(); - - // fade out existing, swap with the new, fade in, set up behaviours - $( panel ).queue( 'fx', [ - function( next ){ - if( speed && panel.$el.is( ':visible' ) ){ - panel.$el.fadeOut( speed, next ); - } else { - next(); - } - }, - function( next ){ - // swap over from temp div newRender - panel.$el.empty(); - if( $newRender ){ - panel.$el.append( $newRender.children() ); - } - next(); - }, - function( next ){ - if( speed && !panel.$el.is( ':visible' ) ){ - panel.$el.fadeIn( speed, next ); - } else { - next(); - } - }, - function( next ){ - //TODO: ideally, these would be set up before the fade in (can't because of async save text) - if( callback ){ callback.call( this ); } - panel.trigger( 'rendered', this ); - next(); - } - ]); - return this; - }, - - /** render with collection data - * @returns {jQuery} dom fragment as temporary container to be swapped out later - */ - renderModel : function( ){ - // tmp div for final swap in render -//TODO: ugh - reuse issue - refactor out - var type = this.model.get( 'collection_type' ) || this.model.object.get( 'collection_type' ), - json = _.extend( this.model.toJSON(), { - parentName : this.parentName, - type : type - }), - $newRender = $( '<div/>' ).append( this.templates.panel( json ) ); - this._setUpBehaviours( $newRender ); - this.renderContents( $newRender ); - return $newRender; - }, - - /** Set up js/widget behaviours */ - _setUpBehaviours : function( $where ){ - //TODO: these should be either sub-MVs, or handled by events - $where = $where || this.$el; - $where.find( '[title]' ).tooltip({ placement: 'bottom' }); - return this; - }, - - // ------------------------------------------------------------------------ sub-$element shortcuts - /** the scroll container for this panel - can be $el, $el.parent(), or grandparent depending on context */ - $container : function(){ - return ( this.findContainerFn )?( this.findContainerFn.call( this ) ):( this.$el.parent() ); - }, - /** where list content views are attached */ - $datasetsList : function( $where ){ - return ( $where || this.$el ).find( '.datasets-list' ); + window.collectionPanel = this; }, // ------------------------------------------------------------------------ sub-views - /** Set up/render a view for each DCE to be shown, init with model and listeners. - * DCE views are cached to the map this.contentViews (using the model.id as key). - * @param {jQuery} $whereTo what dom element to prepend the DCE views to - * @returns the number of visible DCE views - */ - renderContents : function( $whereTo ){ - //this.debug( 'renderContents, elements:', this.model.elements ); - $whereTo = $whereTo || this.$el; - - this.warn( this + '.renderContents:, model:', this.model ); - var panel = this, - contentViews = {}, - //NOTE: no filtering here - visibleContents = this.model.getVisibleContents(); - //this.debug( 'renderContents, visibleContents:', visibleContents, $whereTo ); - - this.$datasetsList( $whereTo ).empty(); - if( visibleContents && visibleContents.length ){ - visibleContents.each( function( content ){ - var contentId = content.id, - contentView = panel._createContentView( content ); - contentViews[ contentId ] = contentView; - panel._attachContentView( contentView.render(), $whereTo ); - }); - } - this.contentViews = contentViews; - return this.contentViews; + /** In this override, use model.getVisibleContents */ + _filterCollection : function(){ +//TODO: should *not* be model.getVisibleContents + return this.model.getVisibleContents(); }, - /** */ - _createContentView : function( content ){ - //this.debug( 'content json:', JSON.stringify( content, null, ' ' ) ); - var contentView = null, - ContentClass = this._getContentClass( content ); - //this.debug( 'content:', content ); - //this.debug( 'ContentClass:', ContentClass ); - contentView = new ContentClass({ - model : content, - linkTarget : this.linkTarget, - //draggable : true, - hasUser : this.hasUser, - logger : this.logger - }); - //this.debug( 'contentView:', contentView ); - this._setUpContentListeners( contentView ); - return contentView; - }, - - /** */ - _getContentClass : function( content ){ - //this.debug( this + '._getContentClass:', content ); + /** override to return proper view class based on element_type */ + _getItemViewClass : function( model ){ + //this.debug( this + '._getItemViewClass:', model ); //TODO: subclasses use DCEViewClass - but are currently unused - decide - switch( content.get( 'element_type' ) ){ + switch( model.get( 'element_type' ) ){ case 'hda': return this.DatasetDCEViewClass; case 'dataset_collection': return this.NestedDCDCEViewClass; } - throw new TypeError( 'Unknown element type:', content.get( 'element_type' ) ); + throw new TypeError( 'Unknown element type:', model.get( 'element_type' ) ); }, - /** Set up listeners for content view events. In this override, handle collection expansion. */ - _setUpContentListeners : function( contentView ){ + /** override to add link target and anon */ + _getItemViewOptions : function( model ){ + var options = _super.prototype._getItemViewOptions.call( this, model ); + return _.extend( options, { + linkTarget : this.linkTarget, + hasUser : this.hasUser + }); + }, + + /** when a sub-view is clicked in the collection panel that is itself a collection, + * hide this panel's elements and show the sub-collection in its own panel. + */ + _setUpItemViewListeners : function( view ){ var panel = this; - if( contentView.model.get( 'element_type' ) === 'dataset_collection' ){ - contentView.on( 'expanded', function( collectionView ){ + _super.prototype._setUpItemViewListeners.call( panel, view ); + //TODO:?? doesn't seem to belong here + if( view.model.get( 'element_type' ) === 'dataset_collection' ){ + view.on( 'expanded', function( collectionView ){ panel.info( 'expanded', collectionView ); panel._addCollectionPanel( collectionView ); }); } + return panel; }, /** When a sub-collection is clicked, hide the current panel and render the sub-collection in its own panel */ @@ -246,7 +104,7 @@ }); currPanel.panelStack.push( panel ); - currPanel.$( '.controls' ).add( '.datasets-list' ).hide(); + currPanel.$( '.controls' ).add( '.list-items' ).hide(); currPanel.$el.append( panel.$el ); panel.on( 'close', function(){ currPanel.render(); @@ -266,14 +124,6 @@ } }, - /** attach an contentView to the panel */ - _attachContentView : function( contentView, $whereTo ){ - $whereTo = $whereTo || this.$el; - var $datasetsList = this.$datasetsList( $whereTo ); - $datasetsList.append( contentView.$el ); - return this; - }, - // ------------------------------------------------------------------------ panel events /** event map */ events : { @@ -293,16 +143,16 @@ } }); -//----------------------------------------------------------------------------- TEMPLATES -/** underscore templates */ -CollectionPanel.templates = CollectionPanel.prototype.templates = (function(){ -// use closure to run underscore template fn only once at module load - var _panelTemplate = _.template([ + +//------------------------------------------------------------------------------ TEMPLATES +CollectionPanel.prototype.templates = (function(){ + + var controlsTemplate = BASE_MVC.wrapTemplate([ '<div class="controls">', '<div class="navigation">', '<a class="back" href="javascript:void(0)">', '<span class="fa fa-icon fa-angle-left"></span>', - _l( 'Back to ' ), '<%- collection.parentName %>', + _l( 'Back to ' ), '<%- view.parentName %>', '</a>', '</div>', @@ -310,29 +160,25 @@ '<div class="name"><%- collection.name || collection.element_identifier %></div>', '<div class="subtitle">', //TODO: remove logic from template - '<% if( collection.type === "list" ){ %>', + '<% if( collection.collection_type === "list" ){ %>', _l( 'a list of datasets' ), - '<% } else if( collection.type === "paired" ){ %>', + '<% } else if( collection.collection_type === "paired" ){ %>', _l( 'a pair of datasets' ), - '<% } else if( collection.type === "list:paired" ){ %>', + '<% } else if( collection.collection_type === "list:paired" ){ %>', _l( 'a list of paired datasets' ), '<% } %>', '</div>', '</div>', - '</div>', - // where the datasets/hdas are added - '<div class="datasets-list"></div>' - ].join( '' )); + '</div>' + ], 'collection' ); - // we override here in order to pass the localizer (_L) into the template scope - since we use it as a fn within - return { - panel : function( json ){ - return _panelTemplate({ _l: _l, collection: json }); - } - }; + return _.extend( _.clone( _super.prototype.templates ), { + controls : controlsTemplate + }); }()); + // ============================================================================= /** @class non-editable, read-only View/Controller for a dataset collection. */ var ListCollectionPanel = CollectionPanel.extend( diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/dataset/dataset-li.js --- a/static/scripts/mvc/dataset/dataset-li.js +++ b/static/scripts/mvc/dataset/dataset-li.js @@ -1,8 +1,9 @@ define([ + "mvc/list/list-item", "mvc/dataset/states", "mvc/base-mvc", "utils/localization" -], function( STATES, BASE_MVC, _l ){ +], function( LIST_ITEM, STATES, BASE_MVC, _l ){ /* global Backbone */ /*============================================================================== TODO: @@ -11,7 +12,7 @@ simplify button rendering ==============================================================================*/ -var _super = BASE_MVC.ListItemView; +var _super = LIST_ITEM.ListItemView; /** @class Read only list view for either LDDAs, HDAs, or HDADCEs. * Roughly, any DatasetInstance (and not a raw Dataset). */ diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/dataset/dataset-list.js --- a/static/scripts/mvc/dataset/dataset-list.js +++ b/static/scripts/mvc/dataset/dataset-list.js @@ -1,5 +1,5 @@ define([ - "mvc/dataset/list-panel", + "mvc/list/list-panel", "mvc/dataset/dataset-li", "mvc/base-mvc", "utils/localization" diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/dataset/dataset-model.js --- a/static/scripts/mvc/dataset/dataset-model.js +++ b/static/scripts/mvc/dataset/dataset-model.js @@ -94,6 +94,9 @@ this.trigger( 'state:ready', currModel, newState, this.previous( 'state' ) ); } }); + this.on( 'change:urls', function(){ + console.warn( 'change:urls', arguments ); + }); // the download url (currenlty) relies on having a correct file extension this.on( 'change:id change:file_ext', function( currModel ){ this._generateUrls(); @@ -104,6 +107,8 @@ /** override to add urls */ toJSON : function(){ var json = Backbone.Model.prototype.toJSON.call( this ); + //console.warn( 'returning json?' ); + //return json; return _.extend( json, { urls : this.urls }); diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/dataset/list-panel.js --- a/static/scripts/mvc/dataset/list-panel.js +++ /dev/null @@ -1,687 +0,0 @@ -define([ - "mvc/base-mvc", - "utils/localization" -], function( BASE_MVC, _l ){ -/* ============================================================================= -TODO: - -============================================================================= */ -/** @class List that contains ListItemViews. - */ -var ListPanel = Backbone.View.extend( BASE_MVC.LoggableMixin ).extend( -/** @lends ReadOnlyHistoryPanel.prototype */{ - - /** logger used to record this.log messages, commonly set to console */ - //logger : console, - - /** class to use for constructing the sub-views */ - viewClass : BASE_MVC.ListItemView, - - tagName : 'div', - className : 'list-panel', - - /** (in ms) that jquery effects will use */ - fxSpeed : 'fast', - - /** string to display when the model has no hdas */ - emptyMsg : _l( 'This list is empty' ), - /** string to no hdas match the search terms */ - noneFoundMsg : _l( 'No matching items found' ), - - // ......................................................................... SET UP - /** Set up the view, set up storage, bind listeners to HistoryContents events - * @param {Object} attributes optional settings for the list - */ - initialize : function( attributes, options ){ - attributes = attributes || {}; - // set the logger if requested - if( attributes.logger ){ - this.logger = attributes.logger; - } - this.log( this + '.initialize:', attributes ); - - // ---- instance vars - /** how quickly should jquery fx run? */ - this.fxSpeed = _.has( attributes, 'fxSpeed' )?( attributes.fxSpeed ):( this.fxSpeed ); - - /** filters for displaying subviews */ - this.filters = []; - /** current search terms */ - this.searchFor = attributes.searchFor || ''; - - /** loading indicator */ - this.indicator = new LoadingIndicator( this.$el ); - - /** currently showing selectors on items? */ - this.selecting = ( attributes.selecting !== undefined )? attributes.selecting : true; - //this.selecting = false; - - /** cached selected item.model.ids to persist btwn renders */ - this.selected = attributes.selected || []; - /** the last selected item.model.id */ - this.lastSelected = null; - - /** list item view class (when passed models) */ - this.viewClass = attributes.viewClass || this.viewClass; - - /** list item views */ - this.views = []; - /** list item models */ - this.collection = attributes.collection || ( new Backbone.Collection([]) ); - - /** filter fns run over collection items to see if they should show in the list */ - this.filters = attributes.filters || []; - -//TODO: remove - this.title = attributes.title || ''; - this.subtitle = attributes.subtitle || ''; - - this._setUpListeners(); - }, - - /** create any event listeners for the list - */ - _setUpListeners : function(){ - this.on( 'error', function( model, xhr, options, msg, details ){ - //this.errorHandler( model, xhr, options, msg, details ); - console.error( model, xhr, options, msg, details ); - }, this ); - - // show hide the loading indicator - this.on( 'loading', function(){ - this._showLoadingIndicator( 'loading...', 40 ); - }, this ); - this.on( 'loading-done', function(){ - this._hideLoadingIndicator( 40 ); - }, this ); - - // throw the first render up as a diff namespace using once (for outside consumption) - this.once( 'rendered', function(){ - this.trigger( 'rendered:initial', this ); - }, this ); - - // debugging - if( this.logger ){ - this.on( 'all', function( event ){ - this.log( this + '', arguments ); - }, this ); - } - - this._setUpCollectionListeners(); - this._setUpViewListeners(); - return this; - }, - - /** free any sub-views the list has */ - freeViews : function(){ -//TODO: stopListening? remove? - this.views = []; - return this; - }, - - // ------------------------------------------------------------------------ item listeners - /** listening for history and HDA events */ - _setUpCollectionListeners : function(){ - - this.collection.on( 'reset', function(){ - this.renderItems(); - }, this ); - - this.collection.on( 'add', this.addItemView, this ); - this.collection.on( 'remove', this.removeItemView, this ); - - // debugging - if( this.logger ){ - this.collection.on( 'all', function( event ){ - this.info( this + '(collection)', arguments ); - }, this ); - } - return this; - }, - - /** listening for history and HDA events */ - _setUpViewListeners : function(){ - - // shift to select a range - this.on( 'view:selected', function( view, ev ){ - if( ev && ev.shiftKey && this.lastSelected ){ - var lastSelectedView = _.find( this.views, function( view ){ - return view.model.id === this.lastSelected; - }); - if( lastSelectedView ){ - this.selectRange( view, lastSelectedView ); - } - } - this.selected.push( view.model.id ); - this.lastSelected = view.model.id; - }, this ); - }, - - // ------------------------------------------------------------------------ rendering - /** Render this content, set up ui. - * @param {Number or String} speed the speed of the render - */ - render : function( speed ){ - var $newRender = this._buildNewRender(); - this._setUpBehaviors( $newRender ); - this._queueNewRender( $newRender, speed ); - return this; - }, - - /** Build a temp div containing the new children for the view's $el. - */ - _buildNewRender : function(){ - // create a new render using a skeleton template, render title buttons, render body, and set up events, etc. - var json = this.model? this.model.toJSON() : {}, - $newRender = $( this.templates.el( json, this ) ); - this._renderTitle( $newRender ); - this._renderSubtitle( $newRender ); - this._renderSearch( $newRender ); - this.renderItems( $newRender ); - return $newRender; - }, - - /** - */ - _renderTitle : function( $where ){ - //$where = $where || this.$el; - //$where.find( '.title' ).replaceWith( ... ) - }, - - /** - */ - _renderSubtitle : function( $where ){ - //$where = $where || this.$el; - //$where.find( '.title' ).replaceWith( ... ) - }, - - /** Fade out the old el, swap in the new contents, then fade in. - * @param {Number or String} speed jq speed to use for rendering effects - * @fires rendered when rendered - */ - _queueNewRender : function( $newRender, speed ) { - speed = ( speed === undefined )?( this.fxSpeed ):( speed ); - var view = this; - - $( view ).queue( 'fx', [ - function( next ){ this.$el.fadeOut( speed, next ); }, - function( next ){ - view._swapNewRender( $newRender ); - next(); - }, - function( next ){ this.$el.fadeIn( speed, next ); }, - function( next ){ - view.trigger( 'rendered', view ); - next(); - } - ]); - }, - - /** empty out the current el, move the $newRender's children in */ - _swapNewRender : function( $newRender ){ - this.$el.empty().attr( 'class', this.className ).append( $newRender.children() ); - if( this.selecting ){ this.showSelectors( 0 ); } - return this; - }, - - /** */ - _setUpBehaviors : function( $where ){ - $where = $where || this.$el; - $where.find( '.controls [title]' ).tooltip({ placement: 'bottom' }); - return this; - }, - - // ------------------------------------------------------------------------ sub-$element shortcuts - /** the scroll container for this panel - can be $el, $el.parent(), or grandparent depending on context */ - $scrollContainer : function(){ - // override - return this.$el.parent().parent(); - }, - /** */ - $list : function( $where ){ - return ( $where || this.$el ).find( '.list-items' ); - }, - /** container where list messages are attached */ - $messages : function( $where ){ - return ( $where || this.$el ).find( '.message-container' ); - }, - /** the message displayed when no views can be shown (no views, none matching search) */ - $emptyMessage : function( $where ){ - return ( $where || this.$el ).find( '.empty-message' ); - }, - - // ------------------------------------------------------------------------ hda sub-views - /** - * @param {jQuery} $whereTo what dom element to prepend the HDA views to - * @returns the visible item views - */ - renderItems : function( $whereTo ){ - $whereTo = $whereTo || this.$el; - var list = this, - newViews = []; - - var $list = this.$list( $whereTo ), - item$els = this._filterCollection().map( function( itemModel ){ -//TODO: creates views each time - not neccessarily good - var view = list._createItemView( itemModel ); - newViews.push( view ); - return view.render( 0 ).$el; - }); - this.debug( item$els ); - this.debug( newViews ); - - $list.empty(); - if( item$els.length ){ - $list.append( item$els ); - this.$emptyMessage( $whereTo ).hide(); - - } else { - this._renderEmptyMessage( $whereTo ).show(); - } - - this.views = newViews; - return newViews; - }, - - /** - */ - _filterCollection : function(){ - // override this - var list = this; - return list.collection.filter( _.bind( list._filterItem, list ) ); - }, - - /** - */ - _filterItem : function( model ){ - // override this - var list = this; - return ( _.every( list.filters.map( function( fn ){ return fn.call( model ); }) ) ) - && ( !list.searchFor || model.matchesAll( list.searchFor ) ); - }, - - /** - */ - _createItemView : function( model ){ - var ViewClass = this._getItemViewClass( model ), - options = _.extend( this._getItemViewOptions( model ), { - model : model - }), - view = new ViewClass( options ); - this._setUpItemViewListeners( view ); - return view; - }, - - _getItemViewClass : function( model ){ - // override this - return this.viewClass; - }, - - _getItemViewOptions : function( model ){ - // override this - return { - //logger : this.logger, - fxSpeed : this.fxSpeed, - expanded : false, - selectable : this.selecting, - selected : _.contains( this.selected, model.id ), - draggable : this.dragging - }; - }, - - /** - */ - _setUpItemViewListeners : function( view ){ - var list = this; - view.on( 'all', function(){ - var args = Array.prototype.slice.call( arguments, 0 ); - args[0] = 'view:' + args[0]; - list.trigger.apply( list, args ); - }); - - // debugging - //if( this.logger ){ - // view.on( 'all', function( event ){ - // this.log( this + '(view)', arguments ); - // }, this ); - //} - return this; - }, - - /** render the empty/none-found message */ - _renderEmptyMessage : function( $whereTo ){ - //this.debug( '_renderEmptyMessage', $whereTo, this.searchFor ); - var text = this.searchFor? this.noneFoundMsg : this.emptyMsg; - return this.$emptyMessage( $whereTo ).text( text ); - }, - - /** collapse all item views */ - expandAll : function(){ - _.each( this.views, function( view ){ - view.expand(); - }); - }, - - /** collapse all item views */ - collapseAll : function(){ - _.each( this.views, function( view ){ - view.collapse(); - }); - }, - - // ------------------------------------------------------------------------ collection/views syncing - /** - */ - addItemView : function( model, collection, options ){ - this.log( this + '.addItemView:', model ); - var list = this; - if( !this._filterItem( model ) ){ return undefined; } - -//TODO: sorted? position? - var view = list._createItemView( model ); - this.views.push( view ); - - $( view ).queue( 'fx', [ - function( next ){ list.$emptyMessage().fadeOut( list.fxSpeed, next ); }, - function( next ){ -//TODO: auto render? - list.$list().append( view.render().$el ); - next(); - } - ]); - return view; - }, - - /** - */ - removeItemView : function( model, collection, options ){ - this.log( this + '.removeItemView:', model ); - var list = this, - view = list.viewFromModel( model ); - if( !view ){ return undefined; } - - this.views = _.without( this.views, view ); - view.remove(); - if( !this.views.length ){ - list._renderEmptyMessage().fadeIn( list.fxSpeed ); - } - return view; - }, - - /** get views based on model - */ - viewFromModel : function( model ){ - for( var i=0; i<this.views.length; i++ ){ - var view = this.views[i]; - if( view.model === model ){ - return view; - } - } - return undefined; - }, - - /** get views based on model properties - */ - viewsWhereModel : function( properties ){ - return this.views.filter( function( view ){ - //return view.model.matches( properties ); -//TODO: replace with _.matches (underscore 1.6.0) - var json = view.model.toJSON(); - //console.debug( '\t', json, properties ); - for( var key in properties ){ - if( properties.hasOwnPropery( key ) ){ - //console.debug( '\t\t', json[ key ], view.model.properties[ key ] ); - if( json[ key ] !== view.model.properties[ key ] ){ - return false; - } - } - } - return true; - }); - }, - - /** - */ - viewRange : function( viewA, viewB ){ - if( viewA === viewB ){ return ( viewA )?( [ viewA ] ):( [] ); } - - var indexA = this.views.indexOf( viewA ), - indexB = this.views.indexOf( viewB ); - - // handle not found - if( indexA === -1 || indexB === -1 ){ - if( indexA === indexB ){ return []; } - return ( indexA === -1 )?( [ viewB ] ):( [ viewA ] ); - } - // reverse if indeces are - //note: end inclusive - return ( indexA < indexB )? - this.views.slice( indexA, indexB + 1 ) : - this.views.slice( indexB, indexA + 1 ); - }, - - // ------------------------------------------------------------------------ searching - /** render a search input for filtering datasets shown - * (see the search section in the HDA model for implementation of the actual searching) - * return will start the search - * esc will clear the search - * clicking the clear button will clear the search - * uses searchInput in ui.js - */ - _renderSearch : function( $where ){ - $where.find( '.controls .search-input' ).searchInput({ - placeholder : 'search', - initialVal : this.searchFor, - onfirstsearch : _.bind( this._firstSearch, this ), - onsearch : _.bind( this.searchItems, this ), - onclear : _.bind( this.clearSearch, this ) - }); - return $where; - }, - - _firstSearch : function( searchFor ){ - this.log( 'onFirstSearch', searchFor ); - return this.searchItems( searchFor ); - }, - - /** filter view list to those that contain the searchFor terms */ - searchItems : function( searchFor ){ - this.searchFor = searchFor; - this.trigger( 'search:searching', searchFor, this ); - this.renderItems(); - return this; - }, - - /** clear the search filters and show all views that are normally shown */ - clearSearch : function( searchFor ){ - //this.log( 'onSearchClear', this ); - this.searchFor = ''; - this.trigger( 'search:clear', this ); - this.renderItems(); - return this; - }, - - // ------------------------------------------------------------------------ selection - /** show selectors on all visible hdas and associated controls */ - showSelectors : function( speed ){ - speed = ( speed !== undefined )?( speed ):( this.fxSpeed ); - this.selecting = true; - this.$( '.list-actions' ).slideDown( speed ); - _.each( this.views, function( view ){ - view.showSelector( speed ); - }); - this.selected = []; - this.lastSelected = null; - }, - - /** hide selectors on all visible hdas and associated controls */ - hideSelectors : function( speed ){ - speed = ( speed !== undefined )?( speed ):( this.fxSpeed ); - this.selecting = false; - this.$( '.list-actions' ).slideUp( speed ); - _.each( this.views, function( view ){ - view.hideSelector( speed ); - }); - this.selected = []; - this.lastSelected = null; - }, - - /** show or hide selectors on all visible hdas and associated controls */ - toggleSelectors : function(){ - if( !this.selecting ){ - this.showSelectors(); - } else { - this.hideSelectors(); - } - }, - - /** select all visible hdas */ - selectAll : function( event ){ - _.each( this.views, function( view ){ - view.select( event ); - }); - }, - - /** deselect all visible hdas */ - deselectAll : function( event ){ - this.lastSelected = null; - _.each( this.views, function( view ){ - view.deselect( event ); - }); - }, - - /** select a range of datasets between A and B */ - selectRange : function( viewA, viewB ){ - var range = this.viewRange( viewA, viewB ); - _.each( range, function( view ){ - view.select(); - }); - return range; - }, - - /** return an array of all currently selected hdas */ - getSelectedViews : function(){ - return _.filter( this.views, function( v ){ - return v.selected; - }); - }, - - /** return an collection of the models of all currenly selected hdas */ - getSelectedModels : function(){ - return new this.collection.constructor( _.map( this.getSelectedViews(), function( view ){ - return view.model; - })); - }, - - // ------------------------------------------------------------------------ loading indicator -//TODO: questionable - /** hide the $el and display a loading indicator (in the $el's parent) when loading new data */ - _showLoadingIndicator : function( msg, speed, callback ){ - speed = ( speed !== undefined )?( speed ):( this.fxSpeed ); - if( !this.indicator ){ - this.indicator = new LoadingIndicator( this.$el, this.$el.parent() ); - } - if( !this.$el.is( ':visible' ) ){ - this.indicator.show( 0, callback ); - } else { - this.$el.fadeOut( speed ); - this.indicator.show( msg, speed, callback ); - } - }, - - /** hide the loading indicator */ - _hideLoadingIndicator : function( speed, callback ){ - speed = ( speed !== undefined )?( speed ):( this.fxSpeed ); - if( this.indicator ){ - this.indicator.hide( speed, callback ); - } - }, - - // ------------------------------------------------------------------------ scrolling - /** get the current scroll position of the panel in its parent */ - scrollPosition : function(){ - return this.$scrollContainer().scrollTop(); - }, - - /** set the current scroll position of the panel in its parent */ - scrollTo : function( pos ){ - this.$scrollContainer().scrollTop( pos ); - return this; - }, - - /** Scrolls the panel to the top. */ - scrollToTop : function(){ - this.$scrollContainer().scrollTop( 0 ); - return this; - }, - - /** */ - scrollToItem : function( view ){ - if( !view ){ return; } - var itemTop = view.$el.offset().top; - this.$scrollContainer().scrollTop( itemTop ); - }, - - // ------------------------------------------------------------------------ panel events - /** event map */ - events : { - 'click .select-all' : 'selectAll', - 'click .deselect-all' : 'deselectAll' - }, - - // ------------------------------------------------------------------------ misc - /** Return a string rep of the history */ - toString : function(){ - return 'ListPanel(' + this.collection + ')'; - } -}); - -// ............................................................................ TEMPLATES -/** underscore templates */ -ListPanel.prototype.templates = (function(){ -//TODO: move to require text! plugin - - var elTemplate = BASE_MVC.wrapTemplate([ - // temp container - '<div>', - '<div class="controls">', - '<div class="title">', - '<div class="name"><%= model.name || view.title %></div>', - '</div>', - '<div class="subtitle"><%= view.subtitle %></div>', - '<div class="actions"></div>', - '<div class="messages"></div>', - - '<div class="search">', - '<div class="search-input"></div>', - '</div>', - - '<div class="list-actions">', - '<div class="btn-group">', - '<button class="select-all btn btn-default"', - 'data-mode="select">', _l( 'All' ), '</button>', - '<button class="deselect-all btn btn-default"', - 'data-mode="select">', _l( 'None' ), '</button>', - '</div>', - //'<button class="action-popup-btn btn btn-default">', - // _l( 'For all selected' ), '...', - //'</button>', - '</div>', - '</div>', - '<div class="list-items"></div>', - '<div class="empty-message infomessagesmall"></div>', - '</div>' - ]); - - return { - el : elTemplate - }; -}()); - - - -//============================================================================== - return { - ListPanel: ListPanel - }; -}); diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/history/hda-li.js --- a/static/scripts/mvc/history/hda-li.js +++ b/static/scripts/mvc/history/hda-li.js @@ -17,12 +17,12 @@ /** logger used to record this.log messages, commonly set to console */ //logger : console, + className : _super.prototype.className + " history-content", + initialize : function( attributes, options ){ _super.prototype.initialize.call( this, attributes, options ); }, - className : _super.prototype.className + " history-content", - // ......................................................................... misc /** String representation */ toString : function(){ diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/history/history-contents.js --- a/static/scripts/mvc/history/history-contents.js +++ b/static/scripts/mvc/history/history-contents.js @@ -53,6 +53,7 @@ */ initialize : function( models, options ){ options = options || {}; +//TODO: could probably use the contents.history_id instead this.historyId = options.historyId; //this._setUpListeners(); @@ -226,7 +227,7 @@ if( !existing ){ return model; } // merge the models _BEFORE_ calling the superclass version - var merged = existing.toJSON(); + var merged = _.clone( existing.attributes ); _.extend( merged, model ); return merged; }); @@ -303,6 +304,13 @@ return xhr; }, + /** In this override, copy the historyId to the clone */ + clone : function(){ + var clone = Backbone.Collection.prototype.clone.call( this ); + clone.historyId = this.historyId; + return clone; + }, + /** debugging */ print : function(){ var contents = this; diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/history/history-model.js --- a/static/scripts/mvc/history/history-model.js +++ b/static/scripts/mvc/history/history-model.js @@ -232,7 +232,7 @@ /** Get data for a history then its hdas using a sequential ajax call, return a deferred to receive both */ History.getHistoryData = function getHistoryData( historyId, options ){ options = options || {}; - var hdaDetailIds = options.hdaDetailIds || []; + var detailIdsFn = options.detailIdsFn || []; var hdcaDetailIds = options.hdcaDetailIds || []; //console.debug( 'getHistoryData:', historyId, options ); @@ -250,20 +250,20 @@ // get the number of hdas accrd. to the history return historyData && historyData.empty; } - function getHdas( historyData ){ + function getContents( historyData ){ // get the hda data // if no hdas accrd. to history: return empty immed. if( isEmpty( historyData ) ){ return []; } // if there are hdas accrd. to history: get those as well - if( _.isFunction( hdaDetailIds ) ){ - hdaDetailIds = hdaDetailIds( historyData ); + if( _.isFunction( detailIdsFn ) ){ + detailIdsFn = detailIdsFn( historyData ); } if( _.isFunction( hdcaDetailIds ) ){ hdcaDetailIds = hdcaDetailIds( historyData ); } var data = {}; - if( hdaDetailIds.length ) { - data.dataset_details = hdaDetailIds.join( ',' ); + if( detailIdsFn.length ) { + data.dataset_details = detailIdsFn.join( ',' ); } if( hdcaDetailIds.length ) { // for symmetry, not actually used by backend of consumed @@ -274,10 +274,10 @@ } // getting these concurrently is 400% slower (sqlite, local, vanilla) - so: - // chain the api calls - getting history first then hdas + // chain the api calls - getting history first then contents var historyFn = options.historyFn || getHistory, - hdaFn = options.hdaFn || getHdas; + contentsFn = options.contentsFn || getContents; // chain ajax calls: get history first, then hdas var historyXHR = historyFn( historyId ); @@ -291,15 +291,15 @@ df.reject( xhr, 'loading the history' ); }); - var hdaXHR = historyXHR.then( hdaFn ); - hdaXHR.then( function( hdaJSON ){ - df.notify({ status: 'dataset data retrieved', historyJSON: historyJSON, hdaJSON: hdaJSON }); + var contentsXHR = historyXHR.then( contentsFn ); + contentsXHR.then( function( contentsJSON ){ + df.notify({ status: 'contents data retrieved', historyJSON: historyJSON, contentsJSON: contentsJSON }); // we've got both: resolve the outer scope deferred - df.resolve( historyJSON, hdaJSON ); + df.resolve( historyJSON, contentsJSON ); }); - hdaXHR.fail( function( xhr, status, message ){ + contentsXHR.fail( function( xhr, status, message ){ // call reject on the outer deferred to allow its fail callback to run - df.reject( xhr, 'loading the datasets', { history: historyJSON } ); + df.reject( xhr, 'loading the contents', { history: historyJSON } ); }); return df; diff -r 9d15e899516411c9b491f66f001a55136b1173b9 -r b0c8da2b3c1e37b3108bd6bc6b8ad919afef9b43 static/scripts/mvc/history/history-panel-annotated.js --- a/static/scripts/mvc/history/history-panel-annotated.js +++ b/static/scripts/mvc/history/history-panel-annotated.js @@ -1,118 +1,97 @@ define([ "mvc/history/history-panel", "mvc/history/hda-li", + "mvc/history/hdca-li", + "mvc/base-mvc", "utils/localization" -], function( HPANEL, HDA_LI, _l ){ +], function( HPANEL, HDA_LI, HDCA_LI, BASE_MVC, _l ){ /* ============================================================================= TODO: ============================================================================= */ -var _super = HPANEL.ReadOnlyHistoryPanel; +var _super = HPANEL.HistoryPanel; // used in history/display.mako and history/embed.mako /** @class View/Controller for a tabular view of the history model. - * @name AnnotatedHistoryPanel * * As ReadOnlyHistoryPanel, but with: * history annotation always shown * datasets displayed in a table: * datasets in left cells, dataset annotations in the right - * - * @augments Backbone.View - * @borrows LoggableMixin#logger as #logger - * @borrows LoggableMixin#log as #log - * @constructs */ var AnnotatedHistoryPanel = _super.extend( /** @lends AnnotatedHistoryPanel.prototype */{ /** logger used to record this.log messages, commonly set to console */ - // comment this out to suppress log output //logger : console, - className : 'annotated-history-panel', - - //TODO:?? possibly into own annotated class - /** class to use for constructing the HDA views */ - //HDAViewClass : HDA_LI.HDAListItemView, + className : _super.prototype.className + ' annotated-history-panel', // ------------------------------------------------------------------------ panel rendering - /** render with history data - * In this override: - * replace the datasets list with a table, - * add the history annotation, - * and move the search controls - * @returns {jQuery} dom fragment as temporary container to be swapped out later + /** In this override, add the history annotation */ - renderModel : function( ){ - // why do we need this here? why isn't className being applied? - this.$el.addClass( this.className ); - var $newRender = _super.prototype.renderModel.call( this ), - // move datasets from div to table - $datasetsList = this.$datasetsList( $newRender ), - $datasetsTable = $( '<table/>' ).addClass( 'datasets-list datasets-table' ); - $datasetsTable.append( $datasetsList.children() ); - $datasetsList.replaceWith( $datasetsTable ); - //TODO: it's possible to do this with css only, right? display: table-cell, etc.? - - // add history annotation under subtitle - $newRender.find( '.history-subtitle' ).after( this.renderHistoryAnnotation() ); - - // hide search button, move search bar beneath controls (instead of above title), show, and set up - $newRender.find( '.history-search-btn' ).hide(); - $newRender.find( '.history-controls' ).after( $newRender.find( '.history-search-controls' ).show() ); - + _buildNewRender : function(){ + //TODO: shouldn't this display regardless (on all non-current panels)? + var $newRender = _super.prototype._buildNewRender.call( this ); + this.renderHistoryAnnotation( $newRender ); return $newRender; }, /** render the history's annotation as its own field */ - renderHistoryAnnotation : function(){ + renderHistoryAnnotation : function( $newRender ){ var annotation = this.model.get( 'annotation' ); - if( !annotation ){ return null; } - return $([ - '<div class="history-annotation">', annotation, '</div>' - ].join( '' )); + if( !annotation ){ return; } + $newRender.find( '.controls .annotation-display' ).text( annotation ); }, - /** Set up/render a view for each HDA to be shown, init with model and listeners. - * In this override, add table header cells to indicate the dataset, annotation columns + /** In this override, convert the list-items tag to a table + * and add table header cells to indicate the dataset, annotation columns */ - renderHdas : function( $whereTo ){ + renderItems : function( $whereTo ){ $whereTo = $whereTo || this.$el; - var hdaViews = _super.prototype.renderHdas.call( this, $whereTo ); - this.$datasetsList( $whereTo ).prepend( $( '<tr/>' ).addClass( 'headers' ).append([ - $( '<th/>' ).text( _l( 'Dataset' ) ), - $( '<th/>' ).text( _l( 'Annotation' ) ) - ])); - return hdaViews; + + // convert to table + $whereTo.find( '.list-items' ) + .replaceWith( $( '<table/>' ).addClass( 'list-items' ) ); + + // render rows/contents and prepend headers + var views = _super.prototype.renderItems.call( this, $whereTo ); + this.$list( $whereTo ) + .prepend( $( '<tr/>' ).addClass( 'headers' ).append([ + $( '<th/>' ).text( _l( 'Dataset' ) ), + $( '<th/>' ).text( _l( 'Annotation' ) ) + ])); + return views; }, - // ------------------------------------------------------------------------ hda sub-views - /** attach an hdaView to the panel - * In this override, wrap the hdaView in a table row and cell, adding a 2nd cell for the hda annotation + // ------------------------------------------------------------------------ sub-views + /** In this override, wrap the content view in a table row + * with the content in the left td and annotation/extra-info in the right */ - attachContentView : function( hdaView, $whereTo ){ - $whereTo = $whereTo || this.$el; - // build a row around the dataset with the std hdaView in the first cell and the annotation in the next - var stateClass = _.find( hdaView.el.classList, function( c ){ return ( /^state\-/ ).test( c ); }), - annotation = hdaView.model.get( 'annotation' ) || '', - $tr = $( '<tr/>' ).addClass( 'dataset-row' ).append([ - $( '<td/>' ).addClass( 'dataset-container' ).append( hdaView.$el ) - // visually match the cell bg to the dataset at runtime (prevents the empty space) - // (getting bg via jq on hidden elem doesn't work on chrome/webkit - so use states) - //.css( 'background-color', hdaView.$el.css( 'background-color' ) ), - .addClass( stateClass? stateClass.replace( '-', '-color-' ): '' ), - $( '<td/>' ).addClass( 'additional-info' ).text( annotation ) - ]); - this.$datasetsList( $whereTo ).append( $tr ); + _attachItems : function( $whereTo ){ + this.$list( $whereTo ).append( this.views.map( function( view ){ + //TODO:?? possibly make this more flexible: instead of annotation use this._additionalInfo() + // build a row around the dataset with the std itemView in the first cell and the annotation in the next + var stateClass = _.find( view.el.classList, function( c ){ return ( /^state\-/ ).test( c ); }), + annotation = view.model.get( 'annotation' ) || '', + $tr = $( '<tr/>' ).append([ + $( '<td/>' ).addClass( 'contents-container' ).append( view.$el ) + // visually match the cell bg to the dataset at runtime (prevents the empty space) + // (getting bg via jq on hidden elem doesn't work on chrome/webkit - so use states) + //.css( 'background-color', view.$el.css( 'background-color' ) ), + .addClass( stateClass? stateClass.replace( '-', '-color-' ): '' ), + $( '<td/>' ).addClass( 'additional-info' ).text( annotation ) + ]); + return $tr; + })); + return this; }, // ------------------------------------------------------------------------ panel events /** event map */ events : _.extend( _.clone( _super.prototype.events ), { + // clicking on any part of the row will expand the items 'click tr' : function( ev ){ - //if( !ev.target.hasAttribute( 'href' ) ){ - $( ev.currentTarget ).find( '.dataset-title-bar' ).click(); - //} + $( ev.currentTarget ).find( '.title-bar' ).click(); }, // prevent propagation on icon btns so they won't bubble up to tr and toggleBodyVisibility 'click .icon-btn' : function( ev ){ @@ -127,6 +106,7 @@ } }); + //============================================================================== return { AnnotatedHistoryPanel : AnnotatedHistoryPanel This diff is so big that we needed to truncate the remainder. Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.