Visual editor wip: tabsManager modules uses tabs view

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

diff --git a/views/tabs/tabs.js b/views/tabs/tabs.js
new file mode 100644 (file)
index 0000000..048230f
--- /dev/null
+++ b/views/tabs/tabs.js
@@ -0,0 +1,70 @@
+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': '_onTabTitleClicked' \r
+        },\r
+        \r
+        initialize: function() {\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
+        \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
+            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
+        /* Events */\r
+        \r
+        _onTabTitleClicked: function(e) {\r
+            e.preventDefault();\r
+            var slug = $(e.target).attr('href').substr(1);\r
+            this.selectTab(slug);\r
+        }\r
+    });\r
+\r
+    \r
+    return {\r
+        View: View\r
+    }\r
+    \r
+\r
+});
\ No newline at end of file