X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/93ea4b37138c4f617a9f8caa75485821d5df4041..b20691e774cac0cbf2ee174472a1b1dbc94fa61b:/views/tabs/tabs.js?ds=sidebyside diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js index 048230f..bc14083 100644 --- a/views/tabs/tabs.js +++ b/views/tabs/tabs.js @@ -10,10 +10,11 @@ define([ className: 'rng-view-tabs', events: { - 'click ul a': '_onTabTitleClicked' + 'click ul a, i': '_onTabTitleClicked' }, - initialize: function() { + initialize: function(options) { + this.options = options || {}; this.template = _.template(mainTemplate), this.handleTemplate = _.template(handleTemplate); this.contents = {}; @@ -26,13 +27,28 @@ define([ 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]) - return false; + if(this.contents[slug]) { + this.contents[slug].detach(); + } this.contents[slug] = content; - this.nodes.tabBar.append(this.handleTemplate({title:title, slug: slug})); + + 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); }, @@ -41,22 +57,45 @@ define([ if(slug !== this.selectedTab && this.contents[slug]) { this.trigger('leaving', this.selectedTab); - if(this.selectedTab) - this.contents[this.selectedTab].detach(); + 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); + 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 slug = $(e.target).attr('href').substr(1); + var target = $(e.target); + if(target.is('i')) + target = target.parent(); + var slug = target.attr('href').substr(1); this.selectTab(slug); } });