Render cards to DOM

bustle · Jul 15, 2015 · dfe3e96 · dfe3e96
1 parent eb11c5d
commit dfe3e96
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/lib/dom-renderer.js b/lib/dom-renderer.js
@@ -36,10 +36,11 @@ export default class DOMRenderer {
    * @param rootElement optional, defaults to an empty div
    * @return DOMNode
    */
-  render(mobiledoc, rootElement=utils.createElement('div')) {
+  render(mobiledoc, rootElement=utils.createElement('div'), cards={}) {
     const [markerTypes, sections] = mobiledoc;
     this.root = rootElement;
     this.markerTypes = markerTypes;
+    this.cards = cards;
 
     sections.forEach((section) => this.renderSection(section));
 
@@ -58,6 +59,10 @@ export default class DOMRenderer {
         rendered = this.renderImageSection(section);
         utils.appendChild(this.root, rendered);
         break;
+      case 10:
+        rendered = this.renderCardSection(section);
+        utils.appendChild(this.root, rendered);
+        break;
       default:
         throw new Error('Unimplement renderer for type ' + type);
     }
@@ -69,6 +74,16 @@ export default class DOMRenderer {
     return element;
   }
 
+  renderCardSection([type, name, payload]) {
+    let card = this.cards[name];
+    if (!card) {
+      throw new Error(`Cannot render unknown card named ${name}`);
+    }
+    let element = utils.createElement('div');
+    card.display.setup(element, {}, {name}, payload);
+    return element;
+  }
+
   renderMarkupSection([type, tagName, markers]) {
     let element = utils.createElement(tagName);
     let elements = [element];

diff --git a/tests/unit/dom-renderer-test.js b/tests/unit/dom-renderer-test.js
@@ -122,3 +122,34 @@ test('renders a mobiledoc with image section', (assert) => {
 
   assert.equal(sectionEl.src, url);
 });
+
+test('renders a mobiledoc with card section', (assert) => {
+  assert.expect(3);
+  let cardName = 'title-card';
+  let payload = {
+    name: 'bob'
+  };
+  let TitleCard = {
+    name: cardName,
+    display: {
+      setup(element, options, env, setupPayload) {
+        assert.deepEqual(payload, setupPayload);
+        element.innerHTML = setupPayload.name;
+      }
+    }
+  };
+  let mobiledoc = [
+    [],      // markers
+    [        // sections
+      [10, cardName, payload]
+    ]
+  ];
+  let rendered = renderer.render(mobiledoc, document.createElement('div'), {
+    [cardName]: TitleCard
+  });
+  assert.equal(rendered.childNodes.length, 1,
+               'renders 1 section');
+  let sectionEl = rendered.childNodes[0];
+
+  assert.equal(sectionEl.innerHTML, payload.name);
+});