+ const outer = document.createElement('div');
+
+ // Clone the element
+ const clone = this.element.cloneNode(true);
+
+ // Setup some vars
+ let width,
+ height,
+ svg;
+
+ // If the element is an SVG we work out the size of the SVG using a variety of methods,
+ // depending on how the user has defined the size of their SVG
+ if (this.element.tagName !== 'svg') {
+ throw new Error('Invalid element provided, must be SVG');
+ }
+
+ // Get the width and height
+ width = parseInt(this.element.viewBox.baseVal.width || clone.getAttribute('data-width') || clone.style.width);
+ height = parseInt(this.element.viewBox.baseVal.height || clone.getAttribute('data-height') || clone.style.height);
+
+ // Configure the clone's wrapper attributes
+ clone.setAttribute('version', '1.1');
+ clone.setAttributeNS(xmlns, 'xmlns', 'http://www.w3.org/2000/svg');
+ clone.setAttributeNS(xmlns, 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
+ clone.setAttribute('width', width * options.scale);
+ clone.setAttribute('height', height * options.scale);
+ clone.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+ outer.appendChild(clone);
+
+ // Setup the SVG by adding the XML doctype
+ const doctype = '';
+
+ // Combine the doctype and the innerHTML of the cloned SVG to get the final product
+ svg = doctype + outer.innerHTML;
+
+ // Create the URI
+ const uri = 'data:image/svg+xml;base64,' + helpers.svgToBase64(svg, window.btoa);
+
+ // Run the callback
+ callback(uri);
+ });
+ }
+
+}
+
+module.exports = SVGToImage;
diff --git a/src/renderers/dom/ui/_settings.scss b/src/renderers/dom/ui/_settings.scss
new file mode 100644
index 0000000..2b0aa88
--- /dev/null
+++ b/src/renderers/dom/ui/_settings.scss
@@ -0,0 +1 @@
+$mobile-breakpoint: 768px;
\ No newline at end of file
diff --git a/src/renderers/dom/ui/base.scss b/src/renderers/dom/ui/base.scss
new file mode 100644
index 0000000..6019d5f
--- /dev/null
+++ b/src/renderers/dom/ui/base.scss
@@ -0,0 +1,75 @@
+@import "settings";
+
+html { font-size: 62.5%; }
+body {
+ font-size: 1.4rem;
+ margin: 0;
+ font-family: "Open Sans", Helvetica, sans-serif;
+ font-weight: 400;
+}
+
+*, *:before, *:after {
+ box-sizing: border-box;
+}
+
+main.main {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 5.7rem);
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ flex-direction: row;
+ }
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 800;
+ margin: 0 0 0.67rem;
+ letter-spacing: 0.1rem;
+ text-transform: uppercase;
+}
+
+hr {
+ border: 0;
+ border-bottom: 1px solid #bababa;
+ margin-bottom: 1.5rem;
+}
+
+.pull-bottom {
+ margin-left: auto;
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ margin-top: auto;
+ }
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+input[type="range"],
+input[type="file"],
+select,
+textarea {
+ width: 100%;
+ border: 1px solid #eaeaea;
+ background: #FFF;
+ font-family: "Open Sans", Helvetica, sans-serif;
+ font-size: 1.4rem;
+ padding: 0.8rem;
+ margin: 0.2rem 0 1.5rem;
+}
+
+input[type="range"],
+input[type="file"] {
+ padding: 0rem;
+ border: 0;
+}
+
+
+input[type="file"] {
+ background: transparent;
+}
+
+textarea {
+ min-height: 12rem;
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements.js b/src/renderers/dom/ui/elements.js
new file mode 100644
index 0000000..c63e13c
--- /dev/null
+++ b/src/renderers/dom/ui/elements.js
@@ -0,0 +1,5 @@
+module.exports = {
+ Header: require('./elements/Header/component'),
+ Sidebar: require('./elements/Sidebar/component'),
+ Canvas: require('./elements/Canvas/component')
+}
diff --git a/src/renderers/dom/ui/elements/Canvas/component.js b/src/renderers/dom/ui/elements/Canvas/component.js
new file mode 100644
index 0000000..c536bcb
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Canvas/component.js
@@ -0,0 +1,29 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./style.scss');
+
+// Card
+const Card = require('../../../../shared/Card');
+
+// Canvas class
+class Canvas extends React.Component {
+
+ render () {
+ return (
+
+
+
+ );
+ }
+
+}
+
+Canvas.propTypes = {
+ sidebarOpen: React.PropTypes.bool,
+ configuration: React.PropTypes.object.isRequired
+}
+
+// Export
+module.exports = Canvas;
diff --git a/src/renderers/dom/ui/elements/Canvas/style.scss b/src/renderers/dom/ui/elements/Canvas/style.scss
new file mode 100644
index 0000000..34bd2b2
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Canvas/style.scss
@@ -0,0 +1,42 @@
+@import "../../settings";
+
+.canvas {
+ transition: transform 0.2s ease;
+ width: 100%;
+ padding: 2rem 0;
+ transform: translateY(-40vh);
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ width: calc(100% - 37rem);
+ transform: translateX(-15rem);
+ }
+
+ &.canvas--with-sidebar {
+ transform: translateX(0rem);
+ }
+
+ div.card {
+ width: 100%;
+ padding: 0 1rem;
+ display: block;
+ height: 100%;
+ margin: 0 auto;
+
+ svg:not(:root) {
+ overflow: hidden;
+ }
+
+ svg {
+ text {
+ cursor: default;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ text::selection {
+ background: none;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/Controls/ColorControl.js b/src/renderers/dom/ui/elements/Controls/ColorControl.js
new file mode 100644
index 0000000..2d8aec1
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Controls/ColorControl.js
@@ -0,0 +1,71 @@
+// Libraries
+const React = require('react');
+const { ChromePicker, CirclePicker } = require('react-color');
+const helpers = require('../../../../../helpers');
+
+// ColorControl class
+class ColorControl extends React.Component {
+
+ constructor (props) {
+ super(props);
+ this.handleChange = this.handleChange.bind(this);
+ this.handleColorChange = this.handleColorChange.bind(this);
+ }
+
+ handleChange (e) {
+ let element = e.target;
+ this.props.onNewValue(this.props.name, element.value);
+ }
+
+ handleColorChange (color) {
+ this.props.onNewValue(this.props.name, color.hex);
+ }
+
+ render () {
+ if (!this.props.layer.editable[this.props.name]) return null;
+
+ if (typeof this.props.layer.editable[this.props.name] === 'object' && this.props.layer.editable[this.props.name].options) {
+ return (
+
+ Fill
+
+
+ );
+ }
+
+ if (this.props.layer.editable[this.props.name] === 'picker') {
+ return (
+
+ {helpers.capitaliseFirstLetter(this.props.name)}
+
+
+ );
+ }
+
+ if (this.props.layer.editable[this.props.name] === true) {
+ return (
+
+ {helpers.capitaliseFirstLetter(this.props.name)}
+
+
+ );
+ }
+
+ return null;
+ }
+
+}
+
+ColorControl.propTypes = {
+ name: React.PropTypes.string.isRequired,
+ onNewValue: React.PropTypes.func.isRequired,
+ layer: React.PropTypes.object.isRequired
+}
+
+// Export
+module.exports = ColorControl;
diff --git a/src/renderers/dom/ui/elements/Controls/SizeControl.js b/src/renderers/dom/ui/elements/Controls/SizeControl.js
new file mode 100644
index 0000000..83a612b
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Controls/SizeControl.js
@@ -0,0 +1,69 @@
+// Libraries
+const React = require('react');
+const helpers = require('../../../../../helpers');
+
+// SizeControl class
+class SizeControl extends React.Component {
+
+ constructor (props) {
+ super(props);
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange (e) {
+ let element = e.target;
+ this.props.onNewValue(this.props.name, element.value);
+ }
+
+ render () {
+ if (!this.props.layer.editable[this.props.name]) return null;
+
+ if (typeof this.props.layer.editable[this.props.name] === 'object' || (this.props.min || this.props.max || this.props.step)) {
+ // We have some config
+
+ const config = {
+ min: this.props.layer.editable[this.props.name].min || this.props.min || 0,
+ max: this.props.layer.editable[this.props.name].max || this.props.max || null,
+ step: this.props.layer.editable[this.props.name].step || this.props.step || 1
+ };
+
+ config.type = (config.max ? 'range' : 'number');
+
+ return (
+
+ {helpers.capitaliseFirstLetter(this.props.name)} {this.props.layer[this.props.name]}
+
+
+ );
+ }
+
+ if (this.props.layer.editable[this.props.name] === true) {
+ return (
+
+ {helpers.capitaliseFirstLetter(this.props.name)} {this.props.layer[this.props.name]}
+
+
+ );
+ }
+ }
+
+}
+
+SizeControl.propTypes = {
+ name: React.PropTypes.string.isRequired,
+ onNewValue: React.PropTypes.func.isRequired,
+ layer: React.PropTypes.object.isRequired,
+ min: React.PropTypes.number,
+ max: React.PropTypes.number,
+ step: React.PropTypes.number,
+ type: React.PropTypes.string
+}
+
+// Export
+module.exports = SizeControl;
diff --git a/src/renderers/dom/ui/elements/Controls/SourceControl.js b/src/renderers/dom/ui/elements/Controls/SourceControl.js
new file mode 100644
index 0000000..81a33a3
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Controls/SourceControl.js
@@ -0,0 +1,79 @@
+// Libraries
+const React = require('react');
+
+// SizeControl class
+class SizeControl extends React.Component {
+
+ constructor (props) {
+ super(props);
+ this.handleSelectChange = this.handleSelectChange.bind(this);
+ this.handleFileChange = this.handleFileChange.bind(this);
+ this._processFile = this._processFile.bind(this);
+ }
+
+ handleSelectChange (e) {
+ const value = e.target.value;
+ this.props.onNewValue('src', value);
+ }
+
+ handleFileChange (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ const file = e.target.files[0];
+ this._processFile(file);
+ }
+
+ _processFile (file) {
+ const reader = new window.FileReader();
+
+ reader.onload = () => {
+ let layer = this.props.layer;
+ layer['src'] = reader.result;
+
+ this.props.onNewValue('src', reader.result);
+ };
+
+ reader.readAsDataURL(file);
+ }
+
+ render () {
+ if (!this.props.layer.editable.src) return null;
+
+ // If an object of options is given, create a dropdown
+ if (typeof this.props.layer.editable.src === 'object') {
+ return (
+
+ Source
+
+
+ );
+ }
+
+ // Default behaviour is to show a file upload
+ if (this.props.layer.editable.src) {
+ return (
+
+ Source
+
+
+ );
+ }
+ }
+
+}
+
+SizeControl.propTypes = {
+ onNewValue: React.PropTypes.func.isRequired,
+ layer: React.PropTypes.object.isRequired
+}
+
+// Export
+module.exports = SizeControl;
diff --git a/src/renderers/dom/ui/elements/Controls/TextControl.js b/src/renderers/dom/ui/elements/Controls/TextControl.js
new file mode 100644
index 0000000..4ec1b77
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Controls/TextControl.js
@@ -0,0 +1,71 @@
+// Libraries
+const React = require('react');
+
+// TextControl class
+class TextControl extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange (e) {
+ let element = e.target;
+ this.props.onNewValue('text', element.value);
+ }
+
+ render () {
+ if (!this.props.layer.editable.text) return null;
+
+ if (typeof this.props.layer.editable.text === 'object') {
+ if (this.props.layer.editable.text.options) {
+ // We have a select instead of a free-input
+ return (
+
+ Text
+
+
+ );
+ }
+
+ // We have some config
+ const config = {
+ maxLength: this.props.layer.editable.text.max || null
+ };
+
+ return (
+
+ Text
+
+
+ );
+ }
+
+ if (this.props.layer.editable.text === true) {
+ return (
+
+ Text
+
+
+ );
+ }
+ }
+
+}
+
+TextControl.propTypes = {
+ onNewValue: React.PropTypes.func.isRequired,
+ layer: React.PropTypes.object.isRequired
+}
+
+// Export
+module.exports = TextControl;
diff --git a/src/renderers/dom/ui/elements/Header/component.js b/src/renderers/dom/ui/elements/Header/component.js
new file mode 100644
index 0000000..f722066
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Header/component.js
@@ -0,0 +1,30 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./style.scss');
+
+// Images
+const images = {
+ logo: require('../../images/logo.png')
+};
+
+// Header class
+class Header extends React.Component {
+
+ render () {
+ return (
+
+ );
+ }
+
+}
+
+Header.propTypes = {}
+
+// Export
+module.exports = Header;
diff --git a/src/renderers/dom/ui/elements/Header/style.scss b/src/renderers/dom/ui/elements/Header/style.scss
new file mode 100644
index 0000000..502d95e
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Header/style.scss
@@ -0,0 +1,31 @@
+.header {
+ background: #4da5bd;
+ height: 5.7rem;
+ display: flex;
+ position: relative;
+ z-index: 10;
+
+ img {
+ padding: 1rem;
+ margin: 0;
+ display: block;
+ width: 16.2rem;
+ height: 5.7rem;
+ }
+
+ a {
+ margin-right: 0;
+ margin-left: auto;
+ padding: 0 2rem;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ text-decoration: none;
+ height: 5.7rem;
+ line-height: 5.7rem;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.4);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/LayerConfig/component.js b/src/renderers/dom/ui/elements/LayerConfig/component.js
new file mode 100644
index 0000000..a131168
--- /dev/null
+++ b/src/renderers/dom/ui/elements/LayerConfig/component.js
@@ -0,0 +1,137 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./style.scss');
+
+// Require in our controls
+const TextControl = require('../Controls/TextControl');
+const SizeControl = require('../Controls/SizeControl');
+const ColorControl = require('../Controls/ColorControl');
+const SourceControl = require('../Controls/SourceControl');
+
+// LayerConfig class
+class LayerConfig extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ handleChange (property, value) {
+ let layer = this.props.layer;
+ layer[property] = value;
+
+ this.props.onUpdate(this.props.layerKey, layer);
+ }
+
+ render () {
+ return (
+
+
{this.props.layer.name}
+
+
+
+ {/** Text **/}
+
+
+ {/** Font Size **/}
+
+
+ {/** Height **/}
+
+
+ {/** Width **/}
+
+
+ {/** Radius **/}
+
+
+ {/** Radius X **/}
+
+
+ {/** Radius X **/}
+
+
+ {/** X **/}
+
+
+ {/** Y **/}
+
+
+ {/** X1 **/}
+
+
+ {/** X2 **/}
+
+
+ {/** Y1 **/}
+
+
+ {/** Y2 **/}
+
+
+ {/** Fill **/}
+
+
+ {/** Stroke **/}
+
+
+ {/** Source **/}
+
+
+ {/** Opacity **/}
+
+
+
+
+
+ );
+ }
+
+}
+
+LayerConfig.propTypes = {
+ onUpdate: React.PropTypes.func.isRequired,
+ layer: React.PropTypes.object.isRequired,
+ layerKey: React.PropTypes.string.isRequired
+}
+
+// Export
+module.exports = LayerConfig;
diff --git a/src/renderers/dom/ui/elements/LayerConfig/style.scss b/src/renderers/dom/ui/elements/LayerConfig/style.scss
new file mode 100644
index 0000000..edf29d8
--- /dev/null
+++ b/src/renderers/dom/ui/elements/LayerConfig/style.scss
@@ -0,0 +1,15 @@
+.layer-config {
+ background: #FFF;
+ margin: 0 0 2rem;
+ box-shadow: 0 2px 5px 0px #bbb;
+
+ h3 {
+ background: #f9f9f9;
+ padding: 0.4rem 1rem;
+ font-size: 1rem;
+ }
+
+ .element-config {
+ padding: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/Panels/Content/component.js b/src/renderers/dom/ui/elements/Panels/Content/component.js
new file mode 100644
index 0000000..95b944b
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Content/component.js
@@ -0,0 +1,66 @@
+// Libraries
+const React = require('react');
+
+const LayerConfig = require('../../LayerConfig/component');
+
+// Styles
+require('./style.scss');
+
+// Content class
+class ContentPanel extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleUpdate = this.handleUpdate.bind(this);
+ }
+
+ handleUpdate (name, element) {
+ let configuration = this.props.configuration;
+ configuration.layers[name] = element;
+
+ this.props.onConfigurationChange(configuration);
+ }
+
+ getLayerValue (layer, key, layers) {
+ if (typeof layer[key] === 'function') {
+ return layer[key](layers);
+ }
+
+ return layer[key];
+ }
+
+ render () {
+ let elements = [];
+
+ const { layers } = this.props.configuration;
+
+ Object.keys(layers).forEach((key) => {
+ const layer = layers[key];
+
+ if (this.getLayerValue(layer, 'hidden', layers) === true) return;
+
+ if (this.getLayerValue(layer, 'editable', layers)) {
+ elements.push(
);
+ }
+ });
+
+ return (
+
+
Layers
+ {elements}
+
+
+ );
+ }
+
+}
+
+ContentPanel.propTypes = {
+ onConfigurationChange: React.PropTypes.func.isRequired,
+ configuration: React.PropTypes.object.isRequired,
+ active: React.PropTypes.bool
+}
+
+// Export
+module.exports = ContentPanel;
diff --git a/src/renderers/dom/ui/elements/Panels/Content/style.scss b/src/renderers/dom/ui/elements/Panels/Content/style.scss
new file mode 100644
index 0000000..ef2e92c
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Content/style.scss
@@ -0,0 +1,9 @@
+.panel.panel--content {
+
+ .chrome-picker,
+ .circle-picker {
+ width: 100% !important;
+ margin: 0.3rem 0 1.5rem;
+ }
+
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/Panels/Layout/CardLayout.js b/src/renderers/dom/ui/elements/Panels/Layout/CardLayout.js
new file mode 100644
index 0000000..674d3dc
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Layout/CardLayout.js
@@ -0,0 +1,40 @@
+// Libraries
+const React = require('react');
+
+// CardLayout class
+class CardLayout extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick () {
+ this.props.onClick(this.props.name);
+ }
+
+ render () {
+ const { name, layout, ratioHeight } = this.props;
+ return (
+
+ {this.props.children}
+
+
);
+ }
+
+}
+
+CardLayout.propTypes = {
+ onClick: React.PropTypes.func.isRequired,
+ layout: React.PropTypes.string.isRequired,
+ name: React.PropTypes.string.isRequired,
+ ratioHeight: React.PropTypes.number.isRequired,
+ children: React.PropTypes.array
+}
+
+// Export
+module.exports = CardLayout;
diff --git a/src/renderers/dom/ui/elements/Panels/Layout/component.js b/src/renderers/dom/ui/elements/Panels/Layout/component.js
new file mode 100644
index 0000000..cc7b98d
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Layout/component.js
@@ -0,0 +1,57 @@
+// Libraries
+const React = require('react');
+const CardLayout = require('./CardLayout');
+
+// Styles
+require('./style.scss');
+
+// LayoutPanel class
+class LayoutPanel extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick (name) {
+ this.props.onLayoutChange(name);
+ }
+
+ render () {
+ if (!this.props.layouts) return null;
+
+ return (
+
+
Layout
+
+ {Object.keys(this.props.layouts).map((name, index) => {
+ const { width, height } = this.props.layouts[name].card;
+
+ const ratioHeight = height / width * 270;
+
+ return (
+ {name}
+ {width} × {height}
+ )
+ })}
+
+
+ );
+ }
+
+}
+
+LayoutPanel.propTypes = {
+ onLayoutChange: React.PropTypes.func.isRequired,
+ layouts: React.PropTypes.object.isRequired,
+ layout: React.PropTypes.string.isRequired,
+ active: React.PropTypes.bool
+}
+
+// Export
+module.exports = LayoutPanel;
diff --git a/src/renderers/dom/ui/elements/Panels/Layout/style.scss b/src/renderers/dom/ui/elements/Panels/Layout/style.scss
new file mode 100644
index 0000000..a2494e9
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Layout/style.scss
@@ -0,0 +1,20 @@
+.panel.panel--layout {
+
+ .layout {
+ background: #333;
+ text-align: center;
+ padding: 2rem;
+ color: #FFF;
+ margin: 0 0 2rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &:hover,
+ &.layout--selected {
+ background: #111;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/Panels/Template/CardTemplate.js b/src/renderers/dom/ui/elements/Panels/Template/CardTemplate.js
new file mode 100644
index 0000000..4e4b8dc
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Template/CardTemplate.js
@@ -0,0 +1,36 @@
+// Libraries
+const React = require('react');
+
+// CardTemplate class
+class CardTemplate extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick () {
+ this.props.onClick(this.props.name);
+ }
+
+ render () {
+ const { name, template, children } = this.props;
+
+ return (
+ {children}
+ );
+ }
+
+}
+
+CardTemplate.propTypes = {
+ name: React.PropTypes.string.isRequired,
+ template: React.PropTypes.string.isRequired,
+ children: React.PropTypes.array.isRequired,
+ onClick: React.PropTypes.func.isRequired
+}
+
+// Export
+module.exports = CardTemplate;
diff --git a/src/renderers/dom/ui/elements/Panels/Template/component.js b/src/renderers/dom/ui/elements/Panels/Template/component.js
new file mode 100644
index 0000000..f2c8a46
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Template/component.js
@@ -0,0 +1,82 @@
+// Libraries
+const React = require('react');
+const CardTemplate = require('./CardTemplate');
+
+// Styles
+require('./style.scss');
+
+// TemplatePanel class
+class TemplatePanel extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleUpdate = this.handleUpdate.bind(this);
+ this.handleUpdateFromImage = this.handleUpdateFromImage.bind(this);
+ }
+
+ handleUpdate (e) {
+ const element = e.target;
+
+ this.props.onTemplateChange(element.value);
+ }
+
+ handleUpdateFromImage (name, e) {
+ this.props.onTemplateChange(name);
+ }
+
+ render () {
+ if (!this.props.templates) return null;
+
+ let allHavePreviewImages = true;
+ Object.keys(this.props.templates).forEach((name, index) => {
+ if (!this.props.templates[name].previewImage) {
+ allHavePreviewImages = false;
+ }
+ });
+
+ if (allHavePreviewImages) {
+ return (
+
+
Template
+
+
+ {Object.keys(this.props.templates).map((name, index) => {
+ return (
+ 
+ {name}
+ );
+ })}
+
+
+
+ );
+ }
+
+ return (
+
+
Template
+
+
+
+
+ );
+ }
+
+}
+TemplatePanel.propTypes = {
+ template: React.PropTypes.string.isRequired,
+ onTemplateChange: React.PropTypes.func.isRequired,
+ templates: React.PropTypes.object.isRequired,
+ active: React.PropTypes.bool
+}
+
+// Export
+module.exports = TemplatePanel;
diff --git a/src/renderers/dom/ui/elements/Panels/Template/style.scss b/src/renderers/dom/ui/elements/Panels/Template/style.scss
new file mode 100644
index 0000000..aa46fb4
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Template/style.scss
@@ -0,0 +1,23 @@
+.panel.panel--template {
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+
+ li.template-image {
+ margin: 0 0 2rem;
+ cursor: pointer;
+
+ &.template-image--selected {
+ img {
+ opacity: 1;
+ }
+ }
+ }
+ }
+ img {
+ max-width: 100%;
+ height: auto;
+ opacity: 0.6;
+ }
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/Panels/Theme/component.js b/src/renderers/dom/ui/elements/Panels/Theme/component.js
new file mode 100644
index 0000000..0867e0c
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Panels/Theme/component.js
@@ -0,0 +1,49 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./style.scss');
+
+// ThemePanel class
+class ThemePanel extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleUpdate = this.handleUpdate.bind(this);
+ }
+
+ handleUpdate (e) {
+ const element = e.target;
+
+ this.props.onThemeChange(element.value);
+ }
+
+ render () {
+ if (!this.props.themes) return null;
+
+ return (
+
+
Theme
+
+
+
+
+ );
+ }
+
+}
+
+ThemePanel.propTypes = {
+ onThemeChange: React.PropTypes.func.isRequired,
+ themes: React.PropTypes.object.isRequired,
+ theme: React.PropTypes.string.isRequired,
+ active: React.PropTypes.bool
+}
+
+// Export
+module.exports = ThemePanel;
diff --git a/app/styles/_card.scss b/src/renderers/dom/ui/elements/Panels/Theme/style.scss
similarity index 100%
rename from app/styles/_card.scss
rename to src/renderers/dom/ui/elements/Panels/Theme/style.scss
diff --git a/src/renderers/dom/ui/elements/Sidebar/PanelButton.js b/src/renderers/dom/ui/elements/Sidebar/PanelButton.js
new file mode 100644
index 0000000..2d77bc1
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Sidebar/PanelButton.js
@@ -0,0 +1,38 @@
+// Libraries
+const React = require('react');
+
+// PanelButton class
+class PanelButton extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick () {
+ this.props.onClick(this.props.name);
+ }
+
+ render () {
+ const { title, active } = this.props;
+
+ return (
+
+ );
+ }
+
+}
+
+PanelButton.propTypes = {
+ name: React.PropTypes.string.isRequired,
+ title: React.PropTypes.string.isRequired,
+ active: React.PropTypes.bool,
+ onClick: React.PropTypes.func.isRequired
+}
+
+// Export
+module.exports = PanelButton;
diff --git a/src/renderers/dom/ui/elements/Sidebar/component.js b/src/renderers/dom/ui/elements/Sidebar/component.js
new file mode 100644
index 0000000..165af47
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Sidebar/component.js
@@ -0,0 +1,144 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./style.scss');
+
+const {
+ Content,
+ Template,
+ Theme,
+ Layout
+} = require('../panels');
+const PanelButton = require('./PanelButton');
+
+// Sidebar class
+class Sidebar extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.state = {
+ panel: 'template'
+ }
+
+ this.handleConfigurationChange = this.handleConfigurationChange.bind(this);
+ this.handleTemplateChange = this.handleTemplateChange.bind(this);
+ this.handleThemeChange = this.handleThemeChange.bind(this);
+ this.handleLayoutChange = this.handleLayoutChange.bind(this);
+ this.updateConfiguration = this.updateConfiguration.bind(this);
+ this.openPanel = this.openPanel.bind(this);
+ this.isPanel = this.isPanel.bind(this);
+ this.renderButton = this.renderButton.bind(this);
+ }
+
+ updateConfiguration (e) {
+ const configuration = this.props.configuration;
+
+ this.props.onConfigurationChange(configuration);
+ }
+
+ openPanel (panel) {
+ if (panel === this.state.panel) {
+ this.props.onSidebarChange(false);
+ } else {
+ this.props.onSidebarChange(true);
+ }
+
+ this.setState({
+ panel: (panel === this.state.panel ? false : panel)
+ });
+ }
+
+ isPanel (panel) {
+ return (this.state.panel === panel);
+ }
+
+ handleConfigurationChange (configuration) {
+ this.props.onConfigurationChange(configuration);
+ }
+
+ handleTemplateChange (template) {
+ this.props.onTemplateChange(template);
+ }
+
+ handleThemeChange (theme) {
+ this.props.onThemeChange(theme);
+ }
+
+ handleLayoutChange (layout) {
+ this.props.onLayoutChange(layout);
+ }
+
+ renderButton (panelName, panelTitle, options) {
+ if (!options) return null;
+
+ return (
);
+ }
+
+ render () {
+ return (
+
+ );
+ }
+
+}
+
+Sidebar.propTypes = {
+ onRequestDownload: React.PropTypes.func.isRequired,
+ onConfigurationChange: React.PropTypes.func.isRequired,
+ onSidebarChange: React.PropTypes.func.isRequired,
+ onThemeChange: React.PropTypes.func.isRequired,
+ onTemplateChange: React.PropTypes.func.isRequired,
+ onLayoutChange: React.PropTypes.func.isRequired,
+ configuration: React.PropTypes.object.isRequired,
+ theme: React.PropTypes.string,
+ themes: React.PropTypes.object,
+ template: React.PropTypes.string,
+ templates: React.PropTypes.object,
+ layout: React.PropTypes.string,
+ layouts: React.PropTypes.object
+}
+
+// Export
+module.exports = Sidebar;
diff --git a/src/renderers/dom/ui/elements/Sidebar/style.scss b/src/renderers/dom/ui/elements/Sidebar/style.scss
new file mode 100644
index 0000000..3de2587
--- /dev/null
+++ b/src/renderers/dom/ui/elements/Sidebar/style.scss
@@ -0,0 +1,83 @@
+@import "../../settings";
+
+aside.sidebar {
+ background: #eee;
+ color: #FFF;
+ display: flex;
+ flex-direction: column;
+ transform: translateY(-40vh);
+ transition: transform 0.2s ease;
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ flex-direction: row;
+ transform: translateX(-30rem);
+ min-width: 30rem;
+ }
+
+ &.sidebar--open {
+ transform: translateX(0);
+ }
+
+ .panels {
+ width: 100%;
+ box-sizing: border-box;
+ height: 40vh;
+ overflow: auto;
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ height: initial;
+ width: 30rem;
+ }
+ }
+
+ .buttons {
+ margin: 0;
+ padding: 0;
+ background: #333;
+ list-style-type: none;
+ display: flex;
+ width: 100%;
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ width: 7rem;
+ flex-direction: column;
+ }
+
+ button {
+ width: 7rem;
+ height: 7rem;
+ appearance: none;
+ -webkit-appearance: none;
+ border: 0;
+ border-radius: 0;
+ background: #333;
+ color: #FFF;
+ text-transform: uppercase;
+ font-size: 1rem;
+ letter-spacing: 0.1rem;
+ outline: none;
+ cursor: pointer;
+
+ &:hover, &.button--active {
+ background: #111;
+ }
+ }
+ }
+
+ .panel {
+ width: 100%;
+ display: none;
+ padding: 1.5rem;
+ color: #000;
+ height: 100%;
+ overflow: auto;
+
+ @media screen and (min-width: $mobile-breakpoint) {
+ width: 30rem;
+ }
+
+ &.panel--show {
+ display: block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/renderers/dom/ui/elements/panels.js b/src/renderers/dom/ui/elements/panels.js
new file mode 100644
index 0000000..3f49a58
--- /dev/null
+++ b/src/renderers/dom/ui/elements/panels.js
@@ -0,0 +1,6 @@
+module.exports = {
+ Content: require('./Panels/Content/component'),
+ Template: require('./Panels/Template/component'),
+ Theme: require('./Panels/Theme/component'),
+ Layout: require('./Panels/Layout/component')
+}
diff --git a/src/renderers/dom/ui/images/logo.png b/src/renderers/dom/ui/images/logo.png
new file mode 100644
index 0000000..8d686ea
Binary files /dev/null and b/src/renderers/dom/ui/images/logo.png differ
diff --git a/src/renderers/dom/ui/ui.js b/src/renderers/dom/ui/ui.js
new file mode 100644
index 0000000..4d1d0e1
--- /dev/null
+++ b/src/renderers/dom/ui/ui.js
@@ -0,0 +1,143 @@
+// Libraries
+const React = require('react');
+
+// Styles
+require('./base.scss');
+
+// Elements
+const {
+ Header,
+ Sidebar,
+ Canvas
+} = require('./elements');
+
+// UI class
+class UI extends React.Component {
+
+ constructor (props) {
+ super(props);
+
+ this.state = {
+ configuration: this.props.configuration,
+ template: ((this.props.templates) ? Object.keys(this.props.templates)[0] : false),
+ theme: ((this.props.themes) ? Object.keys(this.props.themes)[0] : false),
+ layout: ((this.props.layouts) ? Object.keys(this.props.layouts)[0] : false),
+ sidebarOpen: true
+ };
+
+ this.updateConfiguration = this.updateConfiguration.bind(this);
+ this.updateTemplate = this.updateTemplate.bind(this);
+ this.updateTheme = this.updateTheme.bind(this);
+ this.updateLayout = this.updateLayout.bind(this);
+ this.downloadCard = this.downloadCard.bind(this);
+ this.handleSidebarChange = this.handleSidebarChange.bind(this);
+ }
+
+ updateConfiguration (configuration) {
+ this.setState({
+ configuration: configuration
+ });
+ }
+
+ updateTemplate (template) {
+ const configuration = this.props.cardKit.computeConfiguration({
+ template: template,
+ theme: this.state.theme,
+ layout: this.state.layout
+ });
+
+ this.setState({
+ configuration: configuration,
+ template: template
+ });
+ }
+
+ updateLayout (layout) {
+ const configuration = this.props.cardKit.computeConfiguration({
+ template: this.state.template,
+ theme: this.state.theme,
+ layout: layout
+ });
+
+ this.setState({
+ configuration: configuration,
+ layout: layout
+ });
+ }
+
+ updateTheme (theme) {
+ const configuration = this.props.cardKit.computeConfiguration({
+ template: this.state.template,
+ theme: theme,
+ layout: this.state.layout
+ });
+
+ this.setState({
+ configuration: configuration,
+ theme: theme
+ });
+ }
+
+ downloadCard () {
+ // This is dumb, but allows us to get at the SVG element on the DOM, which we can then send off for download
+ this.props.cardKit.download(2, this.refs.canvas.refs.card.refs.svg);
+ }
+
+ handleSidebarChange (state) {
+ this.setState({
+ sidebarOpen: state
+ });
+ }
+
+ componentWillReceiveProps (nextProps) {
+ this.updateConfiguration(nextProps.configuration);
+ }
+
+ render () {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+}
+
+UI.propTypes = {
+ templates: React.PropTypes.object,
+ layouts: React.PropTypes.object,
+ themes: React.PropTypes.object,
+ cardKit: React.PropTypes.object.isRequired,
+ configuration: React.PropTypes.object.isRequired
+}
+
+// Export
+module.exports = UI;
diff --git a/src/renderers/server/server.js b/src/renderers/server/server.js
new file mode 100644
index 0000000..d62ca85
--- /dev/null
+++ b/src/renderers/server/server.js
@@ -0,0 +1,70 @@
+// Dependencies
+const btoa = require('btoa');
+const svg2png = require('svg2png');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+const Card = require('../shared/Card');
+const CardKitRenderer = require('../shared/base');
+const helpers = require('../../helpers');
+
+/**
+ * @name CardKitServer
+ * @class Additional CardKit class used for rendering on the server
+ */
+class CardKitServer extends CardKitRenderer {
+
+ /**
+ * Constructor takes in an instance of CardKit and stores it for later user
+ *
+ * @param {CardKit} cardkit - An instance of CardKit
+ */
+ constructor (cardkit) {
+ // Ensure we're operating in a server environment
+ if (typeof document !== 'undefined') {
+ throw new Error('CardKitServer can only be used in a server environment');
+ }
+
+ super(cardkit);
+ }
+
+ /**
+ * Renders the card as an SVG string
+ *
+ * @return {string} The SVG string representation of the image
+ */
+ renderToString () {
+ const string = ReactDOMServer.renderToString(
+ React.createFactory(Card)({
+ configuration: this.computeConfiguration()
+ }),
+ {}
+ );
+
+ return string;
+ }
+
+ /**
+ * Renders the current configuration to an image
+ *
+ * @param {number} scale - The scale to output at
+ */
+ renderToImage (scale = 2) {
+ // Get the SVG in string-form
+ const string = this.renderToString();
+
+ // Encode the string into a data URI
+ const uri = helpers.svgToBase64(string, btoa);
+
+ // Convert to png and fulfill promise
+ return svg2png(uri, {
+ width: this.computeConfiguration().card.width * scale,
+ height: this.computeConfiguration().card.height * scale
+ })
+ .then((buffer) => {
+ return buffer.toString('base64');
+ });
+ }
+
+}
+
+module.exports = CardKitServer;
diff --git a/src/renderers/shared/Card.js b/src/renderers/shared/Card.js
new file mode 100644
index 0000000..a3c6779
--- /dev/null
+++ b/src/renderers/shared/Card.js
@@ -0,0 +1,298 @@
+// Libraries
+const React = require('react');
+
+// RVG Elements
+const {
+ SVG,
+ Text,
+ Rectangle,
+ Circle,
+ Ellipse,
+ Line,
+ Image,
+ Path,
+ LinearGradient
+} = require('rvg.js');
+
+/**
+ * @name Card
+ * @class The Card React element
+ */
+class Card extends React.Component {
+
+ /**
+ * Calculates the Y position of an element based on any attachments etc.
+ *
+ * @param {object} layers - The object of all layers
+ * @param {object} layer - The layer to calculate the Y position for
+ *
+ * @return {integer} The Y position
+ */
+ calculateYPosition (layers, layer) {
+ // Get the layer's currently configured Y position
+ let attachYLayerPosition = this.getLayerValue(layers, layer, 'y');
+
+ // If this is an object and has the attach property
+ if (typeof attachYLayerPosition === 'object' && attachYLayerPosition.attach !== 'undefined') {
+ // Get the layer to attach to
+ let attachYLayer = layers[layer.y.attach];
+
+ // Calculate the Y offset
+ let attachYLayerHeight = 0;
+ switch (attachYLayer.type) {
+ case 'text':
+ let attachYLayerText = attachYLayer.text.split('\n');
+ if (attachYLayer.text !== '') {
+ attachYLayerHeight = (attachYLayerText.length * (this.getLayerValue(layers, attachYLayer, 'lineHeight') || this.getLayerValue(layers, attachYLayer, 'fontSize')));
+ }
+ break;
+ default:
+ if (typeof this.getLayerValue(layers, attachYLayer, 'height') !== 'undefined') {
+ attachYLayerHeight = this.getLayerValue(layers, attachYLayer, 'height');
+ }
+ break;
+ }
+
+ // Add any additionally configured offset value
+ let attachYLayerOffset = (layer.y.offset || 0);
+
+ // Add them together and recursively call this function if the next layer has an attachment
+ attachYLayerPosition = attachYLayerHeight + this.calculateYPosition(layers, attachYLayer) + attachYLayerOffset;
+ }
+
+ // Return the value
+ return attachYLayerPosition;
+ }
+
+ /**
+ * Returns the value for a given layer property
+ *
+ * @param {object} layers - The object of all layers
+ * @param {object} layer - The layer to get the value for
+ * @param {object} key - The key of the value to get from the layer
+ *
+ * @return {mixed} The value of the property on the layer
+ */
+ getLayerValue (layers, layer, key) {
+ if (typeof layer[key] === 'function') {
+ return layer[key](layers, this.refs.svg);
+ }
+
+ return layer[key];
+ }
+
+ /**
+ * Compute the gradient elements to render to the
element
+ *
+ * @param {object} layers - The configuration object representing the layers that may require gradients
+ *
+ * @return {array} An array of React elements to render to the element
+ */
+ computeGradients (layers) {
+ const array = [];
+ let layer, gradient;
+
+ Object.keys(layers).forEach((key) => {
+ layer = layers[key];
+
+ if (this.getLayerValue(layers, layer, 'gradient')) {
+ gradient = this.getLayerValue(layers, layer, 'gradient');
+
+ array.push();
+ }
+ });
+
+ return array;
+ }
+
+ /**
+ * Compute the layers to render on the Card
+ *
+ * @param {object} layers - The configuration object representing the layers to render
+ *
+ * @return {array} An array of React elements to render on the card
+ */
+ computeLayers (layers) {
+ const array = [];
+ let layer;
+
+ // Iterate over the layers
+ Object.keys(layers).forEach((key) => {
+ layer = layers[key];
+
+ // If the layer is hidden, ignore it
+ if (this.getLayerValue(layers, layer, 'hidden') === true) {
+ return;
+ };
+
+ // Setup an object to contain our layer data
+ const layerData = {};
+
+ // Iterate over the properties of the layer, and compute the value (handles getters, functions, and object implementations such as `y`)
+ Object.keys(layer).forEach((k) => {
+ layerData[k] = this.getLayerValue(layers, layer, k);
+ });
+
+ // Make the fill value map to a gradient name, if a gradient has been configured
+ // See computeGradients() for the creation of gradient definitions
+ if (this.getLayerValue(layer, 'gradient', layers)) {
+ layerData.fill = `url(#${key})`;
+ }
+
+ // Switch over the layer type to ensure we create the card correctly
+ switch (layer.type) {
+ case 'text':
+ // Split by newline
+ const text = layerData.text.split('\n');
+
+ array.push(
+ {text}
+ );
+ break;
+ case 'image':
+ array.push();
+ break;
+ case 'rectangle':
+ array.push();
+ break;
+ case 'circle':
+ array.push();
+ break;
+ case 'ellipse':
+ array.push();
+ break;
+ case 'line':
+ array.push();
+ break;
+ case 'path':
+ array.push()
+ break;
+ }
+ });
+
+ return array;
+ }
+
+ /**
+ * Compute the fonts needed for the card
+ *
+ * @param {object} fonts - The fonts to use when rendering this card
+ *
+ * @return {array} An array of React elements to render in the element of the SVG
+ */
+ computeFonts (fonts = {}) {
+ const array = [];
+ let font;
+
+ Object.keys(fonts).forEach((key, index) => {
+ font = fonts[key];
+ array.push(
+
+ );
+ });
+
+ return array;
+ }
+
+ /**
+ * Renders the card
+ *
+ * @return {object} JSX for the React Component
+ */
+ render () {
+ // Grab our configuration
+ const { card, fonts, layers } = this.props.configuration;
+
+ // Compute layers, gradients and fonts
+ const layerArray = this.computeLayers(layers);
+ const gradientsArray = this.computeGradients(layers);
+ const fontsArray = this.computeFonts(fonts);
+
+ // Return
+ return (
+
+
+
+ );
+ }
+
+}
+
+Card.propTypes = {
+ configuration: React.PropTypes.shape({
+ card: React.PropTypes.object,
+ fonts: React.PropTypes.object,
+ layers: React.PropTypes.object
+ })
+}
+
+// Export
+module.exports = Card;
diff --git a/src/renderers/shared/base.js b/src/renderers/shared/base.js
new file mode 100644
index 0000000..9b1de40
--- /dev/null
+++ b/src/renderers/shared/base.js
@@ -0,0 +1,52 @@
+// Dependencies
+const CardKit = require('../../cardkit');
+
+/**
+ * @name CardKitRenderer
+ * @class
+ */
+class CardKitRenderer {
+
+ /**
+ * Constructor takes in an instance of CardKit and stores it for later user
+ *
+ * @param {CardKit} cardkit - An instance of CardKit
+ */
+ constructor (cardkit) {
+ // Ensure we recieve a CardKit object
+ if (!cardkit) {
+ throw new Error('An instance of CardKit was not provided');
+ }
+
+ // Validate the instance of CardKit supplied is good
+ if (
+ !(cardkit instanceof CardKit) &&
+ (cardkit.constructor.name !== 'CardKit')
+ ) {
+ throw new Error('Invalid CardKit object provided');
+ }
+
+ this.cardkit = cardkit;
+
+ this.cardkit.addRenderer(this);
+ }
+
+ /**
+ * Re-render
+ */
+ rerender () { return; }
+
+ /**
+ * Compute the configuration of the supplied CardKit object
+ *
+ * @param {object} options - The options to compute the configuration with
+ *
+ * @return {object} The configuration object
+ */
+ computeConfiguration (options = false) {
+ return this.cardkit.computeConfiguration(options);
+ }
+
+}
+
+module.exports = CardKitRenderer;
diff --git a/test/.jshintrc b/test/.jshintrc
deleted file mode 100644
index b1be025..0000000
--- a/test/.jshintrc
+++ /dev/null
@@ -1,36 +0,0 @@
-{
- "node": true,
- "browser": true,
- "esnext": true,
- "bitwise": true,
- "camelcase": true,
- "curly": true,
- "eqeqeq": true,
- "immed": true,
- "indent": 2,
- "latedef": true,
- "newcap": true,
- "noarg": true,
- "quotmark": "single",
- "regexp": true,
- "undef": true,
- "unused": true,
- "strict": true,
- "trailing": true,
- "smarttabs": true,
- "globals": {
- "after": false,
- "afterEach": false,
- "angular": false,
- "before": false,
- "beforeEach": false,
- "browser": false,
- "describe": false,
- "expect": false,
- "inject": false,
- "it": false,
- "jasmine": false,
- "spyOn": false
- }
-}
-
diff --git a/test/SVGToImage.spec.js b/test/SVGToImage.spec.js
new file mode 100644
index 0000000..804668c
--- /dev/null
+++ b/test/SVGToImage.spec.js
@@ -0,0 +1,125 @@
+// Import assertion + helper libs
+const chai = require('chai');
+const sinon = require('sinon');
+const jsdom = require('mocha-jsdom');
+
+// Tell chai that we'll be using the "should" style assertions.
+chai.should();
+
+// Import SVGToImage
+const SVGToImage = require('../src/renderers/dom/SVGToImage');
+
+describe('SVGToImage', () => {
+
+ describe('#constructor()', () => {
+
+ // Enable JSDom - this provides us a `document` that simulates the browser environment
+ jsdom();
+
+ it('requires an element', () => {
+ // Nothing provided
+ (() => {
+ new SVGToImage();
+ }).should.throw(Error, /No element provided/);
+
+ // Boolean provided
+ (() => {
+ new SVGToImage(true);
+ }).should.throw(Error, /Provided element is not a valid element/);
+
+ // String provided
+ (() => {
+ new SVGToImage('string');
+ }).should.throw(Error, /Provided element is not a valid element/);
+
+ // Empty object provided
+ (() => {
+ new SVGToImage({});
+ }).should.throw(Error, /Provided element is not a valid element/);
+
+ // Invalid object provided
+ (() => {
+ new SVGToImage({
+ this: 'is',
+ an: 'invalid',
+ object: true
+ });
+ }).should.throw(Error, /Provided element is not a valid element/);
+
+ // Invalid element type provided
+ (() => {
+ const svgElement = document.createElement('div');
+ document.body.appendChild(svgElement);
+
+ new SVGToImage(svgElement);
+ }).should.throw(Error, /Invalid element provided/);
+
+ // Valid element provided
+ (() => {
+ const svgElement = document.createElement('svg');
+ document.body.appendChild(svgElement);
+
+ new SVGToImage(svgElement);
+ }).should.not.throw(Error);
+ });
+
+
+ it('should store the supplied element', () => {
+ const svgElement = document.createElement('svg');
+ document.body.appendChild(svgElement);
+
+ const svgToImage = new SVGToImage(svgElement);
+
+ svgToImage.element.should.equal(svgElement);
+ });
+
+ });
+
+
+ describe('#_isValidElement()', () => {
+ let svgElement,
+ svgToImage;
+
+
+ // Enable JSDom - this provides us a `document` that simulates the browser environment
+ jsdom();
+
+
+ beforeEach(() => {
+ svgElement = document.createElement('svg');
+ document.body.appendChild(svgElement);
+
+ svgToImage = new SVGToImage(svgElement);
+ });
+
+
+ it('should return true when given a valid HTML element', () => {
+
+ svgToImage._isValidElement(svgElement).should.be.true;
+
+ });
+
+
+ it('should return false if given an invalid element', () => {
+
+ svgToImage._isValidElement({
+ nodeType: 1,
+ nodeName: {}
+ }).should.be.false;
+
+ svgToImage._isValidElement({
+ nodeType: 2,
+ nodeName: 'svg'
+ }).should.be.false;
+
+ svgToImage._isValidElement('string').should.be.false;
+
+ svgToImage._isValidElement(null).should.be.false;
+
+ svgToImage._isValidElement().should.be.false;
+
+ });
+
+ });
+
+});
\ No newline at end of file
diff --git a/test/cardkit.spec.js b/test/cardkit.spec.js
new file mode 100644
index 0000000..01e8cfb
--- /dev/null
+++ b/test/cardkit.spec.js
@@ -0,0 +1,534 @@
+// Import assertion + helper libs
+const chai = require('chai');
+const sinon = require('sinon');
+const jsdom = require('mocha-jsdom');
+
+// Import React libs
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactDOMServer = require('react-dom/server');
+
+// Tell chai that we'll be using the "should" style assertions.
+chai.should();
+
+function requireUncached(module){
+ delete require.cache[require.resolve(module)]
+ return require(module)
+}
+
+// Import CardKit
+const CardKit = require('../src/cardkit');
+const CardKitDOM = require('../src/renderers/dom/dom');
+const CardKitServer = require('../src/renderers/server/server');
+
+describe('cardkit', () => {
+
+ describe('#constructor()', () => {
+
+ it('requires a valid configuration object', () => {
+ // Nothing provided
+ (() => {
+ new CardKit();
+ }).should.throw(Error);
+
+ // Boolean provided
+ (() => {
+ new CardKit(true);
+ }).should.throw(Error);
+
+ // String provided
+ (() => {
+ new CardKit('string');
+ }).should.throw(Error);
+
+ // Empty object provided
+ (() => {
+ new CardKit({});
+ }).should.throw(Error);
+
+ // Invalid object provided #1
+ (() => {
+ new CardKit({
+ card: 'string'
+ });
+ }).should.throw(Error);
+
+ // Invalid object provided #2
+ (() => {
+ new CardKit({
+ card: {
+ width: 1000
+ }
+ });
+ }).should.throw(Error);
+
+ // Invalid object provided #3
+ (() => {
+ new CardKit({
+ card: {
+ height: 1000
+ }
+ });
+ }).should.throw(Error);
+
+ // Valid object provided
+ (() => {
+ new CardKit({
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ });
+ }).should.not.throw(Error);
+ });
+
+ it('only accepts valid theme, template and layout objects', () => {
+ const validConfiguration = {
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ };
+
+ // Invalid themes object provided
+ (() => {
+ new CardKit(validConfiguration, {
+ themes: 'invalid-themes'
+ });
+ }).should.throw(Error, /Invalid themes configuration object provided/);
+
+ // Invalid templates object provided
+ (() => {
+ new CardKit(validConfiguration, {
+ templates: 'invalid-templates'
+ });
+ }).should.throw(Error, /Invalid templates configuration object provided/);
+
+ // Invalid layouts object provided
+ (() => {
+ new CardKit(validConfiguration, {
+ layouts: 'invalid-layouts'
+ });
+ }).should.throw(Error, /Invalid layouts configuration object provided/);
+ });
+
+ it('should store the supplied configuration object', () => {
+ const configuration = {
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ };
+
+ const cardKit = new CardKit(configuration);
+
+ cardKit.configuration.should.equal(configuration);
+ });
+
+
+ it('should store the themes object if one is supplied', () => {
+ const configuration = {
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ };
+
+ const themes = {
+ 'Alt': {
+ card: {
+ fill: '#000'
+ }
+ }
+ };
+
+ const cardKit = new CardKit(configuration, {
+ themes: themes
+ });
+
+ cardKit.themes.should.equal(themes);
+ });
+
+
+ it('should store the layouts object if one is supplied', () => {
+ const configuration = {
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ };
+
+ const layouts = {
+ 'Alt': {
+ card: {
+ width: 800
+ }
+ }
+ };
+
+ const cardKit = new CardKit(configuration, {
+ layouts: layouts
+ });
+
+ cardKit.layouts.should.equal(layouts);
+ });
+
+ });
+
+
+ describe('#computeConfiguration()', () => {
+ let card,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+
+ it('should return the base configuration when no overrides are provided', () => {
+ card = new CardKit(configuration);
+
+ card.computeConfiguration().should.deep.equal(configuration);
+ });
+
+ it('should return the extended configuration when theme overrides are provided', () => {
+ card = new CardKit(configuration, {
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+ it('should return the extended configuration when layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ layout: 'Large'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ });
+
+ it('should return the extended configuration when both theme and layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ },
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ layout: 'Large',
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+ });
+
+
+ describe('#getRenderers()', () => {
+
+ let card,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+ jsdom({
+ useEach: true
+ });
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ });
+
+ it('returns an empty array of renderers if none are set', () => {
+ card.getRenderers().should.be.instanceof(Array).and.empty;
+ });
+
+ it('returns the renderers', () => {
+ const renderer = new CardKitDOM(card);
+
+ card.getRenderers().should.be.instanceof(Array).and.have.lengthOf(1);
+ });
+
+ it('returns the renderers #2', () => {
+ document = undefined;
+ const serverRenderer = new CardKitServer(card);
+
+ card.getRenderers().should.be.instanceof(Array).and.have.lengthOf(1);
+ });
+
+ });
+
+
+ describe('#addRenderer()', () => {
+ let card,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+ jsdom({
+ useEach: true
+ });
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ });
+
+ it('should add a valid renderer', () => {
+ const renderer = new CardKitDOM(card);
+ card.renderers = [];
+
+ card.getRenderers().should.be.instanceof(Array).and.be.empty;
+
+ card.addRenderer(renderer);
+
+ card.getRenderers().should.be.instanceof(Array).and.have.length(1);
+ });
+
+ it('should throw an error when adding a renderer tied to another instance of CardKit', () => {
+ const otherCard = new CardKit(configuration);
+
+ const renderer = new CardKitDOM(otherCard);
+
+ card.getRenderers().should.be.instanceof(Array).and.be.empty;
+
+ (() => {
+ card.addRenderer(renderer);
+ }).should.throw(Error, /Invalid renderer object provided/);
+ });
+
+ it('should throw an error when adding an invalid renderer', () => {
+ (() => {
+ card.addRenderer({
+ cardkit: 'not-a-cardkit-object'
+ });
+ }).should.throw(Error, /Invalid renderer object provided/);
+ });
+ });
+
+
+ describe('#updateConfiguration()', () => {
+ let card,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ },
+ newConfiguration = {
+ card: {
+ width: 500,
+ height: 100,
+ fill: '#FFF'
+ },
+ layers: {
+ text: {
+ type: 'text',
+ name: 'Text',
+ text: '12345',
+ x: 0,
+ y: 0,
+ fill: '#000000'
+ }
+ }
+ },
+ newOverrides = {
+ themes: {
+ 'One': {
+ layers: {
+ text: {
+ fill: '#FFFFFF'
+ }
+ }
+ },
+ 'Two': {
+ layers: {
+ text: {
+ fill: '#333333'
+ }
+ }
+ }
+ },
+ templates: {
+ 'Template #1': {
+ layers: {
+ text: {
+ hidden: false
+ }
+ }
+ },
+ 'Template #2': {
+ layers: {
+ text: {
+ hidden: true
+ }
+ }
+ }
+ },
+ layouts: {
+ 'Rectangle': {
+ card: {
+ height: 450,
+ width: 1000
+ }
+ },
+ 'Square': {
+ card: {
+ height: 1000,
+ width: 1000
+ }
+ }
+ }
+ }
+
+ jsdom({
+ useEach: true
+ });
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ });
+
+
+ it('should change the configuration when called', () => {
+ // Call updateConfiguration() providing the new configuration
+ card.updateConfiguration(newConfiguration);
+
+ // Assert the card's configuration has been updated
+ card.configuration.should.equal(newConfiguration);
+ });
+
+
+ it('should change the overrides when called', () => {
+ // Call updateConfiguration() providing the new configuration
+ card.updateConfiguration(newConfiguration, newOverrides);
+
+ // Assert the card's theme overrides have been updated
+ card.themes.should.equal(newOverrides.themes);
+
+ // Assert the card's template overrides have been updated
+ card.templates.should.equal(newOverrides.templates);
+
+ // Assert the card's layout overrides have been updated
+ card.layouts.should.equal(newOverrides.layouts);
+ });
+
+
+ it('should rerender each of its attached DOM renderers', () => {
+ const domRenderer = new CardKitDOM(card);
+
+ const renderers = card.getRenderers();
+
+ renderers.forEach((renderer) => {
+ sinon.stub(renderer, 'rerender');
+
+ // Call updateConfiguration() providing the new configuration
+ card.updateConfiguration(newConfiguration);
+
+ // Assert rerender() was called on the renderer
+ renderer.rerender.calledOnce.should.be.true;
+
+ renderer.rerender.restore();
+ });
+ });
+
+
+ it('should not rerender its attached server renderers', () => {
+ // Provide a fake method to verify it doesn't get called
+ CardKitServer.prototype.rerender = () => {};
+
+ document = undefined;
+
+ const serverRenderer = new CardKitServer(card);
+
+ const renderers = card.getRenderers();
+
+ renderers.forEach((renderer) => {
+ sinon.stub(renderer, 'rerender');
+
+ // Call updateConfiguration() providing the new configuration
+ card.updateConfiguration(newConfiguration);
+
+ // Assert rerender() was called on the renderer
+ renderer.rerender.notCalled.should.be.true;
+
+ renderer.rerender.restore();
+ });
+
+ // Remove our fake method
+ CardKitServer.prototype.rerender = null;
+ });
+
+
+ it('should not rerender when the renderer flag is set to false', () => {
+ const domRenderer = new CardKitDOM(card);
+
+ const renderers = card.getRenderers();
+
+ renderers.forEach((renderer) => {
+ sinon.stub(renderer, 'rerender');
+
+ // Call updateConfiguration() providing the new configuration
+ card.updateConfiguration(newConfiguration, false, false);
+
+ // Assert rerender() was called on the renderer
+ renderer.rerender.notCalled.should.be.true;
+
+ renderer.rerender.restore();
+ });
+ });
+
+ });
+
+});
\ No newline at end of file
diff --git a/test/dom.spec.js b/test/dom.spec.js
new file mode 100644
index 0000000..b9f98e2
--- /dev/null
+++ b/test/dom.spec.js
@@ -0,0 +1,383 @@
+// Import assertion + helper libs
+const chai = require('chai');
+const sinon = require('sinon');
+const jsdom = require('mocha-jsdom');
+
+// Import React libs
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactDOMServer = require('react-dom/server');
+
+// Tell chai that we'll be using the "should" style assertions.
+chai.should();
+
+function requireUncached(module){
+ delete require.cache[require.resolve(module)]
+ return require(module)
+}
+
+// Import CardKit + CardKitDOM
+const CardKit = require('../src/cardkit');
+const CardKitDOM = require('../src/renderers/dom/dom');
+
+describe('cardkit/dom', () => {
+
+ describe('#constructor()', () => {
+
+ // Enable JSDom
+ jsdom({
+ useEach: true
+ });
+
+ it('requires a valid instance of CardKit', () => {
+ // Nothing provided
+ (() => {
+ new CardKitDOM();
+ }).should.throw(Error);
+
+ // Boolean provided
+ (() => {
+ new CardKitDOM(true);
+ }).should.throw(Error);
+
+ // String provided
+ (() => {
+ new CardKitDOM('string');
+ }).should.throw(Error);
+
+ // Empty object provided
+ (() => {
+ new CardKitDOM({});
+ }).should.throw(Error);
+
+ // Invalid object provided #1
+ (() => {
+ new CardKitDOM({
+ card: 'string'
+ });
+ }).should.throw(Error);
+
+ // Other invalid object type provided
+ (() => {
+ new CardKitDOM(new Error());
+ }).should.throw(Error);
+
+ // Valid object provided
+ (() => {
+ const cardKit = new CardKit({
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ });
+
+ new CardKitDOM(cardKit);
+ }).should.not.throw(Error);
+ });
+
+ it('throws an error if run outside of a browser environment', () => {
+ (() => {
+ document = undefined;
+
+ new CardKitDOM();
+ }).should.throw(Error, /CardKitDOM can only be used in a browser environment/);
+ });
+
+ it('should store the supplied CardKit object', () => {
+ const cardKit = new CardKit({
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ });
+
+ const renderer = new CardKitDOM(cardKit);
+
+ renderer.cardkit.should.equal(cardKit);
+ });
+
+ });
+
+
+ describe('#computeConfiguration()', () => {
+ let card,
+ renderer,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+ // Enable JSDom
+ jsdom({
+ useEach: true
+ });
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+
+ renderer = new CardKitDOM(card);
+ });
+
+
+ it('should call computeConfiguration() on the CardKit object that was passed into it', () => {
+ sinon.stub(card, 'computeConfiguration');
+
+ renderer.computeConfiguration()
+
+ card.computeConfiguration.calledOnce.should.be.true;
+ });
+
+
+ it('should return the extended configuration when theme overrides are provided', () => {
+ card = new CardKit(configuration, {
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ renderer = new CardKitDOM(card);
+
+ const returnedConfiguration = renderer.computeConfiguration({
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+
+ it('should return the extended configuration when layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ }
+ });
+
+ renderer = new CardKitDOM(card);
+
+ const returnedConfiguration = renderer.computeConfiguration({
+ layout: 'Large'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ });
+
+
+ it('should return the extended configuration when both theme and layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ },
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ renderer = new CardKitDOM(card);
+
+ const returnedConfiguration = renderer.computeConfiguration({
+ layout: 'Large',
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+ });
+
+
+ describe('#renderUI()', () => {
+ let card,
+ renderer,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+
+ // Enable JSDom - `renderUI()` requires a DOM
+ jsdom({
+ useEach: true
+ });
+
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ renderer = new CardKitDOM(card);
+ });
+
+
+ it('should render the UI when called', () => {
+ // Setup valid container element
+ const appElement = document.createElement('div');
+ appElement.setAttribute('id', 'app');
+ document.body.appendChild(appElement);
+
+ // Stub ReactDOM.render(), which we'll check gets called
+ sinon.stub(ReactDOM, 'render');
+
+ // Render the UI
+ renderer.renderUI('app');
+
+ // Assert ReactDOM.render() is called
+ ReactDOM.render.calledOnce.should.be.true;
+
+ // Assert ReactDOM.render() gets the DOM element passed in
+ ReactDOM.render.calledWithMatch(appElement).should.be.true;
+
+ // Unwrap ReactDOM.render() for use later
+ ReactDOM.render.restore();
+ });
+
+
+ it('should return an error when no element ID is provided', () => {
+ (() => {
+ renderer.renderUI();
+ }).should.throw(Error, /Invalid element ID provided/);
+ });
+
+
+ it('should return an error when an invalid element ID is provided', () => {
+ (() => {
+ renderer.renderUI('non-existant-element');
+ }).should.throw(Error, /Invalid element ID provided/);
+ });
+
+
+ it('should store the element ID', () => {
+ // Setup valid container element
+ const appElement = document.createElement('div');
+ appElement.setAttribute('id', 'app');
+ document.body.appendChild(appElement);
+
+ // Stub ReactDOM.render(), which we'll check gets called
+ sinon.stub(ReactDOM, 'render');
+
+ // Render the UI
+ renderer.renderUI('app');
+
+ // Assert the element ID is stored
+ renderer.renderedUIID.should.equal('app');
+
+ // Unwrap ReactDOM.render() for use later
+ ReactDOM.render.restore();
+ });
+
+ });
+
+
+
+ describe('#renderCard()', () => {
+ let card,
+ renderer,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+
+ // Enable JSDom - `renderCard()` requires a DOM
+ jsdom({
+ useEach: true
+ });
+
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ renderer = new CardKitDOM(card);
+ });
+
+
+ it('should render the card when called', () => {
+ // Setup valid container element
+ const appElement = document.createElement('div');
+ appElement.setAttribute('id', 'card');
+ document.body.appendChild(appElement);
+
+ // Stub ReactDOM.render(), which we'll check gets called
+ sinon.stub(ReactDOM, 'render');
+
+ // Render the card
+ renderer.renderCard('card');
+
+ // Assert ReactDOM.render() is called
+ ReactDOM.render.calledOnce.should.be.true;
+
+ // Assert ReactDOM.render() gets the DOM element passed in
+ ReactDOM.render.calledWithMatch(appElement).should.be.true;
+
+ // Unwrap ReactDOM.render() for use later
+ ReactDOM.render.restore();
+ });
+
+
+ it('should return an error when no element ID is provided', () => {
+ (() => {
+ renderer.renderCard();
+ }).should.throw(Error, /Invalid element ID provided/);
+ });
+
+
+ it('should return an error when an invalid element ID is provided', () => {
+ (() => {
+ renderer.renderCard('non-existant-element');
+ }).should.throw(Error, /Invalid element ID provided/);
+ });
+
+
+ it('should store the element ID', () => {
+ // Setup valid container element
+ const appElement = document.createElement('div');
+ appElement.setAttribute('id', 'card');
+ document.body.appendChild(appElement);
+
+ // Stub ReactDOM.render(), which we'll check gets called
+ sinon.stub(ReactDOM, 'render');
+
+ // Render the card
+ renderer.renderCard('card');
+
+ // Assert the element ID is stored
+ renderer.renderedCardID.should.equal('card');
+
+ // Unwrap ReactDOM.render() for use later
+ ReactDOM.render.restore();
+ });
+
+ });
+
+ describe('#download()', () => {
+
+ });
+
+});
\ No newline at end of file
diff --git a/test/karma.conf.js b/test/karma.conf.js
deleted file mode 100644
index 166f19f..0000000
--- a/test/karma.conf.js
+++ /dev/null
@@ -1,75 +0,0 @@
-// Karma configuration
-// http://karma-runner.github.io/0.12/config/configuration-file.html
-// Generated on 2014-10-30 using
-// generator-karma 0.8.3
-
-module.exports = function(config) {
- 'use strict';
-
- config.set({
- // enable / disable watching file and executing tests whenever any file changes
- autoWatch: true,
-
- // base path, that will be used to resolve files and exclude
- basePath: '../',
-
- // testing framework to use (jasmine/mocha/qunit/...)
- frameworks: ['jasmine'],
-
- // list of files / patterns to load in the browser
- files: [
- 'bower_components/angular/angular.js',
- 'bower_components/angular-mocks/angular-mocks.js',
- 'bower_components/angular-animate/angular-animate.js',
- 'bower_components/angular-cookies/angular-cookies.js',
- 'bower_components/angular-resource/angular-resource.js',
- 'bower_components/angular-route/angular-route.js',
- 'bower_components/angular-sanitize/angular-sanitize.js',
- 'bower_components/angular-touch/angular-touch.js',
- 'app/scripts/**/*.js',
- 'test/mock/**/*.js',
- 'test/spec/**/*.js'
- ],
-
- // list of files / patterns to exclude
- exclude: [],
-
- // web server port
- port: 8080,
-
- // Start these browsers, currently available:
- // - Chrome
- // - ChromeCanary
- // - Firefox
- // - Opera
- // - Safari (only Mac)
- // - PhantomJS
- // - IE (only Windows)
- browsers: [
- 'PhantomJS'
- ],
-
- // Which plugins to enable
- plugins: [
- 'karma-phantomjs-launcher',
- 'karma-jasmine'
- ],
-
- // Continuous Integration mode
- // if true, it capture browsers, run tests and exit
- singleRun: false,
-
- colors: true,
-
- // level of logging
- // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
- logLevel: config.LOG_INFO,
-
- // Uncomment the following lines if you are using grunt's server to run the tests
- // proxies: {
- // '/': 'http://localhost:9000/'
- // },
- // URL root prevent conflicts with the site root
- // urlRoot: '_karma_'
- });
-};
diff --git a/test/server.spec.js b/test/server.spec.js
new file mode 100644
index 0000000..6bd67f1
--- /dev/null
+++ b/test/server.spec.js
@@ -0,0 +1,227 @@
+// Import assertion + helper libs
+const chai = require('chai');
+const sinon = require('sinon');
+const jsdom = require('mocha-jsdom');
+
+// Import React libs
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactDOMServer = require('react-dom/server');
+
+// Tell chai that we'll be using the "should" style assertions.
+chai.should();
+
+function requireUncached(module){
+ delete require.cache[require.resolve(module)]
+ return require(module)
+}
+
+// Import CardKit
+const CardKit = require('../src/cardkit');
+const CardKitServer = require('../src/renderers/server/server');
+
+describe('cardkit/server', () => {
+
+ describe('#constructor()', () => {
+
+ it('requires a valid instance of CardKit', () => {
+ // Nothing provided
+ (() => {
+ new CardKit();
+ }).should.throw(Error);
+
+ // Boolean provided
+ (() => {
+ new CardKit(true);
+ }).should.throw(Error);
+
+ // String provided
+ (() => {
+ new CardKit('string');
+ }).should.throw(Error);
+
+ // Empty object provided
+ (() => {
+ new CardKit({});
+ }).should.throw(Error);
+
+ // Invalid object provided #1
+ (() => {
+ new CardKit({
+ card: 'string'
+ });
+ }).should.throw(Error);
+
+ // Invalid object provided #2
+ (() => {
+ new CardKit({
+ card: {
+ width: 1000
+ }
+ });
+ }).should.throw(Error);
+
+ // Invalid object provided #3
+ (() => {
+ new CardKit({
+ card: {
+ height: 1000
+ }
+ });
+ }).should.throw(Error);
+
+ // Valid object provided
+ (() => {
+ new CardKit({
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ });
+ }).should.not.throw(Error);
+ });
+
+ it('should store the supplied CardKit object', () => {
+ const configuration = {
+ card: {
+ width: 800,
+ height: 600,
+ fill: '#FFF'
+ }
+ };
+
+ const cardKit = new CardKit(configuration);
+
+ cardKit.configuration.should.equal(configuration);
+ });
+
+ });
+
+
+ describe('#computeConfiguration()', () => {
+ let card,
+ renderer,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+ it('should return the base configuration when no options are provided', () => {
+ card = new CardKit(configuration);
+ renderer = new CardKitServer(card);
+
+ renderer.computeConfiguration().should.deep.equal(configuration);
+ });
+
+ it('should return the extended configuration when theme overrides are provided', () => {
+ card = new CardKit(configuration, {
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+ it('should return the extended configuration when layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ layout: 'Large'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ });
+
+ it('should return the extended configuration when both theme and layout overrides are provided', () => {
+ card = new CardKit(configuration, {
+ layouts: {
+ 'Large': {
+ card: {
+ height: 1000
+ }
+ }
+ },
+ themes: {
+ 'Alt': {
+ card: {
+ fill: '#FFF'
+ }
+ }
+ }
+ });
+
+ const returnedConfiguration = card.computeConfiguration({
+ layout: 'Large',
+ theme: 'Alt'
+ });
+
+ returnedConfiguration.card.height.should.equal(1000);
+ returnedConfiguration.card.fill.should.equal('#FFF');
+ });
+
+ });
+
+
+ describe('#renderToString()', () => {
+ let card,
+ renderer,
+ configuration = {
+ card: {
+ width: 1000,
+ height: 462,
+ fill: '#4da5bd'
+ }
+ };
+
+ beforeEach(() => {
+ // Create a new CardKit object before every test.
+ card = new CardKit(configuration);
+ renderer = new CardKitServer(card);
+ });
+
+ it('should return call ReactDOMServer.renderToString', () => {
+ sinon.stub(ReactDOMServer, 'renderToString');
+
+ renderer.renderToString();
+
+ ReactDOMServer.renderToString.calledOnce.should.be.true;
+
+ ReactDOMServer.renderToString.restore();
+ });
+
+ it('should return a string', () => {
+ const stub = sinon.stub(ReactDOMServer, 'renderToString');
+ stub.returns('string');
+
+ const string = renderer.renderToString();
+
+ string.should.equal('string');
+
+ ReactDOMServer.renderToString.restore();
+ });
+
+ });
+
+
+});
\ No newline at end of file
diff --git a/test/spec/controllers/main.js b/test/spec/controllers/main.js
deleted file mode 100644
index 51302f1..0000000
--- a/test/spec/controllers/main.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-describe('Controller: MainCtrl', function () {
-
- // load the controller's module
- beforeEach(module('cardkitApp'));
-
- var MainCtrl,
- scope;
-
- // Initialize the controller and a mock scope
- beforeEach(inject(function ($controller, $rootScope) {
- scope = $rootScope.$new();
- MainCtrl = $controller('MainCtrl', {
- $scope: scope
- });
- }));
-});
diff --git a/test/spec/directives/filleditor.js b/test/spec/directives/filleditor.js
deleted file mode 100644
index af27e20..0000000
--- a/test/spec/directives/filleditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: fillEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the fillEditor directive');
- }));
-});
diff --git a/test/spec/directives/filtereditor.js b/test/spec/directives/filtereditor.js
deleted file mode 100644
index 52672b1..0000000
--- a/test/spec/directives/filtereditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: filterEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the filterEditor directive');
- }));
-});
diff --git a/test/spec/directives/fixedscroll.js b/test/spec/directives/fixedscroll.js
deleted file mode 100644
index 7988654..0000000
--- a/test/spec/directives/fixedscroll.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Directive: fixedScroll', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-});
diff --git a/test/spec/directives/fontfamilyeditor.js b/test/spec/directives/fontfamilyeditor.js
deleted file mode 100644
index 32ffa7f..0000000
--- a/test/spec/directives/fontfamilyeditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: fontfamilyEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the fontfamilyEditor directive');
- }));
-});
diff --git a/test/spec/directives/fontsizeeditor.js b/test/spec/directives/fontsizeeditor.js
deleted file mode 100644
index 9ae17dc..0000000
--- a/test/spec/directives/fontsizeeditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: fontsizeEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the fontsizeEditor directive');
- }));
-});
diff --git a/test/spec/directives/imageeditor.js b/test/spec/directives/imageeditor.js
deleted file mode 100644
index 5f708d6..0000000
--- a/test/spec/directives/imageeditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: imageEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the imageEditor directive');
- }));
-});
diff --git a/test/spec/directives/opacityeditor.js b/test/spec/directives/opacityeditor.js
deleted file mode 100644
index 00f96a6..0000000
--- a/test/spec/directives/opacityeditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: opacityEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the opacityEditor directive');
- }));
-});
diff --git a/test/spec/directives/sizeeditor.js b/test/spec/directives/sizeeditor.js
deleted file mode 100644
index aff5e78..0000000
--- a/test/spec/directives/sizeeditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: sizeEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the sizeEditor directive');
- }));
-});
diff --git a/test/spec/directives/snapsvg.js b/test/spec/directives/snapsvg.js
deleted file mode 100644
index 6995e62..0000000
--- a/test/spec/directives/snapsvg.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Directive: snapSvg', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-});
diff --git a/test/spec/directives/textanchoreditor.js b/test/spec/directives/textanchoreditor.js
deleted file mode 100644
index edb3e4b..0000000
--- a/test/spec/directives/textanchoreditor.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-describe('Directive: textanchorEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-
- it('should make hidden element visible', inject(function ($compile) {
- element = angular.element('');
- element = $compile(element)(scope);
- expect(element.text()).toBe('this is the textanchorEditor directive');
- }));
-});
diff --git a/test/spec/directives/texteditor.js b/test/spec/directives/texteditor.js
deleted file mode 100644
index 4d3fecc..0000000
--- a/test/spec/directives/texteditor.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Directive: textEditor', function () {
-
- // load the directive's module
- beforeEach(module('cardkitApp'));
-
- var element,
- scope;
-
- beforeEach(inject(function ($rootScope) {
- scope = $rootScope.$new();
- }));
-});
diff --git a/test/spec/services/savesvgaspng.js b/test/spec/services/savesvgaspng.js
deleted file mode 100644
index 4aa2b19..0000000
--- a/test/spec/services/savesvgaspng.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Service: saveSvgAsPng', function () {
-
- // load the service's module
- beforeEach(module('cardkitApp'));
-
- // instantiate service
- var saveSvgAsPng;
- beforeEach(inject(function (_saveSvgAsPng_) {
- saveSvgAsPng = _saveSvgAsPng_;
- }));
-
-});
diff --git a/test/spec/services/snapsvg.js b/test/spec/services/snapsvg.js
deleted file mode 100644
index 2d42efc..0000000
--- a/test/spec/services/snapsvg.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Service: snapSVG', function () {
-
- // load the service's module
- beforeEach(module('cardkitApp'));
-
- // instantiate service
- var snapSVG;
- beforeEach(inject(function (_snapSVG_) {
- snapSVG = _snapSVG_;
- }));
-
-});
diff --git a/test/spec/services/themeconfigprovider.js b/test/spec/services/themeconfigprovider.js
deleted file mode 100644
index 4dd56f9..0000000
--- a/test/spec/services/themeconfigprovider.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-
-describe('Service: themeConfigProvider', function () {
-
- // load the service's module
- beforeEach(module('cardkitApp'));
-
- // instantiate service
- var themeConfigProvider;
- beforeEach(inject(function (_themeConfigProvider_) {
- themeConfigProvider = _themeConfigProvider_;
- }));
-
-});
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..3fef19e
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,44 @@
+// Use minimist to help us with argument parsing
+const args = require('minimist')(process.argv.slice(2));
+
+
+// Load the base configuration file
+const base = require('./webpack/base.config');
+
+
+// Set a dev env by default
+let env = 'dev';
+
+// Iterate over the supplied env argument and map it to a Webpack configuration file found in ./webpack
+if(args.env) {
+ switch(args.env) {
+ case 'dist-dom': // Generates the DOM version for use via require('cardkit/dom');
+ env = 'dist-dom';
+ break;
+ case 'dist-server': // Generates the server version for use via require('cardkit/server');
+ env = 'dist-server';
+ break;
+ case 'dist-core': // Generates the core version for use via require('cardkit');
+ env = 'dist-core';
+ break;
+ case 'dist-dom-script': // Generates the DOM version for use via 
');
+ process.exit();
+ })
+ .catch((e) => {
+ console.log('[ERR]', e);
+ process.exit();
+ });
+
+
+## APIs
+
+### CardKit
+
+#### `new CardKit(configuration, options)`
+
+> Initialisation. Pass in a required configuration object, and optional themes, templates and layouts
+
+#### `cardkit.updateConfiguration(configuration, options, rerender)`
+
+> Updates the configuration in your instance of CardKit. Can optionally rerender with a flag if previously rendered (supported in CardKitDOM).
+
+#### `cardkit.computeConfiguration(options)`
+
+> Computes a configuaration object, optionally accepting a named template, theme and layout. These get merged into the base configuration and returned.
+
+
+### CardKitDOM
+
+#### `new CardKitDOM(cardkit)`
+
+> Accepts an instance of CardKit and initialises the renderer
+
+#### `cardkit.renderUI(id, overrides)`
+
+> Renders the include user interface to the specified DOM element
+
+#### `cardkit.renderCard(id)`
+
+> Renders just the card in it's SVG form to the specified DOM element
+
+#### `cardkit.rerender()`
+
+> Will re-render the existing UI or card
+
+#### `cardkit.download(scale, element)`
+
+> Downloads the image to your local machine. Accepts a scale (default=2), and an element to grab from. If not provided it will fall back to the existing card being rendererd (if `renderCard()` was used).
+
+
+### CardKitServer
+
+#### `new CardKitDOM(cardkit)`
+
+> Accepts an instance of CardKit and initialises the renderer
+
+#### `cardkit.renderToString()`
+
+> Renders the card to a HTML string (e.g. `