WIP: integrating writer.

server.js

@@ -16,9 +16,10 @@ app.get('/test/tmp/test.js', function (req, res, next) {
           return path.join(__dirname, file);
         }))
         .bundle()
-        .on('error', function(err, data){
+        .on('error', function(err){
           console.error(err.message);
-          res.send('console.log("'+err.message+'");');
+          res.status(500).send('console.log("'+err.message+'");');
+          next();
         })
         .pipe(res);
     }

ui/component.js

@@ -105,25 +105,37 @@ Component.Prototype = function ComponentPrototype() {
     return this.parent;
   };
 
+  this.getClassNames = function() {
+    return this.classNames;
+  };
+
+  this.getAttributes = function() {
+    return this.attributes;
+  };
+
   this.createElement = function() {
     this.$el = $('<' + this.tagName + '>');
     if (this.htmlProps.id) {
       this.$el.attr('id', this.htmlProps.id);
     }
-    var classNames = this.classNames;
+    var classNames = this.getClassNames();
     if (classNames) {
       this.$el.addClass(classNames);
     }
     if (this.htmlProps.classNames) {
       this.$el.addClass(this.htmlProps.classNames);
     }
-    var attributes = this.attributes;
+    var attributes = this.getAttributes();
     if (attributes) {
       this.$el.attr(attributes);
     }
     if (this.htmlProps.attributes) {
       this.$el.attr(this.htmlProps.attributes);
     }
+    var style = this.style;
+    if (style) {
+      this.$el.css(style);
+    }
     if (this.htmlProps.style) {
       this.$el.css(this.htmlProps.style);
     }
@@ -240,7 +252,9 @@ Component.Prototype = function ComponentPrototype() {
 
   this.setState = function(newState) {
     var needRerender = this.shouldRerender(this.getProps(), newState);
+    this.willUpdateState(newState);
     this._setState(newState);
+    this.didUpdateState();
     if (needRerender) {
       this.rerender();
     }
@@ -250,6 +264,12 @@ Component.Prototype = function ComponentPrototype() {
     return this.state;
   };
 
+  this.willUpdateState = function(newState) {
+    /* jshint unused: false */
+  };
+
+  this.didUpdateState = function() {};
+
   this.setProps = function(newProps) {
     var flags = this._setProps(newProps);
     if (flags.updateHtmlProps) {
@@ -549,6 +569,10 @@ Component.Prototype = function ComponentPrototype() {
           break;
         case 'contentEditable':
         case 'href':
+        case 'src':
+        case 'spellCheck':
+        case 'rowspan':
+        case 'colspan':
           attributes[key] = val;
           html.attributes = attributes;
           result.html = html;

ui/font_awesome_icon.js

@@ -1,16 +1,22 @@
 'use strict';
 
+var OO = require('../basics/oo');
 var Component = require('./component');
-var $$ = Component.$$;
 
-class FontAwesomeIcon extends Component.Container {
-  get tagName() {
-    return 'i';
-  }
-
-  get classNames() {
-    return 'fa ' + this.props.icon
-  }
+function FontAwesomeIcon() {
+  Component.Container.apply(this, arguments);
 }
 
+FontAwesomeIcon.Prototype = function() {
+
+  this.tagName = 'i';
+
+  this.getClassNames = function() {
+    return 'fa ' + this.props.icon;
+  };
+
+};
+
+OO.inherit(FontAwesomeIcon, Component.Container);
+
 module.exports = FontAwesomeIcon;

ui/annotation_component.js → ui/nodes/annotation_component.js

@@ -1,57 +1,61 @@
 "use strict";
 
-var Component = require('./component');
-var $$ = Component.$$;
+var OO = require('../../basics/oo');
+var Component = require('../component');
 
-class AnnotationComponent extends Component {
+function AnnotationComponent() {
+  Component.apply(this, arguments);
+}
+
+AnnotationComponent.Prototype = function() {
 
-  get tagName: function() {
-    return 'span'
-  }
+  this.tagName = 'span';
 
-  get classNames: function() {
+  this.getClassNames = function() {
     var typeNames = this.props.node.getTypeNames();
     var classNames = typeNames.join(' ');
     if (this.props.classNames) {
       classNames += " " + this.props.classNames.join(' ');
     }
     return classNames.replace(/_/g, '-');
-  }
+  };
 
-  get attributes() {
+  this.getAttributes = function() {
     return {
       "data-id": this.props.node.id
     };
-  }
+  };
 
-  render() {
+  this.render = function() {
     if (this.props.node.active) {
       this.$el.addClass('active');
     } else {
       this.$el.removeClass('active');
     }
     return this.props.children;
-  }
+  };
 
-  didMount() {
+  this.didMount = function() {
     var node = this.props.node;
     node.connect(this, {
       'active': this.onActiveChanged
     });
-  }
+  };
 
-  willUnmount() {
+  this.willUnmount = function() {
     var node = this.props.node;
     node.disconnect(this);
-  }
+  };
 
-  onActiveChanged() {
+  this.onActiveChanged = function() {
     if (this.props.node.active) {
       this.$el.addClass('active');
     } else {
       this.$el.removeClass('active');
     }
-  }
-}
+  };
+};
+
+OO.inherit(AnnotationComponent, Component);
 
 module.exports = AnnotationComponent;

ui/nodes/figure_component.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var OO = require('../../basics/oo');
+var Component = require('../component');
+var TextProperty = require('../text_property_component');
+var $$ = Component.$$;
+
+function FigureComponent() {
+  Component.apply(this, arguments);
+}
+
+FigureComponent.Prototype = function() {
+
+  this.getClassNames = function() {
+    var specificType = this.props.node.type;
+    return "content-node figure clearfix "+specificType;
+  };
+
+  this.getAttributes = function() {
+    return {
+      "data-id": this.props.node.id
+    };
+  };
+
+  this.render = function() {
+    var componentRegistry = this.context.componentRegistry;
+    var contentNode = this.props.node.getContentNode();
+    var ContentComponentClass = componentRegistry.get(contentNode.type);
+
+    return [
+      $$('div', { classNames: 'label', contentEditable: false }, this.props.node.label),
+      $$(TextProperty, {
+        tagName: 'div',
+        classNames: 'title',
+        doc: this.props.doc,
+        path: [this.props.node.id, "title"]
+      }),
+      $$('div', { classNames: 'figure-content' },
+        $$(ContentComponentClass, {
+          doc: this.props.doc,
+          node: contentNode
+        })
+      ),
+      $$('div', { classNames: 'description small' },
+        $$(TextProperty, {
+          tagName: 'div',
+          classNames: 'caption',
+          doc: this.props.doc,
+          path: [this.props.node.id, "caption"]
+        })
+      )
+    ];
+  };
+};
+
+OO.inherit(FigureComponent, Component);
+
+module.exports = FigureComponent;