/static/js/views/searchviews.js
JavaScript | 159 lines | 111 code | 35 blank | 13 comment | 4 complexity | d93aa3f23a2c7d8b3e850bcc467aef9c MD5 | raw file
Possible License(s): Apache-2.0
- define([
- 'underscore',
- 'backbone',
- '$',
- 'views/widgetview',
- 'views/postlistview',
- 'views/thumbnaillistview',
- 'views/suggestionlistview',
- 'lib/template'
- ], function (
- util,
- Backbone,
- $,
- WidgetView,
- PostListView,
- ThumbnailListView,
- SuggestionListView,
- template
- ) {
- var slice = Array.prototype.slice;
- // Create a specialized post list view that uses a custom HTML template
- // to render.
- var SearchView = PostListView.prototype.view.extend({
- className: 'post',
- 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 SearchListView = PostListView.extend({
- view: SearchView
- });
- var renderLoading = function () {
- $(this.el).toggleClass(
- 'js-loading',
- this.collection.state() !== 'clean'
- );
- return this;
- };
- var __WidgetView = WidgetView.prototype;
- // A view for rendering Bing views.
- var SearchBingView = WidgetView.extend({
- 'html': '<div class="suggestions"></div><div class="image-results"></div><div class="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({
- '.suggestions': suggestionListView,
- '.results': searchListView,
- '.image-results': 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({
- initialize: function () {
- __SearchListView.initialize.apply(this, arguments);
- this.collection.bind('state', this.render, this);
- },
- render: renderLoading
- });
- var SearchTabsView = WidgetView.extend({
- html: '<div id="stack-results"></div><ul class="menu menu--modetabs pin-left"><li class="activated"><a class="ir ir--bing-ico" href="#bing-results">Bing</a></li><li><a class="ir ir--twitter-ico" href="#twitter-results">Twitter</a></li></ul><div id="bing-results"></div><div id="twitter-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 {
- SearchTabsView: SearchTabsView,
- SearchBingView: SearchBingView,
- SearchTweetsView: SearchTweetsView
- };
- });