X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/964350f4132788e07a7ce1b159179a152e9cfcdc..900b548097c68649ae2874ded5849f1d8164384c:/apps/workbench/app/assets/javascripts/infinite_scroll.js diff --git a/apps/workbench/app/assets/javascripts/infinite_scroll.js b/apps/workbench/app/assets/javascripts/infinite_scroll.js index 1f9997efa0..047858c5a0 100644 --- a/apps/workbench/app/assets/javascripts/infinite_scroll.js +++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js @@ -1,25 +1,65 @@ -function maybe_load_more_content() { - var scroller = this; // element with scroll bars - var container; // element that receives new content - var src; // url for retrieving content +// infinite_scroll.js displays a tab's content using automatic scrolling +// when the user scrolls to the bottom of the page and there is more data. +// +// Usage: +// +// 1. Adding infinite scrolling to a tab pane using "show" method +// +// The steps below describe adding scrolling to the project#show action. +// +// a. In the "app/views/projects/" folder add a file for your tab +// (ex: _show_jobs_and_pipelines.html.erb) +// In this file, add a div or tbody with data-infinite-scroller. +// Note: This page uses _show_tab_contents.html.erb so that +// several tabs can reuse this implementation. +// Also add the filters to be used for loading the tab content. +// +// b. Add a file named "_show_contents_rows.html.erb" that loads +// the data (by invoking get_objects_and_names from the controller). +// +// c. In the "app/controllers/projects_controller.rb, +// Update the show method to add a block for "params[:partial]" +// that loads the show_contents_rows partial. +// Optionally, add a "tab_counts" method that loads the total number +// of objects count to be displayed for this tab. +// +// 2. Adding infinite scrolling to the "Recent" tab in "index" page +// The steps below describe adding scrolling to the pipeline_instances index page. +// +// a. In the "app/views/pipeline_instances/_show_recent.html.erb/" file +// add a div or tbody with data-infinite-scroller. +// +// b. Add the partial "_show_recent_rows.html.erb" that displays the +// page contents on scroll using the @objects + +function maybe_load_more_content(event) { + var scroller = this; + var $container = $(event.data.container); + var src; // url for retrieving content var scrollHeight; var spinner, colspan; + var serial = Date.now(); + var params; scrollHeight = scroller.scrollHeight || $('body')[0].scrollHeight; - var num_scrollers = $(window).data("arv-num-scrollers"); if ($(scroller).scrollTop() + $(scroller).height() > scrollHeight - 50) { - for (var i = 0; i < num_scrollers; i++) { - $container = $($(this).data('infinite-container'+i)); + if (!$container.attr('data-infinite-content-href0')) { + // Remember the first page source url, so we can refresh + // from page 1 later. + $container.attr('data-infinite-content-href0', + $container.attr('data-infinite-content-href')); + } src = $container.attr('data-infinite-content-href'); if (!src || !$container.is(':visible')) - continue; + // Finished + return; // Don't start another request until this one finishes $container.attr('data-infinite-content-href', null); spinner = '
'; - if ($(container).is('table,tbody,thead,tfoot')) { + if ($container.is('table,tbody,thead,tfoot')) { // Hack to determine how many columns a new tr should have // in order to reach full width. colspan = $container.closest('table'). @@ -30,49 +70,234 @@ function maybe_load_more_content() { spinner + ''); } + $container.find(".spinner").detach(); $container.append(spinner); + $container.data('data-infinite-serial', serial); + + if (src == $container.attr('data-infinite-content-href0')) { + // If we're loading the first page, collect filters from + // various sources. + params = mergeInfiniteContentParams($container); + $.each(params, function(k,v) { + if (v instanceof Object) { + params[k] = JSON.stringify(v); + } + }); + } else { + // If we're loading page >1, ignore other filtering + // mechanisms and just use the "next page" URI from the + // previous page's response. Aside from avoiding race + // conditions (where page 2 could have different filters + // than page 1), this allows the server to use filters in + // the "next page" URI to achieve paging. (To apply any + // new filters effectively, we need to load page 1 again + // anyway.) + params = {}; + } + $.ajax(src, {dataType: 'json', type: 'GET', - data: {}, - context: {container: $container, src: src}}). - always(function() { - $(this.container).find(".spinner").detach(); - }). + data: params, + context: {container: $container, src: src, serial: serial}}). fail(function(jqxhr, status, error) { + var $faildiv; + var $container = this.container; + if ($container.data('data-infinite-serial') != this.serial) { + // A newer request is already in progress. + return; + } if (jqxhr.readyState == 0 || jqxhr.status == 0) { - message = "Cancelled." + message = "Cancelled."; } else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) { message = jqxhr.responseJSON.errors.join("; "); } else { message = "Request failed."; } - // TODO: report this to the user. + // TODO: report the message to the user. console.log(message); - $(this.container).attr('data-infinite-content-href', this.src); + $faildiv = $(''). + attr('data-infinite-content-href', this.src). + addClass('infinite-retry'). + append(' Oops, request failed. '); + $container.find('div.spinner').replaceWith($faildiv); }). done(function(data, status, jqxhr) { - $(this.container).append(data.content); - $(this.container).attr('data-infinite-content-href', data.next_page_href); + if ($container.data('data-infinite-serial') != this.serial) { + // A newer request is already in progress. + return; + } + $container.find(".spinner").detach(); + $container.append(data.content); + $container.attr('data-infinite-content-href', data.next_page_href); }); - break; } - } +} + +function ping_all_scrollers() { + // Send a scroll event to all scroll listeners that might need + // updating. Adding infinite-scroller class to the window element + // doesn't work, so we add it explicitly here. + $('.infinite-scroller').add(window).trigger('scroll'); +} + +function mergeInfiniteContentParams($container) { + var params = {}; + // Combine infiniteContentParams from multiple sources. This + // mechanism allows each of several components to set and + // update its own set of filters, without having to worry + // about stomping on some other component's filters. + // + // For example, filterable.js writes filters in + // infiniteContentParamsFilterable ("search for text foo") + // without worrying about clobbering the filters set up by the + // tab pane ("only show jobs and pipelines in this tab"). + $.each($container.data(), function(datakey, datavalue) { + // Note: We attach these data to DOM elements using + //