X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/9f37a732c9bfb3892231765f37e213af4e037e68..67616c4716fb325cbd5d2eb5ed042d3a20569914:/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 b5255fbafa..3e63858594 100644 --- a/apps/workbench/app/assets/javascripts/infinite_scroll.js +++ b/apps/workbench/app/assets/javascripts/infinite_scroll.js @@ -1,7 +1,45 @@ +// 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; // element with scroll bars - var $container; // element that receives new content - var src; // url for retrieving content + var scroller = this; + var $container = $(event.data.container); + var src; // url for retrieving content var scrollHeight; var spinner, colspan; var serial = Date.now(); @@ -11,7 +49,6 @@ function maybe_load_more_content(event) { > scrollHeight - 50) { - $container = $(event.data.container); if (!$container.attr('data-infinite-content-href0')) { // Remember the first page source url, so we can refresh // from page 1 later. @@ -39,7 +76,7 @@ function maybe_load_more_content(event) { } $container.find(".spinner").detach(); $container.append(spinner); - $container.attr('data-infinite-serial', serial); + $container.data('data-infinite-serial', serial); if (src == $container.attr('data-infinite-content-href0')) { // If we're loading the first page, collect filters from @@ -70,12 +107,12 @@ function maybe_load_more_content(event) { fail(function(jqxhr, status, error) { var $faildiv; var $container = this.container; - if ($container.attr('data-infinite-serial') != this.serial) { + 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 { @@ -90,13 +127,14 @@ function maybe_load_more_content(event) { $container.find('div.spinner').replaceWith($faildiv); }). done(function(data, status, jqxhr) { - if ($container.attr('data-infinite-serial') != this.serial) { + 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); + ping_all_scrollers(); }); } } @@ -118,7 +156,8 @@ function mergeInfiniteContentParams($container) { // 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"). + // 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 // . We store/retrieve them @@ -162,8 +201,8 @@ function setColumnSort( $container, $header, direction ) { var params = $container.data(paramsAttr) || {}; params.order = $header.data('sort-order').split(",").join( ' ' + direction + ', ' ) + ' ' + direction; $container.data(paramsAttr, params); - // show the right icon next to the column header - $container.trigger('sortIcons'); + // show the correct icon next to the column header + $container.trigger('sort-icons'); return params.order; } @@ -195,18 +234,20 @@ $(document). return; $(this).addClass('infinite-scroller-ready'); - // deal with sorting if was set on this page for this tab already - var tabId = $(this).closest('div.tab-pane').attr('id'); - if( typeof(history.state.order) !== 'undefined' && typeof(history.state.order[tabId]) !== 'undefined' ) { - // we will use the list of one or more table columns associated with this header to find the right element - // see sortable_columns as it is passed to render_pane in the various tab .erbs (e.g. _show_jobs_and_pipelines.html.erb) - var strippedColumns = history.state.order[tabId].replace(/\s|asc|desc/g,''); - var sortDirection = history.state.order[tabId].split(" ")[1].replace(/,/,''); - $columnHeader = $(this).closest('table').find('[data-sort-order="'+ strippedColumns +'"]'); - setColumnSort( $(this), $columnHeader, sortDirection ); - } else { - // otherwise just reset the sort icons - $(this).trigger('sortIcons'); + // deal with sorting if there is any, and if it was set on this page for this tab already + if( $('th[data-sort-order]').length ) { + var tabId = $(this).closest('div.tab-pane').attr('id'); + if( hasHTML5History() && history.state !== undefined && history.state !== null && history.state.order !== undefined && history.state.order[tabId] !== undefined ) { + // we will use the list of one or more table columns associated with this header to find the right element + // see sortable_columns as it is passed to render_pane in the various tab .erbs (e.g. _show_jobs_and_pipelines.html.erb) + var strippedColumns = history.state.order[tabId].replace(/\s|\basc\b|\bdesc\b/g,''); + var sortDirection = history.state.order[tabId].split(" ")[1].replace(/,/,''); + $columnHeader = $(this).closest('table').find('[data-sort-order="'+ strippedColumns +'"]'); + setColumnSort( $(this), $columnHeader, sortDirection ); + } else { + // otherwise just reset the sort icons + $(this).trigger('sort-icons'); + } } // $scroller is the DOM element that hears "scroll" @@ -224,10 +265,14 @@ $(document). trigger('scroll'); }); }). + on('shown.bs.tab', 'a[data-toggle="tab"]', function(event) { + $(event.target.getAttribute('href') + ' [data-infinite-scroller]'). + trigger('scroll'); + }). on('click', 'th[data-sort-order]', function() { var direction = $(this).data('sort-order-direction'); // reverse the current direction, or do ascending if none - if( typeof(direction) === 'undefined' || direction === 'desc' ) { + if( direction === undefined || direction === 'desc' ) { direction = 'asc'; } else { direction = 'desc'; @@ -237,23 +282,25 @@ $(document). var order = setColumnSort( $container, $(this), direction ); - // put it in the browser history state - var tabId = $(this).closest('div.tab-pane').attr('id'); - var state = history.state; - if( typeof(state.order) === 'undefined') { - state.order = {}; + // put it in the browser history state if browser allows it + if( hasHTML5History() ) { + var tabId = $(this).closest('div.tab-pane').attr('id'); + var state = history.state || {}; + if( state.order === undefined ) { + state.order = {}; + } + state.order[tabId] = order; + history.replaceState( state, null, null ); } - state.order[tabId] = order; - history.replaceState( state, null, null ); $container.trigger('refresh-content'); }). - on('sortIcons', function() { + on('sort-icons', function() { // set or reset the icon next to each sortable column header according to the current direction attribute $('th[data-sort-order]').each(function() { $(this).find('i').remove(); var direction = $(this).data('sort-order-direction'); - if( typeof(direction) !== 'undefined' ) { + if( direction !== undefined ) { $(this).append(''); } else { $(this).append('');