Boilerplate starter code for Chiasm.
This example demonstrates the minimal code required to get started developing your own Chiasm applications and custom plugins.
The Chiasm plugins demonstrated here are:
chiasm-layout A Chiasm
plugin for nested box layout. You can use this plugin to impose a grid system
of rectangles on any collection of Chiasm components.
coloredRectangle An example custom Chiasm component that draws a colored
rectangle using D3.js and
SVG.
MIT License
| { | |
| "layout": { | |
| "plugin": "layout", | |
| "state": { | |
| "containerSelector": "#chiasm-container", | |
| "layout": { | |
| "orientation": "vertical", | |
| "children": [ | |
| "A", | |
| { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "B", | |
| { | |
| "orientation": "vertical", | |
| "children": [ | |
| "C", | |
| { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "D", | |
| "E", | |
| "F" | |
| ] | |
| } | |
| ] | |
| }, | |
| "G" | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| "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": "#99e2c8" | |
| } | |
| }, | |
| "F": { | |
| "plugin": "coloredRectangle", | |
| "state": { | |
| "color": "#99e2c8" | |
| } | |
| }, | |
| "G": { | |
| "plugin": "coloredRectangle", | |
| "state": { | |
| "color": "#a8ffd0" | |
| } | |
| } | |
| } |
| // This is an example Chaism plugin that uses D3. A colored rectangle is | |
| // created with an X in the background and text in the foreground. The X in the | |
| // background is interactive. Clicking and dragging it updates `lineWidth`. | |
| function ColoredRectangle() { | |
| // Construct a Chiasm component instance, | |
| // specifying default values for public properties. | |
| var my = ChiasmComponent({ | |
| // The color of the rectangle, a CSS color string. | |
| color: "white" | |
| }); | |
| // Expose a div element that will be added to the Chiasm container. | |
| // This is a special property that chiasm-layout looks for. | |
| my.el = document.createElement("div"); | |
| // Create an SVG DOM element using D3. | |
| var svg = d3.select(my.el).append("svg"); | |
| // Add a background rectangle to the SVG. | |
| svg.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0); | |
| // Set the rectangle color to be the configured color. | |
| my.when("color", function (color){ | |
| svg.select("rect").attr("fill", color); | |
| }); | |
| // Respond to width and height changes. | |
| // "box" is a special property that gets set by chiasm-layout. | |
| my.when("box", function (box) { | |
| // Set the size of the SVG element. | |
| svg | |
| .attr("width", box.width) | |
| .attr("height", box.height); | |
| // Set the size of the background rectangle. | |
| svg.select("rect") | |
| .attr("width", box.width) | |
| .attr("height", box.height); | |
| }); | |
| return my; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Chiasm Boilerplate</title> | |
| <!-- By Curran Kelleher September 2015. Released under MIT Licence. --> | |
| <!-- Chiasm 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> | |
| <!-- A functional reactive model library. github.com/curran/model --> | |
| <script src="http://curran.github.io/model/cdn/model-v0.2.4.js"></script> | |
| <!-- Chiasm core and plugins. 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-component/chiasm-component-v0.2.0.js"></script> | |
| <script src="http://chiasm-project.github.io/chiasm-layout/chiasm-layout-v0.2.1.js"></script> | |
| <!-- Custom Chiasm plugins for this example. --> | |
| <script src="coloredRectangle.js"></script> | |
| <!-- Make the Chiasm container fill the page and have a 20px black border. --> | |
| <style> | |
| body { | |
| background-color: black; | |
| } | |
| /* Make the Chiasm container fill the page with a 20px margin. */ | |
| #chiasm-container { | |
| background-color: white; | |
| position: fixed; | |
| left: 20px; | |
| right: 20px; | |
| top: 20px; | |
| bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- The Chiasm Layout Plugin will inject components into this div. --> | |
| <div id="chiasm-container"></div> | |
| <script> | |
| // Create a new Chiasm instance. | |
| var chiasm = new Chiasm(); | |
| // Register plugins that configurations can access. | |
| chiasm.plugins.layout = ChiasmLayout; | |
| chiasm.plugins.coloredRectangle = ColoredRectangle; | |
| // Use D3 to fetch the chiasm configuration file. | |
| d3.json("chiasmConfig.json", function (config){ | |
| // Set the Chaism application configuration. | |
| chiasm.setConfig(config); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| // This is a prototype for a Chiasm plugin that does data binding between Chiasm | |
| // components. It uses a special domain specific language (DSL) to express two | |
| // types of data binding links between two components: | |
| // | |
| // * Unidirectional `myComponent.myPropertyA -> myOtherComponent.myPropertyB` | |
| // * Bidirectional (planned, not implemented) `myComponent.myPropertyA <-> myOtherComponent.myPropertyB` | |
| function Links(chiasm) { | |
| var model = Model({ | |
| publicProperties: [ "bindings" ], | |
| bindings: [] | |
| }); | |
| var sourceListeners = []; | |
| model.when("bindings", function (bindings){ | |
| var oldSourceListeners = sourceListeners; | |
| sourceListeners = []; | |
| // Clear out the listeners for the old bindings. | |
| oldSourceListeners.forEach(function (_){ | |
| chiasm.getComponent(_.sourceAlias).then(function (sourceComponent){ | |
| sourceComponent.cancel(_.listener); | |
| }); | |
| }); | |
| // Add listeners for the new bindings. | |
| bindings.forEach(function(bindingExpr){ | |
| // Parse the binding expression of the form | |
| // "sourceAlias.sourceProperty -> targetAlias.targetProperty" | |
| var parts = bindingExpr.split("->").map(function(str){ return str.trim(); }), | |
| source = parts[0].split("."), | |
| sourceAlias = source[0], | |
| sourceProperty = source[1], | |
| target = parts[1].split("."), | |
| targetAlias = target[0], | |
| targetProperty = target[1]; | |
| // Retreive the source and target components. | |
| chiasm.getComponent(sourceAlias).then(function(sourceComponent){ | |
| chiasm.getComponent(targetAlias).then(function(targetComponent){ | |
| // TODO report errors for missing components. | |
| // Add a reactive function that binds the source to the target. | |
| var listener = sourceComponent.when(sourceProperty, function(value){ | |
| targetComponent[targetProperty] = value; | |
| }); | |
| // Keep track of the added listener so it can be removed later. | |
| sourceListeners.push({ | |
| sourceAlias: sourceAlias, | |
| listener: listener | |
| }); | |
| }); | |
| }); | |
| }); | |
| }); | |
| return model; | |
| } |
| { | |
| "layout": { | |
| "plugin": "layout", | |
| "state": { | |
| "containerSelector": "#chiasm-container", | |
| "layout": { | |
| "orientation": "vertical", | |
| "children": [ | |
| "A", | |
| { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "B", | |
| { | |
| "orientation": "vertical", | |
| "children": [ | |
| "C", | |
| { | |
| "orientation": "horizontal", | |
| "children": [ | |
| "D", | |
| "E", | |
| "F" | |
| ] | |
| } | |
| ] | |
| }, | |
| "G" | |
| ] | |
| } | |
| ] | |
| } | |
| } | |
| }, | |
| "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": "#99e2c8" | |
| } | |
| }, | |
| "F": { | |
| "plugin": "coloredRectangle", | |
| "state": { | |
| "color": "#99e2c8" | |
| } | |
| }, | |
| "G": { | |
| "plugin": "coloredRectangle", | |
| "state": { | |
| "color": "#a8ffd0" | |
| } | |
| } | |
| } |