048230f904bf263e361225f3d2d61414c70b1abf
[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': '_onTabTitleClicked' \r
14         },\r
15         \r
16         initialize: function() {\r
17             this.template = _.template(mainTemplate),\r
18             this.handleTemplate = _.template(handleTemplate);\r
19             this.contents = {};\r
20             this.selectedTab = null;\r
21         },\r
22         \r
23         render: function() {\r
24             this.$el.html(this.template());\r
25             this.nodes = {\r
26                 tabBar: this.$('.rng-view-tabs-tabBar'),\r
27                 content: this.$('.rng-view-tabs-content')\r
28             }\r
29         },\r
30         \r
31         addTab: function(title, slug, content) {\r
32             if(this.contents[slug])\r
33                 return false;\r
34             this.contents[slug] = content;\r
35             this.nodes.tabBar.append(this.handleTemplate({title:title, slug: slug}));\r
36             if(!this.selectedTab)\r
37                 this.selectTab(slug);\r
38         },\r
39         \r
40         selectTab: function(slug) {\r
41             if(slug !== this.selectedTab && this.contents[slug]) {\r
42                 this.trigger('leaving', this.selectedTab);\r
43                 \r
44                 if(this.selectedTab)\r
45                     this.contents[this.selectedTab].detach();\r
46                 this.nodes.content.append(this.contents[slug]);\r
47                 this.nodes.tabBar.find('.active').removeClass('active');\r
48                 this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');\r
49                 \r
50                 this.selectedTab = slug;\r
51                 this.trigger('tabSelected', slug);\r
52             }\r
53         },\r
54         \r
55         /* Events */\r
56         \r
57         _onTabTitleClicked: function(e) {\r
58             e.preventDefault();\r
59             var slug = $(e.target).attr('href').substr(1);\r
60             this.selectTab(slug);\r
61         }\r
62     });\r
63 \r
64     \r
65     return {\r
66         View: View\r
67     }\r
68     \r
69 \r
70 });