From 9ced3f16c8bcc3d1a36773b126842d023c589eaf Mon Sep 17 00:00:00 2001
From: Mathias Biilmann Christensen <info@mathias-biilmann.net>
Date: Mon, 12 Sep 2016 15:27:45 +0200
Subject: [PATCH] Add a custom template to the example

---
 example/example.css           | 15 +++++++++++++++
 example/index.html            | 22 +++++++++++++++++++++-
 src/components/ControlPane.js |  4 ++--
 src/index.js                  |  2 ++
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 example/example.css

diff --git a/example/example.css b/example/example.css
new file mode 100644
index 00000000..3ec853c0
--- /dev/null
+++ b/example/example.css
@@ -0,0 +1,15 @@
+html, body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #444;
+}
+body {
+  padding: 20px;
+}
+
+h1 {
+  font-weight: bold;
+  color: #666;
+  font-size: 32px;
+  margin-top: 20px;
+}
diff --git a/example/index.html b/example/index.html
index aa1c14e8..cbf4ef07 100644
--- a/example/index.html
+++ b/example/index.html
@@ -69,6 +69,26 @@
 
   <script src='/cms.js'></script>
   <script>
+    var PostPreview = createClass({
+      render: function() {
+        var entry = this.props.entry;
+        var image = entry.getIn(['data', 'image']);
+        var bg = image && this.props.getMedia(image);
+        return h('div', {},
+          h('div', {className: "cover"},
+            h('h1', {}, entry.getIn(['data', 'title'])),
+            bg ? h('img', {src: bg.toString()}) : null
+          ),
+          h('p', {},
+            h('small', {}, "Written " + entry.getIn(['data', 'date']))
+          ),
+          h('div', {"className": "text"}, this.props.widgetFor('body'))
+        );
+      }
+    });
+
+    CMS.registerPreviewTemplate("posts", PostPreview);
+    CMS.registerPreviewStyle("/example.css");
     CMS.registerEditorComponent({
       id: "youtube",
       label: "Youtube",
@@ -88,7 +108,7 @@
           '<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
         );
       }
-    })
+    });
   </script>
 </body>
 </html>
diff --git a/src/components/ControlPane.js b/src/components/ControlPane.js
index 435aaffa..fc39041e 100644
--- a/src/components/ControlPane.js
+++ b/src/components/ControlPane.js
@@ -1,13 +1,13 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import {resolveWidget} from './Widgets';
+import { resolveWidget } from './Widgets';
 
 export default class ControlPane extends React.Component {
   controlFor(field) {
     const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
     const widget = resolveWidget(field.get('widget'));
     return <div className="cms-control">
-      <label>{ field.get('label') }</label>
+      <label>{field.get('label')}</label>
       {React.createElement(widget.control, {
         field: field,
         value: entry.getIn(['data', field.get('name')]),
diff --git a/src/index.js b/src/index.js
index 2f7a3a1a..965e5bd2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -31,3 +31,5 @@ console.log('reg: ', registry);
 for (const method in registry) {
   window.CMS[method] = registry[method];
 }
+window.createClass = React.createClass;
+window.h = React.createElement;