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, tutorial) {
  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     var tutorialHolder = $('<div/>').attr('data-toggle', 'tutorial').attr('data-tutorial', tutorial.index)
  23         .attr('data-placement', 'left').attr('data-content', tutorial.text).css('height', '200px');
  24     this.dom.append($('<div>/').css('height', '0').append(tutorialHolder));
  25 };
  26
  27
  28 var GutterGroupView = function(gutterView, group) {
  29     this.gutterView = gutterView;
  30     this.group = group;
  31     this.views  = [];
  32
  33     this.dom = $(gutterBoxTemplate);
  34
  35     this.dom.on('click', function() {
  36         if(!this.dom.hasClass('focused')) {
  37             var canvas = this.group.meta.canvas;
  38             canvas.setCurrentElement(this.group.meta);
  39         }
  40     }.bind(this));
  41
  42     this.group.views.forEach(function(view) {
  43         this.onViewAdded(view);
  44     }.bind(this));
  45
  46     this.group.on('viewAdded', this.onViewAdded, this);
  47     this.group.on('focusToggled', this.onFocusToggled, this);
  48     this.group.on('removed', this.remove, this);
  49 };
  50 $.extend(GutterGroupView.prototype, {
  51     remove: function() {
  52         this.group.off('viewAdded', this.onViewAdded);
  53         this.group.off('focusToggled', this.onFocusToggled);
  54         this.group.off('removed', this.removed);
  55         this.dom.detach();
  56     },
  57     onViewAdded: function(view) {
  58         this.views.push(view);
  59         this.dom.append(view.dom);
  60     },
  61     show: function() {
  62         this.dom.addClass('focused');
  63         this.views.forEach(function(view) {
  64             if(view.onActivated) {
  65                 view.onActivated();
  66             }
  67         });
  68     }
  69 });
  70
  71
  72
  73 /// model
  74
  75 var ViewGroup = function(params, gutter, meta) {
  76     this.gutter = gutter;
  77     this.params = params;
  78     this.meta = meta;
  79     this.view = $(gutterBoxTemplate);
  80     this.views = [];
  81 };
  82 $.extend(ViewGroup.prototype, Backbone.Events, {
  83     getOffsetHint: function() {
  84         return _.isFunction(this.params.offsetHint) ? this.params.offsetHint() : this.params.offsetHint;
  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     remove: function() {
  94         this.trigger('removed');
  95     }
  96 });
  97
  98
  99 var Gutter = function() {
 100 };
 101
 102 _.extend(Gutter.prototype, Backbone.Events, {
 103     createViewGroup: function(params, meta) {
 104         return new ViewGroup(params, this, meta);
 105     },
 106     show: function(group) {
 107         this.trigger('show', group);
 108     },
 109 });
 110
 111
 112 return {
 113     create: function() {
 114         return new Gutter();
 115     },
 116     GutterView: GutterView,
 117     GutterGroupView: GutterGroupView
 118 };
 119
 120 });