-define([\r
-'libs/text!./templates/main.html',\r
-'libs/text!./templates/handle.html',\r
-'libs/underscore-min',\r
-'libs/backbone-min',\r
-], function(mainTemplate, handleTemplate, _, Backbone) {\r
- 'use strict';\r
- \r
- var View = Backbone.View.extend({\r
- className: 'rng-view-tabs',\r
- \r
- events: {\r
- 'click ul a, i': '_onTabTitleClicked'\r
- },\r
- \r
- initialize: function(options) {\r
- this.options = options || {};\r
- this.template = _.template(mainTemplate),\r
- this.handleTemplate = _.template(handleTemplate);\r
- this.contents = {};\r
- this.selectedTab = null;\r
- },\r
- \r
- render: function() {\r
- this.$el.html(this.template());\r
- this.nodes = {\r
- tabBar: this.$('.rng-view-tabs-tabBar'),\r
- content: this.$('.rng-view-tabs-content')\r
- }\r
- \r
- if(this.options.stacked) {\r
- this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');\r
- }\r
- return this;\r
- },\r
- \r
- addTab: function(title, slug, content) {\r
- if(this.contents[slug])\r
- return false;\r
- this.contents[slug] = content;\r
- \r
- var text = (typeof title === 'string') ? title : (title.text || '');\r
- var icon = title.icon || null;\r
- \r
- this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));\r
- if(!this.selectedTab)\r
- this.selectTab(slug);\r
- },\r
- \r
- selectTab: function(slug) {\r
- if(slug !== this.selectedTab && this.contents[slug]) {\r
- this.trigger('leaving', this.selectedTab);\r
- \r
- if(this.selectedTab)\r
- this.contents[this.selectedTab].detach();\r
- this.nodes.content.append(this.contents[slug]);\r
- this.nodes.tabBar.find('.active').removeClass('active');\r
- this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');\r
- \r
- this.selectedTab = slug;\r
- this.trigger('tabSelected', slug);\r
- }\r
- },\r
- \r
- getAsView: function() {\r
- return this.$el;\r
- },\r
- \r
- /* Events */\r
- \r
- _onTabTitleClicked: function(e) {\r
- e.preventDefault();\r
- var target = $(e.target);\r
- if(target.is('i'))\r
- target = target.parent();\r
- var slug = target.attr('href').substr(1);\r
- this.selectTab(slug);\r
- }\r
- });\r
-\r
- \r
- return {\r
- View: View\r
- }\r
- \r
-\r
+define([
+'libs/text!./templates/main.html',
+'libs/text!./templates/handle.html',
+'libs/underscore-min',
+'libs/backbone-min',
+], function(mainTemplate, handleTemplate, _, Backbone) {
+ 'use strict';
+
+ var View = Backbone.View.extend({
+ className: 'rng-view-tabs',
+
+ events: {
+ 'click ul a, i': '_onTabTitleClicked'
+ },
+
+ initialize: function(options) {
+ this.options = options || {};
+ this.template = _.template(mainTemplate);
+ this.handleTemplate = _.template(handleTemplate);
+ this.contents = {};
+ this.selectedTab = null;
+ },
+
+ render: function() {
+ this.$el.html(this.template());
+ this.nodes = {
+ tabBar: this.$('.rng-view-tabs-tabBar'),
+ content: this.$('.rng-view-tabs-content')
+ };
+
+ if(this.options.stacked) {
+ this.nodes.tabBar.addClass('nav-stacked nav-pills').removeClass('nav-tabs');
+ }
+ if(this.options.position === 'right') {
+ this.$el.addClass('tabs-right');
+ this.nodes.content.addClass('tab-content');
+ }
+ return this;
+ },
+
+ addTab: function(title, slug, content) {
+ if(this.contents[slug]) {
+ this.contents[slug].detach();
+ }
+ this.contents[slug] = content;
+
+ var text = (typeof title === 'string') ? title : (title.text || '');
+ var icon = title.icon || null;
+
+ if(!this.tabExists(slug))
+ this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));
+ if(!this.selectedTab)
+ this.selectTab(slug);
+ },
+
+ selectTab: function(slug) {
+ if(slug !== this.selectedTab && this.contents[slug]) {
+ this.trigger('leaving', this.selectedTab);
+
+ if(this.selectedTab) {
+ var toDetach = this.contents[this.selectedTab];
+ if(toDetach.onHide)
+ toDetach.onHide();
+ toDetach.detach();
+ }
+ this.nodes.content.append(this.contents[slug]);
+ if(this.contents[slug].onShow) {
+ this.contents[slug].onShow();
+ }
+ this.nodes.tabBar.find('.active').removeClass('active');
+ this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');
+
+ var prevSlug = this.selectedTab;
+ this.selectedTab = slug;
+ this.trigger('tabSelected', {slug: slug, prevSlug: prevSlug});
+ }
+ },
+
+ getAsView: function() {
+ return this.$el;
+ },
+
+ getCurrentSlug: function() {
+ return this.selectedTab;
+ },
+
+ tabExists: function(slug) {
+ return this.nodes.tabBar.find('a[href="#'+ slug + '"]').length > 0;
+ },
+
+ /* Events */
+
+ _onTabTitleClicked: function(e) {
+ e.preventDefault();
+ var target = $(e.target);
+ if(target.is('i'))
+ target = target.parent();
+ var slug = target.attr('href').substr(1);
+ this.selectTab(slug);
+ }
+ });
+
+
+ return {
+ View: View
+ };
+
+
});
\ No newline at end of file
fnp / fnpeditor.git / blobdiff