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