src/editor/views/tabs/tabs.js

   1 define([
   2 'libs/jquery',
   3 'libs/text!./templates/main.html',
   4 'libs/text!./templates/handle.html',
   5 'libs/underscore',
   6 'libs/backbone'
   7 ], function($, mainTemplate, handleTemplate, _, Backbone) {
   8     'use strict';
   9
  10     var View = Backbone.View.extend({
  11         className: 'rng-view-tabs',
  12
  13         events: {
  14             'click .rng-view-tabs-tabBar a, .rng-view-tabs-tabBar i': '_onTabTitleClicked'
  15         },
  16
  17         initialize: function(options) {
  18             this.options = options || {};
  19             this.template = _.template(mainTemplate);
  20             this.handleTemplate = _.template(handleTemplate);
  21             this.contents = {};
  22             this.selectedTab = null;
  23         },
  24
  25         render: function() {
  26             this.$el.html(this.template());
  27             this.nodes = {
  28                 tabBar: this.$('.rng-view-tabs-tabBar'),
  29                 content: this.$('.rng-view-tabs-content')
  30             };
  31
  32             if(this.options.stacked) {
  33                 this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');
  34             }
  35             if(this.options.position === 'right') {
  36                 this.$el.addClass('tabs-right');
  37                 this.nodes.content.addClass('tab-content');
  38             }
  39             return this;
  40         },
  41
  42         addTab: function(title, slug, content, tutorial) {
  43             if(this.contents[slug]) {
  44                 this.contents[slug].detach();
  45             }
  46             this.contents[slug] = content;
  47
  48             var text = (typeof title === 'string') ? title : (title.text || '');
  49             var icon = title.icon || null;
  50
  51             if(!this.tabExists(slug)) {
  52                 this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug, tutorial: tutorial}));
  53             }
  54             if(!this.selectedTab) {
  55                 this.selectTab(slug);
  56             }
  57         },
  58
  59         selectTab: function(slug) {
  60             if(slug !== this.selectedTab && this.contents[slug]) {
  61                 this.trigger('leaving', this.selectedTab);
  62
  63                 if(this.selectedTab) {
  64                     var toDetach = this.contents[this.selectedTab];
  65                     if(toDetach.onHide) {
  66                         toDetach.onHide();
  67                     }
  68                     toDetach.detach();
  69                 }
  70                 this.nodes.content.append(this.contents[slug]);
  71                 if(this.contents[slug].onShow) {
  72                     this.contents[slug].onShow();
  73                 }
  74                 this.nodes.tabBar.find('.active').removeClass('active');
  75                 this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');
  76
  77                 var prevSlug = this.selectedTab;
  78                 this.selectedTab = slug;
  79                 this.trigger('tabSelected', {slug: slug, prevSlug: prevSlug});
  80             }
  81         },
  82
  83         getAsView: function() {
  84             return this.$el;
  85         },
  86
  87         getCurrentSlug: function() {
  88             return this.selectedTab;
  89         },
  90
  91         tabExists: function(slug) {
  92             return this.nodes.tabBar.find('a[href="#'+ slug + '"]').length > 0;
  93         },
  94
  95         /* Events */
  96
  97         _onTabTitleClicked: function(e) {
  98             e.preventDefault();
  99             var target = $(e.target);
 100             if(target.is('i')) {
 101                 target = target.parent();
 102             }
 103             var slug = target.attr('href').substr(1);
 104             this.selectTab(slug);
 105         }
 106     });
 107
 108
 109     return {
 110         View: View
 111     };
 112
 113
 114 });