tutorial button

[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / gutter.js

diff --git a/src/editor/modules/documentCanvas/canvas/gutter.js b/src/editor/modules/documentCanvas/canvas/gutter.js
index b6bd665..73a46e0 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/gutter.js
+++ b/src/editor/modules/documentCanvas/canvas/gutter.js
@@ -8,7 +8,7 @@ var $ = require('libs/jquery'),
     gutterBoxTemplate = require('libs/text!./gutterBox.html');
 
 
-var GutterView = function(gutter) {
+var GutterView = function(gutter, tutorial) {
     gutter.on('show', function(group) {
         if(this.groupView) {
             this.groupView.remove();
@@ -19,6 +19,9 @@ var GutterView = function(gutter) {
         this.groupView.show();
     }, this);
     this.dom = $('<div class="gutter"></div>');
+    var tutorialHolder = $('<div/>').attr('data-toggle', 'tutorial').attr('data-tutorial', tutorial.index)
+        .attr('data-placement', 'bottom').attr('data-content', tutorial.text);
+    this.dom.append(tutorialHolder);
 };
 
 
@@ -42,11 +45,13 @@ var GutterGroupView = function(gutterView, group) {
     
     this.group.on('viewAdded', this.onViewAdded, this);
     this.group.on('focusToggled', this.onFocusToggled, this);
+    this.group.on('removed', this.remove, this);
 };
 $.extend(GutterGroupView.prototype, {
     remove: function() {
         this.group.off('viewAdded', this.onViewAdded);
         this.group.off('focusToggled', this.onFocusToggled);
+        this.group.off('removed', this.removed);
         this.dom.detach();
     },
     onViewAdded: function(view) {
@@ -84,6 +89,9 @@ $.extend(ViewGroup.prototype, Backbone.Events, {
     },
     show: function() {
         this.gutter.show(this);
+    },
+    remove: function() {
+        this.trigger('removed');
     }
 });