mobiledoc-dom-renderer
Advanced tools
Comparing version 0.4.0-beta2 to 0.4.0-beta3
@@ -450,5 +450,5 @@ define('mobiledoc-dom-renderer/cards/image', ['exports', 'mobiledoc-dom-renderer/utils/render-type'], function (exports, _mobiledocDomRendererUtilsRenderType) { | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -904,5 +904,5 @@ | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -909,0 +909,0 @@ |
@@ -325,5 +325,5 @@ 'use strict'; | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -330,0 +330,0 @@ |
@@ -441,5 +441,5 @@ 'use strict'; | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -446,0 +446,0 @@ |
@@ -650,5 +650,5 @@ ;(function() { | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -1104,5 +1104,5 @@ | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -1109,0 +1109,0 @@ |
@@ -568,4 +568,4 @@ define('tests/helpers/dom', ['exports'], function (exports) { | ||
}, | ||
H1: function H1() { | ||
return document.createElement('h2'); | ||
H1: function H1(tagName, dom) { | ||
return dom.createElement('h2'); | ||
} | ||
@@ -1287,4 +1287,4 @@ } | ||
}, | ||
H1: function H1() { | ||
return document.createElement('h2'); | ||
H1: function H1(tagName, dom) { | ||
return dom.createElement('h2'); | ||
} | ||
@@ -1291,0 +1291,0 @@ } |
@@ -254,5 +254,5 @@ import { createTextNode } from '../utils/dom'; | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -259,0 +259,0 @@ |
@@ -356,5 +356,5 @@ import { createTextNode } from '../utils/dom'; | ||
if (this.sectionElementRenderer[lowerCaseTagName]) { | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName); | ||
element = this.sectionElementRenderer[lowerCaseTagName](tagName, this.dom); | ||
} else { | ||
element = this.dom.createElement(tagName); | ||
element = this.dom.createElement(tagName, this.dom); | ||
} | ||
@@ -361,0 +361,0 @@ |
{ | ||
"name": "mobiledoc-dom-renderer", | ||
"version": "0.4.0-beta2", | ||
"version": "0.4.0-beta3", | ||
"description": "Renders Mobiledoc input to DOM output", | ||
@@ -5,0 +5,0 @@ "scripts": { |
@@ -12,3 +12,3 @@ ## Mobiledoc DOM Renderer [![Build Status](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustlelabs/mobiledoc-dom-renderer) | ||
``` | ||
```js | ||
var mobiledoc = { | ||
@@ -41,2 +41,3 @@ version: "0.2.0", | ||
The Renderer constructor accepts a single object with the following optional properties: | ||
* `cards` [array] - The list of card objects that the renderer may encounter in the mobiledoc | ||
@@ -49,3 +50,6 @@ * `atoms` [array] - The list of atom objects that the renderer may encounter in the mobiledoc | ||
* Valid keys are P, H1, H2, H3, BLOCKQUOTE, PULL-QUOTE | ||
* Arguments are `tagName, dom` | ||
* A valid value is a function that returns an element | ||
* `dom` [object] - A native or [SimpleDOM](https://github.com/krisselden/simple-dom) | ||
implementation of the DOM. | ||
@@ -56,2 +60,30 @@ The return value from `renderer.render(mobiledoc)` is an object with two properties: | ||
#### Rendering HTML | ||
In a browser, rendering to HTML is simple: | ||
```js | ||
var renderer = new MobiledocDOMRenderer(); | ||
var rendered = renderer.render(mobiledoc); | ||
var html = rendered.result.outerHTML; | ||
``` | ||
However on the server in Node.js, native DOM APIs are not available. To make | ||
server-rendering easy, this DOM | ||
renderer is [SimpleDOM](https://github.com/krisselden/simple-dom) | ||
compatible. You may pass an instance of a SimpleDOM document and serialize | ||
its output. For example: | ||
```js | ||
var renderer = new MobiledocDOMRenderer({ | ||
dom: new SimpleDOM.Document() | ||
}); | ||
var rendered = renderer.render(mobiledoc); | ||
var serializer = new SimpleDOM.HTMLSerializer([]); | ||
var html = serializer.serializeChildren(rendered.result); | ||
``` | ||
This usage of the DOM renderer for rendering HTML has the advantage of allowing | ||
developers to easily implement cards that work in a server and client context. | ||
#### sectionElementRenderer | ||
@@ -65,6 +97,6 @@ | ||
sectionElementRenderer: { | ||
P: function() { return document.createElement('span'); }, | ||
H1: function() { return document.createElement('h2'); }, | ||
H2: function() { | ||
var element = document.createElement('h2'); | ||
P: function(_, dom) { return dom.createElement('span'); }, | ||
H1: function(_, dom) { return dom.createElement('h2'); }, | ||
H2: function(tagName, dom) { | ||
var element = dom.createElement(tagName); | ||
element.setAttribute('class', 'subheadline'); | ||
@@ -71,0 +103,0 @@ return element; |
341025
117