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