1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/957e0c754862/ Changeset: 957e0c754862 User: jeremy goecks Date: 2014-03-03 20:04:09 Summary: Extend TabularDataTableView to support full page view and an embedded view. Affected #: 3 files diff -r 96bf0719d590025a818828245e66e3b08de9f828 -r 957e0c7548626c2532af6fd00387ec1568b7dce0 static/scripts/mvc/data.js --- a/static/scripts/mvc/data.js +++ b/static/scripts/mvc/data.js @@ -108,13 +108,15 @@ }); /** - * Provides table-based, dynamic view of a tabular dataset. - * NOTE: view's el must be in DOM already and provided when - * createing the view so that scrolling event can be attached - * to the correct container. + * Provides a base for table-based, dynamic view of a tabular dataset. + * Do not instantiate directly; use either TopLevelTabularDatasetChunkedView + * or EmbeddedTabularDatasetChunkedView. */ var TabularDatasetChunkedView = Backbone.View.extend({ + /** + * Initialize view and, importantly, set a scroll element. + */ initialize: function(options) { // Row count for rendering. this.row_count = 0; @@ -147,25 +149,15 @@ } // -- Show new chunks during scrolling. -- - + var self = this, - // Element that does the scrolling. - scroll_elt = _.find(this.$el.parents(), function(p) { - return $(p).css('overflow') === 'auto'; - }), // Flag to ensure that only one chunk is loaded at a time. loading_chunk = false; - // If no scrolling element found, use window. - if (!scroll_elt) { scroll_elt = window; } - - // Wrap scrolling element for easy access. - scroll_elt = $(scroll_elt); - // Set up chunk loading when scrolling using the scrolling element. - scroll_elt.scroll(function() { + this.scroll_elt.scroll(function() { // If not already loading a chunk and have scrolled to the bottom of this element, get next chunk. - if ( !loading_chunk && (self.$el.height() - scroll_elt.scrollTop() - scroll_elt.height() <= 0) ) { + if ( !loading_chunk && self.scrolled_to_bottom() ) { loading_chunk = true; $.when(self.model.get_next_chunk()).then(function(result) { if (result) { @@ -182,6 +174,13 @@ }); }, + /** + * Returns true if user has scrolled to the bottom of the view. + */ + scrolled_to_bottom: function() { + return false; + }, + // -- Helper functions. -- _renderCell: function(cell_contents, index, colspan) { @@ -246,6 +245,61 @@ } }); +/** + * Tabular view that is placed at the top level of page. Scrolling occurs + * view top-level elements outside of view. + */ +var TopLevelTabularDatasetChunkedView = TabularDatasetChunkedView.extend({ + + initialize: function(options) { + TabularDatasetChunkedView.prototype.initialize.call(this, options); + + // Scrolling happens in top-level elements. + scroll_elt = _.find(this.$el.parents(), function(p) { + return $(p).css('overflow') === 'auto'; + }); + + // If no scrolling element found, use window. + if (!scroll_elt) { scroll_elt = window; } + + // Wrap scrolling element for easy access. + this.scroll_elt = $(scroll_elt); + }, + + /** + * Returns true if user has scrolled to the bottom of the view. + */ + scrolled_to_bottom: function() { + return (this.$el.height() - this.scroll_elt.scrollTop() - this.scroll_elt.height() <= 0); + } + +}); + +/** + * Tabular view tnat is embedded in a page. Scrolling occurs in view's el. + */ +var EmbeddedTabularDatasetChunkedView = TabularDatasetChunkedView.extend({ + + initialize: function(options) { + TabularDatasetChunkedView.prototype.initialize.call(this, options); + + // Because view is embedded, set up div to do scrolling. + this.scroll_elt = this.$el.css({ + position: 'relative', + overflow: 'scroll', + height: this.options.height || '500px' + }); + }, + + /** + * Returns true if user has scrolled to the bottom of the view. + */ + scrolled_to_bottom: function() { + return this.$el.scrollTop() + this.$el.innerHeight() >= this.el.scrollHeight; + } + +}); + // button for trackster visualization var TabularButtonTracksterView = Backbone.View.extend( { @@ -513,15 +567,28 @@ * Create a tabular dataset chunked view (and requisite tabular dataset model) * and appends to parent_elt. */ -var createTabularDatasetChunkedView = function(dataset_config, parent_elt) { - // Create view element and add to parent. - var view_div = $('<div/>').appendTo(parent_elt); +var createTabularDatasetChunkedView = function(options) { + // Create and set model. + options.model = new TabularDataset(options.dataset_config); - // default viewer - return new TabularDatasetChunkedView({ - el: view_div, - model: new TabularDataset(dataset_config) - }).render(); + var parent_elt = options.parent_elt; + var embedded = options.embedded; + + // Clean up options so that only needed options are passed to view. + delete options.embedded; + delete options.parent_elt; + delete options.dataset_config; + + // Create and set up view. + var view = (embedded ? new EmbeddedTabularDatasetChunkedView(options) : + new TopLevelTabularDatasetChunkedView(options)); + view.render(); + + if (parent_elt) { + parent_elt.append(view.$el); + } + + return view; }; return { diff -r 96bf0719d590025a818828245e66e3b08de9f828 -r 957e0c7548626c2532af6fd00387ec1568b7dce0 templates/webapps/galaxy/dataset/display.mako --- a/templates/webapps/galaxy/dataset/display.mako +++ b/templates/webapps/galaxy/dataset/display.mako @@ -23,18 +23,18 @@ // $('.page-body').children().remove(); - data.createTabularDatasetChunkedView( - // Dataset config. TODO: encode id. - _.extend( ${h.to_json_string( item.to_dict() )}, - { - chunk_url: "${h.url_for( controller='/dataset', action='display', - dataset_id=trans.security.encode_id( item.id ))}", - first_data_chunk: ${first_chunk} - } - ), - // Append view to body. - $('.page-body') - ); + data.createTabularDatasetChunkedView({ + // TODO: encode id. + dataset_config: + _.extend( ${h.to_json_string( item.to_dict() )}, + { + chunk_url: "${h.url_for( controller='/dataset', action='display', + dataset_id=trans.security.encode_id( item.id ))}", + first_data_chunk: ${first_chunk} + } + ), + parent_elt: $('.page-body') + }); }); </script> diff -r 96bf0719d590025a818828245e66e3b08de9f828 -r 957e0c7548626c2532af6fd00387ec1568b7dce0 templates/webapps/galaxy/dataset/tabular_chunked.mako --- a/templates/webapps/galaxy/dataset/tabular_chunked.mako +++ b/templates/webapps/galaxy/dataset/tabular_chunked.mako @@ -17,8 +17,8 @@ }); require(['mvc/data'], function(data) { - data.createTabularDatasetChunkedView( - _.extend( ${h.to_json_string( trans.security.encode_dict_ids( dataset.to_dict() ) )}, + data.createTabularDatasetChunkedView({ + dataset_config: _.extend( ${h.to_json_string( trans.security.encode_dict_ids( dataset.to_dict() ) )}, { url_viz: "${h.url_for( controller='/visualization')}", chunk_url: "${h.url_for( controller='/dataset', action='display', @@ -26,9 +26,8 @@ first_data_chunk: ${chunk} } ), - // Append view to body. - $('body') - ); + parent_elt: $('body') + }); }); </script></%def> 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.