/static/js/views/sitelistview.js

define([
  'underscore', 'backbone',
  'models/sitecollection',
  'views/listview',
  'views/sitesingleview',
  'logger'
],
function (util, Backbone, SiteCollection, ListView, SiteSingleView, logger) {
  var __ListView = ListView.prototype;
  // A widget that contains the views for a collection of sites.
  var SiteListView = ListView.extend({
    className: 'mod-cards cf',
    
    initialize: function (options) {
      var self = this;
      options = options || {};
      
      options.view = options.view || SiteSingleView;
      options.collection = options.collection || new SiteCollection();
      
      __ListView.initialize.call(this, options);
      
      // Collection Events
      this.collection
        .bind('fetch', this.renderLoader, this)
        .bind('success', this.removeLoader, this);
      
      // View events
    },

    events: {
      'click a[href]': 'onitemclick'
    },

    fetch: function () {
      var collection = this.collection;
      collection.fetch.apply(collection, arguments);
    },
    
    onitemclick: function(evt){
      // TODO: this is preventing the app from following links. Determine
      // if this is the intended behavior, given our frame-based
      // architecture.
      evt.preventDefault();
      var itemNode = evt.currentTarget, 
          itemId = itemNode.getAttribute("data-itemid");
          
      logger.log("site item clicked: ", evt.currentTarget, itemNode.getAttribute("data-itemid"));
      
      if(!itemId) {
        logger.log("no data-itemid attribute on click target: ", itemNode);
        return;
      }
      
      if(this.bridge && this.bridge.selectSite){
        this.bridge.selectSite( this.collection.get(itemId) );
      } else {
        logger.log("no bridge.selectSite to call with itemId: ", itemId);
      }
    },

    renderLoader: function () {
      // Create a new loader and assign it to a property so we can easily
      // remove it later. Creating a new loader every time means we don't
      // have to undo the animation leftovers from removeLoader.
      this.$loader = $('<div class="loader pin-center">Loading&hellip;</div>')
        .css({ opacity: 0 });
      
      $(this.el).append(this.$loader);
      this.$loader.animate({ opacity: 0.5, scale: 1 }, 500, 'ease-out');
      
      return this;
    },
    
    removeLoader: function () {
      var $loader = this.$loader;
      $loader.animate(
        { opacity: 0,  scale: 1.5 },
        400,
        'ease-in',
        // After animating the loader, remove it from the DOM.
        function () { $loader.remove(); }
      );

      return this;
    },
    
    render: function () { return this; }
  });
  
  return SiteListView;
});