card_feed.js

/**
 * @file
 * Paging for card feeds.
 */
(function($) {

  Drupal.behaviors.cardFeed = {
    attach: function(context, settings) {

      $('.card-feed-pager__link').once('card-feed-pager', function() {
        var $this = $(this),
          card_feed_id = $this.data('cardfeedid'),
          card_feed_config = settings.bravo_blocks.card_feeds[card_feed_id],
          element_settings = {};

        // Setup an AJAX handler that will load the main list with the specified
        // node as the attachment display.
        // This was tricky to get right, but this helped:
        // @see http://www.slideshare.net/merlinofchaos/drupal-7-advanced-ajax
        // Format of the path should be bravo-blog/ajax/<view_name>/<display_id>/[show_nid]
        element_settings.url = this.href;
        element_settings.selector = '.card-feed-pager__link[data-cardfeedid=' + card_feed_id + ']';
        element_settings.submit = {
          card_feed_id: card_feed_id,
          card_feed_config: card_feed_config
        };
        element_settings.event = 'click';
        element_settings.progress = {
          type: 'throbber',
          message: null
        };
        Drupal.ajax[card_feed_id] = new Drupal.ajax(card_feed_id, this, element_settings);
        Drupal.ajax[card_feed_id].options.type = 'GET';

        // tldr; Add a new beforeSerialize to avoid AJAX HTML IDs, CSS and JS.
        // --verbose
        // Here we are overriding beforeSerialize on the object instance, which
        // will be used ahead of the prototype function.  We need to be aware of
        // two copies of beforeSerialize in this context.  First there is
        // Drupal.ajax.prototype.beforeSerialize within misc/ajax.js.  Second
        // there is the duck typed version defined by jquery_udate module in
        // jquery_update.js.
        // jquery_update.js's duck typed copy will add
        // ajax_page_state[jquery_version] to the request, which we want to be
        // save and add if present. Drupal.ajax.prototype.beforeSerialize mainly
        // does two things.  It passes along which js, css and HTML ids are
        // already in the page so that they won't be repeated.  We can safely
        // ignore that b/c we know ahead of time that we won't add forms to the
        // page, negating the need to track id's.  We also know ahead of time
        // that we won't add additional JS/CSS.  One thing that
        // Drupal.ajax.prototype.beforeSerialize does that we still may need is
        // passing along the theme.
        Drupal.ajax[card_feed_id].beforeSerialize = function(element, options) {
          options.data['ajax_page_state[theme]'] = Drupal.settings.ajaxPageState.theme;
          options.data['ajax_page_state[theme_token]'] = Drupal.settings.ajaxPageState.theme_token;
          if (Drupal.settings.ajaxPageState.jquery_version) {
            options.data['ajax_page_state[jquery_version]'] = Drupal.settings.ajaxPageState.jquery_version;
          }
        };

        // Setup a waypoint if waypoints should be supported for this pager
        if (card_feed_config.infinite || (card_feed_config.lazy_load && card_feed_config.next_page == null)) {
          $this.waypoint(function(event, direction) {
            $(this).click();
          }, {offset: '100%'});
        }
      });
    },

    detach: function(context, settings) {
      if ($(context).is('.card-feed-pager__link')) {
        $(context).waypoint('destroy');
      }
      else {
        $('.card-feed-pager__link', context).waypoint('destroy');
      }
    }
  };

})(jQuery);