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     this.group.on('removed', this.remove, this);
  46 };
  47 $.extend(GutterGroupView.prototype, {
  48     remove: function() {
  49         this.group.off('viewAdded', this.onViewAdded);
  50         this.group.off('focusToggled', this.onFocusToggled);
  51         this.group.off('removed', this.removed);
  52         this.dom.detach();
  53     },
  54     onViewAdded: function(view) {
  55         this.views.push(view);
  56         this.dom.append(view.dom);
  57     },
  58     show: function() {
  59         this.dom.addClass('focused');
  60         this.views.forEach(function(view) {
  61             if(view.onActivated) {
  62                 view.onActivated();
  63             }
  64         });
  65     }
  66 });
  67
  68
  69
  70 /// model
  71
  72 var ViewGroup = function(params, gutter, meta) {
  73     this.gutter = gutter;
  74     this.params = params;
  75     this.meta = meta;
  76     this.view = $(gutterBoxTemplate);
  77     this.views = [];
  78 };
  79 $.extend(ViewGroup.prototype, Backbone.Events, {
  80     getOffsetHint: function() {
  81         return _.isFunction(this.params.offsetHint) ? this.params.offsetHint() : this.params.offsetHint;
  82     },
  83     addView: function(view) {
  84         this.views.push(view);
  85         this.trigger('viewAdded', view);
  86     },
  87     show: function() {
  88         this.gutter.show(this);
  89     },
  90     remove: function() {
  91         this.trigger('removed');
  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 });