a382871e6545b02c74fa63b4dbb12c5b80e65061
[fnpeditor.git] / src / editor / modules / documentCanvas / canvas / gutter.js
1 define(function(require) {
2     
3 'use strict';
4
5 var $ = require('libs/jquery'),
6     _ = require('libs/underscore'),
7     Backbone = require('libs/backbone'),
8     gutterBoxTemplate = require('libs/text!./gutterBox.html');
9
10
11 var GutterView = function(gutter) {
12     gutter.on('show', function(group) {
13         if(this.groupView) {
14             this.groupView.remove();
15         }
16         this.groupView = new GutterGroupView(this, group);
17         this.dom.append(this.groupView.dom);
18         this.groupView.dom.css({top: group.getOffsetHint()});
19         this.groupView.show();
20     }, this);
21     this.dom = $('<div class="gutter"></div>');
22 };
23
24
25 var GutterGroupView = function(gutterView, group) {
26     this.gutterView = gutterView;
27     this.group = group;
28     this.views  = [];
29     
30     this.dom = $(gutterBoxTemplate);
31
32     this.dom.on('click', function() {
33         if(!this.dom.hasClass('focused')) {
34             var canvas = this.group.meta.canvas;
35             canvas.setCurrentElement(this.group.meta);
36         }
37     }.bind(this));
38     
39     this.group.views.forEach(function(view) {
40         this.onViewAdded(view);
41     }.bind(this));
42     
43     this.group.on('viewAdded', this.onViewAdded, this);
44     this.group.on('focusToggled', this.onFocusToggled, this);
45 };
46 $.extend(GutterGroupView.prototype, {
47     remove: function() {
48         this.group.off('viewAdded', this.onViewAdded);
49         this.group.off('offsetChange', this.onOffsetChange);
50         this.group.off('focusToggled', this.onFocusToggled);
51         this.dom.detach();
52     },
53     onViewAdded: function(view) {
54         this.views.push(view);
55         this.dom.append(view.dom);
56     },
57     show: function() {
58         this.dom.addClass('focused');
59         this.views.forEach(function(view) {
60             if(view.onActivated) {
61                 view.onActivated();
62             }
63         });
64     }
65 });
66
67
68
69 /// model
70
71 var ViewGroup = function(params, gutter, meta) {
72     this.gutter = gutter;
73     this.params = params;
74     this.meta = meta;
75     this.view = $(gutterBoxTemplate);
76     this.views = [];
77 };
78 $.extend(ViewGroup.prototype, Backbone.Events, {
79     getOffsetHint: function() {
80         return _.isFunction(this.params.offsetHint) ? this.params.offsetHint() : this.params.offsetHint;
81     },
82     setOffset: function(offset) {
83         this.trigger('offsetChange', offset);
84         this._offset = offset;
85     },
86     addView: function(view) {
87         this.views.push(view);
88         this.trigger('viewAdded', view);
89     },
90     show: function() {
91         this.gutter.show(this);
92     }
93 });
94
95
96 var Gutter = function() {
97 };
98
99 _.extend(Gutter.prototype, Backbone.Events, {
100     createViewGroup: function(params, meta) {
101         return new ViewGroup(params, this, meta);
102     },
103     show: function(group) {
104         this.trigger('show', group);
105     },
106 });
107
108
109 return {
110     create: function() {
111         return new Gutter();
112     },
113     GutterView: GutterView,
114     GutterGroupView: GutterGroupView
115 };
116
117 });