|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Chiasm Boilerplate</title> |
|
|
|
<!-- A functional reactive model library. github.com/curran/model --> |
|
<script src="http://curran.github.io/model/cdn/model-v0.2.4.js"></script> |
|
|
|
<!-- Tha common base for Chiasm components (depends on model.js). --> |
|
<script src="http://chiasm-project.github.io/chiasm-component/chiasm-component-v0.2.1.js"></script> |
|
|
|
<!-- This script defines the ColoredRectangle component. --> |
|
<script> |
|
|
|
// This component draws a colored rectangle using D3.js. |
|
function ColoredRectangle() { |
|
|
|
// Construct a Chiasm component instance, |
|
// specifying default values for public properties. |
|
var my = new ChiasmComponent({ |
|
|
|
// The color of the rectangle, a CSS color string. |
|
color: "white" |
|
|
|
}); |
|
|
|
// Initialize an SVG Group element for containing this component. |
|
var svg = my.initSVG(); |
|
|
|
// Add a background rectangle to the SVG Group element using D3. |
|
var rect = d3.select(svg).append("rect"); |
|
|
|
// Set the rectangle color to be the configured color. |
|
my.when("color", function (color){ |
|
rect.attr("fill", color); |
|
}); |
|
|
|
// Respond to dynamic width and height. |
|
// "box" is a special property set by chiasm-layout. |
|
my.when("box", function (box) { |
|
|
|
// Set the size of the background rectangle. |
|
rect |
|
.attr("width", box.width) |
|
.attr("height", box.height); |
|
|
|
}); |
|
|
|
return my; |
|
} |
|
</script> |
|
|
|
|
|
<!-- Chiasm.js depends on Lodash, D3.js, and Model.js. --> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
|
|
<!-- Load Chiasm.js and layout plugin. github.com/chiasm-project --> |
|
<script src="http://chiasm-project.github.io/chiasm/chiasm-v0.2.0.js"></script> |
|
<script src="http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.2.js"></script> |
|
|
|
<!-- Make the Chiasm container fill the page and have a 20px black border. --> |
|
<style> |
|
|
|
body { |
|
background-color: black; |
|
} |
|
|
|
#chiasm-container { |
|
background-color: white; |
|
position: fixed; |
|
left: 20px; |
|
right: 20px; |
|
top: 20px; |
|
bottom: 20px; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<!-- Chiasm component DOM elements will be injected into this div. --> |
|
<div id="chiasm-container"></div> |
|
|
|
<!-- This is the main program that sets up the Chiasm application. --> |
|
<script> |
|
|
|
// Create a new Chiasm instance. |
|
var chiasm = new Chiasm(); |
|
|
|
// Register plugins that the configuration can access. |
|
chiasm.plugins.layout = ChiasmLayout; |
|
chiasm.plugins.coloredRectangle = ColoredRectangle; |
|
|
|
// Set the Chaism configuration. |
|
chiasm.setConfig({ |
|
"layout": { |
|
"plugin": "layout", |
|
"state": { |
|
"containerSelector": "#chiasm-container", |
|
"layout": { |
|
"orientation": "vertical", |
|
"children": [ |
|
"A", { |
|
"orientation": "horizontal", |
|
"children": [ |
|
"B", { |
|
"orientation": "vertical", |
|
"children": [ "C", "D" ] |
|
}, |
|
"E" |
|
] |
|
} |
|
] |
|
} |
|
} |
|
}, |
|
"A": { "plugin": "coloredRectangle" }, |
|
"B": { |
|
"plugin": "coloredRectangle", |
|
"state": { "color": "#a8f0ff" } |
|
}, |
|
"C": { |
|
"plugin": "coloredRectangle", |
|
"state": { "color": "#ffe2a8" } |
|
}, |
|
"D": { |
|
"plugin": "coloredRectangle", |
|
"state": { "color": "#99e2c8" } |
|
}, |
|
"E": { |
|
"plugin": "coloredRectangle", |
|
"state": { "color": "#a8ffd0" } |
|
} |
|
}); |
|
|
|
// Here's a simpler configuration to try, including just a single component instance. |
|
//chiasm.setConfig({ |
|
// "layout": { |
|
// "plugin": "layout", |
|
// "state": { |
|
// "containerSelector": "#chiasm-container", |
|
// "layout": "visualization" |
|
// } |
|
// }, |
|
// "visualization": { |
|
// "plugin": "coloredRectangle", |
|
// "state": { |
|
// "color": "blue" |
|
// } |
|
// } |
|
//}); |
|
</script> |
|
</body> |
|
</html> |
