views/tabs/tabs.js

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