-
Notifications
You must be signed in to change notification settings - Fork 112
/
infinite_scroll.js
309 lines (292 loc) · 13.7 KB
/
infinite_scroll.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
// 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;
if ($(scroller).scrollTop() + $(scroller).height()
>
scrollHeight - 50)
{
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'))
// Finished
return;
// Don't start another request until this one finishes
$container.attr('data-infinite-content-href', null);
spinner = '<div class="spinner spinner-32px spinner-h-center"></div>';
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').
find('tr').eq(0).find('td,th').length;
if (colspan == 0)
colspan = '*';
spinner = ('<tr class="spinner"><td colspan="' + colspan + '">' +
spinner +
'</td></tr>');
}
$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: 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.";
} else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) {
message = jqxhr.responseJSON.errors.join("; ");
} else {
message = "Request failed.";
}
// TODO: report the message to the user.
console.log(message);
$faildiv = $('<div />').
attr('data-infinite-content-href', this.src).
addClass('infinite-retry').
append('<span class="fa fa-warning" /> Oops, request failed. <button class="btn btn-xs btn-primary">Retry</button>');
$container.find('div.spinner').replaceWith($faildiv);
}).
done(function(data, status, jqxhr) {
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();
});
}
}
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
// <element data-foo-bar="baz">. We store/retrieve them
// using $('element').data('foo-bar'), although
// .data('fooBar') would also work. The "all data" hash
// returned by $('element').data(), however, always has
// keys like 'fooBar'. In other words, where we have a
// choice, we stick with the 'foo-bar' style to be
// consistent with HTML. Here, our only option is
// 'fooBar'.
if (/^infiniteContentParams/.exec(datakey)) {
if (datavalue instanceof Object) {
$.each(datavalue, function(hkey, hvalue) {
if (hvalue instanceof Array) {
params[hkey] = (params[hkey] || []).
concat(hvalue);
} else if (hvalue instanceof Object) {
$.extend(params[hkey], hvalue);
} else {
params[hkey] = hvalue;
}
});
}
}
});
return params;
}
function setColumnSort( $container, $header, direction ) {
// $container should be the tbody or whatever has all the infinite table data attributes
// $header should be the th with a preset data-sort-order attribute
// direction should be "asc" or "desc"
// This function returns the order by clause for this column header as a string
// First reset all sort directions
$('th[data-sort-order]').removeData('sort-order-direction');
// set the current one
$header.data('sort-order-direction', direction);
// change the ordering parameter
var paramsAttr = 'infinite-content-params-' + $container.data('infinite-content-params-attr');
var params = $container.data(paramsAttr) || {};
params.order = $header.data('sort-order').split(",").join( ' ' + direction + ', ' ) + ' ' + direction;
$container.data(paramsAttr, params);
// show the correct icon next to the column header
$container.trigger('sort-icons');
return params.order;
}
$(document).
on('click', 'div.infinite-retry button', function() {
var $retry_div = $(this).closest('.infinite-retry');
var $container = $(this).closest('.infinite-scroller-ready')
$container.attr('data-infinite-content-href',
$retry_div.attr('data-infinite-content-href'));
$retry_div.
replaceWith('<div class="spinner spinner-32px spinner-h-center" />');
ping_all_scrollers();
}).
on('refresh-content', '[data-infinite-scroller]', function() {
// Clear all rows, reset source href to initial state, and
// (if the container is visible) start loading content.
var first_page_href = $(this).attr('data-infinite-content-href0');
if (!first_page_href)
first_page_href = $(this).attr('data-infinite-content-href');
$(this).
html('').
attr('data-infinite-content-href', first_page_href);
ping_all_scrollers();
}).
on('ready ajax:complete', function() {
$('[data-infinite-scroller]').each(function() {
if ($(this).hasClass('infinite-scroller-ready'))
return;
$(this).addClass('infinite-scroller-ready');
// 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"
// events: sometimes it's a div, sometimes it's
// window. Here, "this" is the DOM element containing the
// result rows. We pass it to maybe_load_more_content in
// event.data.
var $scroller = $($(this).attr('data-infinite-scroller'));
if (!$scroller.hasClass('smart-scroll') &&
'scroll' != $scroller.css('overflow-y'))
$scroller = $(window);
$scroller.
addClass('infinite-scroller').
on('scroll resize', { container: this }, maybe_load_more_content).
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( direction === undefined || direction === 'desc' ) {
direction = 'asc';
} else {
direction = 'desc';
}
var $container = $(this).closest('table').find('[data-infinite-content-params-attr]');
var order = setColumnSort( $container, $(this), direction );
// 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 );
}
$container.trigger('refresh-content');
}).
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( direction !== undefined ) {
$(this).append('<i class="fa fa-sort-' + direction + '"/>');
} else {
$(this).append('<i class="fa fa-sort"/>');
}
});
});