apps/workbench/app/assets/javascripts/infinite_scroll.js

   1 function maybe_load_more_content() {
   2     var scroller = this;        // element with scroll bars
   3     var container;              // element that receives new content
   4     var src;                    // url for retrieving content
   5     var scrollHeight;
   6     var spinner, colspan;
   7     scrollHeight = scroller.scrollHeight || $('body')[0].scrollHeight;
   8     var num_scrollers = $(window).data("arv-num-scrollers");
   9     if ($(scroller).scrollTop() + $(scroller).height()
  10         >
  11         scrollHeight - 50)
  12     {
  13       for (var i = 0; i < num_scrollers; i++) {
  14         $container = $($(this).data('infinite-container'+i));
  15         src = $container.attr('data-infinite-content-href');
  16         if (!src || !$container.is(':visible'))
  17           continue;
  18
  19         // Don't start another request until this one finishes
  20         $container.attr('data-infinite-content-href', null);
  21         spinner = '<div class="spinner spinner-32px spinner-h-center"></div>';
  22         if ($(container).is('table,tbody,thead,tfoot')) {
  23             // Hack to determine how many columns a new tr should have
  24             // in order to reach full width.
  25             colspan = $container.closest('table').
  26                 find('tr').eq(0).find('td,th').length;
  27             if (colspan == 0)
  28                 colspan = '*';
  29             spinner = ('<tr class="spinner"><td colspan="' + colspan + '">' +
  30                        spinner +
  31                        '</td></tr>');
  32         }
  33         $container.append(spinner);
  34         $.ajax(src,
  35                {dataType: 'json',
  36                 type: 'GET',
  37                 data: {},
  38                 context: {container: $container, src: src}}).
  39             always(function() {
  40                 $(this.container).find(".spinner").detach();
  41             }).
  42             fail(function(jqxhr, status, error) {
  43                 if (jqxhr.readyState == 0 || jqxhr.status == 0) {
  44                     message = "Cancelled."
  45                 } else if (jqxhr.responseJSON && jqxhr.responseJSON.errors) {
  46                     message = jqxhr.responseJSON.errors.join("; ");
  47                 } else {
  48                     message = "Request failed.";
  49                 }
  50                 // TODO: report this to the user.
  51                 console.log(message);
  52                 $(this.container).attr('data-infinite-content-href', this.src);
  53             }).
  54             done(function(data, status, jqxhr) {
  55                 $(this.container).append(data.content);
  56                 $(this.container).attr('data-infinite-content-href', data.next_page_href);
  57             });
  58         break;
  59      }
  60    }
  61 }
  62
  63 $(document).
  64     on('ready ajax:complete', function() {
  65         var num_scrollers = 0;
  66         $('[data-infinite-scroller]').each(function() {
  67             var $scroller = $($(this).attr('data-infinite-scroller'));
  68             if (!$scroller.hasClass('smart-scroll') &&
  69                 'scroll' != $scroller.css('overflow-y'))
  70                 $scroller = $(window);
  71             $scroller.
  72                 addClass('infinite-scroller').
  73                 data('infinite-container'+num_scrollers, this).
  74                 on('scroll', maybe_load_more_content);
  75             num_scrollers++;
  76         });
  77         $(window).data("arv-num-scrollers", num_scrollers);
  78     });