tabbed-view-manager.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * Reusable component that encapsulates managing a collection of sub-views as
  3. * tabs, with the active tab being selected via the URL query param `tab`.
  4. **/
  5. define(
  6. function( require ) {
  7. "use strict";
  8. var Marionette = require( "marionette" ),
  9. Backbone = require( "backbone" ),
  10. _ = require( "underscore" ),
  11. fui = require( "app/fui" ),
  12. sprintf = require( "sprintf" ),
  13. PageUtils = require( "app/util/page-utils" );
  14. var TabbedViewManagerView = Backbone.View.extend( {
  15. initialize: function(){
  16. this._tab = PageUtils.queryParam( "tab" );
  17. this._firstRender = false;
  18. },
  19. render: function() {
  20. if (!this._firstRender) {
  21. this._firstRender = true;
  22. this.activateCurrentTab();
  23. $(".nav-tabs").on( "shown.bs.tab", function( e ) {
  24. fui.vent.trigger( "shown.bs.tab", $(e.target) );
  25. } );
  26. }
  27. },
  28. /**
  29. * Make the tab named as the current tab active. If no named tab, make
  30. * the first tab active by default.
  31. */
  32. activateCurrentTab: function() {
  33. var tabs = $(".nav-tabs");
  34. var tab = tabs.children().first();
  35. if (this._tab) {
  36. tab = tabs.find( sprintf( "a[href=#%s]", this._tab ) )
  37. .parent();
  38. }
  39. if (!tab.is(".active")) {
  40. tabs.children( "li" ).removeClass( "active" );
  41. tabs.parent().children(".tab-pane").removeClass("active");
  42. tab.addClass( "active" );
  43. $( tab.children( "a" ).attr( "href" ) ).addClass("active");
  44. }
  45. }
  46. });
  47. return TabbedViewManagerView;
  48. }
  49. );