active-math.js

/*
 * active-math
 * ----------
 * A view that lets you view and edit LaTeX blocks
 *
 */

var ActiveMathView = Marionette.Layout.extend({
  template: gistbookTemplates.activeMath,

  className: 'gistblock gistblock-math gistblock-active',

  initialize: function() {
    _.bindAll(this, 'onEdit', 'onMove', 'onDelete');
  },

  regions: {
    wrapper: '.gistblock-wrapper'
  },

  onEdit: function() {
    console.log('The parent has been told to edit');
    // Remove handlers; the child is about to be destroyed
    this.showEdit();
  },

  showEdit: function() {
    this.stopListening();
    this.getRegion('wrapper').show(
      new MenuWrapper({
        InertView: InertMathView,
        model: this.model
      })
    );
    this.currentView = this.getRegion('wrapper').currentView;
    this._configurePreviewListeners();
  },

  showPreview: function() {
    this.stopListening();
    var region = this.getRegion('wrapper');
    region.show(
      new EditWrapper({
        model: this.model
      })
    );
    this.currentView = region.currentView;
    this._configureEditListeners();
  },

  onMove: function() {
    console.log('The parent has been told to move');
  },

  onDelete: function() {
    this.model.collection.remove(this.model);
  },

  onCode: function() {
    console.log('The parent has been told to show the code');
  },

  onPreview: function() {
    console.log('The parent has been told to show the preview');
  },

  onCancel: function() {
    console.log('The parent has been told to cancel');
    this.showPreview();
  },

  onUpdate: function() {
    console.log('The parent has been told to update');
  },

  // Show the edit view with the InertView as the
  // display
  onRender: function() {
    this.showPreview();
  },

  _configureEditListeners: function() {
    this.listenTo(this.currentView, 'code', this.onCode);
    this.listenTo(this.currentView, 'preview', this.onPreview);
    this.listenTo(this.currentView, 'cancel', this.onCancel);
    this.listenTo(this.currentView, 'update', this.onUpdate);
  },

  _configurePreviewListeners: function() {
    this.listenTo(this.currentView, 'edit', this.onEdit);
    this.listenTo(this.currentView, 'delete', this.onDelete);
    this.listenTo(this.currentView, 'move', this.onMove);
  }
});

menu-wrapper.js

/*
 * menu-wrapper
 * ------------
 * A wrapper for an Inert View;
 * It provides controls for editing
 *
 *
 */

var MenuWrapper = Marionette.Layout.extend({
  template: gistbookTemplates.menuWrapper,

  className: 'gistblock-menu',

  // Default values for options
  defaults: {
    InertView: undefined,
    editOptions: {
      edit: true,
      delete: true,
      move: true
    }
  },

  // Where to put the InertView, and the 3 menu options
  ui: {
    content: '.gistblock-content',
    edit: '.gistblock-edit',
    move: '.gistblock-move',
    delete: '.gistblock-delete'
  },

  // Respond to clicks; the parent view is listening
  triggers: {
    'click @ui.edit': 'edit',
    'click @ui.move': 'move',
    'click @ui.delete': 'delete'
  },

  // Store our options on the object itself
  initialize: function(options) {
    var validOptions = _.keys(this.defaults)
    _.extend(this, this.defaults, _.pick(options, validOptions));
  },

  // Where to render the inert view
  regions: {
    content: '.gistblock-content'
  },

  // Show the inert view after rendering
  onRender: function() {
    this._showMenu();
    var region = this.getRegion('content');
    region.show(new this.InertView({
      model: this.model
    }));
  },

  // Show or hide each menu item based on options
  _showMenu: function() {
    _.each(this.editOptions, function(val, key) {
      this.ui[key].toggleClass('active-option', val);
    }, this);
  }
});