X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/d13e8de76d48788a9198d4581205995f45464ff3..0312a5e5aa076fa3458dd83a33e72663d23bb1ba:/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 73b8fd66af..3e63858594 100644 --- a/apps/workbench/app/assets/javascripts/infinite_scroll.js +++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js @@ -1,25 +1,61 @@ -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 +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +// 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')) { + 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')); + $container.attr('data-infinite-content-href0', + $container.attr('data-infinite-content-href')); } - src = $(container).attr('data-infinite-content-href'); + src = $container.attr('data-infinite-content-href'); if (!src || !$container.is(':visible')) // Finished return; @@ -27,7 +63,7 @@ function maybe_load_more_content() { // 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'). @@ -38,22 +74,45 @@ function maybe_load_more_content() { spinner + ''); } - $(container).find(".spinner").detach(); - $(container).append(spinner); - $(container).attr('data-infinite-serial', serial); + $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: ($(container).data('infinite-content-params') || {}), - context: {container: container, src: src, serial: serial}}). + data: params, + context: {container: $container, src: src, serial: serial}}). fail(function(jqxhr, status, error) { var $faildiv; - if ($(this.container).attr('data-infinite-serial') != this.serial) { + 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 { @@ -65,30 +124,98 @@ function maybe_load_more_content() { attr('data-infinite-content-href', this.src). addClass('infinite-retry'). append(' Oops, request failed. '); - $(this.container).find('div.spinner').replaceWith($faildiv); + $container.find('div.spinner').replaceWith($faildiv); }). done(function(data, status, jqxhr) { - if ($(this.container).attr('data-infinite-serial') != this.serial) { + if ($container.data('data-infinite-serial') != this.serial) { // A newer request is already in progress. return; } - $(this.container).find(".spinner").detach(); - $(this.container).append(data.content); - $(this.container).attr('data-infinite-content-href', data.next_page_href); + $container.find(".spinner").detach(); + $container.append(data.content); + $container.attr('data-infinite-content-href', data.next_page_href); + ping_all_scrollers(); }); - 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 container requests and pipeline instances + // in this tab"). + $.each($container.data(), function(datakey, datavalue) { + // Note: We attach these data to DOM elements using + //