/pancake-web/pancake/web/static/js/views/stackheadinglistview.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// Displays a list of stacks as headlines
define([
  '$',
  'underscore',
  'backbone',
  'lib/template',
  
  'views/listview',
  'views/singleview',

  'models/stackcollection',
  
  'logger'
], function (
  $,
  util,
  Backbone,
  template,
  
  ListView,
  SingleView,

  StackCollection,

  logger
) {
  var StackModel = StackCollection.prototype.model;

  var PlaceSubheadingView = SingleView.extend({
    tagName: 'li',
    className: 'subheadingitem',
    template: template('<div class="media media--icon"><img src="{{ favicon_url }}"></div><span class="title"><a href="{{ place_url }}">{{ place_title }}</a></span>'),

    events: {
      'click .title a': 'onClick'
    },

    initialize: function (options) {
      var modelJSON = this.model.toJSON();
      // Add a new property to the JSON -- favicon_url.
      // Allow the browser to tell us what the protocol and hostname are by
      // creating an `<a>` element and assigning the `place_url` to it.
      var a = document.createElement("a");
      a.href = modelJSON.place_url;
      modelJSON.favicon_url = a.protocol + "//" + a.hostname + "/favicon.ico";

      $(this.el).html(this.template(modelJSON));
    },

    onClick: function (e) {
      this.trigger('visit', this, this.model, e);
    }
  });

  // Define a single view template for stack headings.
  var __ListView = ListView.prototype;

  var StackHeadingView = ListView.extend({
    view: PlaceSubheadingView,
    className: 'headingitem',
    tagName: 'li',
    template: template('<span class="title heading-title">{{ stack_title }}</span><ul class="subheadinglist"></ul>'),

    attachPoints: {
      'stack_title': '.title',
      'list': '.subheadinglist'
    },

    events: {
      'click .heading-title': 'onHeadingClick'
    },

    initialize: function (options) {
      var model = this.model;

      if (!(model instanceof StackModel)) throw new Error(
        'StackHeadingView requires a StackModel.'
      );

      this.collection = model.matches();

      __ListView.initialize.call(this, options);
    },
    onHeadingClick: function(e){
      // delegate the click to the first model in the collection
      var firstModel = this.collection.at(0);
      if(firstModel){
        this.trigger('visit', this, firstModel, e);
      }
    }
  });
  
  var loadingMarkup = '<div class="placeholder hidden">'+
    '<span class="loading-spinner white-spinner"></span>'+
    '<span class="loading-label">Loading...</span>'+
  '</div>';

  var StackHeadingListView = ListView.extend({
    declaredClass: 'StackHeadingListView',
    className: 'headinglist',
    tagName: 'div',
    view: StackHeadingView,
    attachPoints: {
      'list': '.views',
      'placeholder': '.placeholder'
    },
    template: template('<ul class="views"></ul>' + loadingMarkup)
  });
  
  return StackHeadingListView;
});