/pancake-web/pancake/web/static/js/views/searchviews.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/. */

define([
  'underscore',
  'backbone',
  '$',
  'views/widgetview',
  'views/postlistview',
  'views/thumbnaillistview',
  'views/suggestionlistview',
  'views/urllistview',
  'lib/template'
], function (
  util,
  Backbone,
  $,
  WidgetView,
  PostListView,
  ThumbnailListView,
  SuggestionListView,
  UrlListView,
  template
) {
  var slice = Array.prototype.slice;
  var __PostListView = PostListView.prototype;

  // Create a specialized post list view that uses a custom HTML template
  // to render.
  var SearchView = __PostListView.view.extend({
    className: 'post post--result',
    template: template('<h1 class="title"><a class="link" href="{place_url}">{{place_title}}</a></h1><div class="content">{{summary}}</div><div class="meta"><a class="link" href="{place_url}">{place_url}</a></div>')
  });

  var SearchStatusView = __PostListView.statusView.extend({
    className: 'post',
    template: template('<a class="link" href="{place_url}"><div class="content content--p2">{{summary}}</div><address class="byline"><div class="media media--avatar"><img src="{avatar}"></div><span class="name"><span class="fn">{{author}}</span> {extra}</span></address></a>')
  });

  var SearchListView = PostListView.extend({
    declaredClass: 'SearchListView',
    view: SearchView,
    statusView: SearchStatusView
  });

  var renderLoading = function () {
    $(this.el)
      .toggleClass('js-loading', this.collection.state() !== 'clean')
      .toggleClass('js-invisible', !this.collection.length)
    ;

    return this;
  };

  var __WidgetView = WidgetView.prototype;

  // A view for rendering Bing views.
  var SearchBingView = WidgetView.extend({
    className: 'bing--widget cf',

    'html': '<div class="bing--images"></div><div class="bing--suggestions"></div><div class="bing--results"></div>',

    initialize: function () {
      __WidgetView.initialize.apply(this, arguments);

      var collection = this.collection;

      var searchListView = new SearchListView({
        collection: collection
      });

      var thumbnailListView = new ThumbnailListView({
        collection: collection.images()
      });

      var suggestionListView = new SuggestionListView({
        collection: collection.suggestions()
      });

      collection.bind('state', this.render, this);

      this.widgets({
        '.bing--suggestions': suggestionListView,
        '.bing--results': searchListView,
        '.bing--images': thumbnailListView
      });
    },

    render: renderLoading
  });

  // Tweet View is a vanilla search view for now. May change this in future.
  var __SearchListView = SearchListView.prototype;
  var SearchTweetsView = SearchListView.extend({
    declaredClass: 'SearchTweetsView',
    initialize: function () {
      __SearchListView.initialize.apply(this, arguments);

      this.collection.bind('state', this.render, this);
    },

    render: renderLoading
  });

  var SearchTabsView = WidgetView.extend({
    html: '<div id="url-results"></div><div id="stack-results"></div><ul class="menu menu--modetabs pin-left"><li class="activated"><a href="#bing-results"><span class="ir ir--bing-ico">Bing</span></a></li><li><a href="#twitter-results"><span class="ir ir--twitter-ico">Twitter</span></a></li></ul><div id="bing-results"></div><div id="twitter-results"></div><div id="empty-results"></div>',

    events: {
      'click .menu--modetabs a': 'onTabClick'
    },

    initialize: function (options) {
      __WidgetView.initialize.apply(this, arguments);

      this.panels = [
        '#bing-results',
        '#twitter-results'
      ];
    },

    onTabClick: function (e) {
      e.preventDefault();

      var $tab = $(e.currentTarget);
      this.activateTab($tab.attr('href'));

      this.trigger('activate', this, e);

      $(e.currentTarget)
        .parent()
          .addClass('activated')
        .siblings()
          .removeClass('activated');
    },

    activateTab: function (widget) {
      // If the widget is already active, noop.
      if (widget === this.active) return this;

      var i = util.indexOf(this.panels, widget);

      // If the widget ID given does not exist, let 'em know it.
      if (i === -1) throw new Error('No widget found for this ID');

      // If the referenced key is found in our panels array, move it
      // to the top of the array.
      this.panels = this.panels.splice(i, 1).concat(this.panels);

      // Expose active id.
      this.active = widget;

      // Toggle the views using our re-jiggered array.
      this.toggleViews.apply(this, this.panels);

      return this;      
    },

    // Takes a list of widget keys. The first key will be shown.
    // Any keys listed after the first will be hidden.
    toggleViews: function (show) {
      // Get all arguments after the first, these are the views we should hide.
      var hides = slice.call(arguments, 1);

      $(this.widget(show).el).show();

      for (var i = 0; i < hides.length; i++) $(this.widget(hides[i]).el).hide();

      return this;
    }
  });

  return {
    SearchUrlListView: UrlListView,
    SearchTabsView: SearchTabsView,
    SearchBingView: SearchBingView,
    SearchTweetsView: SearchTweetsView
  };
});