src/editor/plugins/core/canvasElements.js

   1 define(function(require) {
   2
   3 'use strict';
   4
   5 var $ = require('libs/jquery'),
   6     genericElement = require('modules/documentCanvas/canvas/genericElement'), // TODO: This should be accessible via plugin infrastructure
   7     linkElement = require('./links/linkElement');
   8
   9 var widgets = {
  10     footnoteHandler: function(clickHandler) {
  11         var mydom = $('<span>')
  12             .addClass('canvas-widget canvas-widget-footnote-handle')
  13             .css('display', 'inline')
  14             .show();
  15
  16         mydom.click(function(e) {
  17             e.stopPropagation();
  18             clickHandler();
  19         });
  20
  21         return mydom;
  22     },
  23     commentAdnotation: function(node) {
  24         var widget = {
  25             DOM: $('<div>').addClass('canvas-widget canvas-widget-comment-adnotation'),
  26             update: function(node) {
  27                 var parts = [],
  28                     metadata = node.getMetadata(),
  29                     dt;
  30                 metadata.forEach(function(row) {
  31                     parts.push(row.getValue());
  32                 }, 'creator');
  33                 metadata.some(function(row) {
  34                     dt = row.getValue();
  35                     return true; // break
  36                 }, 'date');
  37                 if(dt) {
  38                     parts.push(dt);
  39                 }
  40                 this.DOM.text(parts.join(', '));
  41             }
  42         };
  43         widget.update(node);
  44         return widget;
  45     },
  46     hideButton: function(clickHandler) {
  47         var mydom = $('<span>x</span>')
  48             .addClass('canvas-widget canvas-widget-hide-button');
  49         mydom.click(function(e) {
  50             e.stopPropagation();
  51             clickHandler();
  52         });
  53         return mydom;
  54     }
  55 };
  56
  57
  58 var comment = Object.create(genericElement);
  59 $.extend(comment, {
  60     init: function() {
  61         genericElement.init.call(this);
  62         this.commentAdnotation = widgets.commentAdnotation(this.wlxmlNode);
  63         this.addWidget(this.commentAdnotation, 'show');
  64         this.commentAdnotation.DOM.show();
  65     },
  66
  67     onMetadataChanged: function(event) {
  68         this.commentAdnotation.update(event.meta.node);
  69     },
  70     onMetadataAdded: function(event) {
  71         return this.onMetadataChanged(event);
  72     },
  73     onMetadataRemoved: function(event) {
  74         return this.onMetadataChanged(event);
  75     }
  76 });
  77
  78 var footnote = Object.create(genericElement);
  79 $.extend(footnote, {
  80     init: function() {
  81         genericElement.init.call(this);
  82         var clickHandler = function() {
  83             this.toggle(true);
  84         }.bind(this);
  85         this.footnoteHandler = widgets.footnoteHandler(clickHandler);
  86         this.addWidget(this.footnoteHandler);
  87
  88         var closeHandler = function() {
  89             this.toggle(false);
  90         }.bind(this);
  91         this.hideButton = widgets.hideButton(closeHandler);
  92         this.addWidget(this.hideButton);
  93         this.toggle(false, {silent: true});
  94     },
  95     toggle: function(toggle, options) {
  96         options = options || {};
  97         this.hideButton.toggle(toggle);
  98         this.footnoteHandler.toggle(!toggle);
  99
 100         if(toggle) {
 101             this.displayAsBlock();
 102         } else {
 103             this.displayInline();
 104         }
 105         this._container().toggle(toggle);
 106         if(!options.silent) {
 107             this.trigger('elementToggled', toggle, this);
 108         }
 109     }
 110 });
 111
 112
 113 return [
 114     {tag: 'aside', klass: 'comment', prototype: comment},
 115     {tag: 'aside', klass: 'footnote', prototype: footnote},
 116     {tag: 'span', klass: 'link', prototype: linkElement}
 117 ];
 118
 119
 120 });