src/editor/modules/documentCanvas/canvas/wlxmlManagers.js

   1 define([
   2 'libs/jquery',
   3 'modules/documentCanvas/canvas/widgets'
   4 ], function($, widgets) {
   5
   6 'use strict';
   7
   8
   9 var DocumentElementWrapper = function(documentElement) {
  10
  11     this.documentElement = documentElement;
  12
  13     this.addWidget = function(widget) {
  14         documentElement.dom().children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget);
  15     };
  16
  17     this.clearWidgets = function() {
  18         documentElement.dom().children('.canvas-widgets').empty();
  19     };
  20
  21     this.setDisplayStyle = function(displayStyle) {
  22         documentElement.dom().css('display', displayStyle || '');
  23         documentElement._container().css('display', displayStyle || '');
  24     };
  25
  26     this.tag = function() {
  27         return documentElement.getWlxmlTag();
  28     };
  29
  30     this.klass = function() {
  31         return documentElement.getWlxmlClass();
  32     };
  33
  34     this.toggle = function(toggle) {
  35         documentElement._container().toggle(toggle);
  36     };
  37
  38     var eventBus = documentElement.canvas ? documentElement.canvas.eventBus :
  39         {trigger: function() {}};
  40     this.trigger = function() {
  41         eventBus.trigger.apply(eventBus, arguments);
  42     };
  43
  44     this.node = documentElement.data('wlxmlNode');
  45
  46 };
  47
  48 var getDisplayStyle = function(tag, klass) {
  49     if(tag === 'metadata') {
  50         return 'none';
  51     }
  52     if(tag === 'span') {
  53         return 'inline';
  54     }
  55     if(klass && klass.substr(0, 4) === 'item') {
  56         return null;
  57     }
  58     if(klass === 'gap') {
  59         return 'inline';
  60     }
  61     return 'block';
  62 };
  63
  64 var GenericManager = function(wlxmlElement) {
  65     this.el = wlxmlElement;
  66 };
  67
  68 $.extend(GenericManager.prototype, {
  69     setup: function() {
  70         this.el.setDisplayStyle(getDisplayStyle(this.el.tag(), this.el.klass()));
  71
  72         this.el.clearWidgets();
  73         this.el.addWidget(widgets.labelWidget(this.el.tag(), this.el.klass()));
  74
  75     },
  76     toggle: function(toggle) {
  77         this.el.toggle(toggle);
  78     }
  79
  80 });
  81
  82 var managers = {
  83     _m: {},
  84     set: function(tag, klass, manager) {
  85         if(!this._m[tag]) {
  86             this._m[tag] = {};
  87         }
  88         this._m[tag][klass] = manager;
  89     },
  90     get: function(tag,klass) {
  91         if(this._m[tag] && this._m[tag][klass]) {
  92             return this._m[tag][klass];
  93         }
  94         return GenericManager;
  95     }
  96 };
  97
  98 var FootnoteManager = function(wlxmlElement) {
  99     this.el = wlxmlElement;
 100 };
 101 $.extend(FootnoteManager.prototype, {
 102     setup: function() {
 103         this.el.clearWidgets();
 104
 105         var clickHandler = function() {
 106             this.toggle(true);
 107         }.bind(this);
 108         this.footnoteHandler = widgets.footnoteHandler(clickHandler);
 109         this.el.addWidget(this.footnoteHandler);
 110
 111         var closeHandler = function() {
 112             this.toggle(false);
 113
 114         }.bind(this);
 115         this.hideButton = widgets.hideButton(closeHandler);
 116         this.el.addWidget(this.hideButton);
 117
 118         this.toggle(false, {silent: true});
 119     },
 120     toggle: function(toggle, options) {
 121         options = options || {};
 122         this.hideButton.toggle(toggle);
 123         this.footnoteHandler.toggle(!toggle);
 124
 125         this.el.setDisplayStyle(toggle ? 'block' : 'inline');
 126         this.el.toggle(toggle);
 127         if(!options.silent) {
 128             this.el.trigger('elementToggled', toggle, this.el.documentElement);
 129         }
 130     }
 131 });
 132 managers.set('aside', 'footnote', FootnoteManager);
 133
 134
 135 var ListItemManager = function(wlxmlElement) {
 136     this.el = wlxmlElement;
 137 };
 138 $.extend(ListItemManager.prototype, {
 139     setup: function() {
 140         this.el.clearWidgets();
 141         this.el.addWidget(widgets.labelWidget(this.el.tag(), this.el.klass()));
 142         this.el.documentElement._container().css({display: 'list-item'});
 143     },
 144     toggleBullet: function(toggle) {
 145         this.el.documentElement._container().css({display : toggle ? 'list-item' : 'block'});
 146     }
 147 });
 148 managers.set('div', 'item', ListItemManager);
 149
 150
 151 var CommentManager = function(wlxmlElement) {
 152     this.el = wlxmlElement;
 153 };
 154
 155 $.extend(CommentManager.prototype, {
 156     setup: function() {
 157         this.el.clearWidgets();
 158         this.el.addWidget(widgets.labelWidget(this.el.tag(), this.el.klass()));
 159
 160         this.widget = widgets.commentAdnotation(this.el.node);
 161         this.el.addWidget(this.widget);
 162         this.widget.DOM.show();
 163     },
 164     updateMetadata: function() {
 165         // var parts = [];
 166         // this.el.node.getMetadata().forEach(function(row) {
 167         //     parts.push(row.getValue());
 168         // }, 'creator');
 169         // this.widget.text(parts.join(', '));
 170         this.widget.update(this.el.node);
 171     }
 172 });
 173 managers.set('aside', 'comment', CommentManager);
 174
 175 return {
 176     getFor: function(documentElement) {
 177         var wlxmlElement = new DocumentElementWrapper(documentElement);
 178         return new (managers.get(wlxmlElement.tag(), wlxmlElement.klass()))(wlxmlElement);
 179
 180     }
 181 };
 182
 183 });