bc14083812d78d4d4044d107253b83ba886b98e8
[fnpeditor.git] / 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 });