1 function maybe_load_more_content(event) {
2 var scroller = this; // element with scroll bars
3 var $container; // element that receives new content
4 var src; // url for retrieving content
7 var serial = Date.now();
9 scrollHeight = scroller.scrollHeight || $('body')[0].scrollHeight;
10 if ($(scroller).scrollTop() + $(scroller).height()
14 $container = $(event.data.container);
15 if (!$container.attr('data-infinite-content-href0')) {
16 // Remember the first page source url, so we can refresh
18 $container.attr('data-infinite-content-href0',
19 $container.attr('data-infinite-content-href'));
21 src = $container.attr('data-infinite-content-href');
22 if (!src || !$container.is(':visible'))
26 // Don't start another request until this one finishes
27 $container.attr('data-infinite-content-href', null);
28 spinner = '<div class="spinner spinner-32px spinner-h-center"></div>';
29 if ($container.is('table,tbody,thead,tfoot')) {
30 // Hack to determine how many columns a new tr should have
31 // in order to reach full width.
32 colspan = $container.closest('table').
33 find('tr').eq(0).find('td,th').length;
36 spinner = ('<tr class="spinner"><td colspan="' + colspan + '">' +
40 $container.find(".spinner").detach();
41 $container.append(spinner);
42 $container.attr('data-infinite-serial', serial);
44 if (src == $container.attr('data-infinite-content-href0')) {
45 // If we're loading the first page, collect filters from
47 params = mergeInfiniteContentParams($container);
48 $.each(params, function(k,v) {
49 if (v instanceof Object) {
50 params[k] = JSON.stringify(v);
54 // If we're loading page >1, ignore other filtering
55 // mechanisms and just use the "next page" URI from the
56 // previous page's response. Aside from avoiding race
57 // conditions (where page 2 could have different filters
58 // than page 1), this allows the server to use filters in
59 // the "next page" URI to achieve paging. (To apply any
60 // new filters effectively, we need to load page 1 again
69 context: {container: $container, src: src, serial: serial}}).
70 fail(function(jqxhr, status, error) {
72 var $container = this.container;
73 if ($container.attr('data-infinite-serial') != this.serial) {
74 // A newer request is already in progress.
77 if (jqxhr.readyState == 0 || jqxhr.status == 0) {
78 message = "Cancelled."
79 } else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) {
80 message = jqxhr.responseJSON.errors.join("; ");
82 message = "Request failed.";
84 // TODO: report the message to the user.
86 $faildiv = $('<div />').
87 attr('data-infinite-content-href', this.src).
88 addClass('infinite-retry').
89 append('<span class="fa fa-warning" /> Oops, request failed. <button class="btn btn-xs btn-primary">Retry</button>');
90 $container.find('div.spinner').replaceWith($faildiv);
92 done(function(data, status, jqxhr) {
93 if ($container.attr('data-infinite-serial') != this.serial) {
94 // A newer request is already in progress.
97 $container.find(".spinner").detach();
98 $container.append(data.content);
99 $container.attr('data-infinite-content-href', data.next_page_href);
104 function ping_all_scrollers() {
105 // Send a scroll event to all scroll listeners that might need
106 // updating. Adding infinite-scroller class to the window element
107 // doesn't work, so we add it explicitly here.
108 $('.infinite-scroller').add(window).trigger('scroll');
111 function mergeInfiniteContentParams($container) {
113 // Combine infiniteContentParams from multiple sources. This
114 // mechanism allows each of several components to set and
115 // update its own set of filters, without having to worry
116 // about stomping on some other component's filters.
118 // For example, filterable.js writes filters in
119 // infiniteContentParamsFilterable ("search for text foo")
120 // without worrying about clobbering the filters set up by the
121 // tab pane ("only show jobs and pipelines in this tab").
122 $.each($container.data(), function(datakey, datavalue) {
123 // Note: We attach these data to DOM elements using
124 // <element data-foo-bar="baz">. We store/retrieve them
125 // using $('element').data('foo-bar'), although
126 // .data('fooBar') would also work. The "all data" hash
127 // returned by $('element').data(), however, always has
128 // keys like 'fooBar'. In other words, where we have a
129 // choice, we stick with the 'foo-bar' style to be
130 // consistent with HTML. Here, our only option is
132 if (/^infiniteContentParams/.exec(datakey)) {
133 if (datavalue instanceof Object) {
134 $.each(datavalue, function(hkey, hvalue) {
135 if (hvalue instanceof Array) {
136 params[hkey] = (params[hkey] || []).
138 } else if (hvalue instanceof Object) {
139 $.extend(params[hkey], hvalue);
141 params[hkey] = hvalue;
151 on('click', 'div.infinite-retry button', function() {
152 var $retry_div = $(this).closest('.infinite-retry');
153 var $container = $(this).closest('.infinite-scroller-ready')
154 $container.attr('data-infinite-content-href',
155 $retry_div.attr('data-infinite-content-href'));
157 replaceWith('<div class="spinner spinner-32px spinner-h-center" />');
158 ping_all_scrollers();
160 on('refresh-content', '[data-infinite-scroller]', function() {
161 // Clear all rows, reset source href to initial state, and
162 // (if the container is visible) start loading content.
163 var first_page_href = $(this).attr('data-infinite-content-href0');
164 if (!first_page_href)
165 first_page_href = $(this).attr('data-infinite-content-href');
168 attr('data-infinite-content-href', first_page_href);
169 ping_all_scrollers();
171 on('ready ajax:complete', function() {
172 $('[data-infinite-scroller]').each(function() {
173 if ($(this).hasClass('infinite-scroller-ready'))
175 $(this).addClass('infinite-scroller-ready');
177 // $scroller is the DOM element that hears "scroll"
178 // events: sometimes it's a div, sometimes it's
179 // window. Here, "this" is the DOM element containing the
180 // result rows. We pass it to maybe_load_more_content in
182 var $scroller = $($(this).attr('data-infinite-scroller'));
183 if (!$scroller.hasClass('smart-scroll') &&
184 'scroll' != $scroller.css('overflow-y'))
185 $scroller = $(window);
187 addClass('infinite-scroller').
188 on('scroll resize', { container: this }, maybe_load_more_content).
192 on('click', 'th[data-sort-order]', function() {
193 var direction = $(this).data('sort-order-direction');
194 // reverse the current direction, or do ascending if none
195 if( typeof(direction) === 'undefined' || direction === 'desc' ) {
200 // reset all sort directions
201 $('th[data-sort-order]').removeData('sort-order-direction');
202 // set the current one
203 $(this).data('sort-order-direction', direction);
204 // change the ordering parameter and refresh the data display with the new order
205 var $target = $(this).closest('table').find('[data-infinite-content-params-attr]');
206 var params_attr = 'infinite-content-params-' + $target.data('infinite-content-params-attr');
207 var params = $target.data(params_attr) || {};
208 params.order = $(this).data('sort-order').split(",").join( ' ' + direction + ', ' ) + ' ' + direction;
209 $target.data(params_attr, params);
210 $target.trigger('refresh-content');
212 on('ready arv:pane:loaded refresh-content', function() {
213 $('th[data-sort-order]').each(function() {
214 $(this).find('i').remove();
215 var direction = $(this).data('sort-order-direction');
216 if( typeof(direction) !== 'undefined' ) {
217 $(this).append('<i class="fa fa-sort-' + direction + '"/>');
219 $(this).append('<i class="fa fa-sort"/>');