The hcj.component.container method is a helper method for defining layouts. It takes an optional string argument giving tag name of the container, followed by a build method.
container :: (String? , BuildContainer) - gt; Component
type BuildContainer = (JQuery, Context, Append) - gt; {minWidth :: Number, minHeight :: Stream (Number - gt; Number), remove :: Function?}
type Append = (Component, Viewport?, ChildConfig?) - gt; Instance
type ChildConfig = {
noRemove :: Bool?
nbsp; nbsp;
Indicates that child component will be removed manually.
}
The build method takes three arguments. The first two, el and context, are the root element of the container and the context that it is rendered into. The third argument, append, is used to append child components to the container.
The append function takes three arguments: the Component to append, a Viewport, and a ChildConfig object.
The first argument is self-explanatory. The second argument, viewport, is an object that is upgraded to a context and then passed into the component being appended. If the noRemove property of the ChildConfig object is true, this means that you intend to call the remove function of the appended child component manually, so it will not be called automatically when the container is removed from the DOM.
A Viewport is an object with the following properties:
• nbsp;el nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Node nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Element to append instance to. Defaults to the container's own root element.
• nbsp;width nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Stream giving the width of the rendered instance. Defaults to container width.
• nbsp;height nbsp; nbsp; nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Stream giving the height of the rendered instance. Defaults to container width.
• nbsp;top nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Stream giving the top coordinate of the rendered instance, relative to the container. Defaults to 0.
• nbsp;left nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Stream Number
nbsp; nbsp;
Stream giving the left coordinate of the rendered instance. Defaults to 0.
• nbsp;widthCalc nbsp; :: Stream String
nbsp; nbsp;
CSS calc string to use for the width property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's width stream.
• nbsp;heightCalc :: Stream String
nbsp; nbsp;
CSS calc string to use for the height property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's height stream.
• nbsp;topCalc nbsp; nbsp; nbsp; :: Stream String
nbsp; nbsp;
CSS calc string to use for the top property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's top stream.
• nbsp;leftCalc nbsp; nbsp; :: Stream String
nbsp; nbsp;
CSS calc string to use for the left property of the instance. This is a "calc-sum" - the "calc(" and ")" are added by container. If not provided, then "px" is appended to the values of the viewport's left stream.
Example - Top Margin
topMargin :: Component - gt; Component
Here is an example of a layout that pushes its content down by five pixels. To do this, it creates a viewport with a top stream, and returns a minHeight that is increased by five pixels.
var nbsp;c nbsp;= nbsp;hcj.component
nbsp;
var nbsp;topMargin nbsp;= nbsp;function nbsp;(c) nbsp;{
nbsp; nbsp;return nbsp;c.container(function nbsp;(el, nbsp;ctx, nbsp;append) nbsp;{
nbsp; nbsp; nbsp; nbsp;var nbsp;instance nbsp;= nbsp;append(c, nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;top: nbsp;stream.once(5),
nbsp; nbsp; nbsp; nbsp;});
nbsp; nbsp; nbsp; nbsp;return nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minWidth: nbsp;instance.minWidth,
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minHeight: nbsp;stream.map(instance.minHeight, nbsp;function nbsp;(mh) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;function nbsp;(w) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mh(w) nbsp;+ nbsp;5;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;})
nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp;});
};
Example - Purple Background
purpleBackground :: Component - gt; Component
Imagine we want to define a layout that adds a 10px margin and gives a component a purple background. Here's how we can do it. Note that there is no use of CSS margin or padding properties - the child instance is explicitly positioned in a sub-region of the container, and the container's minimum width and minimum height are increased correspondingly. For completeness, we include widthCalc and heightCalc streams, which are required in order for any CSS transitions to work properly.
var nbsp;purpleBackground nbsp;= nbsp;function nbsp;(c) nbsp;{
nbsp; nbsp;return nbsp;c.container(function nbsp;(el, nbsp;context, nbsp;append) nbsp;{
nbsp; nbsp; nbsp; nbsp;el.style.backgroundColor nbsp;= nbsp;'#FF00FF';
nbsp; nbsp; nbsp;
nbsp; nbsp; nbsp; nbsp;var nbsp;instance nbsp;= nbsp;append(c, nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;width: nbsp;stream.map(context.width, nbsp;function nbsp;(w) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;w nbsp;- nbsp;20;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;height: nbsp;stream.map(context.height(function nbsp;(h) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;h nbsp;- nbsp;20;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;top: nbsp;stream.once(10),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;left: nbsp;stream.once(10),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;widthCalc: nbsp;stream.once('100% nbsp;- nbsp;20px'),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;heightCalc: nbsp;stream.once('100% nbsp;- nbsp;20px'),
nbsp; nbsp; nbsp; nbsp;});
nbsp; nbsp; nbsp;
nbsp; nbsp; nbsp; nbsp;return nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minWidth: nbsp;stream.map(instance.minWidth, nbsp;function nbsp;(mw) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mw nbsp;+ nbsp;20;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minHeight: nbsp;stream.map(instance.minHeight, nbsp;function nbsp;(mh) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;function nbsp;(w) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mh(w nbsp;- nbsp;20) nbsp;+ nbsp;20;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp;});
};
Example - Simple Stack
stack :: [Component] - gt; Component
Say we want to put components into a vertical stack.
First we map over the components provided, initializing an array of viewports and an array of instances. Next, we use the HCJ stream library to change the components' viewports every time the stack's context changes. Last, we assign the minimum width and minimum height of the stack by combining together the minimum widths and minimum heights of the stacked instances.
var nbsp;stack nbsp;= nbsp;function nbsp;(cs) nbsp;{
nbsp; nbsp;return nbsp;c.container(function nbsp;(el, nbsp;context, nbsp;append) nbsp;{
nbsp; nbsp; nbsp; nbsp;var nbsp;viewports nbsp;= nbsp;[];
nbsp; nbsp; nbsp; nbsp;var nbsp;instances nbsp;= nbsp;[];
nbsp; nbsp; nbsp; nbsp;cs.map(function nbsp;(c, nbsp;index) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;viewport nbsp;= nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;top: nbsp;stream.create(),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;height: nbsp;stream.create(),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;viewports.push(viewport);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;instances.push(append(c, nbsp;viewport));
nbsp; nbsp; nbsp; nbsp;});
nbsp; nbsp; nbsp;
nbsp; nbsp; nbsp; nbsp;var nbsp;instanceMinWidthsS nbsp;= nbsp;stream.all(instances.map(function nbsp;(i) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;i.minWidth;
nbsp; nbsp; nbsp; nbsp;}));
nbsp; nbsp; nbsp; nbsp;var nbsp;instanceMinHeightsS nbsp;= nbsp;stream.all(instances.map(function nbsp;(i) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;i.minHeight;
nbsp; nbsp; nbsp; nbsp;}));
nbsp; nbsp; nbsp;
nbsp; nbsp; nbsp; nbsp;stream.combine([
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;context.width,
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;context.height,
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;instanceMinHeightsS,
nbsp; nbsp; nbsp; nbsp;], nbsp;function nbsp;(w, nbsp;h, nbsp;mhs) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;top nbsp;= nbsp;0;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;mhs.map(function nbsp;(mh, nbsp;index) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;viewport nbsp;= nbsp;viewports[index];
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;var nbsp;height nbsp;= nbsp;mh(w);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;stream.push(viewport.top, nbsp;top);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;stream.push(viewport.height, nbsp;height);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;top nbsp;+= nbsp;height;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;});
nbsp; nbsp; nbsp; nbsp;});
nbsp; nbsp; nbsp;
nbsp; nbsp; nbsp; nbsp;return nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minWidth: nbsp;stream.map(instanceMinWidthsS, nbsp;function nbsp;(mws) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mws.reduce(function nbsp;(a, nbsp;b) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;Math.max(a, nbsp;b);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}, nbsp;0);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;minHeight: nbsp;stream.map(instanceMinHeightsS, nbsp;function nbsp;(mhs) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;function nbsp;(w) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mhs.map(function nbsp;(mh) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;mh(w);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}).reduce(function nbsp;(a, nbsp;b) nbsp;{
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;return nbsp;a nbsp;+ nbsp;b;
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}, nbsp;0);
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;}),
nbsp; nbsp; nbsp; nbsp;};
nbsp; nbsp;});
};
