Visual editor: tabs view supports icons in tab titles

diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js
index 048230f..dcd3e96 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
         className: 'rng-view-tabs',\r
         \r
         events: {\r

-            'click ul a': '_onTabTitleClicked' \r
+            'click ul a, i': '_onTabTitleClicked'\r

         },\r
         \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
             this.template = _.template(mainTemplate),\r
             this.handleTemplate = _.template(handleTemplate);\r
             this.contents = {};\r


@@ -26,13 +27,21 @@ define([
                 tabBar: this.$('.rng-view-tabs-tabBar'),\r
                 content: this.$('.rng-view-tabs-content')\r
             }\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');\r
+            }\r

         },\r
         \r
         addTab: function(title, slug, content) {\r
             if(this.contents[slug])\r
                 return false;\r
             this.contents[slug] = content;\r
         },\r
         \r
         addTab: function(title, slug, content) {\r
             if(this.contents[slug])\r
                 return false;\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
+            this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));\r

             if(!this.selectedTab)\r
                 this.selectTab(slug);\r
         },\r
             if(!this.selectedTab)\r
                 this.selectTab(slug);\r
         },\r


@@ -56,7 +65,10 @@ define([
         \r
         _onTabTitleClicked: function(e) {\r
             e.preventDefault();\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
             this.selectTab(slug);\r
         }\r
     });\r

diff --git a/views/tabs/templates/handle.html b/views/tabs/templates/handle.html
index e5c4728..b828ce4 100644 (file)
--- a/views/tabs/templates/handle.html
+++ b/views/tabs/templates/handle.html
@@ -1 +1 @@
-<li><a href="#<%= slug %>"><%= title %></a></li>
\ No newline at end of file
+<li><a href="#<%= slug %>"><% if(icon) { %><i class="icon-<%= icon %>"></i><% } %><%= text %></a></li>
\ No newline at end of file