Building js & css for editor with r.js/lessc via grunt tasks

[fnpeditor.git] / views / tabs / tabs.js

diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js
index 048230f..bc14083 100644 (file)
--- a/views/tabs/tabs.js
+++ b/views/tabs/tabs.js
@@ -10,10 +10,11 @@ define([
         className: 'rng-view-tabs',\r
         \r
         events: {\r
-            'click ul a': '_onTabTitleClicked' \r
+            'click ul a, i': '_onTabTitleClicked'\r
         },\r
         \r
-        initialize: function() {\r
+        initialize: function(options) {\r
+            this.options = options || {};\r
             this.template = _.template(mainTemplate),\r
             this.handleTemplate = _.template(handleTemplate);\r
             this.contents = {};\r
@@ -26,13 +27,28 @@ define([
                 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
+            if(this.options.position === 'right') {\r
+                this.$el.addClass('tabs-right');\r
+                this.nodes.content.addClass('tab-content');\r
+            }\r
+            return this;\r
         },\r
         \r
         addTab: function(title, slug, content) {\r
-            if(this.contents[slug])\r
-                return false;\r
+            if(this.contents[slug]) {\r
+                this.contents[slug].detach();\r
+            }\r
             this.contents[slug] = content;\r
-            this.nodes.tabBar.append(this.handleTemplate({title:title, slug: slug}));\r
+            \r
+            var text = (typeof title === 'string') ? title : (title.text || '');\r
+            var icon = title.icon || null;\r
+            \r
+            if(!this.tabExists(slug))\r
+                this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));\r
             if(!this.selectedTab)\r
                 this.selectTab(slug);\r
         },\r
@@ -41,22 +57,45 @@ define([
             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
+                if(this.selectedTab) {\r
+                    var toDetach = this.contents[this.selectedTab];\r
+                    if(toDetach.onHide)\r
+                        toDetach.onHide();\r
+                    toDetach.detach();\r
+                }\r
                 this.nodes.content.append(this.contents[slug]);\r
+                if(this.contents[slug].onShow) {\r
+                    this.contents[slug].onShow();\r
+                }\r
                 this.nodes.tabBar.find('.active').removeClass('active');\r
                 this.nodes.tabBar.find('a[href="#'+slug+'"]').parent().addClass('active');\r
                 \r
+                var prevSlug = this.selectedTab;\r
                 this.selectedTab = slug;\r
-                this.trigger('tabSelected', slug);\r
+                this.trigger('tabSelected', {slug: slug, prevSlug: prevSlug});\r
             }\r
         },\r
         \r
+        getAsView: function() {\r
+            return this.$el;\r
+        },\r
+        \r
+        getCurrentSlug: function() {\r
+            return this.selectedTab;\r
+        },\r
+        \r
+        tabExists: function(slug) {\r
+            return this.nodes.tabBar.find('a[href="#'+ slug + '"]').length > 0;\r
+        },\r
+        \r
         /* Events */\r
         \r
         _onTabTitleClicked: function(e) {\r
             e.preventDefault();\r
-            var slug = $(e.target).attr('href').substr(1);\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